first commit
This commit is contained in:
@@ -0,0 +1,184 @@
|
||||
import { View, Text, Image } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useState, useEffect } from 'react'
|
||||
import './index.scss'
|
||||
import { getOrderList, getDesignList } from '../../utils/store'
|
||||
import ThemeToggle from '../../components/ThemeToggle'
|
||||
import { useThemeContext } from '../../context/ThemeContext'
|
||||
|
||||
export default function OrderDetailPage() {
|
||||
const { theme } = useThemeContext()
|
||||
const [order, setOrder] = useState<any>(null)
|
||||
const [design, setDesign] = useState<any>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const params = Taro.getCurrentInstance().router?.params
|
||||
const orderId = params?.orderId
|
||||
if (!orderId) return
|
||||
const orders = getOrderList()
|
||||
const found = orders.find(o => o.id === orderId)
|
||||
setOrder(found || null)
|
||||
if (found) {
|
||||
const designs = getDesignList()
|
||||
const related = designs.find(d => d.orderId === orderId)
|
||||
setDesign(related || null)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const STATUS_MAP: Record<string, { label: string; badge: string; desc: string }> = {
|
||||
pending: { label: '待付款', badge: 'badge-pink', desc: '您尚未付款，请及时支付' },
|
||||
paid: { label: '待发货', badge: 'badge-blue', desc: '商家正在准备发货' },
|
||||
shipping: { label: '待收货', badge: 'badge-blue', desc: '快递运输中' },
|
||||
done: { label: '已完成', badge: 'badge-green', desc: '交易已完成' }
|
||||
}
|
||||
|
||||
if (!order) {
|
||||
return (
|
||||
<View className={`theme-${theme}`}>
|
||||
<View className='order-detail-page'>
|
||||
<View className='page-header dashed-card mt-20'>
|
||||
<Text className='page-title'>订单未找到</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const status = STATUS_MAP[order.statusCode] || STATUS_MAP.pending
|
||||
|
||||
return (
|
||||
<View className={`theme-${theme}`}>
|
||||
<View className='order-detail-page'>
|
||||
<ThemeToggle />
|
||||
|
||||
<View className='page-header dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<View className='flex-between' style={{ width: '100%' }}>
|
||||
<Text className='back-btn' onClick={() => Taro.navigateBack()}>←</Text>
|
||||
<Text className='page-title'>订单详情</Text>
|
||||
<View style={{ width: '60px' }} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 状态卡片 */}
|
||||
<View className='status-card dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<View className='status-top'>
|
||||
<Text className={`badge ${status.badge} status-badge`}>{status.label}</Text>
|
||||
<Text className='status-desc'>{status.desc}</Text>
|
||||
</View>
|
||||
<View className='logistics-timeline'>
|
||||
<View className='timeline-item active'>
|
||||
<View className='timeline-dot' />
|
||||
<View className='timeline-content'>
|
||||
<Text className='timeline-title'>已支付</Text>
|
||||
<Text className='timeline-time'>{order.date}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className='timeline-item'>
|
||||
<View className='timeline-dot' />
|
||||
<View className='timeline-content'>
|
||||
<Text className='timeline-title'>商家发货</Text>
|
||||
<Text className='timeline-time'>待更新</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className='timeline-item'>
|
||||
<View className='timeline-dot' />
|
||||
<View className='timeline-content'>
|
||||
<Text className='timeline-title'>运输中</Text>
|
||||
<Text className='timeline-time'>待更新</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className='timeline-item'>
|
||||
<View className='timeline-dot' />
|
||||
<View className='timeline-content'>
|
||||
<Text className='timeline-title'>已签收</Text>
|
||||
<Text className='timeline-time'>待更新</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 地址信息 */}
|
||||
<View className='address-card dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<View className='address-header'>
|
||||
<Text className='address-icon'>📍</Text>
|
||||
<Text className='address-title'>收货地址</Text>
|
||||
</View>
|
||||
<Text className='address-name'>收货人：智绘微刻用户</Text>
|
||||
<Text className='address-phone'>138****8888</Text>
|
||||
<Text className='address-detail'>广东省深圳市南山区科技园智绘微刻总部</Text>
|
||||
</View>
|
||||
|
||||
{/* 商品信息 */}
|
||||
<View className='product-card dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<Text className='section-title'>商品信息</Text>
|
||||
<View className='product-row'>
|
||||
<View className='product-icon-wrapper'>
|
||||
<Text className='product-icon'>{order.productIcon}</Text>
|
||||
</View>
|
||||
<View className='product-info'>
|
||||
<Text className='product-name'>{order.productName}</Text>
|
||||
<Text className='product-sku'>{order.sku}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className='price-row'>
|
||||
<Text className='price-label'>商品总价</Text>
|
||||
<Text className='price-value'>{order.price}</Text>
|
||||
</View>
|
||||
<View className='price-row'>
|
||||
<Text className='price-label'>运费</Text>
|
||||
<Text className='price-value'>¥0.00</Text>
|
||||
</View>
|
||||
<View className='price-row total'>
|
||||
<Text className='price-label total-label'>实付款</Text>
|
||||
<Text className='price-value total-value'>{order.price}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 订单信息 */}
|
||||
<View className='info-card dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<Text className='section-title'>订单信息</Text>
|
||||
<View className='info-row'>
|
||||
<Text className='info-label'>订单编号</Text>
|
||||
<Text className='info-value'>{order.id}</Text>
|
||||
</View>
|
||||
<View className='info-row'>
|
||||
<Text className='info-label'>创建时间</Text>
|
||||
<Text className='info-value'>{order.date}</Text>
|
||||
</View>
|
||||
<View className='info-row'>
|
||||
<Text className='info-label'>支付方式</Text>
|
||||
<Text className='info-value'>微信支付</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 设计效果 */}
|
||||
{design?.designData?.stickers ? (
|
||||
<View className='preview-card dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<Text className='section-title'>设计效果</Text>
|
||||
<View className='design-preview' style={{ width: design.designData.category?.mask?.width || 300, height: design.designData.category?.mask?.height || 420 }}>
|
||||
{design.designData.stickers.map((s: any) => (
|
||||
<Image key={s.id} className='preview-sticker' src={s.src} style={{ transform: `translate(${s.x}px, ${s.y}px) scale(${s.scale || 1})`, width: s.width || 200, height: s.height || 200 }} mode='aspectFit' />
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
) : design?.designData?.imageSrc ? (
|
||||
<View className='preview-card dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<Text className='section-title'>设计效果</Text>
|
||||
<View className='design-preview' style={{ width: design.designData.category?.mask?.width || 300, height: design.designData.category?.mask?.height || 420 }}>
|
||||
<Image className='preview-sticker' src={design.designData.imageSrc} style={{ transform: `translate(${design.designData.imagePos?.x || 0}px, ${design.designData.imagePos?.y || 0}px) scale(${design.designData.imagePos?.scale || 1})` }} mode='aspectFit' />
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<View style={{ height: '40px' }} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user