feat(address): 新增收货地址与售后申请功能
- 新增地址编辑页面，支持地址智能识别、地图选点、地区选择和默认地址设置 - 实现地址列表页面，支持地址查看、删除、设为默认及选择返回结算页 - 新增售后申请页面，支持退款类型选择、商品选择、原因填写、图片上传和提交审核 - 修复 passport 分包配置，移除不存在分包并补充缺失声明，避免 Taro 编译报错 - 新增地址类型定义，增强前端地址数据结构类型安全 - 优化页面交互体验，完善表单校验及错误提示逻辑 - 统一代码格式与命名规范，保持代码风格一致性
This commit is contained in:
325
src/pages/user/user.tsx
Normal file
325
src/pages/user/user.tsx
Normal file
@@ -0,0 +1,325 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { View, Text, Image, ScrollView } from '@tarojs/components'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import { useUser } from '@/hooks/useUser'
|
||||
import { useScrollHeight } from '@/hooks/useScrollHeight'
|
||||
import { useRequest } from '@/hooks/useRequest'
|
||||
import { getUserCardStats, getUserOrderStats } from '@/api/shop/shopUserCard'
|
||||
import { getMyClerk } from '@/api/shop/shopStoreUser'
|
||||
import { listUserRole } from '@/api/system/userRole'
|
||||
import type { UserRole } from '@/api/system/userRole/model'
|
||||
import { checkAndCacheVipStatus } from '@/utils/vip'
|
||||
import { requireLogin } from '@/utils/login-guard'
|
||||
import MemberBadge from '@/components/business/MemberBadge'
|
||||
import Badge from '@/components/common/Badge'
|
||||
import ArrowRight from '@/components/common/ArrowRight'
|
||||
|
||||
const UserPage: React.FC = () => {
|
||||
const scrollHeight = useScrollHeight()
|
||||
|
||||
const { user, isLoggedIn, loading: userLoading, refreshUser, syncFromStorage } = useUser()
|
||||
|
||||
// 查询门店关联信息
|
||||
const [storeInfo, setStoreInfo] = useState<any>(null)
|
||||
// 用户角色列表
|
||||
const [userRoles, setUserRoles] = useState<UserRole[]>([])
|
||||
|
||||
// 获取用户卡片统计（余额/积分/优惠券/礼品卡）
|
||||
// stale-while-revalidate: 缓存命中即时展示 + 后台静默刷新
|
||||
// localStorage 持久化: 冷启动先读 storage 即时展示，避免骨架屏
|
||||
const { data: cardStats, run: runCardStats, loading: cardStatsLoading, mutate: mutateCardStats } = useRequest(getUserCardStats, {
|
||||
manual: true,
|
||||
cacheKey: 'user_card_stats',
|
||||
cacheTime: 30 * 1000,
|
||||
onSuccess: (data) => {
|
||||
// 请求成功后持久化到本地存储，下次冷启动可直接展示
|
||||
Taro.setStorageSync('user_card_stats_v2', data)
|
||||
},
|
||||
})
|
||||
|
||||
// 获取用户订单统计（同上 stale-while-revalidate + localStorage 持久化）
|
||||
const { data: orderStats, run: runOrderStats, loading: orderStatsLoading, mutate: mutateOrderStats } = useRequest(getUserOrderStats, {
|
||||
manual: true,
|
||||
cacheKey: 'user_order_stats',
|
||||
cacheTime: 30 * 1000,
|
||||
onSuccess: (data) => {
|
||||
// v3: 字段结构变更（与后端 UserOrderStats DTO 对齐），旧版 v2 缓存自动失效
|
||||
Taro.setStorageSync('user_order_stats_v3', data)
|
||||
},
|
||||
})
|
||||
|
||||
// 登录后加载数据
|
||||
useEffect(() => {
|
||||
if (isLoggedIn) {
|
||||
// 冷启动优化：先从 localStorage 读取缓存即时展示，消除骨架屏
|
||||
const cachedCardStats = Taro.getStorageSync('user_card_stats_v2')
|
||||
if (cachedCardStats) mutateCardStats(cachedCardStats)
|
||||
const cachedOrderStats = Taro.getStorageSync('user_order_stats_v3')
|
||||
if (cachedOrderStats) mutateOrderStats(cachedOrderStats)
|
||||
// 然后发起网络请求（stale-while-revalidate 后台刷新）
|
||||
runCardStats()
|
||||
runOrderStats()
|
||||
// 查询门店关联
|
||||
getMyClerk().then(data => setStoreInfo(data)).catch(() => setStoreInfo(null))
|
||||
// 查询用户角色
|
||||
listUserRole({ userId: user?.userId }).then(data => setUserRoles(data || [])).catch(() => setUserRoles([]))
|
||||
// 检查并缓存 VIP 状态
|
||||
checkAndCacheVipStatus((user as any)?.userId || (user as any)?.id)
|
||||
} else {
|
||||
setStoreInfo(null)
|
||||
setUserRoles([])
|
||||
}
|
||||
}, [isLoggedIn])
|
||||
|
||||
// 每次页面重新显示时（从登录页返回、从其他页面返回）检查登录状态并刷新数据
|
||||
useDidShow(() => {
|
||||
// 先从 storage 快速同步，立即更新 UI（无网络延迟）
|
||||
const hasUser = syncFromStorage()
|
||||
if (hasUser) {
|
||||
// 冷启动优化：先从 localStorage 读取上次缓存的数据即时展示，消除骨架屏
|
||||
const cachedCardStats = Taro.getStorageSync('user_card_stats_v2')
|
||||
if (cachedCardStats) {
|
||||
mutateCardStats(cachedCardStats)
|
||||
}
|
||||
const cachedOrderStats = Taro.getStorageSync('user_order_stats_v3')
|
||||
if (cachedOrderStats) {
|
||||
mutateOrderStats(cachedOrderStats)
|
||||
}
|
||||
// 然后发起网络请求（stale-while-revalidate 自动在后台刷新）
|
||||
runCardStats()
|
||||
runOrderStats()
|
||||
// 刷新门店关联
|
||||
getMyClerk().then(data => setStoreInfo(data)).catch(() => setStoreInfo(null))
|
||||
// 刷新用户角色
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
if (userId) {
|
||||
listUserRole({ userId }).then(data => setUserRoles(data || [])).catch(() => {})
|
||||
// 刷新 VIP 状态缓存
|
||||
checkAndCacheVipStatus(userId)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const menuItems = [
|
||||
// 升级VIP会员 - 醒目样式
|
||||
{ icon: '👑', label: '升级VIP会员', url: '/pages/user/vip-upgrade/index', highlight: true, requireAuth: true },
|
||||
// 门店中心：仅门店店员/店长显示（通过 /shop/shop-store-user/my 判断）
|
||||
...(storeInfo ? [{ icon: '🏪', label: '门店中心', url: '/pages/store/center/index', requireAuth: true }] : []),
|
||||
{ icon: '💰', label: '我的钱包', url: '/pages/user/wallet', requireAuth: true },
|
||||
{ icon: '📍', label: '收货地址', url: '/pages/user/address-list', requireAuth: true },
|
||||
// { icon: '⭐', label: '积分明细', url: '/pages/user/points-record' },
|
||||
{ icon: '❤️', label: '我的收藏', url: '/pages/user/favorite-list/index', requireAuth: true },
|
||||
{ icon: '🕐', label: '浏览历史', url: '/pages/user/history-list/index' },
|
||||
{ icon: '❓', label: '帮助中心', url: '/pages/user/help-center/index' },
|
||||
// { icon: '🔔', label: '消息通知', url: '/pages/index/notification' },
|
||||
// 门店管理：仅门店经理/店员显示
|
||||
// ...(storeInfo ? [{ icon: '🏪', label: '门店管理', url: '/pages/store/list/index' }] : []),
|
||||
{ icon: '⚙️', label: '设置', url: '/pages/user/setting' },
|
||||
]
|
||||
|
||||
const handleAvatarClick = () => {
|
||||
if (!isLoggedIn) {
|
||||
Taro.navigateTo({ url: '/passport/login' })
|
||||
} else {
|
||||
Taro.navigateTo({ url: '/pages/user/profile' })
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单项点击：需要登录的功能先拦截
|
||||
const handleMenuClick = (item: typeof menuItems[number]) => {
|
||||
if ((item as any).requireAuth) {
|
||||
if (!requireLogin({
|
||||
action: 'viewOrder',
|
||||
redirect: item.url,
|
||||
content: `登录后才能使用「${item.label}」功能，是否前往登录？`
|
||||
})) return
|
||||
}
|
||||
Taro.navigateTo({ url: item.url })
|
||||
}
|
||||
|
||||
// 订单快捷入口点击：需要登录
|
||||
const handleOrderTabClick = (tabIndex: number) => {
|
||||
if (!requireLogin({ action: 'viewOrder', redirect: `/pages/order/list?tab=${tabIndex}`, content: '登录后才能查看订单，是否前往登录？' })) return
|
||||
Taro.setStorageSync('order_tab', tabIndex)
|
||||
Taro.navigateTo({ url: `/pages/order/list?tab=${tabIndex}` })
|
||||
}
|
||||
|
||||
const handleViewAllOrders = () => {
|
||||
if (!requireLogin({ action: 'viewOrder', redirect: '/pages/order/list', content: '登录后才能查看订单，是否前往登录？' })) return
|
||||
Taro.navigateTo({ url: '/pages/order/list' })
|
||||
}
|
||||
|
||||
const loading = cardStatsLoading || orderStatsLoading
|
||||
|
||||
// 是否有可用数据（缓存或请求结果），用于判断是否需要骨架屏
|
||||
const hasCardData = !!cardStats
|
||||
const hasOrderData = !!orderStats
|
||||
|
||||
// 下拉刷新状态
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
|
||||
// 下拉刷新：同时刷新用户信息、卡片统计、订单统计、角色
|
||||
const onRefresh = async () => {
|
||||
if (!isLoggedIn) { setRefreshing(false); return }
|
||||
setRefreshing(true)
|
||||
try {
|
||||
await Promise.all([refreshUser(), runCardStats(), runOrderStats()])
|
||||
// 刷新角色
|
||||
const uid = user?.userId
|
||||
if (uid) {
|
||||
listUserRole({ userId: uid }).then(data => setUserRoles(data || [])).catch(() => {})
|
||||
// 刷新 VIP 状态
|
||||
checkAndCacheVipStatus(uid)
|
||||
}
|
||||
} finally {
|
||||
setRefreshing(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='h-full bg-gray-50'>
|
||||
<ScrollView scrollY refresherEnabled={!!isLoggedIn} refresherTriggered={refreshing} onRefresherRefresh={onRefresh} style={{ height: scrollHeight }}>
|
||||
{/* 用户信息卡片 */}
|
||||
<View className='mx-3 mt-3 p-4 rounded-xl relative overflow-hidden' style={{ background: 'linear-gradient(135deg, #15803d 0%, #22c55e 60%, #4ade80 100%)' }}>
|
||||
{/* 装饰性光晕 */}
|
||||
<View className='absolute -top-8 -right-8 w-32 h-32 rounded-full opacity-20' style={{ background: 'radial-gradient(circle, #ffffff, transparent)' }} />
|
||||
<View className='absolute -bottom-4 -left-4 w-20 h-20 rounded-full opacity-10' style={{ background: 'radial-gradient(circle, #ffffff, transparent)' }} />
|
||||
<View className='relative z-10'>
|
||||
<View className='flex items-center gap-3' onClick={handleAvatarClick}>
|
||||
{isLoggedIn && user?.avatar ? (
|
||||
<Image className='w-14 h-14 rounded-full border-2 border-white shadow-sm' src={user.avatar} mode='aspectFill' />
|
||||
) : (
|
||||
<View className='w-14 h-14 rounded-full bg-white bg-opacity-20 flex items-center justify-center border-2 border-white border-opacity-30'>
|
||||
<Text className='text-2xl'>👤</Text>
|
||||
</View>
|
||||
)}
|
||||
<View className='flex-1'>
|
||||
<Text className='text-lg font-medium text-white block'>
|
||||
{isLoggedIn ? (user?.nickname || user?.phone || '用户') : '点击登录'}
|
||||
</Text>
|
||||
<View className='flex items-center gap-2 mt-1 flex-wrap'>
|
||||
{/*{isLoggedIn && (*/}
|
||||
{/* <View*/}
|
||||
{/* className='inline-flex items-center rounded-full text-xs px-2 py-1'*/}
|
||||
{/* style={{ background: 'rgba(255,255,255,0.2)', color: '#ffffff', border: '1px solid rgba(255,255,255,0.3)' }}*/}
|
||||
{/* >*/}
|
||||
{/* <Text>{(user as any)?.memberLevelName || '普通用户'}</Text>*/}
|
||||
{/* </View>*/}
|
||||
{/*)}*/}
|
||||
{userRoles.map(role => (
|
||||
<View
|
||||
key={role.roleId}
|
||||
className='inline-flex items-center rounded-full text-xs px-2 py-0.5'
|
||||
style={{ background: 'rgba(255,255,255,0.2)', color: '#ffffff', border: '1px solid rgba(255,255,255,0.3)' }}
|
||||
>
|
||||
<Text>{role.roleName}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
{isLoggedIn && <ArrowRight className='text-white text-opacity-60' />}
|
||||
</View>
|
||||
{/* 数据概览 */}
|
||||
{isLoggedIn && (
|
||||
<View className='grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-white border-opacity-15'>
|
||||
<View className='text-center' onClick={() => Taro.navigateTo({ url: '/pages/user/wallet' })}>
|
||||
{!hasCardData ? (
|
||||
<View className='h-7 w-16 mx-auto rounded animate-pulse' style={{ background: 'rgba(255,255,255,0.25)' }} />
|
||||
) : (
|
||||
<Text className='text-lg font-bold text-white block'>
|
||||
{cardStats?.balance || '0.00'}
|
||||
</Text>
|
||||
)}
|
||||
<Text className='text-xs text-white text-opacity-70'>余额</Text>
|
||||
</View>
|
||||
<View className='text-center' onClick={() => Taro.navigateTo({ url: '/pages/user/points-record' })}>
|
||||
{!hasCardData ? (
|
||||
<View className='h-7 w-10 mx-auto rounded animate-pulse' style={{ background: 'rgba(255,255,255,0.25)' }} />
|
||||
) : (
|
||||
<Text className='text-lg font-bold text-white block'>
|
||||
{cardStats?.points || (user as any)?.points || 0}
|
||||
</Text>
|
||||
)}
|
||||
<Text className='text-xs text-white text-opacity-70'>积分</Text>
|
||||
</View>
|
||||
<View className='text-center' onClick={() => Taro.navigateTo({ url: '/pages/user/coupon-list' })}>
|
||||
{!hasCardData ? (
|
||||
<View className='h-7 w-10 mx-auto rounded animate-pulse' style={{ background: 'rgba(255,255,255,0.25)' }} />
|
||||
) : (
|
||||
<Text className='text-lg font-bold text-white block'>
|
||||
{cardStats?.coupons || 0}
|
||||
</Text>
|
||||
)}
|
||||
<Text className='text-xs text-white text-opacity-70'>优惠券</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
{/* 我的订单快捷入口 */}
|
||||
<View className='bg-white rounded-xl mx-3 mt-3 p-4'>
|
||||
<View className='flex justify-between items-center mb-3'>
|
||||
<Text className='text-base font-medium text-gray-800'>我的订单</Text>
|
||||
<View className='flex items-center text-xs text-gray-400' onClick={handleViewAllOrders}>
|
||||
<Text>全部订单</Text>
|
||||
<ArrowRight className='ml-1' />
|
||||
</View>
|
||||
</View>
|
||||
<View className='grid grid-cols-4 gap-2'>
|
||||
{[
|
||||
// status 与 OrderListStatus 对齐：0待付款 1待发货 3待收货 5已完成
|
||||
{ icon: '💳', label: '待付款', tabIndex: 1, count: orderStats?.waitPay },
|
||||
{ icon: '📦', label: '待发货', tabIndex: 2, count: orderStats?.waitDeliver },
|
||||
{ icon: '🚚', label: '待收货', tabIndex: 3, count: orderStats?.waitReceive },
|
||||
{ icon: '✅', label: '已完成', tabIndex: 4, count: orderStats?.completed },
|
||||
].map(item => (
|
||||
<View
|
||||
key={item.tabIndex}
|
||||
className={`flex flex-col items-center py-2 relative ${!isLoggedIn ? 'opacity-50' : ''}`}
|
||||
onClick={() => handleOrderTabClick(item.tabIndex)}
|
||||
>
|
||||
<Text className='text-xl mb-1'>{item.icon}</Text>
|
||||
<Text className='text-xs text-gray-600'>{item.label}</Text>
|
||||
{/* 数量角标：count 为 0 时组件内部不渲染 */}
|
||||
<Badge count={item.count} className='absolute -top-1 -right-1' />
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
{/* 功能菜单 */}
|
||||
<View className='bg-white rounded-xl mx-3 mt-3 overflow-hidden'>
|
||||
{menuItems.map((item, idx) => (
|
||||
<View
|
||||
key={item.label}
|
||||
className={`flex items-center justify-between px-4 py-3 ${
|
||||
idx < menuItems.length - 1 ? 'border-b border-gray-50' : ''
|
||||
} ${(item as any).highlight ? '' : ''} ${!isLoggedIn && (item as any).requireAuth ? 'opacity-50' : ''}`}
|
||||
style={(item as any).highlight ? {
|
||||
background: 'linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)',
|
||||
} : {}}
|
||||
onClick={() => handleMenuClick(item)}
|
||||
>
|
||||
<View className='flex items-center gap-3'>
|
||||
<View className={`${(item as any).highlight ? 'w-8 h-8 rounded-lg flex items-center justify-center text-lg' : ''}`} style={(item as any).highlight ? { background: 'linear-gradient(135deg, #f59e0b, #d97706)' } : {}}>
|
||||
<Text className='text-base'>{(item as any).highlight ? '' : item.icon}{(item as any).highlight ? item.icon : ''}</Text>
|
||||
</View>
|
||||
<View className='flex items-center gap-2'>
|
||||
<Text className={`text-sm ${(item as any).highlight ? 'text-amber-900 font-semibold' : 'text-gray-700'}`}>{item.label}</Text>
|
||||
{(item as any).highlight && (
|
||||
<View className='px-1.5 py-0.5 rounded-full' style={{ background: 'linear-gradient(135deg, #dc2626, #b91c1c)' }}>
|
||||
<Text className='text-white text-xs'>推荐</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<ArrowRight className={(item as any).highlight ? 'text-amber-700' : 'text-gray-300'} />
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<View className='h-6' />
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserPage
|
||||
Reference in New Issue
Block a user