fix: 更新多个组件样式和功能以提升用户体验

- 在 myCollect.vue 中优化收藏页面的布局和样式，增加主题支持
- 在 searchPage.vue 中修复搜索组件的输入值设置逻辑
- 在 coupon/index.vue 中重构优惠券列表的展示逻辑，提升可用性
- 在 m-search-revision.vue 中调整搜索组件的样式和功能，增加清除图标的交互
- 在 pages.json 中禁用下拉刷新功能以改善性能

pages/mine/myCollect.vue

@@ -1,29 +1,42 @@
 <template>
-	<view class="content">
+	<view class="page" :style="themeStyle">
 		<u-navbar
+			title="收藏"
 			:fixed="true"
 			:placeholder="true"
 			:border="false"
 			:auto-back="true"
-			title=""
+		></u-navbar>
+
+		<view class="tabs-wrap">
+			<u-tabs
+				:list="navList"
+				:scrollable="false"
+				:lineColor="lightColor"
+				:activeStyle="{ color: lightColor, fontWeight: '600' }"
+				:inactiveStyle="{ color: '#666' }"
+				v-model:current="tabCurrentIndex"
+				@change="onTabChange"
+			></u-tabs>
+		</view>
+
+		<scroll-view
+			class="list-scroll"
+			scroll-y
+			enable-back-to-top
+			:refresher-enabled="true"
+			:refresher-triggered="refreshing"
+			@refresherrefresh="onRefresh"
+			@scrolltolower="loadMore"
 		>
-			<template #center>
-				<view class="slot-wrap">
-					<u-tabs
-						:lineColor="lightColor"
-						:activeStyle="{ color: lightColor }"
-						class="collect-tabs"
-						:list="navList"
-						:scrollable="false"
-						v-model:current="tabCurrentIndex"
-					></u-tabs>
-				</view>
-			</template>
-		</u-navbar>
-		<view class="collect-body">
-			<!-- 显示商品栏 -->
+			<!-- 商品 -->
 			<view v-if="tabCurrentIndex === 0" class="tab-content">
-				<u-empty style="margin-top: 40rpx" text="暂无收藏商品数据" mode="favor" v-if="goodsEmpty"></u-empty>
+				<u-empty
+					v-if="!goodsLoading && goodsEmpty"
+					class="empty-box"
+					text="暂无收藏商品"
+					mode="favor"
+				></u-empty>
 				<template v-else>
 					<u-swipe-action
 						v-for="(item, index) in goodsList"
@@ -34,26 +47,34 @@
 							@open="openSwipeItem(item, 'goods')"
 							:show="item.selected"
 							:options="swipeOptions"
-							@click="removeGoodsCollection(item, index)"
+							@click="removeGoodsCollection(item)"
 							:name="index"
 						>
 							<view class="goods" @click="goGoodsDetail(item)">
-								<u-image width="131rpx" height="131rpx" :src="item.image" mode="aspectFit">
+								<u-image width="140rpx" height="140rpx" radius="12rpx" :src="item.image" mode="aspectFill">
 									<template #loading><u-loading-icon></u-loading-icon></template>
 								</u-image>
 								<view class="goods-intro">
-									<view class="goods-name">{{ item.goodsName }}</view>
-									<view class="goods-sn">{{ item.goods_sn }}</view>
+									<view class="goods-name wes-2">{{ item.goodsName }}</view>
 									<view class="goods-price">￥{{ unitPrice(item.price) }}</view>
 								</view>
 							</view>
 						</u-swipe-action-item>
 					</u-swipe-action>
+					<view class="load-status" v-if="goodsList.length">
+						{{ goodsFinished ? '没有更多了' : goodsLoading ? '加载中...' : '上拉加载更多' }}
+					</view>
 				</template>
 			</view>
-			<!-- 显示收藏的店铺栏 -->
+
+			<!-- 店铺 -->
 			<view v-else class="tab-content">
