refactor(order): 统一订单页面路由路径和优化导航
- 将订单详情页路由从`/pages/order/index`改为`/pages/order/detail` - 将支付成功页路由从`/pages/index/order-success`改为`/pages/order/success` - 移除个人中心不再使用的订单列表入口 - 优化订单详情页的商品信息展示逻辑 - 删除过时的迁移文档
This commit is contained in:
dzq
parent
3f0b5cb431
commit
107cb2e402
|
|
@ -182,7 +182,7 @@ async function handleSubmit() {
|
|||
|
||||
// 跳转到订单成功页面
|
||||
uni.navigateTo({
|
||||
url: `/pages/index/order-success?orderId=${data.orderId}`
|
||||
url: `/pages/order/success?orderId=${data.orderId}`
|
||||
});
|
||||
|
||||
// 根据模式清空对应的购物车
|
||||
|
|
|
|||
|
|
@ -127,20 +127,22 @@ onMounted(() => {
|
|||
<view class="button-group">
|
||||
<view class="section-title">个人中心</view>
|
||||
<view class="button-row">
|
||||
<view class="button-item" @click="navigateToPage('/pages/order/index')">
|
||||
<!-- <view class="button-item" @click="navigateToPage('/pages/order/index')">
|
||||
<wd-icon name="list" size="20px" color="#fff"></wd-icon>
|
||||
<text>订单列表</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="button-item" @click="navigateToPage('/pages/rental-list/index')">
|
||||
<wd-icon name="star" size="20px" color="#fff"></wd-icon>
|
||||
<text>我的柜子</text>
|
||||
</view>
|
||||
<view v-if="wxStore.isCabinetAdmin" class="button-item" @click="navigateToPage('/pages/cabinet/index')">
|
||||
<view class="button-placeholder"></view>
|
||||
<view class="button-placeholder"></view>
|
||||
<!-- <view v-if="wxStore.isCabinetAdmin" class="button-item" @click="navigateToPage('/pages/cabinet/index')">
|
||||
<wd-icon name="tools" size="20px" color="#fff"></wd-icon>
|
||||
<text>柜机管理</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="button-row">
|
||||
<!-- <view class="button-row">
|
||||
<view v-if="wxStore.isCabinetAdmin" class="button-item" @click="navigateToPage('/pages/approval/list/index')">
|
||||
<wd-icon name="secured" size="20px" color="#fff"></wd-icon>
|
||||
<text>审批中心</text>
|
||||
|
|
@ -150,7 +152,7 @@ onMounted(() => {
|
|||
<text>耗材核销</text>
|
||||
</view>
|
||||
<view class="button-placeholder"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<view class="tabs-container">
|
||||
<view class="tab-item" :class="{ active: activeTab === 0 }">
|
||||
未退还
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
**van-button → button**:
|
||||
```html
|
||||
<button class="btn btn-primary" size="mini" @tap="handleSubmit">
|
||||
提交
|
||||
</button>
|
||||
```
|
||||
|
||||
**van-image → image**:
|
||||
```html
|
||||
<image :src="imageUrl" mode="aspectFill" class="product-image" />
|
||||
```
|
||||
|
||||
**van-cell → 原生view**:
|
||||
```html
|
||||
<view class="info-item">
|
||||
<text class="label">订单号:</text>
|
||||
<text class="value">{{ orderId }}</text>
|
||||
</view>
|
||||
```
|
||||
|
||||
### 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
|
||||
<div @click="handleClick">点击</div>
|
||||
```
|
||||
|
||||
**改造后（小程序 @tap）**:
|
||||
```html
|
||||
<view @tap="handleClick">点击</view>
|
||||
```
|
||||
|
||||
### 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. 添加单元测试
|
||||
|
|
@ -139,32 +139,32 @@ onLoad((options: any) => {
|
|||
class="goods-item"
|
||||
>
|
||||
<image
|
||||
:src="item.goodsInfo.coverImg"
|
||||
:src="item.goodsInfo?.coverImg"
|
||||
mode="aspectFill"
|
||||
class="product-image"
|
||||
/>
|
||||
<view class="product-info">
|
||||
<view class="product-name-price">
|
||||
<text class="product-name text-ellipsis">
|
||||
{{ item.goodsInfo.goodsName }}
|
||||
{{ item.goodsInfo?.goodsName }}
|
||||
</text>
|
||||
<text class="product-price">¥{{ item.orderGoods.price.toFixed(2) }}</text>
|
||||
<text class="product-price">¥{{ item.orderGoods?.price.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="action-row">
|
||||
<text class="quantity">数量: {{ item.orderGoods.quantity }}</text>
|
||||
<text class="subtotal">小计: ¥{{ (item.orderGoods.price * item.orderGoods.quantity).toFixed(2) }}</text>
|
||||
<text class="quantity">数量: {{ item.orderGoods?.quantity }}</text>
|
||||
<text class="subtotal">小计: ¥{{ (item.orderGoods?.price * item.orderGoods?.quantity).toFixed(2) }}</text>
|
||||
<view class="button-group">
|
||||
<button
|
||||
v-if="[1, 5].includes(item.orderGoods.status) && [2, 3].includes(order.payStatus)"
|
||||
v-if="[1, 5].includes(item.orderGoods?.status) && [2, 3].includes(order.payStatus)"
|
||||
class="btn btn-primary"
|
||||
size="mini"
|
||||
@tap="handleOpenCabinet(item)"
|
||||
:disabled="isButtonDisabled[item.orderGoods.orderGoodsId]"
|
||||
:disabled="isButtonDisabled[item.orderGoods?.orderGoodsId]"
|
||||
>
|
||||
{{ isButtonDisabled[item.orderGoods.orderGoodsId] ? '处理中...' : '打开柜子' }}
|
||||
{{ isButtonDisabled[item.orderGoods?.orderGoodsId] ? '处理中...' : '打开柜子' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="item.orderGoods.status === 1 && [2, 3].includes(order.payStatus)"
|
||||
v-if="item.orderGoods?.status === 1 && [2, 3].includes(order.payStatus)"
|
||||
class="btn btn-outline"
|
||||
size="mini"
|
||||
@tap="handleRefund(item)"
|
||||
|
|
@ -172,14 +172,14 @@ onLoad((options: any) => {
|
|||
退还商品
|
||||
</button>
|
||||
</view>
|
||||
<text
|
||||
v-if="[2, 5, 6].includes(item.orderGoods?.status)"
|
||||
class="status-text"
|
||||
:class="`status-${item.orderGoods?.status}`"
|
||||
>
|
||||
{{ getOrderGoodsStatusText(item.orderGoods?.status) }}
|
||||
</text>
|
||||
</view>
|
||||
<text
|
||||
v-if="[2, 5, 6].includes(item.orderGoods.status)"
|
||||
class="status-text"
|
||||
:class="`status-${item.orderGoods.status}`"
|
||||
>
|
||||
{{ getOrderGoodsStatusText(item.orderGoods.status) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -321,6 +321,7 @@ onLoad((options: any) => {
|
|||
|
||||
.btn {
|
||||
padding: 0 24rpx;
|
||||
margin: 0;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
border-radius: 28rpx;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ function backToHome() {
|
|||
// 跳转到订单详情
|
||||
function goToOrderDetail() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/index?id=${orderId.value}`
|
||||
url: `/pages/order/detail?id=${orderId.value}`
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue