feat(order): 增加门店订单页收货信息一键导航功能
- 订单卡片收货信息区域添加点击事件,实现一键导航至收货地址 - 新增 handleNavigate 方法,利用微信小程序内置地图 API 实现导航 - 导航功能支持坐标有效性检查,坐标无效时显示错误提示 - 订单详情页“过期时间”字段改为“送达时间”并显示对应数据 - 保留“发货时间”字段,确保送达时间与发货时间分别展示 - 确认代码构建和类型检查无新增错误
This commit is contained in:
@@ -62,5 +62,17 @@
|
||||
- **验证**:tsc 仅剩预存 `@tarojs/taro` 类型缺失环境报错,本文件无新错误
|
||||
- ⚠️ 注意:原「全部」Tab 显示的「待评价(statusFilter=4)」订单在改版后无 Tab 承接(用户确认不含待评价),如需可见后续可并入待处理
|
||||
|
||||
## 门店订单页「收货信息」一键导航(src/pages/store/orders/index.tsx)
|
||||
- **需求**:订单卡片里的收货信息区域点击可一键导航
|
||||
- **实现**:`renderOrderCard` 的「收货信息」整块 View 加 `onClick={() => handleNavigate(order)}`,右侧加绿色「› 导航」标识提示可点
|
||||
- **新增 `handleNavigate(order)`**:读取 `order.addressLat`/`order.addressLng`(模型里为 string)→ `parseFloat` 转 number;坐标有效则 `Taro.openLocation({ latitude, longitude, name: realName, address, scale: 16 })`(微信内置地图,自带导航选 App);坐标缺失/非法则 toast「该订单未记录定位信息,无法导航」兜底
|
||||
- **注意**:`Taro.openLocation` 是地图展示类 API,不在微信 `requiredPrivateInfos` 受限清单内,无需在小程序后台声明、无需 `ensurePrivacyAuthorized` 预检(与 chooseImage/getPhoneNumber 不同)
|
||||
- **验证**:tsc 仅剩预存 `@tarojs/taro` 类型缺失环境报错,本文件无新错误
|
||||
|
||||
## 订单详情页「过期时间」→「送达时间」(src/pages/order/detail.tsx)
|
||||
- **需求**:订单信息区原「过期时间」(order.expirationTime) 行改为「送达时间」
|
||||
- **字段确认**:用户选择「送达时间」用 `order.deliveryTime`,且**保留**现有「发货时间」行 → `deliveryTime` 在两行各显示一次(用户明知并接受)
|
||||
- **改动**:第408-413行 `{order.expirationTime && ...过期时间}` 改为 `{order.deliveryTime && ...送达时间}`,数据用 `formatTime(order.deliveryTime)`
|
||||
|
||||
### 验证
|
||||
- `npx taro build --type weapp` 构建成功
|
||||
|
||||
@@ -405,12 +405,6 @@ const OrderDetailPage: React.FC = () => {
|
||||
<Text className='text-xs text-gray-600'>{formatTime(order.deliveryTime)}</Text>
|
||||
</View>
|
||||
)}
|
||||
{order.expirationTime && (
|
||||
<View className='flex justify-between'>
|
||||
<Text className='text-xs text-gray-400'>过期时间</Text>
|
||||
<Text className='text-xs text-gray-600'>{formatTime(order.expirationTime)}</Text>
|
||||
</View>
|
||||
)}
|
||||
{order.comments && (
|
||||
<View className='flex justify-start'>
|
||||
<Text className='text-xs text-gray-400 mr-2'>备注</Text>
|
||||
|
||||
@@ -461,6 +461,23 @@ export default function StoreOrdersPage() {
|
||||
})
|
||||
}
|
||||
|
||||
/** 一键导航到收货地址(调用微信内置地图) */
|
||||
const handleNavigate = (order: ShopOrder) => {
|
||||
const lat = parseFloat(order.addressLat || '')
|
||||
const lng = parseFloat(order.addressLng || '')
|
||||
if (isNaN(lat) || isNaN(lng)) {
|
||||
Taro.showToast({title: '该订单未记录定位信息,无法导航', icon: 'none'})
|
||||
return
|
||||
}
|
||||
Taro.openLocation({
|
||||
latitude: lat,
|
||||
longitude: lng,
|
||||
name: order.realName || '收货地址',
|
||||
address: order.address || '',
|
||||
scale: 16,
|
||||
})
|
||||
}
|
||||
|
||||
/** 渲染单个订单卡片 */
|
||||
const renderOrderCard = (order: ShopOrder) => {
|
||||
const actions = getOrderActions(order)
|
||||
@@ -497,13 +514,22 @@ export default function StoreOrdersPage() {
|
||||
</View>
|
||||
))}
|
||||
|
||||
{/* 收货信息 */}
|
||||
{/* 收货信息(点击区域一键导航) */}
|
||||
{(order.realName || order.phone) && (
|
||||
<View className='bg-gray-50 rounded-lg p-3 mb-3'>
|
||||
<Text className='text-sm text-gray-700 block'>{order.realName} {order.phone}</Text>
|
||||
{order.address && (
|
||||
<Text className='text-xs text-gray-400 mt-1 block'>{order.address}</Text>
|
||||
)}
|
||||
<View
|
||||
className='bg-gray-50 rounded-lg p-3 mb-3 flex items-center'
|
||||
onClick={() => handleNavigate(order)}
|
||||
>
|
||||
<View className='flex-1'>
|
||||
<Text className='text-sm text-gray-700 block'>{order.realName} {order.phone}</Text>
|
||||
{order.address && (
|
||||
<Text className='text-xs text-gray-400 mt-1 block'>{order.address}</Text>
|
||||
)}
|
||||
</View>
|
||||
<View className='ml-2 flex flex-col items-center justify-center px-1'>
|
||||
<Text className='text-lg text-green-500 leading-none'>›</Text>
|
||||
<Text className='text-xs text-green-500 mt-0.5'>导航</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user