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">
+        <view class="cs-icon-box">
-          <u-image width="88rpx" height="88rpx" shape="circle" :src="item.image">
+          <view class="cs-icon">
-            <template #loading><u-loading-icon></u-loading-icon></template>
+            <u-image width="80rpx" height="80rpx" shape="circle" :src="item.image" mode="aspectFill">
-          </u-image>
+              <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;
+  justify-content: center;
-  padding: 16rpx 0 10rpx;
+  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;
+  width: 80rpx;
-  height: 88rpx;
+  height: 80rpx;
   border-radius: 50%;
   overflow: hidden;
-  border: 2rpx solid transparent;
+  background: #f6f7f9;
-}
+  display: flex;
-.cs-item.active .cs-icon {
+  align-items: center;
-  border-color: $light-color;
+  justify-content: center;
 }
 .cs-name {
-  margin-top: 8rpx;
+  margin-top: 10rpx;
-  font-size: 22rpx;
+  font-size: 24rpx;
-  color: #333;
+  color: #555;
-  max-width: 110rpx;
+  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;
+  min-height: 96rpx;
-  padding: 10rpx 8rpx;
+  padding: 16rpx 14rpx;
   box-sizing: border-box;
-  font-size: 24rpx;
+  font-size: 26rpx;
-  color: #333;
+  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"
+          name="arrow-up-fill"
-          size="10"
+          size="7"
-          :color="sort === 'price' && order === 'asc' ? '#ff6700' : '#c5c5c5'"
+          :color="sort === 'price' && order === 'asc' ? '#ff6700' : '#bbbbbb'"
         ></u-icon>
         <u-icon
-          name="arrow-down"
+          name="arrow-down-fill"
-          size="10"
+          size="7"
-          :color="sort === 'price' && order === 'desc' ? '#ff6700' : '#c5c5c5'"
+          :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;
+  height: 68rpx;
-  background: #fff;
+  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;
+  background: #ffffff;
-  padding: 8rpx 0;
+  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;
+  color: #666;
-  background: #f5f5f5;
+  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">
+          <view v-else-if="!loading" class="empty-state">
-            <text>{{ failed ? '加载失败,请点击重试' : '暂无商品' }}</text>
+            <u-empty
-            <view v-if="failed" class="retry" @click="loadGoods(true)">重试</view>
+              :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 {
+.empty-state {
-  padding: 120rpx 0;
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: #999;
+  justify-content: center;
-  font-size: 26rpx;
+  padding: 60rpx 0 100rpx;
 }
 .retry {
-  margin-top: 20rpx;
+  margin-top: 24rpx;
-  padding: 10rpx 48rpx;
+  padding: 12rpx 50rpx;
   border: 1rpx solid $light-color;
   color: $light-color;
-  border-radius: 32rpx;
+  border-radius: 36rpx;
   font-size: 24rpx;
+  font-weight: 500;
 }
 </style>

components/m-buy/goods.vue

@@ -27,18 +27,7 @@
 						</view>
 						<!-- 正常商品的价格 -->
 						<view v-else>
-							<!-- 批发阶梯价（E_COUPON 仅零售价） -->
+							<div class="goods-price">
-							<div class="price-row flex" v-if="goodsDetail.salesModel === 'WHOLESALE' && !isECoupon(goodsDetail.goodsType)">
-								<div class="goods-price" v-for="(item, index) in wholesaleList" :key="index">
-									<span>
-										￥
-										<span class="goods-price-bigshow">{{ goodsFormatPrice(item.price)[0] }}</span>
-										.{{ goodsFormatPrice(item.price)[1] }}
-									</span>
-									<span class="wholesale-item">{{ item.num }}{{ goodsDetail.goodsUnit }}</span>
-								</div>
-							</div>
-							<div class="goods-price" v-else>
 								<span>
 									￥
 									<span class="goods-price-bigshow">{{ goodsFormatPrice(goodsDetail.price)[0] }}</span>
@@ -135,7 +124,6 @@ import {
 } from '@/utils/goodsType.js'
 
 const props = withDefaults(defineProps<{
-	wholesaleList?: any[] | boolean
 	buyMask?: boolean
 	isGroup?: boolean
 	goodsDetail?: any
@@ -144,7 +132,6 @@ const props = withDefaults(defineProps<{
 	addr?: any | null
 	pointDetail?: any | null
 }>(), {
-	wholesaleList: false,
 	buyMask: false,
 	isGroup: false,
 	goodsDetail: () => ({}),
@@ -156,7 +143,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits(['closeBuy', 'changed', 'handleClickSku', 'queryCart'])
 
-const num = ref(props.wholesaleList && Array.isArray(props.wholesaleList) && props.wholesaleList.length > 0 ? props.wholesaleList[0].num : 1)
+const num = ref(1)
 
 const selectName = ref('')
 const selectSkuList = ref<any>('')
@@ -231,18 +218,7 @@ watch(
 	}
 )
 
-const numCheck = (val: number) => {
+
-	if (Array.isArray(props.wholesaleList) && props.wholesaleList.length > 0) {
-		if (num.value <= props.wholesaleList[0].num) {
-			uni.showToast({
-				title: '批发商品购买数量不能小于起批数量!',
-				duration: 2000,
-				icon: 'none'
-			})
-			num.value = props.wholesaleList[0].num
-		}
-	}
-}
 
 const closeMask = () => {
 	emit('closeBuy', false)
@@ -541,13 +517,6 @@ defineExpose({
 	}
 }
 
-.wholesale-item {
-	color: #999 !important;
-	font-size: 24rpx;
-	margin: 0 20rpx;
-	display: flex;
-	justify-content: center;
-}
 
 .goods-header {
 	height: 200rpx;

components/m-goods-list/base-list.vue

@@ -82,9 +82,6 @@
               </div>
             </view>
             <div class="promotion" @click="navigateToDetailPage(item)">
-              <div v-if="item.salesModel == 'WHOLESALE'">
-                <span>批</span>
-              </div>
               <div
                 v-for="(promotionItem, promotionIndex) in getPromotion(item)"
                 :key="promotionIndex"

components/m-goods-list/list.vue

@@ -21,9 +21,6 @@
 						</div>
 					</view>
 					<div class="promotion" @click="navigateToDetailPage(item)">
-						<div v-if="item.salesModel == 'WHOLESALE'">
-							<span class="promotion-tag">批</span>
-						</div>
 						<div v-for="(promotionItem,promotionIndex) in  getPromotion(item)" :key="promotionIndex">
 							<span class="promotion-tag" v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
 							<span class="promotion-tag" v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
@@ -46,18 +43,32 @@
 			</view>
 		</view>
 		<!-- 一行一列商品展示 -->
-		<div v-if="type == 'oneColumns'"  class="goods-one-row">
+		<div v-if="type == 'oneColumns'" class="goods-one-row" :class="{ 'goods-one-row--embedded': !tabBarGap }">
 			<div v-for="(item, index) in res" :key="index" class="goods-row">
 				<div class="flex goods-col">
 					<div class="goods-img" @click="navigateToDetailPage(item)">
-						<u-image width="230rpx" mode="aspectFit" border-radius='16' height="230rpx" :src="item.thumbnail">
+						<u-image :width="!tabBarGap ? '170rpx' : '230rpx'" mode="aspectFit" :border-radius="!tabBarGap ? '12' : '16'" :height="!tabBarGap ? '170rpx' : '230rpx'" :src="item.thumbnail">
 							<template #loading><u-loading-icon></u-loading-icon></template>
 						</u-image>
 					</div>
 					<div class="goods-detail">
-						<div class="title clamp3" @click="navigateToDetailPage(item)">{{ item.goodsName }}</div>
+						<div class="title clamp2" @click="navigateToDetailPage(item)">
+							<text class="self-tag" v-if="(!storeName || flag('selfTag')) && item.selfOperated">自营</text>
+							{{ item.goodsName }}
+						</div>
 						<div class="selling-point" v-if="extra('subTitle') && item.sellingPoint">{{ item.sellingPoint }}</div>
 						<div class="spec-summary" v-if="extra('spec') && specSummary(item)">{{ specSummary(item) }}</div>
+						<div class="promotion" v-if="flag('tags')" @click="navigateToDetailPage(item)">
+							<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
+								<span class="promotion-tag" v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
+								<span class="promotion-tag" v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
+								<span class="promotion-tag" v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
+							</div>
+						</div>
+						<div style="overflow: hidden" v-if="flag('sales')" @click="navigateToDetailPage(item)" class="count-config">
+							<span style="float: left; font-size: 22rpx">已售 {{ item.buyCount || '0' }}</span>
+							<span style="float: right; font-size: 22rpx" v-if="item.commentNum">{{ item.commentNum }}条评论</span>
+						</div>
 						<view class="price-box" @click="navigateToDetailPage(item)">
 							<div class="price" v-if="flag('price') && item.price!=undefined">
 								¥<span class="price-int">{{ goodsFormatPrice(item.price )[0] }} </span>.{{
@@ -66,25 +77,11 @@
 							</div>
 							<div class="market-price" v-if="extra('linePrice') && hasMarketPrice(item)">¥{{ item.marketPrice }}</div>
 							<div class="cart-btn" v-if="extra('cart')" @click.stop="emit('addCart', item)">
-								<u-icon name="shopping-cart" size="20" color="#fff"></u-icon>
+								<u-icon name="shopping-cart" size="16" :color="mainColor"></u-icon>
 							</div>
 						</view>
-						<div class="promotion" v-if="flag('tags')" @click="navigateToDetailPage(item)">
+						<div class="store-seller-name" v-if="storeName" @click="navigateToStoreDetailPage(item)">
-							<div v-if="item.salesModel == 'WHOLESALE'">
+							<view class="store-name-row">
-								<span class="promotion-tag">批</span>
-							</div>
-							<div v-for="(promotionItem,promotionIndex) in  getPromotion(item)" :key="promotionIndex">
-								<span class="promotion-tag" v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
-								<span class="promotion-tag" v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
-								<span class="promotion-tag" v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
-							</div>
-						</div>
-						<div style="overflow: hidden" v-if="flag('sales')" @click="navigateToDetailPage(item)" class="count-config">
-							<span style="float: left; font-size: 22rpx">已售 {{ item.buyCount || '0' }}</span>
-							<span style="float: right; font-size: 22rpx">{{ item.commentNum || '0' }}条评论</span>
-						</div>
-						<div class="store-seller-name" @click="navigateToStoreDetailPage(item)">
-							<view class="store-name-row" v-if="storeName">
 								<text class="self-tag" v-if="item.selfOperated && flag('selfTag')">自营</text>
 								<text class="store-name-text">{{ item.storeName }}</text>
 								<text class="to-store">进店</text>
@@ -93,18 +90,20 @@
 						</div>
 					</div>
 				</div>
-
 			</div>
 		</div>
-
 	</view>
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue'
+import { computed, watch } from 'vue'
+import { useStore } from '@/store'
 import { useGoodsListCommon } from './common'
 import { goodsFormatPrice } from '@/utils/filters.js'
 
+const store = useStore()
+const mainColor = computed(() => (store && store.getters && store.getters.mainColor) || '#ff3c2a')
+
 const { lightSearchStr, getPromotion, navigateToDetailPage, navigateToStoreDetailPage } = useGoodsListCommon()
 
 const props = withDefaults(defineProps<{
@@ -238,6 +237,128 @@ watch(() => props.keyword, (val) => {
 			}
 		}
 
+		.goods-one-row--embedded {
+			.goods-row {
+				padding: 20rpx 16rpx;
+				border-bottom: 1rpx solid #f6f6f6;
+				background: #ffffff;
+
+				>.goods-col {
+					display: flex;
+					align-items: stretch;
+
+					>.goods-img {
+						flex: 0 0 170rpx;
+						width: 170rpx;
+						height: 170rpx;
+						border-radius: 12rpx;
+						overflow: hidden;
+						background: #f8f8f8;
+					}
+
+					>.goods-detail {
+						flex: 1;
+						min-width: 0;
+						margin: 0 0 0 16rpx;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+
+						>.title {
+							font-size: 26rpx;
+							color: #222;
+							line-height: 1.4;
+							max-height: 74rpx;
+							padding: 0;
+							display: -webkit-box;
+							-webkit-box-orient: vertical;
+							-webkit-line-clamp: 2;
+							overflow: hidden;
+							text-overflow: ellipsis;
+
+							.self-tag {
+								display: inline-block;
+								margin-right: 8rpx;
+								padding: 1rpx 8rpx;
+								border-radius: 6rpx;
+								background: $main-color;
+								color: #fff;
+								font-size: 20rpx;
+								line-height: 1.4;
+								vertical-align: middle;
+							}
+						}
+
+						.selling-point {
+							font-size: 22rpx;
+							color: #999;
+							line-height: 1.3;
+							margin-top: 4rpx;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+
+						.spec-summary {
+							font-size: 22rpx;
+							color: #999;
+							line-height: 1.3;
+							margin-top: 2rpx;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+
+						.count-config {
+							font-size: 22rpx;
+							color: #999;
+							margin-top: 4rpx;
+						}
+
+						.price-box {
+							display: flex;
+							align-items: flex-end;
+							justify-content: space-between;
+							margin-top: auto;
+							padding-top: 8rpx;
+
+							.price {
+								font-size: 22rpx;
+								color: $main-color;
+								font-weight: 500;
+								line-height: 1;
+
+								.price-int {
+									font-size: 34rpx;
+									font-weight: bold;
+								}
+							}
+
+							.market-price {
+								font-size: 22rpx;
+								color: #bbb;
+								text-decoration: line-through;
+								margin-left: 8rpx;
+							}
+
+							.cart-btn {
+								width: 48rpx;
+								height: 48rpx;
+								border-radius: 50%;
+								background: #ffffff;
+								border: 2rpx solid $main-color;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+								box-sizing: border-box;
+								box-shadow: 0 2rpx 8rpx rgba(255, 60, 42, 0.12);
+							}
+						}
+					}
+				}
+			}
+		}
+
 		.goods-row {
 			background: #fff;
 			padding: 16rpx;
@@ -299,14 +420,17 @@ watch(() => props.keyword, (val) => {
 		}
 
 		.cart-btn {
-			width: 44rpx;
+			width: 48rpx;
-			height: 44rpx;
+			height: 48rpx;
 			border-radius: 50%;
-			background: $main-color;
+			background: #ffffff;
+			border: 2rpx solid $main-color;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			flex-shrink: 0;
+			box-sizing: border-box;
+			box-shadow: 0 2rpx 8rpx rgba(255, 60, 42, 0.12);
 		}
 
 		.promotion {

main.js

@@ -39,6 +39,7 @@ export function createApp() {
   setConfig({
     config: {
       loadFontOnce: true,
+      iconUrl: 'https://lilishop-uniapp.oss-cn-beijing.aliyuncs.com/font_2225171_8kdcwk4po24.ttf',
     },
     props: {
       form: {

pages/product/goods.vue

@@ -101,20 +101,7 @@
                   <view class="-goods-price" v-if="goodsDetail.price != undefined">
 
                     <span>
-                      <span v-if="wholesaleList.length">
+                      <span>
-                        <span>¥</span><span class="price">{{
-                          goodsFormatPrice(wholesaleList[wholesaleList.length - 1].price)[0]
-                        }}</span>.{{
-                          goodsFormatPrice(wholesaleList[wholesaleList.length - 1].price)[1]
-                        }}
-                        ~
-                        <span>¥</span><span class="price">{{
-                          goodsFormatPrice(wholesaleList[0].price)[0]
-                        }}</span>.{{
-                          goodsFormatPrice(wholesaleList[0].price)[1]
-                        }}
-                      </span>
-                      <span v-else>
                         <span>¥</span><span class="price">{{
                           goodsFormatPrice(goodsDetail.price)[0]
                         }}</span>.{{ goodsFormatPrice(goodsDetail.price)[1] }}
@@ -291,7 +278,7 @@
       <!-- 商品规格  商品详情，以及默认参与活动的id-->
       <popupGoods :addr="delivery" ref="popupGoodsRef" @changed="changedGoods" @closeBuy="closePopupBuy"
         @queryCart="cartCount()" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" :isGroup="isGroup" :id="productId"
-        v-if="goodsDetail.id" :pointDetail="pointDetail" :wholesaleList="wholesaleList" @handleClickSku="selectSku"
+        v-if="goodsDetail.id" :pointDetail="pointDetail" @handleClickSku="selectSku"
         :buyMask="buyMask" />
 
       <!-- 下架框 -->
@@ -391,7 +378,6 @@ const productId = ref(0)
 const startTimer = ref(false)
 const routerVal = ref<any>("")
 const IMLink = ref("")
-const wholesaleList = ref<any[]>([])
 const takeDownFromSale = ref(false)
 
 // computed
@@ -520,7 +506,6 @@ async function init(id: any, goodsId: any, distributionId = "", shareId = "") {
   if (goodsDetail.value) {
     goodsDetail.value.thumbnail = parseGoodsImageUrl(goodsDetail.value.thumbnail)
   }
-  wholesaleList.value = response.data.result.wholesaleList || []
   goodsSpec.value = response.data.result.specs || ""
   PromotionList.value = response.data.result.promotionMap || ""
   goodsParams.value = response.data.result.goodsParamsDTOList || []

pages/tabbar/cart/cartList.vue

@@ -68,7 +68,6 @@
               </p>
               <!-- 规格 -->
               <p class="sp-type" style="width:300rpx">{{skuItem.goodsSku.simpleSpecs}}</p>
-              <p class="sp-type" v-if="skuItem.goodsSku.salesModel == 'WHOLESALE'">批发商品</p>
               <view class="sp-number">
                 <view class="sp-price">
                   <div class="main-color">

pages/tabbar/category/category.vue

@@ -11,43 +11,51 @@
       bg-color="#ffffff"
     >
       <template #left>
-        <view class="nav-content">
+        <view class="nav-search-box" :style="searchBarStyle" @click="search">
-          <text class="title">商品分类</text>
+          <u-icon name="search" size="16" color="#999999"></u-icon>
-          <view class="nav-search-wrap" :style="searchBarStyle">
+          <text class="search-placeholder">搜索商品</text>
-            <!-- #ifdef H5 -->
-            <u-search class="nav-search" @click="search" placeholder="搜索商品" :show-action="false"></u-search>
-            <!-- #endif -->
-            <!-- #ifndef H5 -->
-            <u-search class="nav-search" disabled @click="search" placeholder="搜索商品" :show-action="false"></u-search>
-            <!-- #endif -->
-          </view>
         </view>
       </template>
     </u-navbar>
     <view class="content" v-if="pageTemplate === 1">
       <scroll-view scroll-y scroll-with-animation class="left-aside">
-        <view v-for="(item, index) in tabList" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item, index)">
+        <view
-          {{ item.name }}
+          v-for="(item, index) in tabList"
+          :key="item.id"
+          class="f-item"
+          :class="{ active: item.id === currentId }"
+          @click="tabtap(item, index)"
+        >
+          <text class="f-text">{{ item.name }}</text>
         </view>
       </scroll-view>
       <scroll-view scroll-with-animation scroll-y class="right-aside" :upper-threshold="-100" :lower-threshold="-100">
         <!-- 头部图片 -->
-        <view class="top-img" id="main-top">
+        <view class="top-img" id="main-top" v-if="topImg && topImg.image">
-          <u-image width="500rpx" height="230rpx" @click="navigateToList(topImg.id,topImg.id)" :src="topImg.image" mode="">
+          <u-image width="100%" height="200rpx" border-radius="12rpx" @click="navigateToList(topImg.id, topImg.id)" :src="topImg.image" mode="aspectFill">
           </u-image>
         </view>
         <view v-for="item in categoryList" :key="item.id" class="s-list" :id="'main-' + item.id">
           <!-- 分类标题 -->
-          <text class="s-item">{{ item.name }}</text>
+          <view class="s-header" @click="navigateToList(item.id, item.id)">
+            <text class="s-item">{{ item.name }}</text>
+            <u-icon name="arrow-right" size="12" color="#bbbbbb"></u-icon>
+          </view>
           <!-- 分类详情 -->
           <view class="t-list">
             <template v-for="(children, cIndex) in item.children" :key="children.id">
-            <view @click="navigateToList(item.id, children.id)" v-if="children.parentId === item.id" class="t-item"
+              <view
-              :class="{ 'margin-right': (cIndex + 1) % 3 == 0 }">
+                @click="navigateToList(item.id, children.id)"
-              <u-image width="70px" height="70px" :src="children.image" :lazy-load="true">
+                v-if="children.parentId === item.id"
-              </u-image>
+                class="t-item"
-              <text>{{ children.name }}</text>
+              >
-            </view>
+                <view class="t-img-box">
+                  <u-image width="128rpx" height="128rpx" border-radius="12rpx" :src="children.image" :lazy-load="true" mode="aspectFit">
+                    <template #loading><u-loading-icon></u-loading-icon></template>
+                  </u-image>
+                </view>
+                <text class="t-name">{{ children.name }}</text>
+              </view>
             </template>
           </view>
         </view>
@@ -55,6 +63,7 @@
     </view>
     <tpl-category-goods
       v-else
+      class="tpl-goods-wrapper"
       :category-list="tabList"
       :setting="categoryPageSetting"
       :template="pageTemplate"
@@ -88,9 +97,9 @@ const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const searchBarStyle = computed(() => {
   if (searchBarWidth.value) {
-    return { width: `${searchBarWidth.value}px` }
+    return { width: searchBarWidth.value + 'px' }
   }
-  return { width: "460rpx" }
+  return { width: "680rpx" }
 })
 
 onLoad(() => {
@@ -111,18 +120,25 @@ function setSearchBarWidth() {
   // #ifdef MP-WEIXIN
   try {
     const menuButton = uni.getMenuButtonBoundingClientRect()
-    const { windowWidth } = uni.getWindowInfo()
+    const leftMargin = uni.upx2px(24) // 搜索框左边距
-    const capsuleInsetRight = windowWidth - menuButton.left
-    const titleWidth = uni.upx2px(160) // "商品分类" 标题宽度
-    const leftPadding = uni.upx2px(60) // 左侧内边距
     const gap = uni.upx2px(20) // 搜索框与胶囊间距
-    searchBarWidth.value =
+    // 搜索框延伸至胶囊左边沿
-      windowWidth - capsuleInsetRight - titleWidth - leftPadding - gap
+    const calcWidth = menuButton.left - leftMargin - gap
+    searchBarWidth.value = Math.max(calcWidth, 200)
   } catch (e) {
-    searchBarWidth.value = 180
+    searchBarWidth.value = 240
+  }
+  // #endif
+  // #ifndef MP-WEIXIN
+  try {
+    const info = (uni.getWindowInfo ? uni.getWindowInfo() : (uni.getSystemInfoSync ? uni.getSystemInfoSync() : {})); const windowWidth = info.windowWidth || 375;
+    searchBarWidth.value = windowWidth - uni.upx2px(48)
+  } catch (e) {
+    searchBarWidth.value = 340
   }
   // #endif
 }
+
 /**
  * 查询
  */
@@ -138,8 +154,10 @@ function search() {
 async function loadData() {
   let list = await getCategoryList(0)
   tabList.value = list.data.result
-  currentId.value = list.data.result[0].id
+  if (tabList.value && tabList.value.length) {
-  loadListContent(0)
+    currentId.value = tabList.value[0].id
+    loadListContent(0)
+  }
 }
 
 /**
@@ -149,6 +167,7 @@ function loadListContent(index: number) {
   topImg.value = tabList.value[index]
   categoryList.value = tabList.value[index].children
 }
+
 /**
  * 一级分类点击
  */
@@ -161,7 +180,7 @@ function tabtap(item: any, i: number) {
 
 function navigateToList(sid: any, tid: any) {
   uni.navigateTo({
-    url: `/pages/navigation/search/searchPage?category=${tid}`,
+    url: '/pages/navigation/search/searchPage?category=' + tid,
   })
 }
 </script>
@@ -169,7 +188,7 @@ function navigateToList(sid: any, tid: any) {
 <style lang="scss">
 page {
   height: 100%;
-  background-color: #fdfaff;
+  background-color: #ffffff;
 }
 </style>
 
@@ -183,36 +202,42 @@ page {
 /* 解决H5 的问题 */
 /* #ifdef H5 */
 uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
-  /* 隐藏滚动条，但依旧具备可以滚动的功能 */
   display: none;
 }
 /* #endif */
-.s-list {
+
-  box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
-}
-.nav-content {
-  display: flex;
-  align-items: center;
-}
-.nav-search-wrap {
-  flex-shrink: 0;
-}
-.nav-search {
-  width: 100%;
-}
-.title {
-  flex-shrink: 0;
-  text-align: center;
-  font-size: 28rpx;
-  padding-right: 16rpx;
-  white-space: nowrap;
-}
 .category-wrap {
-  height: 100vh;
+  height: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   box-sizing: border-box;
+  background-color: #ffffff;
+
+  .navbar {
+    border-bottom: 1rpx solid #f2f3f5;
+  }
+
+  .nav-search-box {
+    height: 64rpx;
+    background: #f4f5f7;
+    border-radius: 32rpx;
+    display: flex;
+    align-items: center;
+    padding: 0 24rpx;
+    margin-left: 24rpx;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+
+  .search-placeholder {
+    font-size: 26rpx;
+    color: #999999;
+    margin-left: 12rpx;
+    line-height: 1;
+  }
+
   .content {
     flex: 1;
     min-height: 0;
@@ -220,85 +245,159 @@ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
     display: flex;
     color: #333;
     font-size: 28rpx;
-    background: #fff;
+    background: #ffffff;
     overflow: hidden;
   }
+
   .left-aside {
     flex-shrink: 0;
-    width: 200rpx;
+    width: 176rpx;
     height: 100%;
-    background-color: #f7f7f7;
+    background-color: #f6f7f9;
+    border-right: 1rpx solid #ebebeb;
     box-sizing: border-box;
   }
+
   .f-item {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
-    height: 97rpx;
+    min-height: 96rpx;
+    padding: 16rpx 14rpx;
+    box-sizing: border-box;
+    font-size: 26rpx;
+    color: #666;
+    text-align: center;
+    line-height: 1.35;
     position: relative;
+    transition: all 0.2s ease;
+
     &.active {
-      font-weight: bold;
+      font-weight: 600;
       color: $light-color;
-      background: #fff;
+      background: #ffffff;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6rpx;
+        height: 36rpx;
+        border-radius: 0 4rpx 4rpx 0;
+        background: $light-color;
+      }
     }
   }
+
+  .f-text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .right-aside {
     flex: 1;
     height: 100%;
     min-height: 0;
     overflow: hidden;
-    padding: 40rpx 0 0 30rpx;
+    padding: 20rpx 20rpx 40rpx;
     box-sizing: border-box;
+    background: #f8f9fa;
   }
 
   .top-img {
-    width: 500rpx;
+    width: 100%;
-    height: 230rpx;
+    height: 200rpx;
-    border-radius: 8px;
+    border-radius: 14rpx;
     overflow: hidden;
-    image {
+    margin-bottom: 20rpx;
-      width: 100%;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
-      height: 100%;
-    }
   }
-  .s-item {
+
+  .s-list {
+    background: #ffffff;
+    border-radius: 16rpx;
+    padding: 24rpx 20rpx 12rpx;
+    margin-bottom: 20rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
+  }
+
+  .s-header {
     display: flex;
     align-items: center;
-    height: 70rpx;
+    justify-content: space-between;
-    padding-top: 16rpx;
+    padding-bottom: 16rpx;
-    font-weight: 500;
+    cursor: pointer;
   }
+
+  .s-item {
+    font-size: 26rpx;
+    font-weight: 600;
+    color: #222;
+  }
+
   .t-list {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
-    padding-top: 12rpx;
-  }
-  .margin-right {
-    margin-right: 0 !important;
   }
+
   .t-item {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    width: 150rpx;
+    width: 33.333%;
-    margin-right: 25rpx;
+    padding: 10rpx 0 20rpx;
+    box-sizing: border-box;
+  }
+
+  .t-img-box {
+    width: 128rpx;
+    height: 128rpx;
+    border-radius: 12rpx;
+    overflow: hidden;
+    background: #f9f9f9;
+    margin-bottom: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .t-name {
     font-size: 24rpx;
-    padding-bottom: 20rpx;
+    color: #333;
-    image {
+    max-width: 140rpx;
-      width: 140rpx;
+    overflow: hidden;
-      height: 140rpx;
+    text-overflow: ellipsis;
-      border-radius: 8px;
+    white-space: nowrap;
-      margin-bottom: 20rpx;
+    text-align: center;
-    }
+    line-height: 1.2;
-    ::v-deep .u-image {
-      width: 140rpx !important;
-      height: 140rpx !important;
-      border-radius: 8px !important;
-      margin-bottom: 20rpx !important;
-    }
   }
 }
+
+.tpl-goods-wrapper {
+  flex: 1;
+  min-height: 0;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ */
+tpl-category-goods {
+  flex: 1;
+  min-height: 0;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+/* #endif */
 </style>

utils/categoryPageSetting.js

@@ -6,7 +6,7 @@ export const DEFAULT_CATEGORY_PAGE_SETTING = {
     tags: true,
     selfTag: true,
     price: true,
-    linePrice: true,
+    linePrice: false,
     sales: true,
     cart: true,
   },