applet/pages/tabtar/components/MonthlyBestSeller.vue

<template>
  <view class="new-products u-skeleton-fillet">
    <view
      class="head-item"
      @click="goDetail('/pages/tabtar/goodsType', false, true)"
      :style="{ backgroundImage: `url(${bgImage || ''})` }"
    >
      <view class="top-left">
        <view class="top-left-title">热销产品</view>
        <view class="top-left-tip">新品上市优惠热销</view>
      </view>
      <view class="top-right" style="color: #e2ac40">
        查看更多
        <!-- <text class="iconfont u-font24">&#xe6c7;</text> -->
        <uv-icon name="arrow-right" size="24rpx" color="#e2ac40"></uv-icon>

      </view>
    </view>
    <view
      class="new-products-main"
      v-if="(hotList && hotList.length > 0) || skeletonShow"
    >
      <swiper
        class="month-list"
        :indicator-dots="false"
        :autoplay="false"
        :display-multiple-items="itemsDis"
        @change="imgActiveFun"
        :circular="false"
      >
        <swiper-item
          class="item"
          @click="
            goProductDetails('/pages/shop/goodsDetails?id=' + item.productId)
          "
          v-for="item in hotList.length > 0 ? hotList : 1"
          :key="item.id"
        >
          <!-- ?x-oss-process=style/w_350 -->
          <image
            v-if="item && item.coverImage"
            :src="`${item.coverImage}`"
            mode="aspectFill"
          >
          </image>
          <view class="list-num">
            <rich-text
              :nodes="$mUtil.priceBigSmall(item.minSalePrice)"
            ></rich-text>
          </view>
        </swiper-item>
      </swiper>
      <view class="slide-box">
        <view class="dotBox" v-if="hotList.length > 0">
          <view
            class="dotBox_item"
            v-for="(v, i) in lineList"
            :key="i"
            :class="{ active_dotBox: activeBannerIndex == i }"
          ></view>
        </view>
      </view>
    </view>
    <noData v-else :config="{ top: 1, content: '暂无商品~' }"></noData>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { shopProductList_Api } from "@/api/shop";

const props = defineProps({
  hotList: {
    type: Array,
    default: () => []
  },
  skeletonShow: {
    type: Boolean,
    default: false
  },
  bgImage: {
    type: String,
    default: ''
  },
  itemsDis: {
    type: Number,
    default: 1
  },
  lineList: {
    type: Number,
    default: 0
  },
  activeBannerIndex: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['goDetail', 'goProductDetails', 'imgActiveFun']);
const hotList = ref([]); //本月热销
const lineList = ref(0);
const itemsDis = ref(1);
const activeBannerIndex = ref(0);


const goDetail = (url, isNeedLogin, tabShow) => {
  emit('goDetail', url, isNeedLogin, tabShow);
};

const goProductDetails = (url) => {
  emit('goProductDetails', url);
};

const imgActiveFun = (e) => {
  activeBannerIndex.value = e.detail.current;
};

/**本月热销 */
const hotSale = () => {
  shopProductList_Api({
    limit: 12,
    hot: 1,
  }).then((res) => {
    if (res && res.code == 200) {
      let list = res.data || [];
      hotList.value = res.data;
      if (hotList.value.length > 2) {
        lineList.value = hotList.value.length - 2;
      }
      if (list.length <= 3) {
        itemsDis.value = list.length;
      }
      if (list.length > 3 && list.length <= 6) {
        itemsDis.value = 3;
      }
      if (list.length > 6 && list.length <= 9) {
        itemsDis.value = 3;
      }
      if (list.length > 9 && list.length <= 12) {
        itemsDis.value = 3;
      }
    }
  });
};

onMounted(() => {
  hotSale();
});

defineExpose({
  init: hotSale,
});
</script>

<style scoped lang="scss">
.new-products {
  margin: 30rpx 0;
  background: rgba(249, 244, 225, 0.7);
  padding-bottom: 30rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
  overflow: hidden;

  .new-products-main {
    box-sizing: border-box;
    margin: 20rpx 30rpx;
    background-color: #ffffff;
    padding-bottom: 20rpx;
    border-radius: 10rpx;
  }
}

.head-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 27rpx 30rpx;
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .top-left {
    .top-left-title {
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
    }
    .top-left-tip {
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      margin-top: 5rpx;
    }
  }

  .top-right {
    width: 165rpx;
    height: 67rpx;
    line-height: 67rpx;
    background: #ffffff;
    border-radius: 34rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.month-list {
  position: relative;
  padding-bottom: 20rpx;
  height: 350rpx;

  ::v-deep uni-swiper {
    height: 350rpx;
  }

  .item {
    margin: 28rpx 0;
    text-align: center;
    height: 350rpx;
    width: 217rpx;

    image {
      width: 217rpx;
      margin: 0 auto;
      height: 217rpx;
      border-radius: 10rpx;
    }

    .list-num {
      margin-top: 16rpx;
      font-size: 36rpx;
      line-height: 24rpx;
      color: #00bf5a;
      font-weight: bold;
      text-align: center;
    }
  }

  ::v-deep swiper-item {
    width: 33.333%;
  }
}

.slide-box {
  display: flex;
  justify-content: center;
}

.dotBox {
  height: 14rpx;
  overflow: hidden;
  border-radius: 14rpx;
  background-color: #ededed;
  display: flex;
  justify-content: center;

  .dotBox_item {
    width: 45rpx;
    height: 14rpx;
    border-radius: 2rpx;
    background-color: #ededed;
    transition: all 0.5s;
  }

  .active_dotBox {
    width: 45rpx;
    background: linear-gradient(109deg, #fb6b3e 20%, #feaf6b 85%);
    transition: all 0.5s;
  }
}
</style>