store-shop-uniapp/components/basics/categoryShow.vue

<template>
  <view class="goodRecommend">
    <!-- 骨架屏 -->
    <view class="product-list">
      <view class="product-list-box" >
        <view class="product-list-item-warp" v-for="(item,index) in productList" :key="index">
          <view class="product-list-item" v-if="JSON.stringify(item)!=='{}'">
            <view class="product-list-img" @click="jumpProductDetail(item)">
              <img v-show="item.image" class="img" :src="item.image">
            </view>
            <view class="product-list-info u-skeleton-fillet">
              <view class="product-name">{{item.productName}}</view>
              <view class="flex">
                <view class="shop-box" @click.stop="jumpStore(item)">
                  <view class="shop-name" @click="jumpProductDetail(item)">{{item.shopName}}</view>
                  <view class="shop-logo">
                    <img :src="item.shopLogo">
                  </view>
                </view>
                <view class="buy-count">{{item.users?item.users: 0}}人付款</view>
              </view>
              <div class="price-warp">
                <!-- #ifdef MP-WEIXIN -->
                <img class="iconImg" v-if="item.activityType == 1" src="../canvasShow/static/images/groupBuyIcon.png">
                <img class="iconImg" v-if="item.activityType == 2" src="../canvasShow/static/images/spikeIcon.png">
                <img class="iconImg" v-if="item.activityType == 4" src="../canvasShow/static/images/spikeIcon.png">
                <img class="iconImg" v-if="item.activityType == 3" src="../canvasShow/static/images/discountListIcon.png">
                <img class="iconImg" v-if="item.activityType == 5" src="../canvasShow/static/images/discountListIcon.png">
                <img class="iconImg" v-if="item.activityType == 8" src="../canvasShow/static/images/memberCenterIcon.png">
                <!-- #endif -->
                <!-- #ifdef H5 || APP-PLUS -->
                <image class="iconImg" v-if="item.activityType == 1" src="../canvasShow/static/images/groupBuyIcon.png"></image>
                <image class="iconImg" v-if="item.activityType == 2" src="../canvasShow/static/images/spikeIcon.png"></image>
                <image class="iconImg" v-if="item.activityType == 4" src="../canvasShow/static/images/spikeIcon.png"></image>
                <image class="iconImg" v-if="item.activityType == 3" src="../canvasShow/static/images/discountListIcon.png"></image>
                <image class="iconImg" v-if="item.activityType == 5" src="../canvasShow/static/images/discountListIcon.png"></image>
                <image class="iconImg" v-if="item.activityType == 8" src="../canvasShow/static/images/memberCenterIcon.png"></image>
                <!-- #endif -->
                <div class="price">
                  ¥ {{item.price}}
                </div>
                <div class="original-price">
                  ¥ {{item.originalPrice}}
                </div>
              </div>
            </view>
          </view>
          <view class="product-list-item ske-loading" v-else>
            <view class="product-list-img child-loading">
              <img v-show="item.image" class="img" :src="item.image">
            </view>
            <view class="product-list-info">
              <view class="product-name child-loading" style="border-radius: 5rpx; margin-top: 10rpx;width: 100%;padding: 20rpx 0"></view>
              <view class="product-name child-loading" style="border-radius: 5rpx; margin-top: 10rpx;width: 100%;padding: 20rpx 0"></view>
            </view>
          </view>

        </view>
      </view>
    </view>
    <view v-if="ifShow" class="emptyCart-box flex-items-plus flex-column">
        <image class="emptyCart-img" src="https://ceres.zkthink.com/static/img/bgnull.png" mode="widthFix" />
        <label class="font-color-999 fs26 mar-top-30">这里空空如也~</label>
    </view>
  </view>
</template>