-				<u-empty style="margin-top: 40rpx" text="暂无收藏店铺数据" mode="favor" v-if="storeEmpty"></u-empty>
+				<u-empty
+					v-if="!storeLoading && storeEmpty"
+					class="empty-box"
+					text="暂无收藏店铺"
+					mode="favor"
+				></u-empty>
 				<template v-else>
 					<u-swipe-action
 						v-for="(item, index) in storeList"
@@ -68,36 +89,51 @@
 							:name="index"
 						>
 							<view class="store" @click="goStoreMainPage(item.id)">
-								<view class="intro">
-									<view class="store-logo">
-										<u-image width="102rpx" height="102rpx" :src="item.storeLogo" :alt="item.storeName"
-											mode="aspectFit">
-											<template #loading><u-loading-icon></u-loading-icon></template>
-										</u-image>
-									</view>
-									<view class="store-name">
-										<view>{{ item.storeName }}</view>
-										<u-tag size="mini" type="error" :color="mainColor" v-if="item.selfOperated"
-											text="自营" mode="plain" shape="circle" />
-									</view>
-									<view class="store-collect">
-										<view>进店逛逛</view>
-									</view>
+								<view class="store-logo">
+									<u-image
+										width="96rpx"
+										height="96rpx"
+										shape="circle"
+										:src="item.storeLogo"
+										mode="aspectFill"
+									>
+										<template #loading><u-loading-icon></u-loading-icon></template>
+									</u-image>
 								</view>
+								<view class="store-info">
+									<view class="store-name-row">
+										<text class="store-name wes">{{ item.storeName }}</text>
+										<u-tag
+											v-if="item.selfOperated"
+											size="mini"
+											type="error"
+											:color="mainColor"
+											text="自营"
+											plain
+											shape="circle"
+										/>
+									</view>
+									<view class="store-tip">左滑可取消收藏</view>
+								</view>
+								<view class="store-enter">进店逛逛</view>
 							</view>
 						</u-swipe-action-item>
 					</u-swipe-action>
+					<view class="load-status" v-if="storeList.length">
+						{{ storeFinished ? '没有更多了' : storeLoading ? '加载中...' : '上拉加载更多' }}
+					</view>
 				</template>
 			</view>
-		</view>
+		</scroll-view>
 	</view>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
