From 1a1bbec15cfb2d7e5d095ee5e7800c49860b2a1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E9=B9=8F?= <yangpeng01@agree.com.cn>
Date: Tue, 9 Sep 2025 22:07:09 +0800
Subject: [PATCH] .

---
 pages.json                                 |  33 +++
 pages/index/chat.vue                       |   9 +
 pages/index/list.vue                       | 291 +++++++++++++++++++++
 pages/index/room.vue                       |   9 +
 sheep/components/s-layout/s-layout.vue     |   9 +-
 sheep/store/app.js                         |  34 +++
 sheep/ui/su-navbar/su-navbar.vue           |   4 +-
 sheep/ui/su-tab-item/su-tab-item.vue       |   3 +-
 sheep/ui/su-tabbar-item/su-tabbar-item.vue |  21 +-
 9 files changed, 404 insertions(+), 9 deletions(-)
 create mode 100644 pages/index/chat.vue
 create mode 100644 pages/index/list.vue
 create mode 100644 pages/index/room.vue

diff --git a/pages.json b/pages.json
index 7c7315a..60b11cf 100644
--- a/pages.json
+++ b/pages.json
@@ -32,6 +32,39 @@
 				"group": "商城"
 			}
 		},
+		{
+			"path": "pages/index/list",
+			"style": {
+				"navigationBarTitleText": "商品列表"
+			},
+			"meta": {
+				"sync": true,
+				"title": "商品列表",
+				"group": "商城"
+			}
+		},
+		{
+			"path": "pages/index/room",
+			"style": {
+				"navigationBarTitleText": "试衣间"
+			},
+			"meta": {
+				"sync": true,
+				"title": "试衣间",
+				"group": "商城"
+			}
+		},
+		{
+			"path": "pages/index/chat",
+			"style": {
+				"navigationBarTitleText": "聊天"
+			},
+			"meta": {
+				"sync": true,
+				"title": "聊天",
+				"group": "商城"
+			}
+		},
 		{
 			"path": "pages/index/category",
 			"style": {
diff --git a/pages/index/chat.vue b/pages/index/chat.vue
new file mode 100644
index 0000000..9f165bf
--- /dev/null
+++ b/pages/index/chat.vue
@@ -0,0 +1,9 @@
+<template>
+  <s-layout title="聊天" tabbar="/pages/index/chat" navbar="custom" :bgStyle="{ color: '#fff' }">
+    聊天
+  </s-layout>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>
diff --git a/pages/index/list.vue b/pages/index/list.vue
new file mode 100644
index 0000000..f7ae619
--- /dev/null
+++ b/pages/index/list.vue
@@ -0,0 +1,291 @@
+<template>
+  <s-layout :bgStyle="{ color: '#fff' }" tabbar="/pages/index/list" title="商品列表" :leftIcon="''">
+    <!-- 筛选 -->
+    <su-sticky bgColor="#fff">
+      <view class="ss-flex">
+        <view style="width: calc(100% - 180rpx)">
+          <su-tabs :list="categoryState.categoryList" :current="categoryState.curCategory" />
+        </view>
+        <view
+          style="width: 180rpx; flex-shrink: 0; text-align: center"
+          @click="
+            () => {
+              sortState.showFilter = true;
+            }
+          "
+          >综合排序</view
+        >
+      </view>
+    </su-sticky>
+
+    <!-- 弹窗 -->
+    <su-popup
+      :show="sortState.showFilter"
+      type="top"
+      round="10"
+      :space="sys_navBar + 38"
+      backgroundColor="#F6F6F6"
+      :zIndex="10"
+      @close="sortState.showFilter = false"
+    >
+      <view class="filter-list-box">
+        <view
+          class="filter-item"
+          v-for="(item, index) in sortState.sortList[sortState.curSortTab].list"
+          :key="item.value"
+          :class="[{ 'filter-item-active': index === sortState.curFilter }]"
+          @tap="onFilterItem(index)"
+        >
+          {{ item.label }}
+        </view>
+      </view>
+    </su-popup>
+
+    <view
+      v-if="goodsState.pagination.total > 0"
+      class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top"
+    >
+      <view class="goods-list-box">
+        <view class="left-list" v-for="item in goodsState.leftGoodsList" :key="item.id">
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :data="item"
+            :topRadius="10"
+            :bottomRadius="10"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            @getHeight="mountMasonry($event, 'left')"
+          >
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" />
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+      <view class="goods-list-box">
+        <view class="right-list" v-for="item in goodsState.rightGoodsList" :key="item.id">
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :topRadius="10"
+            :bottomRadius="10"
+            :data="item"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            @getHeight="mountMasonry($event, 'right')"
+          >
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" />
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive, ref } from 'vue';
+  import { onLoad } 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 sheep from '@/sheep';
+  import { resetPagination } from '@/sheep/helper/utils';
+  import _ from 'lodash-es';
+
+  const sys_navBar = sheep.$platform.navbar;
+
+  onLoad(async (params) => {
+    await getCategoryList();
+    getList();
+  });
+
+  const categoryState = reactive({
+    curCategory: 0,
+    categoryList: [],
+  });
+  // 加载商品分类
+  async function getCategoryList() {
+    const { code, data } = await CategoryApi.getCategoryList();
+    if (code !== 0) {
+      return;
+    }
+    categoryState.categoryList =
+      handleTree(data)[0]?.children?.map((item) => ({
+        ...item,
+        sort: item.id,
+        order: false,
+      })) || [];
+    categoryState.categoryList.unshift({
+      name: '全部',
+      sort: 'all',
+      order: false,
+    });
+  }
+
+  const sortState = reactive({
+    curSortTab: 0,
+    sortList: [
+      {
+        name: '综合推荐',
+        list: [
+          {
+            label: '综合推荐',
+          },
+          {
+            label: '价格升序',
+            sort: 'price',
+            order: true,
+          },
+          {
+            label: '价格降序',
+            sort: 'price',
+            order: false,
+          },
+          {
+            label: '销量',
+            sort: 'salesCount',
+            order: false,
+          },
+          {
+            label: '新品优先',
+            sort: 'createTime',
+            order: false,
+          },
+        ],
+      },
+    ],
+    showFilter: false,
+    curOrder: undefined,
+    curSort: undefined,
+  });
+  // 点击 tab 的 list 筛选项
+  const onFilterItem = (val) => {
+    // 如果点击的是当前的筛选项，则直接收起筛选项，不要加载数据
+    // 这里选择 tabList[0] 的原因，是目前只有它有 list
+    if (
+      sortState.curSort === sortState.sortList[0].list[val].sort &&
+      sortState.curOrder === sortState.sortList[0].list[val].order
+    ) {
+      sortState.showFilter = false;
+      return;
+    }
+    sortState.showFilter = false;
+
+    // 设置筛选条件
+    sortState.curFilter = val;
+    sortState.sortList[0].name = sortState.sortList[0].list[val].label;
+    sortState.curSort = sortState.sortList[0].list[val].sort;
+    sortState.curOrder = sortState.sortList[0].list[val].order;
+    // 清空 + 加载数据
+    emptyList();
+    getList();
+  };
+
+  const goodsState = reactive({
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 6,
+    },
+    leftGoodsList: [],
+    rightGoodsList: [],
+  });
+
+  // 加载瀑布流
+  let count = 0;
+  let leftHeight = 0;
+  let rightHeight = 0;
+
+  // 处理双列布局 leftGoodsList + rightGoodsList
+  function mountMasonry(height = 0, where = 'left') {
+    if (where === 'left') {
+      leftHeight += height;
+    } else {
+      rightHeight += height;
+    }
+    if (!goodsState.pagination.list[count]) {
+      return;
+    }
+
+    if (leftHeight <= rightHeight) {
+      goodsState.leftGoodsList.push(goodsState.pagination.list[count]);
+    } else {
+      goodsState.rightGoodsList.push(goodsState.pagination.list[count]);
+    }
+    count++;
+  }
+
+  // 清空列表
+  function emptyList() {
+    resetPagination(goodsState.pagination);
+    goodsState.leftGoodsList = [];
+    goodsState.rightGoodsList = [];
+    count = 0;
+    leftHeight = 0;
+    rightHeight = 0;
+  }
+
+  async function getList() {
+    // state.loadStatus = 'loading';
+    const { code, data } = await SpuApi.getSpuPage({
+      pageNo: goodsState.pagination.pageNo,
+      pageSize: goodsState.pagination.pageSize,
+      sortField: sortState.curSort,
+      sortAsc: sortState.curOrder,
+      categoryId: categoryState.curCategory,
+      keyword: '',
+    });
+    if (code !== 0) {
+      return;
+    }
+    // 拼接结算信息（营销）
+    // await OrderApi.getSettlementProduct(data.list.map((item) => item.id).join(',')).then((res) => {
+    //   if (res.code !== 0) {
+    //     return;
+    //   }
+    //   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';
+    mountMasonry();
+  }
+</script>
+
+<style lang="scss" scoped>
+  .filter-list-box {
+    padding: 28rpx 52rpx;
+
+    .filter-item {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333333;
+      line-height: normal;
+      margin-bottom: 24rpx;
+
+      &:nth-last-child(1) {
+        margin-bottom: 0;
+      }
+    }
+
+    .filter-item-active {
+      color: var(--ui-BG-Main);
+    }
+  }
+  .goods-list-box {
+    width: 50%;
+    box-sizing: border-box;
+
+    .left-list {
+      margin-right: 10rpx;
+      margin-bottom: 20rpx;
+    }
+
+    .right-list {
+      margin-left: 10rpx;
+      margin-bottom: 20rpx;
+    }
+  }
+</style>
diff --git a/pages/index/room.vue b/pages/index/room.vue
new file mode 100644
index 0000000..720bbbb
--- /dev/null
+++ b/pages/index/room.vue
@@ -0,0 +1,9 @@
+<template>
+  <s-layout title="试衣间" tabbar="/pages/index/room" navbar="custom" :bgStyle="{ color: '#fff' }">
+    试衣间
+  </s-layout>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>
diff --git a/sheep/components/s-layout/s-layout.vue b/sheep/components/s-layout/s-layout.vue
index df15c31..b514af2 100644
--- a/sheep/components/s-layout/s-layout.vue
+++ b/sheep/components/s-layout/s-layout.vue
@@ -14,6 +14,7 @@
         :opacityBgUi="opacityBgUi"
         @search="(e) => emits('search', e)"
         :defaultSearch="defaultSearch"