<script>
const NET = require('@/utils/request')
const API = require('@/config/api')
export default {
name: "categoryShow",
  props: {
    categoryid: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      activeTab: 0,
      page:1,
      pageSize:10,
      total: 0,
      productList: [],
      ifShow: false
    }
  },
  mounted () {
    this.productList = [{},{},{},{},{},{},{},{}]
    this.getData();
  },
  methods:{
    getData(){
      console.log('加载了getData')
      // uni.showLoading({
      //   mask: true,
      //   title:'加载中...'
      // })
      if (this.total!=0&&this.productList.length>=this.total){
        console.log("加载完了")
        return
      }
      NET.request(API.getProducts, {
        classifyId: this.categoryid,
        page:this.page,
        pageSize:this.pageSize
      }, 'GET').then(res => {
        this.productList = [...this.productList,...res.data.list]
        this.productList = this.productList.filter(item=>JSON.stringify(item)!=='{}')
        this.total = res.data.total
        uni.hideLoading()
        if (this.productList.length ===0) {
          this.ifShow = true
        }

      }).catch(res => {
        uni.hideLoading()
      })
    },
    // 跳转到店铺主页
    jumpStore(item){
      uni.navigateTo({
        url: `/pages_category_page1/store/index?storeId=${item.shopId}`
      })
    },
    // 跳转到商品详情
    jumpProductDetail(item){
      uni.navigateTo({
        url: '/pages_category_page1/goodsModule/goodsDetails?shopId=' + item.shopId + '&productId=' + item.productId + '&skuId=' + item
            .skuId
      })
    }
  },
  watch: {
    'categoryid': {
      handler(newVal, oldVal) {
        this.ifShow = false
        this.getData()
      },
      deep: true
    }
  },
}
</script>

<style lang="scss" scoped>
.goodRecommend {
  padding-top: 20rpx;
  .product-list {
    position: relative;
    padding: 0 13upx;
    width: 100%;
    //min-height: 60vh;
    &-box {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      &.swiper{
        height: 620upx;
      }
    }
    &.product-swiper .product-list-box{
      padding-left: 0;
    }
    &-item-warp{
      margin: 0 0 20upx 0;
    }
    &-item {
      width: 348upx;
      padding: 0 7upx;
      box-sizing: content-box;
    }


    &-img {
      width: 348upx;
      height: 348upx;
      background-color: #d0d0d0;
      border-radius: 10upx 10upx 0 0;
      .img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    &-info {
      background-color: #FFFFFF;
      //box-shadow: 0px 0px 15px 0px rgba(52, 52, 52, 0.15);
      border-radius: 0 0 10upx 10upx;
      padding: 20upx;
      label{
        font-weight: normal;
      }
      .product-name{
        font-size: 28upx;
        color: #333;
        display: block;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin-bottom: 18upx;
        line-height: 40upx;
      }
      .flex{
        display: flex;
        align-items: center;
      }
      .shop-box{
        background-color: #333333;
        border-radius: 0upx 20upx 20upx 0upx;
        line-height: 40upx;
        display: flex;
        align-items: center;
        height: 40upx;
        margin-right: 10upx;
        float: left;
        .shop-name{
          font-size: 20upx;
          color: #FFEBC4;
          padding: 0 8upx 0 12upx;
          line-height: 40upx;
          display: inline-block;
          float: left;
        }
        .shop-logo{
          border: 2upx solid #707070;
          border-radius: 50%;
          overflow: hidden;
          float: right;
          img{
            width: 34upx;
            height: 34upx;
            display: block;
          }
        }
      }
      .buy-count{
        color: #C5AA7B;
        font-size: 20upx;
        border: 2upx solid #E4E5E6;
        line-height: 36upx;
        padding: 0 5upx;
      }
      .price-warp{
        display: flex;
        align-items: baseline;
        line-height: 56upx;
        .iconImg {
          width: 58rpx;
          height: 36rpx;
          margin-right: 10rpx;
        }
        .price{
          color: #C83732;
          font-size: 40upx;
          margin-right: 20upx;
        }
        .original-price{
          font-size: 24upx;
          color: #ccc;
          text-decoration: line-through;
        }
      }
    }
  }
  .emptyCart-box {
    margin-top: 70rpx;
    .emptyCart-img {
      width: 216rpx;
      height: 156rpx;
    }
  }
}

</style>