feat(user): 新增收货地址管理及售后申请页面
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
This commit is contained in:
186
src_bak/pages/order/evaluate-detail.tsx
Normal file
186
src_bak/pages/order/evaluate-detail.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import React, { useState } from 'react'
|
||||
import { View, Text, ScrollView, Swiper, SwiperItem } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '评价详情',
|
||||
})
|
||||
|
||||
const EvaluateDetailPage: React.FC = () => {
|
||||
const [evaluation, setEvaluation] = useState({
|
||||
id: 1,
|
||||
goodsId: 1,
|
||||
goodsName: '高品质保温杯',
|
||||
goodsImage: '',
|
||||
score: 5,
|
||||
content: '质量很好，保温效果非常棒！物流也很快，包装严实，非常满意的一次购物体验。\n\n杯子的外观设计很时尚，颜色也很正，同事们都问我在哪里买的。保温效果真的很好，早上装的开水，到下午还是温热的。\n\n唯一的小缺点就是盖子有点紧，不过用多了应该会好一些。总体来说非常满意，推荐大家购买！',
|
||||
images: ['', '', ''],
|
||||
isAnonymous: false,
|
||||
userName: '张***',
|
||||
createTime: '2026-05-10 14:30:00',
|
||||
likes: 12,
|
||||
isLiked: false,
|
||||
replies: [
|
||||
{
|
||||
id: 1,
|
||||
content: '感谢您的好评！我们会继续努力提供优质产品和服务。',
|
||||
createTime: '2026-05-10 15:00:00',
|
||||
isOfficial: true,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// 渲染星星
|
||||
const renderStars = (score: number) => {
|
||||
const stars = []
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
stars.push(
|
||||
<Text key={i} className={i <= score ? 'text-orange-400' : 'text-gray-300'}>
|
||||
★
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
return stars
|
||||
}
|
||||
|
||||
// 处理点赞
|
||||
const handleLike = () => {
|
||||
setEvaluation(prev => ({
|
||||
...prev,
|
||||
isLiked: !prev.isLiked,
|
||||
likes: prev.isLiked ? prev.likes - 1 : prev.likes + 1,
|
||||
}))
|
||||
Taro.showToast({ title: evaluation.isLiked ? '已取消点赞' : '点赞成功', icon: 'success' })
|
||||
}
|
||||
|
||||
// 图片预览
|
||||
const handleImagePreview = (index: number) => {
|
||||
// 这里应该调用 Taro.previewImage
|
||||
Taro.showToast({ title: `查看第${index + 1}张图片`, icon: 'none' })
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='bg-gray-50 flex flex-col' style={{ minHeight: '100vh' }}>
|
||||
<ScrollView scrollY className='flex-1'>
|
||||
{/* 用户信息 */}
|
||||
<View className='bg-white p-4 mb-3'>
|
||||
<View className='flex items-center gap-2 mb-3'>
|
||||
<View className='w-10 h-10 rounded-full flex items-center justify-center' style={{ background: 'linear-gradient(to right, #60a5fa, #c084fc)' }}>
|
||||
<Text className='text-white font-bold'>{evaluation.isAnonymous ? '匿' : evaluation.userName[0]}</Text>
|
||||
</View>
|
||||
<View className='flex-1'>
|
||||
<Text className='text-sm text-gray-700 font-medium block'>{evaluation.userName}</Text>
|
||||
<View className='flex items-center gap-1'>
|
||||
{renderStars(evaluation.score)}
|
||||
</View>
|
||||
</View>
|
||||
<Text className='text-xs text-gray-400'>{evaluation.createTime.split(' ')[0]}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 商品信息 */}
|
||||
<View
|
||||
className='bg-white p-4 mb-3'
|
||||
onClick={() => Taro.navigateTo({ url: `/pages/shop/product-detail?id=${evaluation.goodsId}` })}
|
||||
>
|
||||
<View className='flex items-center gap-2'>
|
||||
<View className='w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0'>
|
||||
<Text className='text-2xl'>🛍️</Text>
|
||||
</View>
|
||||
<View className='flex-1'>
|
||||
<Text className='text-sm text-gray-700 block'>{evaluation.goodsName}</Text>
|
||||
<Text className='text-xs text-gray-400 mt-1 block'>查看商品详情</Text>
|
||||
</View>
|
||||
<Text className='text-gray-400'>→</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 评价内容 */}
|
||||
<View className='bg-white p-4 mb-3'>
|
||||
<Text className='text-sm text-gray-700 leading-7 block whitespace-pre-wrap'>
|
||||
{evaluation.content}
|
||||
</Text>
|
||||
|
||||
{/* 评价图片 */}
|
||||
{evaluation.images && evaluation.images.length > 0 && (
|
||||
<View className='mt-3'>
|
||||
<Swiper
|
||||
className='h-48 rounded-lg'
|
||||
indicatorColor='#999'
|
||||
indicatorActiveColor='#333'
|
||||
circular
|
||||
autoplay={false}
|
||||
>
|
||||
{evaluation.images.map((_, index) => (
|
||||
<SwiperItem key={index}>
|
||||
<View className='w-full h-48 bg-gray-100 flex items-center justify-center'>
|
||||
<Text className='text-4xl'>🖼️</Text>
|
||||
<Text className='text-xs text-gray-400 mt-2'>评价图片 {index + 1}</Text>
|
||||
</View>
|
||||
</SwiperItem>
|
||||
))}
|
||||
</Swiper>
|
||||
<View className='flex justify-center gap-1 mt-2'>
|
||||
{evaluation.images.map((_, index) => (
|
||||
<View key={index} className='w-1 h-1 rounded-full bg-gray-300' />
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 商家回复 */}
|
||||
{evaluation.replies && evaluation.replies.length > 0 && (
|
||||
<View className='bg-white p-4 mb-3'>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-2 block'>商家回复</Text>
|
||||
{evaluation.replies.map(reply => (
|
||||
<View key={reply.id} className='bg-orange-50 rounded-lg p-3'>
|
||||
<View className='flex items-center gap-2 mb-2'>
|
||||
{reply.isOfficial && (
|
||||
<View className='bg-orange-500 px-2 py-1 rounded'>
|
||||
<Text className='text-xs text-white'>官方</Text>
|
||||
</View>
|
||||
)}
|
||||
<Text className='text-xs text-gray-400'>{reply.createTime}</Text>
|
||||
</View>
|
||||
<Text className='text-sm text-gray-700 leading-6'>{reply.content}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
</ScrollView>
|
||||
|
||||
{/* 底部操作栏 */}
|
||||
<View className='bg-white border-t border-gray-100 px-4 py-2 flex items-center justify-around' style={{ paddingBottom: '20px' }}>
|
||||
<View className='flex flex-col items-center' onClick={handleLike}>
|
||||
<Text className={`text-2xl ${evaluation.isLiked ? 'text-red-500' : 'text-gray-400'}`}>
|
||||
{evaluation.isLiked ? '❤️' : '🤍'}
|
||||
</Text>
|
||||
<Text className={`text-xs ${evaluation.isLiked ? 'text-red-500' : 'text-gray-400'}`}>
|
||||
{evaluation.likes}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className='flex flex-col items-center' onClick={() => Taro.showToast({ title: '收藏成功', icon: 'success' })}>
|
||||
<Text className='text-2xl'>⭐</Text>
|
||||
<Text className='text-xs text-gray-400'>收藏</Text>
|
||||
</View>
|
||||
|
||||
<View className='flex flex-col items-center' onClick={() => Taro.showToast({ title: '举报已提交', icon: 'success' })}>
|
||||
<Text className='text-2xl'>⚠️</Text>
|
||||
<Text className='text-xs text-gray-400'>举报</Text>
|
||||
</View>
|
||||
|
||||
<View
|
||||
className='bg-orange-500 text-white px-6 py-2 rounded-full'
|
||||
onClick={() => Taro.navigateTo({ url: `/pages/shop/product-detail?id=${evaluation.goodsId}` })}
|
||||
>
|
||||
<Text className='text-sm text-white'>查看商品</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default EvaluateDetailPage
|
||||
Reference in New Issue
Block a user