+        :leftIcon="leftIcon"
       />
 
       <!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
@@ -135,6 +136,10 @@
       type: Boolean,
       default: false,
     },
+    leftIcon: {
+      type: String,
+      default: 'left',
+    },
   });
   const emits = defineEmits(['search']);
 
@@ -213,11 +218,11 @@
   // #endif
 
   // 组件中使用 onMounted 监听页面加载，不是页面组件不使用 onShow
-  onMounted(()=>{
+  onMounted(() => {
     if (!isEmpty(shareInfo.value)) {
       sheep.$platform.share.updateShareInfo(shareInfo.value);
     }
-  })
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/sheep/store/app.js b/sheep/store/app.js
index 3302797..8b8d8db 100644
--- a/sheep/store/app.js
+++ b/sheep/store/app.js
@@ -195,6 +195,40 @@ const adaptTemplate = async (appTemplate, templateId) => {
     // appTemplate.basic.tabbar.badgeStyle = {
     //   backgroundColor: '#882222',
     // }
+
+    appTemplate.basic.tabbar.items = [
+      {
+        activeIconUrl: "https://3d.aidigitalfield.com/imgs/home.png",
+        iconUrl: "https://3d.aidigitalfield.com/imgs/home.png",
+        text: "首页",
+        url: "/pages/index/index",
+      },
+      {
+        activeIconUrl: "https://3d.aidigitalfield.com/imgs/list.png",
+        iconUrl: "https://3d.aidigitalfield.com/imgs/list.png",
+        text: "商品列表",
+        url: "/pages/index/list",
+      },
+      {
+        activeIconUrl: "https://3d.aidigitalfield.com/imgs/room.png",
+        iconUrl: "https://3d.aidigitalfield.com/imgs/room.png",
+        text: "试衣间",
+        url: "/pages/index/room",
+      },
+      {
+        activeIconUrl: "https://3d.aidigitalfield.com/imgs/chat.png",
+        iconUrl: "https://3d.aidigitalfield.com/imgs/chat.png",
+        text: "聊天",
+        url: "/pages/index/chat",
+      },
+      {
+        activeIconUrl: "https://3d.aidigitalfield.com/imgs/my.png",
+        iconUrl: "https://3d.aidigitalfield.com/imgs/my.png",
+        text: "我的",
+        url: "/pages/index/user",
+      },
+    ];
+
     if (tabBar?.theme) {
       appTemplate.basic.theme = tabBar?.theme;
     }
diff --git a/sheep/ui/su-navbar/su-navbar.vue b/sheep/ui/su-navbar/su-navbar.vue
index af96f24..fb34cf1 100644
--- a/sheep/ui/su-navbar/su-navbar.vue
+++ b/sheep/ui/su-navbar/su-navbar.vue
@@ -212,8 +212,8 @@
   });
 
   const searchModel = computed(() => {
-		return props.defaultSearch
-	})
+    return props.defaultSearch;
+  });
 
   const themeBgColor = computed(() => {
     if (props.dark) {
diff --git a/sheep/ui/su-tab-item/su-tab-item.vue b/sheep/ui/su-tab-item/su-tab-item.vue
index 615df2f..bcbbed7 100644
--- a/sheep/ui/su-tab-item/su-tab-item.vue
+++ b/sheep/ui/su-tab-item/su-tab-item.vue
@@ -89,7 +89,8 @@
   const titleStyle = computed(() => uiTabProvide?.props?.titleStyle);
 
   const computedQuery = () => {
-    uni.createSelectorQuery()
+    uni
+      .createSelectorQuery()
       .in(vm)
       .select('#tab-' + props.index)
       .boundingClientRect((data) => {
diff --git a/sheep/ui/su-tabbar-item/su-tabbar-item.vue b/sheep/ui/su-tabbar-item/su-tabbar-item.vue
index 6807dfe..a876629 100644
--- a/sheep/ui/su-tabbar-item/su-tabbar-item.vue
+++ b/sheep/ui/su-tabbar-item/su-tabbar-item.vue
@@ -24,9 +24,22 @@
             <slot v-else name="inactive-icon" />
           </block>
         </uni-badge>
-      </view>
 
-      <slot name="text">
+        <!-- 选中的当前tabbar加上下横线 -->
+        <view
+          :style="{
+            width: '20rpx',
+            height: '1rpx',
+            background: '#000',
+            position: 'absolute',
+            left: 'calc(50% - 10rpx)',
+            bottom: '-5rpx',
+            display: isActive ? 'inline-block' : 'none',
+          }"
+        />
+      </view>
+      <!-- 底部tabbar不要文字 -->
+      <!-- <slot name="text">
         <text
           class="u-tabbar-item__text"
           :style="{
@@ -35,7 +48,7 @@
         >
           {{ text }}
         </text>
-      </slot>
+      </slot> -->
     </template>
   </view>
 </template>
@@ -104,7 +117,7 @@
       // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
       badgeStyle: {
         type: Object,
-        default: ()=>{},
+        default: () => {},
       },
       isCenter: {
         type: Boolean,