feat(user): 新增收货地址管理及售后申请页面
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
This commit is contained in:
177
src_bak/pages/points/product-detail.tsx
Normal file
177
src_bak/pages/points/product-detail.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, Image, ScrollView, RichText } from '@tarojs/components'
|
||||
import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro'
|
||||
import { getShopPointsProduct } from '@/api/shop/shopPointsProduct'
|
||||
import type { ShopPointsProduct } from '@/api/shop/shopPointsProduct/model'
|
||||
import EmptyState from '@/components/common/EmptyState'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '积分商品',
|
||||
})
|
||||
|
||||
const PointsProductDetail: React.FC = () => {
|
||||
const router = useRouter()
|
||||
const id = Number(router.params.id)
|
||||
const [product, setProduct] = useState<ShopPointsProduct | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
// 微信分享
|
||||
useShareAppMessage(() => {
|
||||
return {
|
||||
title: product?.productName || '积分商品推荐',
|
||||
path: `/pages/points/product-detail?id=${id}`,
|
||||
imageUrl: product?.productImage || ''
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
loadProduct()
|
||||
}
|
||||
}, [id])
|
||||
|
||||
const loadProduct = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const data = await getShopPointsProduct(id)
|
||||
setProduct(data)
|
||||
} catch (e) {
|
||||
console.error('加载积分商品失败:', e)
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getProductTypeLabel = (type?: number) => {
|
||||
switch (type) {
|
||||
case 0: return '实物商品'
|
||||
case 1: return '优惠券'
|
||||
case 2: return '虚拟商品'
|
||||
default: return '商品'
|
||||
}
|
||||
}
|
||||
|
||||
const handleExchange = () => {
|
||||
if (!product) return
|
||||
if ((product.stock || 0) <= 0) {
|
||||
Taro.showToast({ title: '商品已售罄', icon: 'none' })
|
||||
return
|
||||
}
|
||||
// 跳转兑换确认页，传递商品信息
|
||||
Taro.navigateTo({
|
||||
url: `/pages/points/exchange/index?id=${product.id}`
|
||||
})
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50'>
|
||||
<View className='w-full bg-orange-50 animate-pulse' style={{ height: '375px' }} />
|
||||
<View className='bg-white p-4'>
|
||||
<View className='h-6 bg-gray-200 rounded mb-2 animate-pulse' style={{ width: '70%' }} />
|
||||
<View className='h-8 bg-gray-200 rounded mb-2 animate-pulse' style={{ width: '40%' }} />
|
||||
<View className='h-4 bg-gray-200 rounded animate-pulse' style={{ width: '55%' }} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50'>
|
||||
<EmptyState icon='🎁' text='商品不存在或已下架' />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const isSoldOut = (product.stock || 0) <= 0
|
||||
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex flex-col'>
|
||||
<ScrollView scrollY className='flex-1'>
|
||||
{/* 商品图片 */}
|
||||
{product.productImage ? (
|
||||
<Image
|
||||
className='w-full'
|
||||
style={{ height: '375px' }}
|
||||
src={product.productImage}
|
||||
mode='aspectFill'
|
||||
onClick={() => Taro.previewImage({ current: product.productImage, urls: [product.productImage!] })}
|
||||
/>
|
||||
) : (
|
||||
<View className='w-full bg-orange-50 flex items-center justify-center' style={{ height: '375px' }}>
|
||||
<Text className='text-gray-400 text-sm'>暂无图片</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 价格与基本信息 */}
|
||||
<View className='bg-white p-4'>
|
||||
<View className='flex items-center gap-2 mb-2'>
|
||||
<View className='px-2 rounded' style={{ backgroundColor: '#fff7ed', paddingTop: '2px', paddingBottom: '2px' }}>
|
||||
<Text className='text-xs text-orange-500'>{getProductTypeLabel(product.productType)}</Text>
|
||||
</View>
|
||||
{product.isHot === 1 && (
|
||||
<View className='px-2 rounded' style={{ backgroundColor: '#fef2f2', paddingTop: '2px', paddingBottom: '2px' }}>
|
||||
<Text className='text-xs text-red-500'>热门</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<Text className='text-base font-bold text-gray-800 block leading-tight'>
|
||||
{product.productName || '积分商品'}
|
||||
</Text>
|
||||
<View className='flex items-baseline gap-1 mt-2'>
|
||||
<Text className='text-xs text-orange-500'>需</Text>
|
||||
<Text className='text-2xl font-bold text-orange-500'>
|
||||
{product.pointsPrice || 0}
|
||||
</Text>
|
||||
<Text className='text-xs text-orange-500'>积分</Text>
|
||||
{Number(product.moneyPrice) > 0 && (
|
||||
<>
|
||||
<Text className='text-xs text-gray-500 ml-1'>+</Text>
|
||||
<Text className='text-base font-medium text-orange-500 ml-1'>
|
||||
{'\u00A5'}{product.moneyPrice}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
<View className='flex items-center gap-4 mt-2'>
|
||||
<Text className='text-xs text-gray-400'>
|
||||
已兑换 {product.sales || 0} 件
|
||||
</Text>
|
||||
<Text className={`text-xs ${isSoldOut ? 'text-red-400' : 'text-green-500'}`}>
|
||||
{isSoldOut ? '已售罄' : `剩余 ${product.stock || 0} 件`}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 商品描述 */}
|
||||
{product.description && (
|
||||
<View className='bg-white mt-2 p-4'>
|
||||
<Text className='text-sm font-medium text-gray-800 block mb-3'>商品介绍</Text>
|
||||
<RichText
|
||||
className='text-sm text-gray-600 leading-relaxed'
|
||||
nodes={product.description}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 底部占位，防止被固定栏遮挡 */}
|
||||
<View style={{ height: '80px' }} />
|
||||
</ScrollView>
|
||||
|
||||
{/* 底部兑换按钮 */}
|
||||
<View className='bg-white border-t border-gray-100 px-4 py-3 flex items-center justify-center' style={{ paddingBottom: '20px' }}>
|
||||
<View
|
||||
className='w-full py-3 rounded-full text-center text-white font-medium'
|
||||
style={{ backgroundColor: isSoldOut ? '#d1d5db' : '#f97316' }}
|
||||
onClick={handleExchange}
|
||||
>
|
||||
<Text className='text-sm'>{isSoldOut ? '已售罄' : '立即兑换'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default PointsProductDetail
|
||||
Reference in New Issue
Block a user