feat(user): 新增收货地址管理及售后申请页面
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
This commit is contained in:
187
src_bak/pages/balance.tsx
Normal file
187
src_bak/pages/balance.tsx
Normal 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' })}
|
||||
>
|
||||
<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' })}
|
||||
>
|
||||
<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
|
||||
Reference in New Issue
Block a user