feat(user): 新增收货地址管理及售后申请页面
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
This commit is contained in:
143
src_bak/pages/gift-card/purchase/index.tsx
Normal file
143
src_bak/pages/gift-card/purchase/index.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import React, { useState } from 'react'
|
||||
import { View, Text, Input, ScrollView } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '购买礼品卡',
|
||||
})
|
||||
|
||||
const GiftCardPurchasePage: React.FC = () => {
|
||||
const [amount, setAmount] = useState('')
|
||||
const [showCustom, setShowCustom] = useState(false)
|
||||
|
||||
|
||||
// 预设金额
|
||||
const presetAmounts = [100, 200, 500, 1000]
|
||||
|
||||
// 处理金额选择
|
||||
const handleAmountSelect = (value: number) => {
|
||||
setAmount(value.toString())
|
||||
setShowCustom(false)
|
||||
}
|
||||
|
||||
// 处理自定义金额
|
||||
const handleCustomAmount = (value: string) => {
|
||||
setAmount(value)
|
||||
}
|
||||
|
||||
// 处理购买
|
||||
const handlePurchase = () => {
|
||||
Taro.showModal({
|
||||
title: '提示',
|
||||
content: '礼品卡购买功能暂未开放，请使用兑换功能。',
|
||||
showCancel: true,
|
||||
confirmText: '去兑换',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
Taro.redirectTo({ url: '/pages/gift-card/exchange/index' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='bg-gray-50 flex flex-col' style={{ minHeight: '100vh' }}>
|
||||
<ScrollView scrollY className='flex-1'>
|
||||
{/* 礼品卡预览 */}
|
||||
<View className='mx-3 mt-3 rounded-xl p-6 text-white relative overflow-hidden' style={{ background: 'linear-gradient(to right, #c084fc, #f472b6)' }}>
|
||||
<View className='absolute rounded-full' style={{ top: '-20px', right: '-20px', width: '80px', height: '80px', backgroundColor: 'rgba(255,255,255,0.2)' }} />
|
||||
<View className='absolute rounded-full' style={{ bottom: '-32px', left: '-32px', width: '96px', height: '96px', backgroundColor: 'rgba(255,255,255,0.2)' }} />
|
||||
|
||||
<Text className='text-sm opacity-80 block mb-2'>鑫龙家电礼品卡</Text>
|
||||
<Text className='text-4xl font-bold block mb-3'>
|
||||
¥ {amount || '0'}
|
||||
</Text>
|
||||
<View className='flex items-center gap-1'>
|
||||
<View className='w-6 h-px' style={{ backgroundColor: 'rgba(255,255,255,0.5)' }} />
|
||||
<Text className='text-xs opacity-60'>送给他/她一份惊喜</Text>
|
||||
<View className='w-6 h-px' style={{ backgroundColor: 'rgba(255,255,255,0.5)' }} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 选择金额 */}
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4'>
|
||||
<Text className='text-base font-medium text-gray-800 mb-3 block'>选择金额</Text>
|
||||
|
||||
<View className='flex flex-wrap gap-3 mb-3'>
|
||||
{presetAmounts.map(amt => (
|
||||
<View
|
||||
key={amt}
|
||||
className={`flex-1 min-w-20 py-3 text-center rounded-lg border-2 ${
|
||||
amount === amt.toString() && !showCustom
|
||||
? 'border-purple-500 bg-purple-50'
|
||||
: 'border-gray-200'
|
||||
}`}
|
||||
onClick={() => handleAmountSelect(amt)}
|
||||
>
|
||||
<Text className={`text-lg font-bold ${
|
||||
amount === amt.toString() && !showCustom ? 'text-purple-500' : 'text-gray-700'
|
||||
}`}>
|
||||
¥{amt}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 自定义金额 */}
|
||||
<View
|
||||
className={`py-3 text-center rounded-lg border-2 ${
|
||||
showCustom ? 'border-purple-500 bg-purple-50' : 'border-gray-200'
|
||||
}`}
|
||||
onClick={() => {
|
||||
setShowCustom(true)
|
||||
setAmount('')
|
||||
}}
|
||||
>
|
||||
{showCustom ? (
|
||||
<View className='flex items-center justify-center gap-1'>
|
||||
<Text className='text-lg font-bold text-purple-500'>¥</Text>
|
||||
<Input
|
||||
type='digit'
|
||||
value={amount}
|
||||
onInput={(e) => handleCustomAmount(e.detail.value)}
|
||||
placeholder='输入金额'
|
||||
className='text-center text-lg font-bold text-purple-500'
|
||||
style={{ width: '120px' }}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<Text className='text-lg text-gray-700'>自定义金额</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 购买说明 */}
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4'>
|
||||
<Text className='text-base font-medium text-gray-800 mb-3 block'>购买说明</Text>
|
||||
<View className='text-xs text-gray-500 leading-6'>
|
||||
<Text className='block'>1. 礼品卡购买功能暂未开放</Text>
|
||||
<Text className='block'>2. 请使用兑换功能兑换礼品卡</Text>
|
||||
<Text className='block'>3. 如有问题，请联系客服</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='h-4' />
|
||||
</ScrollView>
|
||||
|
||||
{/* 购买按钮 */}
|
||||
<View className='bg-white p-3 shadow-lg' style={{ paddingBottom: '20px' }}>
|
||||
<View
|
||||
className='text-center py-3 rounded-full text-white font-bold'
|
||||
style={{ background: 'linear-gradient(to right, #a855f7, #ec4899)' }}
|
||||
onClick={handlePurchase}
|
||||
>
|
||||
<Text className='text-white text-base font-bold'>
|
||||
礼品卡兑换
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default GiftCardPurchasePage
|
||||
Reference in New Issue
Block a user