榜单组件开发

src/components/basicTool/transverse-label/index.vue

@@ -74,6 +74,9 @@
            <goods-list :storageKey="'transverseLabel'+componentIndex" :class="['goodsListItemIndex'+index,'transverse-label-goodsListItem']" :datas="item1" :datasIndex="active" :goodsListIndex="index"></goods-list>
 
           </div>
+          <div v-else-if="item.componentCode == 'ranking-list' && item.componentInfo.visible == 1">
+            <ranking-list :datas="item"></ranking-list>
+          </div>
           <div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1">
             <area-navigation :datas="item1" :changeLocation="changeLocation"></area-navigation>
           </div>

src/components/basicTool/transverse-label/main.json

@@ -4,6 +4,7 @@
     "van-tab": "/static/vant/tab/index",
     "banner": "/static/nativeComponents/Banner/index",
     "goods-list": "/static/nativeComponents/GoodsList/index",
+    "ranking-list": "/static/nativeComponents/RankingList/index",
     "time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
     "waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
     "van-button": "/static/vant/button/index",

src/pages/home/index.vue

@@ -17,6 +17,9 @@
             -->
           <goods-list :storageKey="'home'+index" :class="['goodsListItem' + index,'goodsListItemIndex0']" :datas="item" :datasIndex="0" :goodsListIndex="0"></goods-list>
         </div>
+        <div v-else-if="item.componentCode == 'ranking-list' && item.componentInfo.visible == 1">
+          <ranking-list :datas="item"></ranking-list>
+        </div>
         <div v-else-if="item.componentCode == 'area-navigation' && item.componentInfo.visible == 1">
           <area-navigation :datas="item" :changeLocation="changeLocation"></area-navigation>
         </div>

src/pages/home/main.json

@@ -6,6 +6,7 @@
     "van-loading": "/static/vant/loading/index",
     "banner": "/static/nativeComponents/Banner/index",
     "goods-list": "/static/nativeComponents/GoodsList/index",
+    "ranking-list": "/static/nativeComponents/RankingList/index",
     "custom-tab-bar": "/static/nativeComponents/custom-tab-bar/index",
     "time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
     "waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",

static/nativeComponents/RankingList/index.js

