商品列表

pages/index/home.vue

@@ -0,0 +1,94 @@
+<!-- 这里是模板原来的首页代码 -->
+<!-- 首页，支持店铺装修 -->
+<template>
+  <view v-if="template">
+    <s-layout
+      title="首页"
+      navbar="custom"
+      tabbar="/pages/index/index"
+      :bgStyle="template.page"
+      :navbarStyle="template.navigationBar"
+      onShareAppMessage
+    >
+      <s-block
+        v-for="(item, index) in template.components"
+        :key="index"
+        :styles="item.property.style"
+      >
+        <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
+      </s-block>
+    </s-layout>
+  </view>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import $share from '@/sheep/platform/share';
+  // 隐藏原生tabBar
+  uni.hideTabBar({
+    fail: () => {},
+  });
+
+  const template = computed(() => sheep.$store('app').template?.home);
+  // 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
+  // (async function() {
+  // console.log('原代码首页定制化数据',template)
+  // let {
+  // 	data
+  // } = await index2Api.decorate();
+  // console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
+  // 改变首页底部数据 但是没有通过数组id获取商品数据接口
+  // let {
+  // 	data: datas
+  // } = await index2Api.spids();
+  // template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
+  // template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
+  // 	return {
+  // 		src: item.picUrl,
+  // 		url: item.url,
+  // 		title: item.name,
+  // 		type: "image"
+  // 	}
+  // })
+  // }())
+
+  onLoad((options) => {
+    // #ifdef MP
+    // 小程序识别二维码
+    if (options.scene) {
+      const sceneParams = decodeURIComponent(options.scene).split('=');
+      console.log('sceneParams=>', sceneParams);
+      options[sceneParams[0]] = sceneParams[1];
+    }
+    // #endif
+
+    // 预览模板
+    if (options.templateId) {
+      sheep.$store('app').init(options.templateId);
+    }
+
+    // 解析分享信息
+    if (options.spm) {
+      $share.decryptSpm(options.spm);
+    }
+
+    // 进入指定页面(完整页面路径)
+    if (options.page) {
+      sheep.$router.go(decodeURIComponent(options.page));
+    }
+  });
+
+  // 下拉刷新
+  onPullDownRefresh(() => {
+    sheep.$store('app').init();
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 800);
+  });
+
+  onPageScroll(() => {});
+</script>
+
+<style></style>

pages/index/index.vue

@@ -1,93 +1,11 @@
-<!-- 首页，支持店铺装修 -->
 <template>
-  <view v-if="template">
+  <view>
-    <s-layout
+    <s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="{ color: '#fff' }">
-      title="首页"
+      首页
-      navbar="custom"
-      tabbar="/pages/index/index"
-      :bgStyle="template.page"
-      :navbarStyle="template.navigationBar"
-      onShareAppMessage
-    >
-      <s-block
-        v-for="(item, index) in template.components"
-        :key="index"
-        :styles="item.property.style"
-      >
-        <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
-      </s-block>
     </s-layout>
   </view>
 </template>
 
-<script setup>
+<script setup></script>
-  import { computed } from 'vue';
-  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
-  import sheep from '@/sheep';
-  import $share from '@/sheep/platform/share';
-  // 隐藏原生tabBar
-  uni.hideTabBar({
-    fail: () => {},
-  });
 
-  const template = computed(() => sheep.$store('app').template?.home);
+<style lang="scss" scoped></style>
-  // 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
-  // (async function() {
-  // console.log('原代码首页定制化数据',template)
-  // let {
-  // 	data
-  // } = await index2Api.decorate();
-  // console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
-  // 改变首页底部数据 但是没有通过数组id获取商品数据接口
-  // let {
-  // 	data: datas
-  // } = await index2Api.spids();
-  // template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
-  // template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
-  // 	return {
-  // 		src: item.picUrl,
-  // 		url: item.url,
-  // 		title: item.name,
-  // 		type: "image"
-  // 	}
-  // })
-  // }())
-
-  onLoad((options) => {
-    // #ifdef MP
-    // 小程序识别二维码
-    if (options.scene) {
-      const sceneParams = decodeURIComponent(options.scene).split('=');
-      console.log('sceneParams=>', sceneParams);
-      options[sceneParams[0]] = sceneParams[1];
-    }
-    // #endif
-
-    // 预览模板
-    if (options.templateId) {
-      sheep.$store('app').init(options.templateId);
-    }
-
-    // 解析分享信息
-    if (options.spm) {
-      $share.decryptSpm(options.spm);
-    }
-
-    // 进入指定页面(完整页面路径)
-    if (options.page) {
-      sheep.$router.go(decodeURIComponent(options.page));
-    }
-  });
-
-  // 下拉刷新
-  onPullDownRefresh(() => {
-    sheep.$store('app').init();
-    setTimeout(function () {
-      uni.stopPullDownRefresh();
-    }, 800);
-  });
-
-  onPageScroll(() => {});
-</script>
-
-<style></style>

pages/index/list.vue

@@ -3,18 +3,34 @@
     <!-- 筛选 -->
     <su-sticky bgColor="#fff">
       <view class="ss-flex">
-        <view style="width: calc(100% - 180rpx)">
+        <view style="width: calc(100% - 210rpx)">
-          <su-tabs :list="categoryState.categoryList" :current="categoryState.curCategory" />
+          <su-tabs
+            :list="categoryState.categoryList"
+            :current="categoryState.curCategoryTab"
+            @change="onCategoryTabsChange"
+          />
         </view>
         <view
