赵忠林
1fa58040f3
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
import React from 'react'
|
||
import { View, Text } from '@tarojs/components'
|
||
import Taro from '@tarojs/taro'
|
||
import { useAddress } from '@/hooks/useAddress'
|
||
import AddressCard from '@/components/business/AddressCard'
|
||
|
||
definePageConfig({
|
||
navigationBarTitleText: '确认兑换',
|
||
})
|
||
|
||
const ExchangePage: React.FC = () => {
|
||
const { defaultAddress } = useAddress()
|
||
|
||
return (
|
||
<View className="bg-gray-100 flex flex-col" style={{ minHeight: '100vh' }}>
|
||
<View className='flex-1'>
|
||
{/* 收货地址 */}
|
||
<View
|
||
className="bg-white p-3"
|
||
onClick={() => Taro.navigateTo({ url: '/pages/user/address-list' })}
|
||
>
|
||
{defaultAddress ? (
|
||
<AddressCard address={defaultAddress} />
|
||
) : (
|
||
<View className="flex items-center justify-center py-6">
|
||
<Text className="text-sm text-gray-400">请点击添加收货地址</Text>
|
||
<Text className="text-gray-300 ml-1">→</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
|
||
{/* 商品信息（确认页需从上一页传递数据，此处为占位） */}
|
||
<View className="bg-white mt-2 p-3">
|
||
<View className="flex gap-3 py-2">
|
||
<View className="w-16 h-16 rounded-md bg-orange-50 flex items-center justify-center">
|
||
<Text className="text-xs text-gray-400">商品图</Text>
|
||
</View>
|
||
<View className="flex-1">
|
||
<Text className="text-sm text-gray-700 block mb-1">积分兑换商品</Text>
|
||
<Text className="text-xs text-gray-400 block">x1</Text>
|
||
</View>
|
||
<View className="flex items-center">
|
||
<Text className="text-sm font-bold text-orange-500">500 积分</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 费用明细 */}
|
||
<View className="bg-white mt-2 p-3">
|
||
<Text className="text-sm font-medium text-gray-800 mb-2 block">费用明细</Text>
|
||
<View className="flex justify-between py-1">
|
||
<Text className="text-sm text-gray-500">商品积分</Text>
|
||
<Text className="text-sm text-gray-700">500 积分</Text>
|
||
</View>
|
||
<View className="flex justify-between py-1">
|
||
<Text className="text-sm text-gray-500">运费</Text>
|
||
<Text className="text-sm text-green-600">包邮</Text>
|
||
</View>
|
||
<View className="flex justify-between py-1 mt-1 border-t border-gray-50">
|
||
<Text className="text-sm font-medium text-gray-800">合计</Text>
|
||
<Text className="text-sm font-bold text-orange-500">500 积分</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 底部栏 */}
|
||
<View className="bg-white border-t border-gray-100 px-4 py-3 flex items-center justify-between" style={{ paddingBottom: '20px' }}>
|
||
<View>
|
||
<Text className="text-xs text-gray-500">需支付：</Text>
|
||
<Text className="text-lg font-bold text-orange-500">500 积分</Text>
|
||
</View>
|
||
<View
|
||
className="px-8 py-2 rounded-full"
|
||
style={{ backgroundColor: '#f97316' }}
|
||
onClick={() => {
|
||
Taro.showToast({ title: '兑换成功', icon: 'success' })
|
||
setTimeout(() => Taro.navigateTo({ url: '/pages/order-list' }), 1500)
|
||
}}
|
||
>
|
||
<Text className="text-white font-medium text-sm">确认兑换</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
export default ExchangePage
|