feat(user): 新增收货地址管理及售后申请页面

- 新增地址类型定义,增强前端地址数据结构
- 新增地址编辑页面,支持地址智能识别和定位选点功能
- 地址编辑支持省市区选择及默认地址设置
- 新增地址列表页面,支持地址展示、删除、编辑和选择功能
- 实现售后申请页面,支持选择售后类型和退款原因
- 售后申请支持商品选择、退款金额计算和凭证上传
- 新增售后详情页面,支持售后状态展示及申请取消
- 优化页面加载和用户交互体验,增加错误提示和权限处理
This commit is contained in:
2026-07-01 12:11:56 +08:00
parent bf6ed504cc
commit 1fa58040f3
636 changed files with 58878 additions and 716 deletions

View File

@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '礼品卡余额',
}

View File

@@ -0,0 +1,187 @@
import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { listMyGiftCards, getGiftCardBalance } from '@/api/shop/shopGiftCard'
import type { ShopGiftCard } from '@/api/shop/shopGiftCard/model'
import { useScrollHeight } from '@/hooks/useScrollHeight'
definePageConfig({
navigationBarTitleText: '礼品卡余额',
})
const GiftCardBalancePage: React.FC = () => {
const [balance, setBalance] = useState(0)
const [cards, setCards] = useState<ShopGiftCard[]>([])
const [loading, setLoading] = useState(true)
const scrollHeight = useScrollHeight(44)
// 加载礼品卡数据
const loadGiftCards = async () => {
try {
// 并行请求余额和列表
const [balanceRes, cardsRes] = await Promise.all([
getGiftCardBalance(),
listMyGiftCards()
])
if (balanceRes.code === 0 && balanceRes.data) {
setBalance(balanceRes.data.giftCards || 0)
}
if (cardsRes.code === 0 && cardsRes.data) {
setCards(cardsRes.data)
}
} catch (e) {
console.error('获取礼品卡失败:', e)
Taro.showToast({ title: '获取数据失败', icon: 'none' })
} finally {
setLoading(false)
}
}
useEffect(() => {
loadGiftCards()
}, [])
// 获取状态标签
const getStatusLabel = (status?: number) => {
const map: Record<number, { label: string; color: string }> = {
1: { label: '可使用', color: 'text-green-500' },
2: { label: '已用完', color: 'text-gray-400' },
3: { label: '已过期', color: 'text-red-500' },
}
return map[status || 1] || { label: '未知', color: 'text-gray-400' }
}
// 格式化兑换码
const formatCode = (code?: string) => {
if (!code) return ''
return code.split('-').join(' ')
}
// 删除礼品卡
const handleDelete = (id?: number) => {
Taro.showModal({
title: '提示',
content: '确定删除该礼品卡记录吗?',
success: (res) => {
if (res.confirm) {
setCards(prev => prev.filter(card => card.cardId !== id && card.id !== id))
Taro.showToast({ title: '删除成功', icon: 'success' })
}
}
})
}
if (loading) {
return (
<View className='min-h-screen bg-gray-50 flex items-center justify-center'>
<Text className='text-gray-400'>...</Text>
</View>
)
}
return (
<View className='min-h-screen bg-gray-50'>
<ScrollView scrollY style={{ height: scrollHeight }}>
{/* 总余额 */}
<View className='p-6 text-white' style={{ background: 'linear-gradient(to right, #c084fc, #f472b6)' }}>
<Text className='text-sm opacity-80 block mb-2'></Text>
<Text className='text-4xl font-bold block mb-3'>¥{balance.toFixed(2)}</Text>
<View className='flex gap-4'>
<View className='rounded-lg px-3 py-1' style={{ backgroundColor: 'rgba(255,255,255,0.2)' }}>
<Text className='text-xs text-white'>
{cards.filter(c => c.status === 1).length}
</Text>
</View>
<View
className='rounded-lg px-3 py-1'
style={{ backgroundColor: 'rgba(255,255,255,0.2)' }}
onClick={() => Taro.navigateTo({ url: '/pages/gift-card/exchange/index' })}
>
<Text className='text-xs text-white'> </Text>
</View>
</View>
</View>
{/* 礼品卡列表 */}
<View className='p-3'>
<Text className='text-sm text-gray-500 mb-2 block px-1'></Text>
{cards.length === 0 ? (
<View className='text-center py-16'>
<Text className='text-4xl mb-3 block'>🎁</Text>
<Text className='text-sm text-gray-400 mb-3 block'></Text>
<View
className='inline-block bg-purple-500 text-white px-4 py-2 rounded-full'
onClick={() => Taro.navigateTo({ url: '/pages/gift-card/purchase/index' })}
>
<Text className='text-sm'></Text>
</View>
</View>
) : (
cards.map(card => {
const cardId = card.cardId || card.id
const statusInfo = getStatusLabel(card.status)
return (
<View key={cardId} className='bg-white rounded-xl p-4 mb-3 shadow-sm'>
{/* 顶部状态 */}
<View className='flex justify-between items-center mb-3'>
<Text className={`text-xs font-medium ${statusInfo.color}`}>
{statusInfo.label}
</Text>
<Text className='text-xs text-gray-400'> {card.expireDate || '永久'}</Text>
</View>
{/* 卡信息 */}
<View className='bg-gray-50 rounded-lg p-3 mb-3'>
<View className='flex justify-between items-center mb-2'>
<Text className='text-xs text-gray-500'></Text>
<Text className='text-base font-bold text-gray-800'>¥{card.amount || card.faceValue || '0'}</Text>
</View>
<View className='flex justify-between items-center mb-2'>
<Text className='text-xs text-gray-500'></Text>
<Text className='text-base font-bold text-purple-500'>¥{card.remainAmount || card.balance || '0'}</Text>
</View>
<View className='flex justify-between items-center'>
<Text className='text-xs text-gray-500'></Text>
<Text className='text-xs text-gray-800 font-mono'>{formatCode(card.code)}</Text>
</View>
</View>
{/* 操作按钮 */}
<View className='flex gap-2'>
{card.status === 1 && (
<View
className='flex-1 text-center py-2 rounded-lg bg-purple-50'
onClick={() => {
if (card.code) {
Taro.setClipboardData({ data: card.code })
Taro.showToast({ title: '已复制到剪贴板', icon: 'none' })
}
}}
>
<Text className='text-xs text-purple-500'></Text>
</View>
)}
<View
className='flex-1 text-center py-2 rounded-lg bg-gray-50'
onClick={() => handleDelete(cardId)}
>
<Text className='text-xs text-gray-400'></Text>
</View>
</View>
</View>
)
})
)}
</View>
<View className='h-6' />
</ScrollView>
</View>
)
}
export default GiftCardBalancePage