-          style="width: 180rpx; flex-shrink: 0; text-align: center"
+          style="
+            width: 210rpx;
+            flex-shrink: 0;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          "
           @click="
             () => {
               sortState.showFilter = true;
             }
           "
-          >综合排序</view
         >
+          {{ sortState.sortList[0].name }}
+          <image
+            src="https://3d.aidigitalfield.com/imgs/down-icon.png"
+            style="width: 36rpx; height: 36rpx"
+          />
+        </view>
       </view>
     </su-sticky>
 
@@ -47,7 +63,8 @@
     >
       <view class="goods-list-box">
         <view class="left-list" v-for="item in goodsState.leftGoodsList" :key="item.id">
-          <s-goods-column
+          <!-- 很多地方都引入了s-goods-column组件，为了不影响其他页面，这里用s-goods-column-another组件 -->
+          <s-goods-column-another
             class="goods-md-box"
             size="md"
             :data="item"
@@ -59,12 +76,12 @@
             <template v-slot:cart>
               <button class="ss-reset-button cart-btn" />
             </template>
-          </s-goods-column>
+          </s-goods-column-another>
         </view>
       </view>
       <view class="goods-list-box">
         <view class="right-list" v-for="item in goodsState.rightGoodsList" :key="item.id">
-          <s-goods-column
+          <s-goods-column-another
             class="goods-md-box"
             size="md"
             :topRadius="10"
@@ -76,22 +93,37 @@
             <template v-slot:cart>
               <button class="ss-reset-button cart-btn" />
             </template>
-          </s-goods-column>
+          </s-goods-column-another>
         </view>
       </view>
     </view>
+    <uni-load-more
+      v-if="goodsState.pagination.total > 0"
+      :status="goodsState.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+    <s-empty
+      v-if="goodsState.pagination.total === 0"
+      icon="/static/soldout-empty.png"
+      text="暂无商品"
+    />
   </s-layout>
 </template>
 
 <script setup>
   import { reactive, ref } from 'vue';
-  import { onLoad } from '@dcloudio/uni-app';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
   import { handleTree } from '@/sheep/helper/utils';
   import CategoryApi from '@/sheep/api/product/category';
   import SpuApi from '@/sheep/api/product/spu';
+  import OrderApi from '@/sheep/api/trade/order';
   import sheep from '@/sheep';
   import { resetPagination } from '@/sheep/helper/utils';
   import _ from 'lodash-es';
+  import { appendSettlementProduct } from '@/sheep/hooks/useGoods';
 
   const sys_navBar = sheep.$platform.navbar;
 
@@ -101,6 +133,7 @@
   });
 
   const categoryState = reactive({
+    curCategoryTab: 0,
     curCategory: 0,
     categoryList: [],
   });
@@ -117,14 +150,16 @@
         order: false,
       })) || [];
     categoryState.categoryList.unshift({
+      id: 0,
       name: '全部',
-      sort: 'all',
+      sort: 0,
       order: false,
     });
   }
 
   const sortState = reactive({
     curSortTab: 0,
+    curFilter: 0,
     sortList: [
       {
         name: '综合推荐',
@@ -159,7 +194,17 @@
     curOrder: undefined,
     curSort: undefined,
   });
-  // 点击 tab 的 list 筛选项
+
+  // 选择分类
+  function onCategoryTabsChange(e) {
+    if (e.index === categoryState.curCategoryTab) return;
+    categoryState.curCategoryTab = e.index;
+    categoryState.curCategory = e.id;
+    emptyList();
+    getList();
+  }
+
+  // 排序规则
   const onFilterItem = (val) => {
     // 如果点击的是当前的筛选项，则直接收起筛选项，不要加载数据
     // 这里选择 tabList[0] 的原因，是目前只有它有 list
@@ -189,6 +234,7 @@
       pageNo: 1,
       pageSize: 6,
     },
+    loadStatus: '',
     leftGoodsList: [],
     rightGoodsList: [],
   });
@@ -228,7 +274,7 @@
   }
 
   async function getList() {
-    // state.loadStatus = 'loading';
+    goodsState.loadStatus = 'loading';
     const { code, data } = await SpuApi.getSpuPage({
       pageNo: goodsState.pagination.pageNo,
       pageSize: goodsState.pagination.pageSize,
@@ -241,17 +287,32 @@
       return;
     }
     // 拼接结算信息（营销）
-    // await OrderApi.getSettlementProduct(data.list.map((item) => item.id).join(',')).then((res) => {
+    await OrderApi.getSettlementProduct(data.list.map((item) => item.id).join(',')).then((res) => {
-    //   if (res.code !== 0) {
+      if (res.code !== 0) {
-    //     return;
+        return;
-    //   }
+      }
-    //   appendSettlementProduct(data.list, res.data);
+      appendSettlementProduct(data.list, res.data);
-    // });
+    });
     goodsState.pagination.list = _.concat(goodsState.pagination.list, data.list);
     goodsState.pagination.total = data.total;
-    // state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+    goodsState.loadStatus =
+      goodsState.pagination.list.length < goodsState.pagination.total ? 'more' : 'noMore';
     mountMasonry();
   }
+
+  // 加载更多
+  function loadMore() {
+    if (goodsState.loadStatus === 'noMore') {
+      return;
+    }
+    goodsState.pagination.pageNo++;
+    getList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
 </script>
 
 <style lang="scss" scoped>