+const app = getApp();
+const { goodsApi, $themeToLink } = app;
+
+Component({
+  behaviors: [],
+  properties: {
+    datas : {
+      type : Object
+    }
+  },
+  data: {
+    rankingInfoA: {},
+    rankingInfoB: {},
+    rankingList: [],
+    rankingListA: [],
+    rankingListB: []
+  },
+  ready() {
+    this.setData({ rankingInfoA: this.data.datas.componentData.rankingInfoA });
+    this.setData({ rankingInfoB: this.data.datas.componentData.rankingInfoB });
+    this.getRankingList();
+  },
+  observers: {
+    rankingListA() {
+      this.notifyRankingList()
+    },
+    rankingListB() {
+      this.notifyRankingList()
+    }
+  },
+  methods: {
+    handleItemClick(e) {
+      const item = e.currentTarget.dataset.item;
+      $themeToLink({
+        type: 1,
+        link: `/goods/${item.productId}?terminalProductId=${item.terminalProductId}`
+      });
+    },
+    notifyRankingList() {
+      const rankingInfoA = this.data.rankingInfoA;
+      const rankingInfoB = this.data.rankingInfoB;
+      if (rankingInfoA.checked && rankingInfoB.checked) {
+        const listA = this.data.rankingListA.slice(0, 2);
+        const listB = this.data.rankingListB.slice(0, 2);
+        this.setData({ rankingList: listA.concat(listB) });
+      } else if (rankingInfoA.checked) {
+        this.setData({ rankingList: this.data.rankingListA })
+      } else if (rankingInfoB.checked) {
+        this.setData({ rankingList: this.data.rankingListB });
+      }
+    },
+    
+    async getRankingList() {
+      const rankingInfoA = this.data.rankingInfoA;
+      const rankingInfoB = this.data.rankingInfoB;
+      // 开启两个榜单
+      if (rankingInfoA.checked) {
+        this.getProductInfo(0, rankingInfoA.filter);
+      }
+      if (rankingInfoB.checked) {
+        this.getProductInfo(1, rankingInfoB.filter);
+      }
+    },
+    
+    async getProductInfo(type, id) {
+      const data = {
+        categoryIncludeChild: true,
+        categoryId: id,
+        page: 1, // 当前页
+        rows: 4,
+        sortColumn: this.goodsSort,
+        sortType: 1,
+        whetherShowSoldOutGoods: false, //查询销售数量
+        whetherQueryCollectCount: false, //查询收藏数
+        whetherUseVirtualSalesQty: false, //是否使用虚拟销售数量
+        whetherUseVirtualCollectCount: false, //是否使用虚拟收藏人数
+        whetherFindDistributionCommission: 0, //是否查询商品佣金（0：不查询，1：展示，为空不查佣金）
+        whetherFindRecommendedCardFlag: 0, //是否查询会员价  1是  0否
+        whetherShowGoodsDefaultTagFlag: 0, //是否展示营销标签  1是  0否
+        whetherFindMultiShopFlag:1, //是否查询多商户   //商城使用
+        whetherFindMultiSonShopFlag:1, //是否查询多商户   //多主题使用
+        brandIdList: [],
+        categoryIdList: [],
+        whetherQueryGoodsAttributeFlag: 0,
+        whetherToEnableQuickPurchase: 0,
+      }
+      const res = await goodsApi.queryProductInfo(data);
+      if (res.data.code == 200) {
+        if (!type) {
+          this.setData({ rankingListA: res.data.data.list || [] });
+        } else {
+          this.setData({ rankingListB: res.data.data.list || [] });
+        }
+      }
+    }
+  },
+});
\ No newline at end of file

static/nativeComponents/RankingList/index.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

static/nativeComponents/RankingList/index.wxml

+<view class="ranking-list__wrapper" style="margin: {{datas.componentData.margin[0]*2}}rpx {{datas.componentData.margin[1]*2}}rpx;border-radius: {{datas.componentData.borderRadius}}rpx;background-color:{{datas.componentData.backgroundColor}}">
+  <view class="flex ranking-list__title">
+    <view class="ranking-title__left" wx:if="{{rankingInfoA.checked}}">{{ rankingInfoA.title }}</view>
+    <view class="ranking-title__right" wx:if="{{rankingInfoB.checked}}">{{ rankingInfoB.title }}</view>
+  </view>
+  <view class="ranking-list__content">
+    <block wx:for="{{rankingList}}">
+        <view class="flex list-item" bindtap="handleItemClick" data-item="{{item}}">
+          <image class="image" src="{{item.productImgUrl}}" />
+          <view class="content line-clamp1">{{ item.productName }}</view>
+          <view class="price">¥{{ item.minPrice }}</view>
+        </view>
+    </block>
+  </view>
+</view>
\ No newline at end of file

static/nativeComponents/RankingList/index.wxss

+.flex {
+  display: flex;
+}
+
+.line-clamp1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.ranking-list__title {
+  padding: 16rpx 24rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+}
+
+.ranking-list__title .ranking-title__left {
+  flex: 1;
+}
+
+.ranking-list__title .ranking-title__right {
+  flex: 1;
+}
+
+.ranking-list__content {
+  padding: 0 24rpx;
+  display: grid;
+  grid-template-columns: repeat(4, 25%);
+  align-items: center;
+}
+
+.ranking-list__content .list-item {
+  align-items: center;
+  flex-direction: column;
+}
+
+.ranking-list__content .image {
+  width: 148rpx;
+  height: 148rpx;
+}
+
+.ranking-list__content .content {
+  margin-top: 16rpx;
+  color: #333333;
+  font-size: 24rpx;
+}
+
+.ranking-list__content .price {
+  margin: 12rpx 0 24rpx;
+  color: #C72A30;
+  font-weight: 600;
+  font-size: 24rpx;
+}