mall4pc-bbc/components/prod-item.vue

<template>
  <!-- 商品组件 -->
  <div class="list-con" :class="{ normalList: listType == 1 && this.$route.name != 'index' }">
    <div
      class="item"
      v-for="item in paleList"
      :key="item.prodId"
      @click="toProdDetail(item.prodId, item.seckillSearchVO ? item.seckillSearchVO.seckillId : '', item.groupActivityId)"
    >
      <!-- 团购（成团人数） -->
      <div class="group-number" v-if="item.groupActivitySearchVO">
        {{ item.groupActivitySearchVO.groupNumber }}{{$t('index.join')}}
      </div>
      <div class="goods-img">
        <!-- 秒杀/热销商品图 -->
        <img v-if="item.pic" :src="item.pic" @error="handlePicError" alt />
        <!-- 团购商品图 -->
        <img v-else-if="item.prodPic" :src="item.prodPic" alt @error="handlePicError"/>
        <img v-else src="~/assets/img/def.png" alt />
      </div>
      <div class="goods-msg">
        <div class="goods-name">{{ item.prodName }}</div>
        <div class="goods-price">
          <!-- 秒杀商品价格 -->
          <div class="price" v-if="item.activityPrice && listType==2 && pageType===0">
            ￥
            <span class="big">{{ parsePrice(item.activityPrice)[0] }}</span>
            <span class="small">.{{ parsePrice(item.activityPrice)[1] }}</span>
          </div>
          <!-- 团购商品价格 -->
          <div class="price" v-else-if="item.activityPrice && listType==1 && pageType===0">
            ￥
            <span class="big">{{ parsePrice(item.activityPrice)[0] }}</span>
            <span class="small">.{{ parsePrice(item.activityPrice)[1] }}</span>
          </div>
          <!-- 热销商品价格 -->
          <div class="price" v-else>
            ￥
            <span class="big">{{ parsePrice(item.price)[0] }}</span>
            <span class="small">.{{ parsePrice(item.price)[1] }}</span>
            <span v-if="item.soldNum || item.soldNum === 0" class="small sold-number">
              {{$t('prodDetail.sold')}} {{item.soldNum}}
            </span>
          </div>
          <!-- <div class="old-price" v-if="!item.brief">￥{{toPrice(item.price)}}</div> -->
        </div>
      </div>
    </div>
    <!-- 商品列表为空 -->
    <div class="empty" v-if="!paleList.length">
      <div class="img">
        <img src="~/assets/images/emptyPic/not-found.png" alt />
      </div>
      <div class="action">
        <div class="text">{{$t('sorryNoRelatedProducts')}}</div>
        <nuxt-link to="/list" class="btn">{{$t('lookAtOther')}}</nuxt-link>
      </div>
    </div>
    <!-- 商品列表为空 -->
  </div>
</template>

<script>
export default {
  props: {
    paleList: {
      type: Array, //指定传入的类型
      default: () => []//这样可以指定默认的值
    },
    listType: {
      type: Number,
      default: 0
    },
    // 1: 商品列表页
    pageType: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    console.log(this.listType)
    if(this.listType===2) {
      console.log(this.paleList);
    }
  },
  methods: {
    /**
     * 加载默认图片
     */
    handlePicError(e){
       e.target.src=require('@/assets/img/def.png')
    },

    /**
     * 处理价格样式
     */
    toPrice (val) {
      if (!val) {
        var val = Number(val)
        val = 0;
      }
      // 截取小数点后两位，没有则自动补0
      return (val.toFixed(2))
    },
    parsePrice (val) {
      var val = Number(val)
      if (!val) {
        val = 0;
      }
      // 截取小数点后两位，并以小数点为切割点将val转化为数组
      return val.toFixed(2).split(".");
    },

    /**
     * 跳转到商品详情页
     */
    toProdDetail (prodId, seckillId, groupActivityId) {
      if (seckillId) {
        this.$router.push({ name: 'secdetail-seckillId', params: { seckillId: seckillId } })
      } else if (groupActivityId) {
        this.$router.push({ name: 'detail-prodId', params: { prodId: prodId, groupActivityId: groupActivityId } })
      } else {
        this.$router.push({ path: '/detail/' + prodId })
      }
    },
    goIndex () {
      this.$router.push({ path: '/' })
    },
    /**
     * 图片访问失败时更为默认图片
     */
    handlePicError(event){
      event.target.src=require("../assets/img/def.png")
    }
  }
}
</script>

<style scoped>
.normalList {
  min-height: 440px;
}

.normalList .item {
  width: 275px;
}

.normalList .item .goods-img {
  width: 275px;
  height: 275px;
  line-height: 275px;
}

.normalList .empty {
  min-height: 380px;
}
/* 商品名字的样式修改 */
.goods-list .list-con .item .goods-msg .goods-name {
  height: 20px;
  line-height: 14px;
  font-size: 14px;
  max-width: 100%;
  /* display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
    overflow: hidden */
}

.sold-number {
  margin-left: 5px;
  color: #999;
}
</style>