+import { onShow } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import { unitPrice } from '@/utils/filters.js'
+import { getThemeStyle } from '@/utils/theme'
 import {
 	getGoodsCollection,
 	getStoreCollection,
@@ -109,6 +145,7 @@ const store = useStore()
 
 const lightColor = computed(() => store.getters.lightColor)
 const mainColor = computed(() => store.getters.mainColor)
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const swipeOptions = computed(() => [
 	{
@@ -119,55 +156,93 @@ const swipeOptions = computed(() => [
 
 const tabCurrentIndex = ref(0)
 const navList = ref([
-	{ name: '商品(0)', params: { pageNumber: 1, pageSize: 10 } },
-	{ name: '店铺(0)', params: { pageNumber: 1, pageSize: 10 } },
+	{ name: '商品(0)' },
+	{ name: '店铺(0)' },
 ])
+
+const goodsParams = ref({ pageNumber: 1, pageSize: 10 })
+const storeParams = ref({ pageNumber: 1, pageSize: 10 })
+
 const goodsEmpty = ref(false)
 const storeEmpty = ref(false)
 const goodsList = ref<any[]>([])
 const storeList = ref<any[]>([])
+const goodsLoading = ref(false)
+const storeLoading = ref(false)
+const goodsFinished = ref(false)
+const storeFinished = ref(false)
+const refreshing = ref(false)
+const inited = ref(false)
 
 onShow(() => {
-	reloadOrLoadMore('reload')
-})
-
-onReachBottom(() => {
-	reloadOrLoadMore('next')
-})
-
-onPullDownRefresh(() => {
-	if (tabCurrentIndex.value === 0) {
-		navList.value[0].params.pageNumber = 1
-		goodsList.value = []
-		fetchGoodsList()
-	} else {
-		navList.value[1].params.pageNumber = 1
-		storeList.value = []
-		fetchStoreList()
+	if (!inited.value) {
+		inited.value = true
+		reloadAll()
+		return
 	}
+	reloadCurrent()
 })
 
 function hideLoadingIfNeeded() {
 	if (store.state.isShowToast) uni.hideLoading()
 }
 
-function reloadOrLoadMore(type: 'reload' | 'next') {
-	if (type === 'next') {
-		navList.value[tabCurrentIndex.value].params.pageNumber++
-		if (tabCurrentIndex.value === 0) {
-			fetchGoodsList()
-		} else {
-			fetchStoreList()
-		}
-		return
+function onTabChange(e: any) {
+	const index = typeof e === 'number' ? e : e?.index
+	if (typeof index === 'number') {
+		tabCurrentIndex.value = index
 	}
-	navList.value[0].params.pageNumber = 1
-	navList.value[1].params.pageNumber = 1
+	if (tabCurrentIndex.value === 0 && !goodsList.value.length && !goodsEmpty.value) {
+		reloadGoods()
+	}
+	if (tabCurrentIndex.value === 1 && !storeList.value.length && !storeEmpty.value) {
+		reloadStore()
+	}
+}
+
+function onRefresh() {
+	refreshing.value = true
+	reloadCurrent()
+}
+
+function loadMore() {
+	if (tabCurrentIndex.value === 0) {
+		if (goodsLoading.value || goodsFinished.value || goodsEmpty.value) return
+		goodsParams.value.pageNumber++
+		fetchGoodsList()
+	} else {
+		if (storeLoading.value || storeFinished.value || storeEmpty.value) return
+		storeParams.value.pageNumber++
+		fetchStoreList()
+	}
+}
+
+function reloadAll() {
+	reloadGoods()
+	reloadStore()
+}
+
+function reloadCurrent() {
+	if (tabCurrentIndex.value === 0) {
+		reloadGoods()
+	} else {
+		reloadStore()
+	}
+}
+
+function reloadGoods() {
+	goodsParams.value.pageNumber = 1
+	goodsFinished.value = false
 	goodsEmpty.value = false
-	storeEmpty.value = false
 	goodsList.value = []
-	storeList.value = []
 	fetchGoodsList()
+}
+
+function reloadStore() {
+	storeParams.value.pageNumber = 1
+	storeFinished.value = false
+	storeEmpty.value = false
+	storeList.value = []
 	fetchStoreList()
 }
 
@@ -182,9 +257,7 @@ function openSwipeItem(val: any, type: 'goods' | 'store') {
 function removeGoodsCollection(val: any) {
 	deleteGoodsCollection(val.skuId).then((res) => {
 		if (res.statusCode === 200) {
-			goodsList.value = []
-			navList.value[0].params.pageNumber = 1
-			fetchGoodsList()
+			reloadGoods()
 		}
 	})
 }
@@ -192,9 +265,7 @@ function removeGoodsCollection(val: any) {
 function removeStoreCollection(val: any) {
 	deleteStoreCollection(val.id).then((res) => {
 		if (res.statusCode === 200) {
-			storeList.value = []
-			navList.value[1].params.pageNumber = 1
-			fetchStoreList()
+			reloadStore()
 		}
 	})
 }
@@ -212,183 +283,210 @@ function goStoreMainPage(id: string) {
 }
 
 function fetchGoodsList() {
+	if (goodsLoading.value) return
+	goodsLoading.value = true
 	uni.showLoading({ title: '加载中' })
-	getGoodsCollection(navList.value[0].params, 'GOODS')
+	getGoodsCollection(goodsParams.value, 'GOODS')
 		.then((res) => {
+			goodsLoading.value = false
+			refreshing.value = false
 			hideLoadingIfNeeded()
-			uni.stopPullDownRefresh()
 			if (res.data.success) {
 				const data = res.data.result
-				navList.value[0].name = `商品(${data.total})`
-				goodsEmpty.value = data.total === 0
-				if (data.records?.length) {
-					const records = data.records.map((item: any) => ({ ...item, selected: false }))
+				navList.value[0].name = `商品(${data.total || 0})`
+				goodsEmpty.value = !data.total
+				const records = (data.records || []).map((item: any) => ({
+					...item,
+					selected: false,
+				}))
+				if (goodsParams.value.pageNumber === 1) {
+					goodsList.value = records
+				} else {
 					goodsList.value.push(...records)
 				}
+				goodsFinished.value =
+					!records.length || goodsList.value.length >= (data.total || 0)
 			}
 		})
 		.catch(() => {
+			goodsLoading.value = false
+			refreshing.value = false
 			hideLoadingIfNeeded()
-			uni.stopPullDownRefresh()
 		})
 }
 
 function fetchStoreList() {
+	if (storeLoading.value) return
+	storeLoading.value = true
 	uni.showLoading({ title: '加载中' })
-	getStoreCollection(navList.value[1].params, 'STORE')
+	getStoreCollection(storeParams.value, 'STORE')
 		.then((res) => {
+			storeLoading.value = false
+			refreshing.value = false
 			hideLoadingIfNeeded()
-			uni.stopPullDownRefresh()
 			if (res.data.success) {
 				const data = res.data.result
-				navList.value[1].name = `店铺(${data.total})`
-				storeEmpty.value = data.total === 0
-				if (data.records?.length) {
-					const records = data.records.map((item: any) => ({ ...item, selected: false }))
+				navList.value[1].name = `店铺(${data.total || 0})`
+				storeEmpty.value = !data.total
+				const records = (data.records || []).map((item: any) => ({
+					...item,
+					selected: false,
+				}))
+				if (storeParams.value.pageNumber === 1) {
+					storeList.value = records
+				} else {
 					storeList.value.push(...records)
 				}
+				storeFinished.value =
+					!records.length || storeList.value.length >= (data.total || 0)
 			}
 		})
 		.catch(() => {
+			storeLoading.value = false
+			refreshing.value = false
 			hideLoadingIfNeeded()
-			uni.stopPullDownRefresh()
 		})
 }
 </script>
 
 <style lang="scss">
-	page,
-	.content {
-		background: $page-color-base;
-		height: 100%;
-	}
+page {
+	background: #f8f8f8;
+	height: 100%;
+}
+</style>
 
-	.content {
-		width: 100%;
+<style lang="scss" scoped>
+.page {
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	background: #f8f8f8;
+	box-sizing: border-box;
+}
+
+.tabs-wrap {
+	flex-shrink: 0;
+	background: #fff;
+	border-bottom: 1rpx solid #f0f0f0;
+}
+
+.list-scroll {
+	flex: 1;
+	height: 0;
+	min-height: 0;
+}
+
+.tab-content {
+	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+}
+
+.empty-box {
+	margin-top: 120rpx;
+}
+
+.collect-swipe,
+:deep(.u-swipe-action),
+:deep(.u-swipe-action-item),
+:deep(.u-swipe-action-item__content) {
+	width: 100%;
+}
+
+:deep(.u-swipe-action-item__content) {
+	overflow: hidden;
+}
+
+.goods {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 24rpx;
+	margin-top: 16rpx;
+	background: #fff;
+
+	.goods-intro {
+		flex: 1;
+		min-width: 0;
+		margin-left: 24rpx;
 		display: flex;
 		flex-direction: column;
-		min-height: 100vh;
+		justify-content: space-between;
+		min-height: 140rpx;
 	}
 
-	.slot-wrap {
-		flex: 1;
-		display: flex;
-		justify-content: center;
-		padding: 0 20rpx;
-		box-sizing: border-box;
+	.goods-name {
+		font-size: 28rpx;
+		color: #333;
+		line-height: 1.4;
 	}
 
-	.collect-tabs {
-		width: 100%;
+	.goods-price {
+		margin-top: 16rpx;
+		font-size: 32rpx;
+		font-weight: 600;
+		color: var(--theme-light, #ff6b35);
 	}
+}
 
-	.collect-body {
-		flex: 1;
-		width: 100%;
-	}
+.store {
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	width: calc(100% - 32rpx);
+	margin: 16rpx auto 0;
+	padding: 24rpx;
+	background: #fff;
+	border-radius: 16rpx;
+}
 
-	.tab-content {
-		width: 100%;
-	}
+.store-logo {
+	flex-shrink: 0;
+	width: 96rpx;
+	height: 96rpx;
+	border-radius: 50%;
+	overflow: hidden;
+	background: #f5f5f5;
+}
 
-	:deep(.u-tabs),
-	:deep(.u-tabs__wrapper),
-	:deep(.u-tabs__wrapper__scroll-view-wrapper),
-	:deep(.u-tabs__wrapper__scroll-view),
-	:deep(.u-tabs__wrapper__nav) {
-		width: 100%;
-	}
+.store-info {
+	flex: 1;
+	min-width: 0;
+	margin: 0 20rpx;
+}
 
-	.collect-swipe,
-	:deep(.u-swipe-action),
-	:deep(.u-swipe-action-item),
-	:deep(.u-swipe-action-item__content) {
-		width: 100%;
-	}
+.store-name-row {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+}
 
-	:deep(.u-swipe-action-item__content) {
-		overflow: hidden;
-	}
+.store-name {
+	max-width: 360rpx;
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #333;
+}
 
-	.goods {
-		background-color: #fff;
-		border-bottom: 1px solid $border-color-light;
-		min-height: 190rpx;
-		box-sizing: border-box;
-		display: flex;
-		align-items: center;
-		padding: 30rpx 20rpx;
-		margin-top: 20rpx;
-		width: 100%;
+.store-tip {
+	margin-top: 10rpx;
+	font-size: 22rpx;
+	color: #999;
+}
 
-		.goods-intro {
-			flex: 1;
-			min-width: 0;
-			font-size: $font-base;
-			line-height: 48rpx;
-			margin-left: 30rpx;
+.store-enter {
+	flex-shrink: 0;
+	padding: 12rpx 20rpx;
+	border-radius: 100px;
+	border: 1rpx solid var(--theme-light, #ff6b35);
+	color: var(--theme-light, #ff6b35);
+	font-size: 24rpx;
+}
 
-			.goods-name {
-				line-height: 1.4em;
-				font-size: 24rpx;
-				max-height: 2.8em;
-				overflow: hidden;
-				color: #666;
-			}
-
-			.goods-sn {
-				color: #cccccc;
-				font-size: 24rpx;
-			}
-
-			.goods-price {
-				color: $light-color;
-			}
-		}
-	}
-
-	.store {
-		background-color: #fff;
-		border: 1px solid $border-color-light;
-		border-radius: 16rpx;
-		margin: 20rpx 10rpx;
-		width: calc(100% - 20rpx);
-		box-sizing: border-box;
-
-		.intro {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding: 0 30rpx 0 40rpx;
-			min-height: 170rpx;
-
-			.store-logo {
-				width: 102rpx;
-				height: 102rpx;
-				border-radius: 50%;
-				overflow: hidden;
-				flex-shrink: 0;
-			}
-
-			.store-name {
-				flex: 1;
-				min-width: 0;
-				margin-left: 30rpx;
-				line-height: 2em;
-
-				:first-child {
-					font-size: $font-base;
-				}
-			}
-
-			.store-collect {
-				flex-shrink: 0;
-				border-left: 1px solid $border-color-light;
-				padding-left: 20rpx;
-				text-align: center;
-				color: #999;
-				font-size: $font-sm;
-			}
-		}
-	}
+.load-status {
+	padding: 24rpx 0 8rpx;
+	text-align: center;
+	font-size: 24rpx;
+	color: #999;
+}
 </style>