daimp-front/sub-operation-service/src/views/ecommerce/components/goodsItem.vue

<template>
  <div class="c-goods-item-warp" @click="toDetail(data.id)">
    <div class="goods-img">
      <img :src="data.goodUrl ? data.goodUrl : ''" alt="" style="width: 100%" />
      <!--      <el-image :src="encodeURIComponent(data.goodUrl) ? encodeURIComponent(data.goodUrl) : ''" fit="cover" @error="handleImageError" />-->
    </div>
    <div class="goods-name txt-ellipsis clamp2">{{ data.title }}</div>
    <div class="goods-do">
      <div class="price txt-ellipsis clamp">{{ data.goodPrice }}</div>
      <div class="do">
        <div class="iconfont icon-cart"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
import { encodeURL } from 'js-base64';
const route = useRoute();
const router = useRouter();

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const handleImageError = (e) => {
  console.error('图片加载失败:', e);
};

const toDetail = (id) => {
  router.push('/sub-operation-service/ecommerce-agriculturalDetail?id=' + id);
};
</script>
<style lang="scss" scoped>
.c-goods-item-warp {
  padding: 8px;
  width: 100%;
  cursor: pointer;
  .goods-img {
    overflow: hidden;
    width: 100%;
    height: 168px;
    border-radius: 16px;
    ::v-deep() {
      .el-image {
        width: 100%;
        height: 168px;
      }
    }
  }
  .goods-name {
    margin-top: 8px;
    font-size: 16px;
    color: $color-666;
  }
  .goods-do {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    .price {
      padding-right: 8px;
      width: calc(100% - 32px);
      font-size: 22px;
      font-weight: 700;
      text-align: left;
      color: $color-main;
    }
    .price::before {
      content: ' ￥';
      font-size: 16px !important;
      font-weight: normal !important;
    }
    .do {
      position: relative;
      display: inline-block;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      text-align: center;
      background: $color-main;
      cursor: pointer;
      .iconfont {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 20px;
        color: $color-fff;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>