View File

@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '兑换礼品卡',
}

View File

@@ -0,0 +1,205 @@
import React, { useState } from 'react'
import { View, Text, Input, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { bindGiftCard } from '@/api/shop/shopGiftCard'
import request from '@/utils/request'
import { useScrollHeight } from '@/hooks/useScrollHeight'
definePageConfig({
navigationBarTitleText: '兑换礼品卡',
})
const GiftCardExchangePage: React.FC = () => {
const scrollHeight = useScrollHeight(44)
const [code, setCode] = useState('')
const [step, setStep] = useState(1) // 1:输入兑换码, 2:确认兑换
const [cardInfo, setCardInfo] = useState({
code: '',
amount: 200,
fromUser: '张三',
expireDate: '2029-05-12',
})
// 查询礼品卡
const handleQuery = async () => {
if (!code.trim()) {
Taro.showToast({ title: '请输入兑换码', icon: 'none' })
return
}
if (code.length < 8) {
Taro.showToast({ title: '兑换码格式错误', icon: 'none' })
return
}
Taro.showLoading({ title: '查询中...' })
try {
// 调用 API 查询礼品卡信息
const res = await request.get<{ code: number; data: any }>(`/shop/shop-gift/by-code/${code}`)
Taro.hideLoading()
if (res.code === 0 && res.data) {
setCardInfo({
code: res.data.code || code,
amount: res.data.faceValue || 0,
fromUser: res.data.nickName || '未知用户',
expireDate: res.data.takeTime || '无限制',
})
setStep(2)
Taro.showToast({ title: '查询成功', icon: 'success' })
} else {
Taro.showToast({ title: '礼品卡不存在', icon: 'none' })
}
} catch (err: any) {
Taro.hideLoading()
Taro.showToast({ title: err.message || '查询失败', icon: 'none' })
}
}
// 确认兑换
const handleExchange = async () => {
Taro.showModal({
title: '确认兑换',
content: `确定兑换该礼品卡吗?\n面值¥${cardInfo.amount}`,
confirmText: '确认兑换',
confirmColor: '#0e932e',
success: async (res) => {
if (res.confirm) {
Taro.showLoading({ title: '兑换中...' })
try {
const result = await bindGiftCard(cardInfo.code)
Taro.hideLoading()
if (result.code === 0) {
Taro.showToast({ title: '兑换成功', icon: 'success' })
setTimeout(() => {
Taro.navigateBack()
}, 1500)
} else {
Taro.showToast({ title: result.message || '兑换失败', icon: 'none' })
}
} catch (err: any) {
Taro.hideLoading()
Taro.showToast({ title: err.message || '兑换失败', icon: 'none' })
}
}
},
})
}
// 重新输入
const handleReset = () => {
setCode('')
setStep(1)
}
return (
<View className='min-h-screen bg-gray-50'>
<ScrollView scrollY style={{ height: scrollHeight }}>
{step === 1 ? (
<>
{/* 输入兑换码 */}
<View className='mx-3 mt-3 bg-white rounded-xl p-4'>
<Text className='text-base font-medium text-gray-800 mb-3 block'>
</Text>
<View className='bg-gray-50 rounded-lg p-4 mb-3'>
<Input
type='text'
value={code}
onInput={(e) => setCode(e.detail.value.toUpperCase())}
placeholder='请输入礼品卡兑换码'
className='text-center text-lg font-bold tracking-widest'
maxlength={16}
/>
</View>
<View className='text-xs text-gray-400 mb-3'>
<Text className='block'> 12-16 </Text>
<Text className='block'> </Text>
</View>
<View
className={`text-center py-3 rounded-full ${
code.length >= 8 ? 'bg-purple-500' : 'bg-gray-300'
}`}
onClick={code.length >= 8 ? handleQuery : undefined}
>
<Text className='text-white font-bold'></Text>
</View>
</View>
{/* 兑换说明 */}
<View className='mx-3 mt-3 bg-white 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='mx-3 mt-3 bg-white rounded-xl p-4'>
<View className='text-center mb-4'>
<Text className='text-4xl mb-2 block'>🎁</Text>
<Text className='text-base font-bold text-gray-800 block'>
</Text>
</View>
{/* 礼品卡信息 */}
<View className='rounded-lg p-4 mb-3' style={{ background: 'linear-gradient(to right, #faf5ff, #fdf2f8)' }}>
<View className='flex justify-between items-center mb-2'>
<Text className='text-sm text-gray-600'></Text>
<Text className='text-2xl font-bold text-purple-500'>
¥{cardInfo.amount}
</Text>
</View>
<View className='flex justify-between items-center mb-2'>
<Text className='text-sm text-gray-600'></Text>
<Text className='text-sm text-gray-800 font-mono'>{cardInfo.code}</Text>
</View>
<View className='flex justify-between items-center mb-2'>
<Text className='text-sm text-gray-600'></Text>
<Text className='text-sm text-gray-800'>{cardInfo.fromUser}</Text>
</View>
<View className='flex justify-between items-center'>
<Text className='text-sm text-gray-600'></Text>
<Text className='text-sm text-gray-800'>{cardInfo.expireDate}</Text>
</View>
</View>
<View className='text-xs text-gray-400 mb-3 text-center'>
</View>
<View className='flex gap-3'>
<View
className='flex-1 text-center py-3 rounded-full bg-gray-200'
onClick={handleReset}
>
<Text className='text-gray-700 font-bold'></Text>
</View>
<View
className='flex-1 text-center py-3 rounded-full bg-purple-500'
onClick={handleExchange}
>
<Text className='text-white font-bold'></Text>
</View>
</View>
</View>
</>
)}
<View className='h-6' />
</ScrollView>
</View>
)
}
export default GiftCardExchangePage

View File

@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '购买礼品卡',
}

View 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