refactor(category): 重构分类页面UI

- 重构分类页面导航栏，将标题+搜索框改为仅搜索框样式
- 优化分类页面左侧列表与右侧内容区域的布局及视觉样式
- 重写搜索栏宽度计算逻辑
- 优化分类滚动组件、侧边列表、排序栏及子标签栏的交互样式
- 增加分类头部图片条件渲染及商品列表嵌入模式样式
- 关闭商品列表划线价默认显示配置

components/category/category-scroller.vue

@@ -9,14 +9,19 @@
       @click="$emit('change', item)"
     >
       <template v-if="mode === 'icon'">
-        <view class="cs-icon">
-          <u-image width="88rpx" height="88rpx" shape="circle" :src="item.image">
-            <template #loading><u-loading-icon></u-loading-icon></template>
-          </u-image>
+        <view class="cs-icon-box">
+          <view class="cs-icon">
+            <u-image width="80rpx" height="80rpx" shape="circle" :src="item.image" mode="aspectFill">
+              <template #loading><u-loading-icon></u-loading-icon></template>
+            </u-image>
+          </view>
         </view>
         <text class="cs-name">{{ item.name }}</text>
       </template>
-      <text v-else class="cs-text-name">{{ item.name }}</text>
+      <template v-else>
+        <text class="cs-text-name">{{ item.name }}</text>
+        <view class="cs-text-line" v-if="item.id === currentId"></view>
+      </template>
     </view>
   </scroll-view>
 </template>
