feat(user): 新增收货地址管理及售后申请页面
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
This commit is contained in:
3
src_bak/pages/index/coupon-center/index.config.ts
Normal file
3
src_bak/pages/index/coupon-center/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '领券中心',
|
||||
}
|
||||
164
src_bak/pages/index/coupon-center/index.tsx
Normal file
164
src_bak/pages/index/coupon-center/index.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useUser } from '@/hooks/useUser'
|
||||
import { useScrollHeight } from '@/hooks/useScrollHeight'
|
||||
import { listCouponCenter } from '@/api/shop/shopCoupon'
|
||||
import { takeCoupon } from '@/api/shop/shopUserCoupon'
|
||||
import type { ShopCouponWithTake } from '@/api/shop/shopCoupon/model'
|
||||
import EmptyState from '@/components/common/EmptyState'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '领券中心',
|
||||
})
|
||||
|
||||
const CouponCenterPage: React.FC = () => {
|
||||
const { isLoggedIn } = useUser()
|
||||
const [coupons, setCoupons] = useState<ShopCouponWithTake[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [claiming, setClaiming] = useState<number | null>(null)
|
||||
const scrollHeight = useScrollHeight(44)
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoggedIn) {
|
||||
Taro.navigateTo({ url: '/passport/login' })
|
||||
return
|
||||
}
|
||||
fetchCoupons()
|
||||
}, [isLoggedIn])
|
||||
|
||||
const fetchCoupons = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const data = await listCouponCenter({ status: 0, isExpire: 0 })
|
||||
setCoupons(data || [])
|
||||
} catch (e) {
|
||||
console.error('获取优惠券失败:', e)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClaimCoupon = async (id: number) => {
|
||||
if (claiming) return
|
||||
setClaiming(id)
|
||||
try {
|
||||
await takeCoupon(id)
|
||||
Taro.showToast({ title: '领取成功', icon: 'success' })
|
||||
// 更新本地状态，避免重新请求
|
||||
setCoupons(prev =>
|
||||
prev.map(c => c.id === id ? { ...c, hasTake: true, userTakeNum: (c.userTakeNum || 0) + 1 } : c)
|
||||
)
|
||||
} catch (e: any) {
|
||||
Taro.showToast({ title: e?.message || '领取失败', icon: 'none' })
|
||||
} finally {
|
||||
setClaiming(null)
|
||||
}
|
||||
}
|
||||
|
||||
const getCouponValueText = (item: ShopCouponWithTake) => {
|
||||
switch (item.type) {
|
||||
case 20: return `${item.discount}折`
|
||||
case 40: return `¥${item.reducePrice}`
|
||||
case 50: return item.useCount && item.useCount > 0 ? `${item.useCount}次` : '不限次'
|
||||
default: return `¥${item.reducePrice}`
|
||||
}
|
||||
}
|
||||
|
||||
const getCouponConditionText = (item: ShopCouponWithTake) => {
|
||||
if (item.type === 40) return '无门槛'
|
||||
if (item.type === 50) {
|
||||
const parts: string[] = []
|
||||
if (item.venueType !== undefined && item.venueType !== null) parts.push(`场地类型${item.venueType}`)
|
||||
if (item.useDuration && item.useDuration > 0) parts.push(`${item.useDuration}分钟`)
|
||||
return parts.length > 0 ? parts.join(' | ') : '场地使用'
|
||||
}
|
||||
if (item.minPrice && Number(item.minPrice) > 0) return `满${item.minPrice}可用`
|
||||
return '无门槛'
|
||||
}
|
||||
|
||||
const getCouponExpireText = (item: ShopCouponWithTake) => {
|
||||
if (item.expireType === 10) return `领取后${item.expireDay}天内有效`
|
||||
if (item.endTime) return `有效期至：${item.endTime.slice(0, 10)}`
|
||||
return ''
|
||||
}
|
||||
|
||||
const getCouponTypeText = (type?: number) => {
|
||||
const map: Record<number, string> = { 10: '满减券', 20: '折扣券', 30: '免费券', 40: '无门槛券', 50: '场地使用券' }
|
||||
return map[type || 0] || '优惠券'
|
||||
}
|
||||
|
||||
const isClaimable = (item: ShopCouponWithTake) => {
|
||||
if (item.hasTake) return false
|
||||
if (item.limitPerUser !== -1 && (item.userTakeNum || 0) >= (item.limitPerUser || 1)) return false
|
||||
if (item.totalCount !== -1 && (item.issuedCount || 0) >= (item.totalCount || 0)) return false
|
||||
return true
|
||||
}
|
||||
|
||||
if (!isLoggedIn) return null
|
||||
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50'>
|
||||
<ScrollView scrollY style={{ height: scrollHeight }}>
|
||||
{loading ? (
|
||||
<View className='flex items-center justify-center py-10'>
|
||||
<Text className='text-gray-400'>加载中...</Text>
|
||||
</View>
|
||||
) : coupons.length === 0 ? (
|
||||
<EmptyState text='暂无可领取的优惠券' />
|
||||
) : (
|
||||
<View className='p-3'>
|
||||
{coupons.map((item) => {
|
||||
const canClaim = isClaimable(item)
|
||||
return (
|
||||
<View
|
||||
key={item.id}
|
||||
className='bg-white rounded-lg mb-3 overflow-hidden'
|
||||
style={{ opacity: canClaim ? 1 : 0.6 }}
|
||||
>
|
||||
<View className='flex'>
|
||||
<View
|
||||
className='p-4 text-white flex flex-col items-center justify-center'
|
||||
style={{ width: '120px', backgroundColor: canClaim ? (
|
||||
item.type === 40 ? '#3b82f6' :
|
||||
item.type === 50 ? '#06b6d4' :
|
||||
'#0e932e'
|
||||
) : '#999' }}
|
||||
>
|
||||
<Text className='text-2xl font-bold'>{getCouponValueText(item)}</Text>
|
||||
<Text className='text-xs mt-1'>{getCouponConditionText(item)}</Text>
|
||||
</View>
|
||||
<View className='flex-1 p-3'>
|
||||
<Text className='text-sm font-medium text-gray-800 block mb-1'>
|
||||
{getCouponTypeText(item.type)}
|
||||
</Text>
|
||||
<Text className='text-xs text-gray-500 mb-1 block'>{item.name}</Text>
|
||||
<Text className='text-xs text-gray-400 block'>{getCouponExpireText(item)}</Text>
|
||||
</View>
|
||||
<View className='flex items-center pr-3'>
|
||||
<View
|
||||
className='px-3 py-1 rounded-full'
|
||||
style={{ backgroundColor: canClaim ? (
|
||||
item.type === 40 ? '#3b82f6' :
|
||||
item.type === 50 ? '#06b6d4' :
|
||||
'#0e932e'
|
||||
) : '#ccc' }}
|
||||
onClick={() => canClaim && handleClaimCoupon(item.id!)}
|
||||
>
|
||||
<Text className='text-xs text-white'>
|
||||
{claiming === item.id ? '领取中' : item.hasTake ? '已领取' : '领取'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default CouponCenterPage
|
||||
Reference in New Issue
Block a user