diff --git a/src/pages/index/checkout.vue b/src/pages/index/checkout.vue index 9acf8a8..40acdbe 100644 --- a/src/pages/index/checkout.vue +++ b/src/pages/index/checkout.vue @@ -182,7 +182,7 @@ async function handleSubmit() { // 跳转到订单成功页面 uni.navigateTo({ - url: `/pages/index/order-success?orderId=${data.orderId}` + url: `/pages/order/success?orderId=${data.orderId}` }); // 根据模式清空对应的购物车 diff --git a/src/pages/me/index.vue b/src/pages/me/index.vue index d82c765..fb7d41c 100644 --- a/src/pages/me/index.vue +++ b/src/pages/me/index.vue @@ -127,20 +127,22 @@ onMounted(() => { 个人中心 - + 我的柜子 - + + + - + diff --git a/src/pages/order/README.md b/src/pages/order/README.md deleted file mode 100644 index 12ceeee..0000000 --- a/src/pages/order/README.md +++ /dev/null @@ -1,265 +0,0 @@ -# 订单页面迁移文档 - -## 迁移概述 - -本次迁移将第三方代码库中的订单相关页面整合到主项目的 `src/pages/order` 目录下，包括订单列表、订单详情和支付成功页面。 - -## 迁移文件清单 - -### 1. 订单列表组件 (`src/pages/order/components/OrderList.vue`) -- **源文件**: `doc\thirdParty\src\pages\order\components\OrderList.vue` -- **功能**: 订单列表展示与筛选 -- **核心特性**: - - 支持未退还/已退还订单切换 - - 订单状态展示（待付款、已付款、已发货、已完成、已取消） - - 下拉刷新功能 - - 跳转到订单详情 - -### 2. 订单详情页面 (`src/pages/order/index.vue`) -- **源文件**: `doc\thirdParty\src\pages\order\index.vue` -- **功能**: 订单详细信息展示 -- **核心特性**: - - 订单基本信息展示（订单号、状态、总价、支付时间） - - 商品列表展示 - - 打开柜子功能 - - 退还商品功能 - - 下拉刷新 - -### 3. 支付成功页面 (`src/pages/order/Success.vue`) -- **源文件**: `doc\thirdParty\src\pages\order\Success.vue` -- **功能**: 支付成功后的操作引导 -- **核心特性**: - - 支付成功提示 - - 打开柜口功能 - - 返回首页和查看订单详情操作 - -## 关键改造点 - -### 1. Vue 3 语法适配 - -**改造前（Vue 2）**: -```typescript -export default { - name: 'OrderList', - data() { - return { - activeTab: 0 - } - }, - methods: { - handleTabChange(tabIndex) { - // ... - } - } -} -``` - -**改造后（Vue 3）**: -```typescript -const activeTab = ref(0) - -const handleTabChange = (tabIndex: number) => { - activeTab.value = tabIndex - // ... -} -``` - -### 2. 路由与页面配置 - -**改造前（H5 Router）**: -```typescript -const router = useRouter() -router.push('/order/' + orderId) -``` - -**改造后（Uni-App）**: -```typescript -uni.navigateTo({ - url: `/pages/order/index?id=${orderId}` -}) - -definePage({ - style: { - navigationBarTitleText: '订单详情', - }, -}) -``` - -### 3. API调用适配 - -**改造前（H5）**: -```typescript -import { showSuccessToast, showFailToast } from 'vant' -showSuccessToast('柜口已成功开启') -``` - -**改造后（Uni-App）**: -```typescript -uni.showToast({ - title: '柜口已成功开启', - icon: 'success' -}) -``` - -### 4. 状态管理 - -已整合到项目的 Pinia 状态管理体系： -- `useOrderStore`: 订单数据管理 -- `useWxStore`: 微信相关功能 -- `useAb98UserStore`: 用户信息管理 - -### 5. UI组件库适配 - -从 `vant` 组件库迁移到原生微信小程序组件： - -**van-tabs → 原生标签页**: -```html - - - 未退还 - - -``` - -**van-button → button**: -```html - -``` - -**van-image → image**: -```html - -``` - -**van-cell → 原生view**: -```html - - 订单号: - {{ orderId }} - -``` - -### 6. 样式单位转换 - -**改造前（H5 px）**: -```scss -.order-detail { - padding: 20px; - .goods-item { - padding: 15px 0; - font-size: 14px; - } -} -``` - -**改造后（小程序 rpx）**: -```scss -.order-detail { - padding: 20rpx; - .goods-item { - padding: 24rpx 0; - font-size: 28rpx; - } -} -``` - -### 7. 事件处理 - -**改造前（H5 @click）**: -```html -
点击
-``` - -**改造后（小程序 @tap）**: -```html -点击 -``` - -### 8. 数据存储 - -**改造前（localStorage）**: -```typescript -localStorage.setItem('userToken', token) -const token = localStorage.getItem('userToken') -``` - -**改造后（uni.setStorage）**: -```typescript -uni.setStorageSync('userToken', token) -const token = uni.getStorageSync('userToken') -``` - -## 业务逻辑适配 - -### 1. 双模式支持 -支持普通用户和企业微信用户的不同登录方式： -```typescript -const isInternal = corpidLogin ? 2 : ab98Userid ? 1 : 0 -``` - -### 2. 柜子开启流程 -根据用户类型调用不同的API参数： -```typescript -const result = await openCabinetApi(orderId, orderGoodsId, { - userid: isInternal === 2 ? qyUserid : ab98Userid, - isInternal: isInternal, - name: isInternal === 2 ? qyName : name, - mobile: tel, - operationType: 1 -}) -``` - -## 项目结构 - -``` -src/pages/order/ -├── README.md # 迁移文档 -├── index.vue # 订单详情页面 -├── Success.vue # 支付成功页面 -└── components/ - └── OrderList.vue # 订单列表组件 -``` - -## 注意事项 - -1. **页面路径**: 订单相关页面位于 `src/pages/order/` 目录下 -2. **页面跳转**: 使用 `uni.navigateTo` 进行页面跳转 -3. **状态管理**: 使用 Pinia store 进行状态管理 -4. **单位统一**: 所有尺寸统一使用rpx -5. **事件处理**: 使用 `@tap` 而非 `@click` -6. **图片处理**: 必须使用 `mode` 属性指定裁剪模式 -7. **TypeScript**: 所有组件均使用 TypeScript 类型检查 -8. **下拉刷新**: 使用 `onPullDownRefresh` 生命周期 - -## 使用示例 - -### 跳转到订单列表 -```typescript -uni.navigateTo({ - url: '/pages/order/components/OrderList' -}) -``` - -### 跳转到订单详情 -```typescript -uni.navigateTo({ - url: `/pages/order/index?id=${orderId}` -}) -``` - -### 跳转到支付成功页 -```typescript -uni.navigateTo({ - url: `/pages/order/Success?orderId=${orderId}` -}) -``` - -## 下一步计划 - -1. 添加订单状态变更的实时更新 -2. 优化订单列表的虚拟滚动 -3. 添加订单搜索功能 -4. 完善错误处理和加载状态 -5. 添加单元测试 diff --git a/src/pages/order/detail.vue b/src/pages/order/detail.vue index 662fcd9..244ca81 100644 --- a/src/pages/order/detail.vue +++ b/src/pages/order/detail.vue @@ -139,32 +139,32 @@ onLoad((options: any) => { class="goods-item" > - {{ item.goodsInfo.goodsName }} + {{ item.goodsInfo?.goodsName }} - ¥{{ item.orderGoods.price.toFixed(2) }} + ¥{{ item.orderGoods?.price.toFixed(2) }} - 数量: {{ item.orderGoods.quantity }} - 小计: ¥{{ (item.orderGoods.price * item.orderGoods.quantity).toFixed(2) }} + 数量: {{ item.orderGoods?.quantity }} + 小计: ¥{{ (item.orderGoods?.price * item.orderGoods?.quantity).toFixed(2) }} + + {{ getOrderGoodsStatusText(item.orderGoods?.status) }} + - - {{ getOrderGoodsStatusText(item.orderGoods.status) }} - @@ -321,6 +321,7 @@ onLoad((options: any) => { .btn { padding: 0 24rpx; + margin: 0; height: 56rpx; line-height: 56rpx; border-radius: 28rpx; diff --git a/src/pages/order/index.vue b/src/pages/order/index.vue index 77f66e0..5ea8245 100644 --- a/src/pages/order/index.vue +++ b/src/pages/order/index.vue @@ -45,9 +45,13 @@ const getStatusText = (status: number) => { // 跳转到订单详情 const goToOrderDetail = (orderId: number) => { uni.navigateTo({ - url: `/pages/order/index?id=${orderId}` + url: `/pages/order/detail?id=${orderId}` }) } + +onMounted(() => { + orderStore.getOrders(wxStore.corpid, wxStore.openid, wxStore.qyUserId, hasReturn.value) +})