From 7835ed46af96d95957014ada87888a0637b246ff Mon Sep 17 00:00:00 2001 From: dzq Date: Mon, 31 Mar 2025 09:42:26 +0800 Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E8=AE=A2=E5=8D=95=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/me/index.vue | 100 ++++++++------ src/pages/order/Success.vue | 22 ++-- src/pages/order/components/OrderList.vue | 158 +++++++++++++++++++++++ src/pages/order/index.vue | 129 ++++++++++++++++++ src/pages/product/ProductList.vue | 109 ++++++---------- src/pinia/stores/order.ts | 1 + src/pinia/stores/wx.ts | 14 +- src/router/index.ts | 78 ++++++++++- types/auto/components.d.ts | 4 +- 9 files changed, 485 insertions(+), 130 deletions(-) create mode 100644 src/pages/order/components/OrderList.vue create mode 100644 src/pages/order/index.vue diff --git a/src/pages/me/index.vue b/src/pages/me/index.vue index 017118a..3114617 100644 --- a/src/pages/me/index.vue +++ b/src/pages/me/index.vue @@ -1,53 +1,77 @@ + + diff --git a/src/pages/order/Success.vue b/src/pages/order/Success.vue index 6ddcaba..5464a25 100644 --- a/src/pages/order/Success.vue +++ b/src/pages/order/Success.vue @@ -13,19 +13,23 @@ const orderStore = useOrderStore() const wxStore = useWxStoreOutside() const orderId = ref(Number(route.query.orderId)) const currentOrder = ref() -const isButtonDisabled = ref(false) +const isButtonDisabled = ref>({}) async function handleOpenCabinet(orderId: number, orderGoodsId: number) { - isButtonDisabled.value = true + isButtonDisabled.value[orderGoodsId] = true try { - await openCabinetApi(orderId, orderGoodsId) + const result = await openCabinetApi(orderId, orderGoodsId) + if (result.code !== 0) { + showFailToast(result.message) + return + } showSuccessToast('柜口已成功开启') } catch (error) { showFailToast('开启失败，请稍后重试') } finally { - setTimeout(() => { - isButtonDisabled.value = false - }, 5000) + setTimeout((currentId) => { + delete isButtonDisabled.value[currentId] + }, 5000, orderGoodsId) } } @@ -67,7 +71,7 @@ watch(() => orderId.value, async (newVal) => { {{ item.goodsInfo.goodsName }}
- ¥{{ (item.goodsInfo.price / 100).toFixed(2) }} + ¥{{ item.goodsInfo.price.toFixed(2) }}
orderId.value, async (newVal) => { size="small" class="open-btn add-cart-btn" @click.stop="handleOpenCabinet(currentOrder.orderId, item.orderGoods.orderGoodsId)" - :disabled="isButtonDisabled" + :disabled="isButtonDisabled[item.orderGoods.orderGoodsId]" > - {{ isButtonDisabled ? '处理中...' : '打开柜口' }} + {{ isButtonDisabled[item.orderGoods.orderGoodsId] ? '处理中...' : '打开柜口' }}
diff --git a/src/pages/order/components/OrderList.vue b/src/pages/order/components/OrderList.vue new file mode 100644 index 0000000..05442fd --- /dev/null +++ b/src/pages/order/components/OrderList.vue @@ -0,0 +1,158 @@ + + + + + \ No newline at end of file diff --git a/src/pages/order/index.vue b/src/pages/order/index.vue new file mode 100644 index 0000000..12b3736 --- /dev/null +++ b/src/pages/order/index.vue @@ -0,0 +1,129 @@ + + + + + \ No newline at end of file diff --git a/src/pages/product/ProductList.vue b/src/pages/product/ProductList.vue index a55c259..5e977a5 100644 --- a/src/pages/product/ProductList.vue +++ b/src/pages/product/ProductList.vue @@ -96,6 +96,10 @@ function getCartItemCount(productId: number) { return item ? item.quantity : 0 } +const currentProducts = computed(() => { + return categories.value.filter(c => c.label === labels.value[activeCategory.value].id) +}) + // 组件挂载时添加滚动监听 onMounted(() => { scrollListener.push(scrollContainer.value?.addEventListener("scroll", throttledScroll)) @@ -129,24 +133,14 @@ function handleCheckout() {
-
+

- {{ category.name }} + {{ labels[activeCategory].name }}

- + @@ -249,10 +210,14 @@ function handleCheckout() { flex: 1; min-height: 0; position: relative; - border-top: 1px solid #e0e0e0; /* 顶部边框 */ - border-top-left-radius: 8px; /* 左上圆角 */ - border-top-right-radius: 8px; /* 右上圆角 */ - overflow: hidden; /* 确保圆角生效 */ + border-top: 1px solid #e0e0e0; + /* 顶部边框 */ + border-top-left-radius: 8px; + /* 左上圆角 */ + border-top-right-radius: 8px; + /* 右上圆角 */ + overflow: hidden; + /* 确保圆角生效 */ } .category-nav { @@ -387,19 +352,26 @@ function handleCheckout() { .shop { display: flex; flex-direction: column; - height: 100vh; /* 外层容器设置视口高度 */ + height: 100%; + /* 外层容器设置视口高度 */ } + .shop-header { overflow: hidden; - transition: height 0.3s ease; /* 添加高度过渡动画 */ + transition: height 0.3s ease; + /* 添加高度过渡动画 */ } .shop-cover { /* height: 150px; */ width: 100%; - transform: translateY(calc((150px - var(--header-height)) / 2) /* 垂直居中 */); - scale: calc(1 + (150 - var(--header-height)) / 150); /* 保持图片缩放比例 */ + transform: translateY(calc((150px - var(--header-height)) / 2) + /* 垂直居中 */ + ); + scale: calc(1 + (150 - var(--header-height)) / 150); + /* 保持图片缩放比例 */ } + .detail-container { height: 100%; } @@ -438,6 +410,7 @@ function handleCheckout() { border-radius: 16px; padding: 0 24px; } + .cart-actions { margin-left: auto; align-self: flex-end; diff --git a/src/pinia/stores/order.ts b/src/pinia/stores/order.ts index 60fab2e..9c9a222 100644 --- a/src/pinia/stores/order.ts +++ b/src/pinia/stores/order.ts @@ -28,6 +28,7 @@ export const useOrderStore = defineStore("order", () => { goodsInfo: data.goods.find(g => g.goodsId === og.goodsId)! })) })) + .sort((a, b) => b.orderId - a.orderId) // 保留原始数据结构 orderGoods.value = data.orderGoods diff --git a/src/pinia/stores/wx.ts b/src/pinia/stores/wx.ts index ac7f4f5..fb153fa 100644 --- a/src/pinia/stores/wx.ts +++ b/src/pinia/stores/wx.ts @@ -10,18 +10,6 @@ export const useWxStore = defineStore("wx", () => { // 用户 openid const openid = ref("") - // 模拟微信授权获取 code（需对接实际微信接口） - const getWxAuth = async () => { - // 这里应替换为实际微信授权逻辑 - return new Promise((resolve) => { - setTimeout(() => { - code.value = "模拟的微信code" - state.value = Date.now().toString() - resolve() - }, 1000) - }) - } - // 设置 openid const setOpenid = (id: string) => { openid.value = id @@ -48,7 +36,7 @@ export const useWxStore = defineStore("wx", () => { (window as any).testWxSetOpenid = setOpenid - return { code, state, openid, getWxAuth, setOpenid, handleWxCallback } + return { code, state, openid, setOpenid, handleWxCallback } }) /** diff --git a/src/router/index.ts b/src/router/index.ts index 3b974ee..803d31a 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -37,6 +37,24 @@ export const routes: RouteRecordRaw[] = [ requiresAuth: true } }, + { + path: '/order-list', + name: 'OrderList', + component: () => import('@/pages/order/components/OrderList.vue'), + meta: { + title: '订单列表', + requiresAuth: true + } + }, + { + path: '/order/:id', + name: 'OrderDetail', + component: () => import('@/pages/order/index.vue'), + meta: { + title: '订单详情', + requiresAuth: true + } + }, { path: "/product/checkout", component: () => import("@/pages/product/components/checkout.vue"), @@ -55,7 +73,29 @@ export const routes: RouteRecordRaw[] = [ layout: { navBar: { showNavBar: false, - showLeftArrow: true + showLeftArrow: false + }, + tabbar: { + showTabbar: true, + icon: "home-o" + } + } + } + }, + { + path: "/me", + component: () => import("@/pages/me/index.vue"), + name: "Me", + meta: { + title: "我的", + layout: { + navBar: { + showNavBar: true, + showLeftArrow: false + }, + tabbar: { + showTabbar: true, + icon: "user-o" } } } @@ -71,6 +111,15 @@ export const routes: RouteRecordRaw[] = [ requiresAuth: true } }, + { + path: '/order/:id', + name: 'OrderDetail', + component: () => import('@/pages/order/index.vue'), + meta: { + title: '订单详情', + requiresAuth: true + } + }, { path: "/login", component: () => import("@/pages/login/index.vue"), @@ -115,6 +164,15 @@ export const routes: RouteRecordRaw[] = [ footer: true } } + }, + { + path: '/order-list', + name: 'OrderList', + component: () => import('@/pages/order/OrderList.vue'), + meta: { + title: '订单列表', + requiresAuth: true + } } ] @@ -200,6 +258,15 @@ export const demoRoutes: RouteRecordRaw[] = [ } } } + }, + { + path: '/order-list', + name: 'OrderList', + component: () => import('@/pages/order/OrderList.vue'), + meta: { + title: '订单列表', + requiresAuth: true + } } ] */ @@ -246,6 +313,15 @@ export const demoRoutes: RouteRecordRaw[] = [ } } } + }, + { + path: '/order-list', + name: 'OrderList', + component: () => import('@/pages/order/OrderList.vue'), + meta: { + title: '订单列表', + requiresAuth: true + } } ] */ diff --git a/types/auto/components.d.ts b/types/auto/components.d.ts index b3d0c15..b415bae 100644 --- a/types/auto/components.d.ts +++ b/types/auto/components.d.ts @@ -16,7 +16,8 @@ declare module 'vue' { VanCellGroup: typeof import('vant/es')['CellGroup'] VanConfigProvider: typeof import('vant/es')['ConfigProvider'] VanDivider: typeof import('vant/es')['Divider'] - VanField: typeof import('vant/es')['Field'] + VanGrid: typeof import('vant/es')['Grid'] + VanGridItem: typeof import('vant/es')['GridItem'] VanIcon: typeof import('vant/es')['Icon'] VanImage: typeof import('vant/es')['Image'] VanLoading: typeof import('vant/es')['Loading'] @@ -25,5 +26,6 @@ declare module 'vue' { VanSidebarItem: typeof import('vant/es')['SidebarItem'] VanTabbar: typeof import('vant/es')['Tabbar'] VanTabbarItem: typeof import('vant/es')['TabbarItem'] + VanTag: typeof import('vant/es')['Tag'] } }