@@ -37,7 +42,7 @@ const props = withDefaults(defineProps<{
 defineEmits(['change'])
 
 const intoView = computed(() =>
-  props.currentId != null ? `cs-${props.currentId}` : ''
+  props.currentId != null ? 'cs-' + props.currentId : ''
 )
 </script>
 
@@ -45,49 +50,84 @@ const intoView = computed(() =>
 .cate-scroller {
   white-space: nowrap;
   width: 100%;
-  background: #fff;
+  background: #ffffff;
+  border-bottom: 1rpx solid #f2f3f5;
+  box-sizing: border-box;
+  flex-shrink: 0;
 }
 .cs-item {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  width: 120rpx;
-  padding: 16rpx 0 10rpx;
+  justify-content: center;
+  width: 130rpx;
+  padding: 16rpx 6rpx 14rpx;
   vertical-align: top;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+}
+.cs-icon-box {
+  width: 92rpx;
+  height: 92rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 3rpx solid transparent;
+  box-sizing: border-box;
+  background: #ffffff;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.cs-item.active .cs-icon-box {
+  border-color: $light-color;
+  box-shadow: 0 4rpx 12rpx rgba(255, 102, 0, 0.15);
 }
 .cs-icon {
-  width: 88rpx;
-  height: 88rpx;
+  width: 80rpx;
+  height: 80rpx;
   border-radius: 50%;
   overflow: hidden;
-  border: 2rpx solid transparent;
-}
-.cs-item.active .cs-icon {
-  border-color: $light-color;
+  background: #f6f7f9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .cs-name {
-  margin-top: 8rpx;
-  font-size: 22rpx;
-  color: #333;
-  max-width: 110rpx;
+  margin-top: 10rpx;
+  font-size: 24rpx;
+  color: #555;
+  max-width: 120rpx;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  line-height: 1.2;
 }
 .cs-item.active .cs-name {
   color: $light-color;
-  font-weight: bold;
+  font-weight: 600;
 }
 .cs-item--text {
   width: auto;
-  padding: 18rpx 24rpx;
+  padding: 18rpx 28rpx;
+  position: relative;
 }
 .cs-text-name {
   font-size: 26rpx;
-  color: #333;
+  color: #666;
+  transition: color 0.2s ease;
 }
 .cs-item--text.active .cs-text-name {
   color: $light-color;
-  font-weight: bold;
+  font-weight: 600;
+}
+.cs-text-line {
+  position: absolute;
+  bottom: 6rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 32rpx;
+  height: 4rpx;
+  border-radius: 2rpx;
+  background: $light-color;
 }
 </style>

components/category/category-side-list.vue

@@ -7,7 +7,8 @@
       :class="{ active: item.id === currentId }"
       @click="$emit('change', item)"
     >
-      {{ item.name }}
+      <view class="active-indicator" v-if="item.id === currentId"></view>
+      <text class="side-item-text">{{ item.name }}</text>
     </view>
   </scroll-view>
 </template>
@@ -26,26 +27,49 @@ defineEmits(['change'])
 
 <style lang="scss" scoped>
 .side-list {
-  width: 160rpx;
+  width: 176rpx;
   flex-shrink: 0;
   height: 100%;
-  background-color: #f7f7f7;
+  background-color: #f6f7f9;
+  border-right: 1rpx solid #ebebeb;
+  box-sizing: border-box;
 }
 .side-item {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
-  min-height: 90rpx;
-  padding: 10rpx 8rpx;
+  min-height: 96rpx;
+  padding: 16rpx 14rpx;
   box-sizing: border-box;
-  font-size: 24rpx;
-  color: #333;
+  font-size: 26rpx;
+  color: #666;
   text-align: center;
+  position: relative;
+  transition: all 0.2s ease;
+
   &.active {
-    font-weight: bold;
+    font-weight: 600;
     color: $light-color;
-    background: #fff;
+    background: #ffffff;
   }
 }
+.side-item-text {
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.active-indicator {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6rpx;
+  height: 36rpx;
+  border-radius: 0 4rpx 4rpx 0;
+  background: $light-color;
+}
 </style>

components/category/sort-bar.vue

@@ -5,31 +5,31 @@
       :class="{ active: sort === 'releaseTime' }"
       @click="onClick('releaseTime')"
     >
-      综合
+      <text class="sort-label">综合</text>
     </view>
     <view
       class="sort-item"
       :class="{ active: sort === 'buyCount' }"
       @click="onClick('buyCount')"
     >
-      销量
+      <text class="sort-label">销量</text>
     </view>
     <view
       class="sort-item"
       :class="{ active: sort === 'price' }"
       @click="onClick('price')"
     >
-      <text>价格</text>
+      <text class="sort-label">价格</text>
       <view class="arrows">
         <u-icon
-          name="arrow-up"
-          size="10"
-          :color="sort === 'price' && order === 'asc' ? '#ff6700' : '#c5c5c5'"
+          name="arrow-up-fill"
+          size="7"
+          :color="sort === 'price' && order === 'asc' ? '#ff6700' : '#bbbbbb'"
         ></u-icon>
         <u-icon
-          name="arrow-down"
-          size="10"
-          :color="sort === 'price' && order === 'desc' ? '#ff6700' : '#c5c5c5'"
+          name="arrow-down-fill"
+          size="7"
+          :color="sort === 'price' && order === 'desc' ? '#ff6700' : '#bbbbbb'"
         ></u-icon>
       </view>
     </view>
@@ -60,24 +60,35 @@ function onClick(type: string) {
 .sort-bar {
   display: flex;
   align-items: center;
-  height: 72rpx;
-  background: #fff;
+  height: 68rpx;
+  background: #ffffff;
   padding: 0 20rpx;
+  border-bottom: 1rpx solid #f6f6f6;
+  box-sizing: border-box;
+  flex-shrink: 0;
 }
 .sort-item {
   display: flex;
   align-items: center;
-  margin-right: 40rpx;
+  margin-right: 44rpx;
   font-size: 26rpx;
-  color: #333;
+  color: #666;
+  height: 100%;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
   &.active {
     color: $light-color;
-    font-weight: bold;
+    font-weight: 600;
   }
 }
+.sort-label {
+  font-size: 26rpx;
+}
 .arrows {
   display: flex;
   flex-direction: column;
-  margin-left: 6rpx;
+  margin-left: 8rpx;
+  gap: 2rpx;
 }
 </style>

components/category/sub-tag-bar.vue

@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<{
 defineEmits(['change'])
 
 const intoView = computed(() =>
-  props.currentId != null ? `tb-${props.currentId}` : ''
+  props.currentId != null ? 'tb-' + props.currentId : ''
 )
 </script>
 
@@ -35,21 +35,27 @@ const intoView = computed(() =>
 .tag-bar {
   white-space: nowrap;
   width: 100%;
-  background: #fff;
-  padding: 8rpx 0;
+  background: #ffffff;
+  padding: 12rpx 16rpx 10rpx;
+  border-bottom: 1rpx solid #f6f6f6;
+  box-sizing: border-box;
+  flex-shrink: 0;
 }
 .tag-item {
   display: inline-block;
-  padding: 8rpx 24rpx;
+  padding: 6rpx 22rpx;
   margin-right: 12rpx;
   font-size: 24rpx;
-  color: #333;
-  background: #f5f5f5;
+  color: #666;
+  background: #f5f6f8;
   border-radius: 24rpx;
+  line-height: 1.35;
+  transition: all 0.2s ease;
+
   &.active {
-    color: #fff;
+    color: #ffffff;
     background: $light-color;
-    font-weight: bold;
+    font-weight: 500;
   }
 }
 </style>

components/category/tpl-category-goods.vue

@@ -8,13 +8,6 @@
       mode="icon"
       @change="onL1Change"
     />
-    <!-- 模板2:三级分类标签横滑 -->
-    <sub-tag-bar
-      v-if="template === 2 && l3List.length"
-      :list="l3List"
-      :current-id="currentL3 && currentL3.id"
-      @change="onL3Change"
-    />
     <view class="tpl-main">
       <!-- 左侧:模板2/3 为二级分类,模板4 为一级分类 -->
       <category-side-list
@@ -23,6 +16,13 @@
         @change="onSideChange"
       />
       <view class="tpl-right">
+        <!-- 模板2:三级分类标签横滑 (置于右栏顶部) -->
+        <sub-tag-bar
+          v-if="template === 2 && l3List.length"
+          :list="l3List"
+          :current-id="currentL3 && currentL3.id"
+          @change="onL3Change"
+        />
         <!-- 模板4:右上二级分类文字横滑(起点为当前一级名称,作为"全部"入口) -->
         <category-scroller
           v-if="template === 4"
@@ -39,15 +39,24 @@
             type="oneColumns"
             :show-fields="setting.showFields"
             :tab-bar-gap="false"
+            :store-name="false"
             @add-cart="onAddCart"
           />
-          <view v-else-if="!loading" class="empty">
-            <text>{{ failed ? '加载失败,请点击重试' : '暂无商品' }}</text>
-            <view v-if="failed" class="retry" @click="loadGoods(true)">重试</view>
+          <view v-else-if="!loading" class="empty-state">
+            <u-empty
+              :text="failed ? '加载失败，请重试' : '暂无相关商品'"
+              mode="data"
+              icon="http://cdn.uviewui.com/uview/empty/data.png"
+              margin-top="100"
+            >
+              <view v-if="failed" class="retry" @click="loadGoods(true)">重试</view>
+            </u-empty>
           </view>
           <uni-load-more
-            v-if="goodsList.length"
+            v-if="showLoadMore"
             :status="loading ? 'loading' : hasMore ? 'more' : 'noMore'"
+            :color="'#bfbfbf'"
+            :content-text="loadMoreText"
           ></uni-load-more>
         </scroll-view>
       </view>
@@ -64,6 +73,13 @@ import SubTagBar from './sub-tag-bar.vue'
 import SortBar from './sort-bar.vue'
 import MGoodsList from '@/components/m-goods-list/list.vue'
 
+defineOptions({
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+  },
+})
+
 const props = withDefaults(defineProps<{
   categoryList?: any[]
   setting?: any
@@ -86,6 +102,20 @@ const hasMore = ref(true)
 const loading = ref(false)
 const failed = ref(false)
 
+const loadMoreText = {
+  contentdown: '上拉加载更多',
+  contentrefresh: '正在加载...',
+  contentnomore: '—— 到底啦 ——',
+}
+
+// 仅在正在加载、或者有下一页、或者商品总数达到 6 件以上触底时才展示底线，避免少量商品（如1~2件）时在空白区域突兀展示
+const showLoadMore = computed(() => {
+  if (!goodsList.value.length) return false
+  if (loading.value) return true
+  if (hasMore.value) return true
+  return goodsList.value.length >= 6
+})
+
 // 模板2/3:左侧为当前一级的二级分类;模板4:左侧为一级分类
 const sideList = computed(() =>
   props.template === 4
@@ -212,7 +242,7 @@ function loadMore() {
 
 function onAddCart(item: any) {
   uni.navigateTo({
-    url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
+    url: '/pages/product/goods?id=' + item.id + '&goodsId=' + item.goodsId,
   })
 }
 </script>
@@ -221,40 +251,47 @@ function onAddCart(item: any) {
 .tpl-goods {
   flex: 1;
   min-height: 0;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  background: #fff;
+  background: #ffffff;
+  overflow: hidden;
 }
 .tpl-main {
   flex: 1;
   min-height: 0;
+  height: 0;
   display: flex;
+  overflow: hidden;
 }
 .tpl-right {
   flex: 1;
   min-width: 0;
+  height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  background: #ffffff;
 }
 .goods-scroll {
   flex: 1;
   min-height: 0;
   height: 0;
 }
-.empty {
-  padding: 120rpx 0;
+.empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: #999;
-  font-size: 26rpx;
+  justify-content: center;
+  padding: 60rpx 0 100rpx;
 }
 .retry {
-  margin-top: 20rpx;
-  padding: 10rpx 48rpx;
+  margin-top: 24rpx;
+  padding: 12rpx 50rpx;
   border: 1rpx solid $light-color;
   color: $light-color;
-  border-radius: 32rpx;
+  border-radius: 36rpx;
   font-size: 24rpx;
+  font-weight: 500;
 }
 </style>