From a2fadc57b8aeb990f96b75f3685953c99beade89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=9D=E5=BF=83?= <13773726377@163.com> Date: Fri, 10 Apr 2026 15:47:09 +0800 Subject: [PATCH] 1 --- .../client/category/components/GoodItem.vue | 308 ++++++++---------- src/pages/client/category/index.vue | 91 +++++- src/pages/client/home/index.vue | 52 ++- src/pages/client/mine/index.vue | 25 ++ src/pages/client/order/create.vue | 105 +++--- src/pages/client/shop/components/GoodItem.vue | 23 +- src/utils/goodsCache.js | 273 ++++++++++++++++ 7 files changed, 622 insertions(+), 255 deletions(-) create mode 100644 src/utils/goodsCache.js diff --git a/src/pages/client/category/components/GoodItem.vue b/src/pages/client/category/components/GoodItem.vue index 6df3a43..d93cc99 100644 --- a/src/pages/client/category/components/GoodItem.vue +++ b/src/pages/client/category/components/GoodItem.vue @@ -1,196 +1,146 @@ + .buy-now-btn { + background: #FF19A0; + color: #fff; + font-size: 20rpx; + padding: 10rpx 20rpx; + border-radius: 30rpx; + font-weight: 500; + flex-shrink: 0; + } + } + \ No newline at end of file diff --git a/src/pages/client/category/index.vue b/src/pages/client/category/index.vue index 86a4078..fdb343c 100644 --- a/src/pages/client/category/index.vue +++ b/src/pages/client/category/index.vue @@ -70,8 +70,14 @@ - + + + + + + @@ -109,6 +115,7 @@ import CategoryModal from "./components/CategoryModal.vue"; import { getGoodsListData } from "../../../api/shop"; +import { getCategoryGoodsWithCache } from "@/utils/goodsCache"; export default { components: { @@ -179,6 +186,12 @@ export default { ) || {} ); }, + leftColumnGoods() { + return this.goodsList.filter((v, i) => i % 2 === 0); + }, + rightColumnGoods() { + return this.goodsList.filter((v, i) => i % 2 === 1); + }, }, mounted() { this.getCategoryList(); @@ -195,6 +208,10 @@ export default { }, onShow() { this.getCartListData(); + // 页面显示时检查是否需要刷新商品数据 + if (this.selectCategoryId) { + this.getShopList(false); + } }, watch: { selectCategoryId(val) { @@ -224,27 +241,57 @@ export default { } }); }, - changeCateg(item) { + changeCateg(item) { this.changeId = item.id this.selectCategoryId = item.id; + this.page = 1; // 切换分类时重置分页 + this.goodsList = []; // 清空当前商品列表 this.showAllCategory = false; - // console.log(item,'--') - + this.getShopList(true); // 切换分类时强制刷新 }, // 商品列表 - getShopList() { - getGoodsListData({ + getShopList(forceRefresh = false) { + // 如果不是第一页，直接请求不使用缓存（分页加载） + if (this.page > 1) { + getGoodsListData({ + type: this.changeId, + p: this.page, + num: this.size, + keyword: "", + is_tui: 0, + }) + .then((res) => { + const list = res?.data || []; + this.goodsList = [...this.goodsList, ...list]; + this.total = res?.count || 0; + }) + .finally(() => { + this.isLoading = false; + this.refreshTriggered = false; + }); + return; + } + + // 第一页使用缓存 + const params = { type: this.changeId, p: this.page, num: this.size, keyword: "", is_tui: 0, - }) + }; + + getCategoryGoodsWithCache(params, forceRefresh) .then((res) => { const list = res?.data || []; - this.goodsList = - this.page === 1 ? list : [...this.goodsList, ...list]; - this.total = res?.count || 0; + // 只有当数据有变化时才更新商品列表，避免不必要的刷新 + if (res.hasChanged !== false || this.goodsList.length === 0) { + this.goodsList = list; + } + this.total = res?.count || list.length || 0; + }) + .catch((err) => { + console.error('获取商品列表失败', err); }) .finally(() => { this.isLoading = false; @@ -349,12 +396,12 @@ export default { url: `/pages/client/shop/details?product_id=${details.product_id}&petOrderId=${this.petOrderId}&petOrderAddressId=${this.petOrderAddressId}`, }); }, - onRefresh() { + onRefresh() { this.refreshTriggered = true; this.page = 1; this.size = 10; this.total = 0; - this.getShopList(); + this.getShopList(true); // 下拉刷新时强制刷新 }, onLoadMore() { if (!this.isLoading && this.total > this.goodsList.length) { @@ -589,6 +636,24 @@ export default { .category-right { flex: 1; height: 100%; + + .goods-list { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + margin-top: 20rpx; + padding: 0 20rpx; + + .goods-list-item { + flex: 1; + min-width: 0; + + &.left { + margin-right: 20rpx; + } + } + } } } } diff --git a/src/pages/client/home/index.vue b/src/pages/client/home/index.vue index 38ed405..534a22a 100644 --- a/src/pages/client/home/index.vue +++ b/src/pages/client/home/index.vue @@ -48,6 +48,9 @@ 注册/登陆 + + 退出登录 + @@ -59,11 +62,11 @@ --> - - @@ -85,6 +88,9 @@ import { import { userWllet } from "../../../api/login"; +import { + loginOut, +} from "../../../api/user"; import WeChatCopyModal from "@/components/WeChatCopyModal.vue"; import GoodItem from "../shop/components/GoodItem.vue"; import DraggableContact from "@/components/DraggableContact.vue"; @@ -92,6 +98,7 @@ import { getGoodsClassify, getGoodsListData } from "@/api/shop"; +import { getHomeGoodsWithCache } from "@/utils/goodsCache"; export default { name: "HomePage", @@ -174,19 +181,28 @@ export default { created() { this.getGoodsList() }, + onShow() { + // 页面显示时检查是否需要刷新商品数据 + this.getGoodsList(false); + }, methods: { - getGoodsList() { + getGoodsList(forceRefresh = false) { if (this.isLoadingGoods) return; this.isLoadingGoods = true; const params = { type: 0 } - getGoodsListData(params) + getHomeGoodsWithCache(params, forceRefresh) .then((res) => { const list = res?.data.data.products || []; - this.goodsList = list; - console.log(this.goodsList,'???') - this.goodsTotal = res?.count || 0; + // 只有当数据有变化时才更新商品列表，避免不必要的刷新 + if (res.hasChanged !== false || this.goodsList.length === 0) { + this.goodsList = list; + } + this.goodsTotal = res?.count || list.length || 0; + }) + .catch((err) => { + console.error('获取商品列表失败', err); }) .finally(() => { this.isLoadingGoods = false; @@ -198,6 +214,17 @@ export default { url: "/pages/client/auth/index", }); }, + logout() { + loginOut(); + // 清除Vuex中的用户状态 + this.$store.dispatch('user/deleteToken'); + this.$store.dispatch('user/clearUserInfo'); + // 清除本地缓存 + uni.clearStorageSync(); + uni.reLaunch({ + url: "/pages/client/auth/index", + }); + }, // 统一的 token 检查方法，未登录时弹窗让用户自主选择 async checkTokenAndExecute(callback) { const token = uni.getStorageSync('token'); @@ -398,6 +425,7 @@ export default { justify-content: flex-start; align-items: flex-start; margin-top: 50rpx; + padding: 0 20rpx; .goods-list-item { flex: 1; @@ -591,6 +619,16 @@ export default { margin-left: 8rpx; } } + + .logoutBtn { + background: linear-gradient(270deg, #FF19A0 0%, #FF6BB3 100%); + border-radius: 218px; + color: #fff; + font-size: 23rpx; + padding: 16rpx 24rpx; + display: flex; + align-items: center; + } } .shadowBackground { diff --git a/src/pages/client/mine/index.vue b/src/pages/client/mine/index.vue index e25669b..59b40db 100644 --- a/src/pages/client/mine/index.vue +++ b/src/pages/client/mine/index.vue @@ -14,12 +14,18 @@ {{ userInfo.userID && userInfo.username ? userInfo.username : '嗨，你好呀' }} + + {{ userInfo.phone }} + + + 退出登录 + 需付款 ￥{{ payPrice }} - + -->