EIEI/wechat_wc
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refresh design list and order pages

Browse Source
This commit is contained in:
broccoli
2026-08-07 17:20:27 +08:00
parent 97b9568823
commit 8fb07f96c9
6 changed files with 86 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/designList/index.scss
+10 -10
View File
@@ -5,7 +5,7 @@
.manage-btn { .manage-btn {
font-size: 28px; font-size: 28px;
color: var(--accent-blue); color: var(--accent-secondary);
font-weight: 500; font-weight: 500;
} }
@@ -35,7 +35,7 @@
} }
.tab-item.active .tab-label { .tab-item.active .tab-label {
color: var(--accent-pink); color: var(--accent-primary);
font-weight: 700; font-weight: 700;
} }
@@ -46,7 +46,7 @@
transform: translateX(-50%); transform: translateX(-50%);
width: 40px; width: 40px;
height: 4px; height: 4px;
background: var(--accent-pink); background: var(--accent-primary);
border-radius: 2px; border-radius: 2px;
} }
@@ -68,14 +68,14 @@
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 50%; border-radius: 50%;
border: 3px dashed var(--text-secondary); border: 2rpx solid var(--border-strong);
flex-shrink: 0; flex-shrink: 0;
transition: all 0.2s; transition: all 0.2s;
} }
.batch-checkbox.checked { .batch-checkbox.checked {
border-color: var(--accent-pink); border-color: var(--accent-primary);
background: var(--accent-pink); background: var(--accent-primary);
} }
.batch-text { .batch-text {
@@ -90,7 +90,7 @@
} }
.batch-delete.active { .batch-delete.active {
color: #ff4757; color: var(--danger);
font-weight: 600; font-weight: 600;
} }
@@ -106,8 +106,8 @@
} }
.design-card.selected { .design-card.selected {
border-color: var(--accent-pink); border-color: var(--accent-primary);
background: rgba(255, 154, 158, 0.06); background: var(--accent-primary-soft);
} }
.design-body { .design-body {
@@ -155,7 +155,7 @@
.design-total { .design-total {
font-size: 26px; font-size: 26px;
font-weight: 600; font-weight: 600;
color: var(--accent-pink); color: var(--accent-primary);
} }
.design-actions { .design-actions {
src/pages/designList/index.tsx
+7 -7
View File
@@ -120,7 +120,7 @@ export default function DesignListPage() {
<ThemedPageMeta /> <ThemedPageMeta />
<LoginGuard> <LoginGuard>
<View className='design-page'> <View className='design-page'>
<View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}> <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<View className='flex-between' style={{ width: '100%' }}> <View className='flex-between' style={{ width: '100%' }}>
<Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text> <Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
<Text className='page-title'>我的设计清单</Text> <Text className='page-title'>我的设计清单</Text>
@@ -148,7 +148,7 @@ export default function DesignListPage() {
{/* 批量管理工具栏 */} {/* 批量管理工具栏 */}
{managing && ( {managing && (
<View className='batch-bar dashed-card'> <View className='batch-bar surface-card'>
<View className='flex-between' style={{ width: '100%' }}> <View className='flex-between' style={{ width: '100%' }}>
<View className='batch-select-all' onTap={toggleSelectAll}> <View className='batch-select-all' onTap={toggleSelectAll}>
<View className={`batch-checkbox ${selected.size === filtered.length && filtered.length > 0 ? 'checked' : ''}`} /> <View className={`batch-checkbox ${selected.size === filtered.length && filtered.length > 0 ? 'checked' : ''}`} />
@@ -165,7 +165,7 @@ export default function DesignListPage() {
<ScrollView className='design-list' scrollY> <ScrollView className='design-list' scrollY>
{filtered.map(item => { {filtered.map(item => {
const style = STATUS_STYLE[item.status] const style = STATUS_STYLE[item.status]
const rawIcon = item.productIcon?.startsWith('/icon/') || /^https?:/i.test(item.productIcon || '') const rawIcon = (item.productIcon || '').startsWith('/icon/') || /^https?:/i.test(item.productIcon || '')
? item.productIcon ? item.productIcon
: PRODUCT_ICON_MAP[item.productId] || '/icon/四角星.svg' : PRODUCT_ICON_MAP[item.productId] || '/icon/四角星.svg'
const iconSrc = assetUrl(rawIcon) const iconSrc = assetUrl(rawIcon)
@@ -173,7 +173,7 @@ export default function DesignListPage() {
return ( return (
<View <View
key={item.id} key={item.id}
className={`design-card dashed-card ${isSelected ? 'selected' : ''}`} className={`design-card surface-card ${isSelected ? 'selected' : ''}`}
onTap={() => managing ? toggleSelect(item.id) : undefined} onTap={() => managing ? toggleSelect(item.id) : undefined}
> >
<View className='design-body'> <View className='design-body'>
@@ -193,12 +193,12 @@ export default function DesignListPage() {
{!managing && ( {!managing && (
<View className='design-actions'> <View className='design-actions'>
{item.status !== 'ordered' && ( {item.status !== 'ordered' && (
<View className='btn-gradient design-btn' onTap={() => goDesign(item)}> <View className='btn-primary design-btn' onTap={() => goDesign(item)}>
<Text>{item.status === 'undesigned' ? '开始设计' : '继续设计'}</Text> <Text>{item.status === 'undesigned' ? '开始设计' : '继续设计'}</Text>
</View> </View>
)} )}
{item.status === 'ordered' && ( {item.status === 'ordered' && (
<View className='btn-outline design-btn' onTap={() => Taro.switchTab({ url: '/pages/orders/index' })}> <View className='btn-secondary design-btn' onTap={() => Taro.switchTab({ url: '/pages/orders/index' })}>
<Text>查看订单</Text> <Text>查看订单</Text>
</View> </View>
)} )}
@@ -213,7 +213,7 @@ export default function DesignListPage() {
<Image className='empty-icon-img' src={assetUrl('/icon/调色盘.png')} mode='aspectFit' /> <Image className='empty-icon-img' src={assetUrl('/icon/调色盘.png')} mode='aspectFit' />
<Text className='empty-text'>还没有设计清单</Text> <Text className='empty-text'>还没有设计清单</Text>
<Text className='empty-sub'>去首页逛逛，找到喜欢的定制品</Text> <Text className='empty-sub'>去首页逛逛，找到喜欢的定制品</Text>
<View className='btn-gradient' onTap={() => Taro.switchTab({ url: '/pages/index/index' })}> <View className='btn-primary' onTap={() => Taro.switchTab({ url: '/pages/index/index' })}>
<Text>去逛逛</Text> <Text>去逛逛</Text>
</View> </View>
</View> </View>
src/pages/orderDetail/index.scss
+21 -21
View File
@@ -43,7 +43,7 @@
top: 8px; top: 8px;
bottom: 8px; bottom: 8px;
width: 2px; width: 2px;
background: var(--line-star); background: var(--border);
opacity: 0.3; opacity: 0.3;
} }
@@ -63,7 +63,7 @@
height: 18px; height: 18px;
border-radius: 50%; border-radius: 50%;
background: var(--bg-card); background: var(--bg-card);
border: 3px solid var(--line-star); border: 2rpx solid var(--border-strong);
margin-right: 20px; margin-right: 20px;
flex-shrink: 0; flex-shrink: 0;
margin-left: -20px; margin-left: -20px;
@@ -71,8 +71,8 @@
} }
.timeline-item.active .timeline-dot { .timeline-item.active .timeline-dot {
background: var(--accent-pink); background: var(--accent-primary);
border-color: var(--accent-pink); border-color: var(--accent-primary);
} }
.timeline-content { .timeline-content {
@@ -112,12 +112,12 @@
.address-change { .address-change {
padding: 6px 16px; padding: 6px 16px;
border-radius: 8px; border-radius: 8px;
background: rgba(91, 140, 255, 0.08); background: var(--accent-secondary-soft);
} }
.change-text { .change-text {
font-size: 24px; font-size: 24px;
color: var(--accent-blue); color: var(--accent-secondary);
} }
.address-body { .address-body {
@@ -181,11 +181,11 @@
.addr-picker-item { .addr-picker-item {
padding: 20px 16px; padding: 20px 16px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.05); border-bottom: 1rpx solid var(--border);
} }
.addr-picker-item.active { .addr-picker-item.active {
background: rgba(91, 140, 255, 0.06); background: var(--accent-secondary-soft);
border-radius: 12px; border-radius: 12px;
} }
@@ -209,8 +209,8 @@
.addr-picker-default { .addr-picker-default {
font-size: 22px; font-size: 22px;
color: var(--accent-pink); color: var(--accent-primary);
border: 1px solid var(--accent-pink); border: 1rpx solid var(--accent-primary);
padding: 2px 8px; padding: 2px 8px;
border-radius: 6px; border-radius: 6px;
} }
@@ -231,13 +231,13 @@
margin-top: 16px; margin-top: 16px;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
border: 2px dashed var(--accent-blue); border: 1rpx solid var(--border-strong);
border-radius: 12px; border-radius: 12px;
} }
.addr-picker-add-text { .addr-picker-add-text {
font-size: 28px; font-size: 28px;
color: var(--accent-blue); color: var(--accent-secondary);
} }
/* 卡片标题 icon（物流/地址） */ /* 卡片标题 icon（物流/地址） */
@@ -299,7 +299,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 16px 0; padding: 16px 0;
border-top: 1px dashed rgba(0,0,0,0.06); border-top: 1rpx solid var(--border);
} }
.price-label { .price-label {
@@ -324,7 +324,7 @@
.total-value { .total-value {
font-size: 36px; font-size: 36px;
font-weight: 800; font-weight: 800;
color: var(--accent-pink); color: var(--accent-primary);
} }
/* 信息卡片 */ /* 信息卡片 */
@@ -365,7 +365,7 @@
justify-content: space-between; justify-content: space-between;
margin-bottom: 24px; margin-bottom: 24px;
padding-bottom: 16px; padding-bottom: 16px;
border-bottom: 1px dashed rgba(0,0,0,0.06); border-bottom: 1rpx solid var(--border);
} }
.logistics-title { .logistics-title {
@@ -391,7 +391,7 @@
top: 8px; top: 8px;
bottom: 8px; bottom: 8px;
width: 2px; width: 2px;
background: var(--line-star); background: var(--border);
opacity: 0.3; opacity: 0.3;
} }
@@ -411,7 +411,7 @@
height: 18px; height: 18px;
border-radius: 50%; border-radius: 50%;
background: var(--bg-card); background: var(--bg-card);
border: 3px solid var(--line-star); border: 2rpx solid var(--border-strong);
margin-right: 20px; margin-right: 20px;
flex-shrink: 0; flex-shrink: 0;
margin-left: -20px; margin-left: -20px;
@@ -419,8 +419,8 @@
} }
.timeline-item.active .timeline-dot { .timeline-item.active .timeline-dot {
background: var(--accent-pink); background: var(--accent-primary);
border-color: var(--accent-pink); border-color: var(--accent-primary);
} }
.timeline-content { .timeline-content {
@@ -479,10 +479,10 @@
.design-preview { .design-preview {
position: relative; position: relative;
background: linear-gradient(135deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%); background: var(--bg-input);
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
border: 3px dashed var(--accent-blue); border: 1rpx solid var(--border-strong);
margin: 0 auto; margin: 0 auto;
} }
src/pages/orderDetail/index.tsx
+16 -21
View File
@@ -1,4 +1,4 @@
import { View, Text, Image, Button } from '@tarojs/components' import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro' import Taro from '@tarojs/taro'
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import './index.scss' import './index.scss'
@@ -14,8 +14,9 @@ export default function OrderDetailPage() {
const { theme, resolvedTheme } = useThemeContext() const { theme, resolvedTheme } = useThemeContext()
const safe = useSafeArea() const safe = useSafeArea()
useStatusBar(resolvedTheme) useStatusBar(resolvedTheme)
const params = Taro.getCurrentInstance().router?.params const router = Taro.getCurrentInstance().router
const orderId = params?.orderId || '' const params = router ? router.params : {}
const orderId = (params && params.orderId) || ''
const [order, setOrder] = useState<OrderItem | null>(null) const [order, setOrder] = useState<OrderItem | null>(null)
const [address, setAddress] = useState<AddressItem | null>(null) const [address, setAddress] = useState<AddressItem | null>(null)
@@ -55,7 +56,7 @@ export default function OrderDetailPage() {
<View className={`theme-${resolvedTheme}`}> <View className={`theme-${resolvedTheme}`}>
<ThemedPageMeta /> <ThemedPageMeta />
<View className='order-detail-page'> <View className='order-detail-page'>
<View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}> <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<Text className='page-title'>订单不存在</Text> <Text className='page-title'>订单不存在</Text>
</View> </View>
</View> </View>
@@ -68,8 +69,7 @@ export default function OrderDetailPage() {
<ThemedPageMeta /> <ThemedPageMeta />
<View className='order-detail-page'> <View className='order-detail-page'>
<View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}> <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<View className='star-badge' />
<View className='flex-between' style={{ width: '100%' }}> <View className='flex-between' style={{ width: '100%' }}>
<Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text> <Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
<Text className='page-title'>订单详情</Text> <Text className='page-title'>订单详情</Text>
@@ -78,8 +78,7 @@ export default function OrderDetailPage() {
</View> </View>
{/* 状态横幅 */} {/* 状态横幅 */}
<View className='status-banner dashed-card mt-20'> <View className='status-banner surface-card mt-20'>
<View className='star-badge' />
<Text className='status-text'> <Text className='status-text'>
{order.statusCode === 'pending' && '待付款'} {order.statusCode === 'pending' && '待付款'}
{order.statusCode === 'paid' && '待发货'} {order.statusCode === 'paid' && '待发货'}
@@ -96,8 +95,7 @@ export default function OrderDetailPage() {
{/* 物流信息（仅 shipping/done） */} {/* 物流信息（仅 shipping/done） */}
{(order.statusCode === 'shipping' || order.statusCode === 'done') && ( {(order.statusCode === 'shipping' || order.statusCode === 'done') && (
<View className='logistics-card dashed-card mt-20'> <View className='logistics-card surface-card mt-20'>
<View className='star-badge' />
<View className='logistics-header'> <View className='logistics-header'>
<View className='flex-center'> <View className='flex-center'>
<Image className='card-icon-img' src={assetUrl('/icon/包裹.png')} mode='aspectFit' /> <Image className='card-icon-img' src={assetUrl('/icon/包裹.png')} mode='aspectFit' />
@@ -135,13 +133,12 @@ export default function OrderDetailPage() {
)} )}
{/* 商品信息 */} {/* 商品信息 */}
<View className='product-card dashed-card mt-20'> <View className='product-card surface-card mt-20'>
<View className='star-badge' />
<View className='product-row'> <View className='product-row'>
<View className='product-icon-wrapper'> <View className='product-icon-wrapper'>
<Image <Image
className='product-icon-img' className='product-icon-img'
src={assetUrl(order.productIcon?.startsWith('/icon/') || /^https?:/i.test(order.productIcon || '') ? order.productIcon : PRODUCT_ICON_MAP[order.productId] || '/icon/四角星.svg')} src={assetUrl((order.productIcon || '').startsWith('/icon/') || /^https?:/i.test(order.productIcon || '') ? order.productIcon : PRODUCT_ICON_MAP[order.productId] || '/icon/四角星.svg')}
mode='aspectFit' mode='aspectFit'
/> />
</View> </View>
@@ -157,8 +154,7 @@ export default function OrderDetailPage() {
</View> </View>
{/* 收货地址 */} {/* 收货地址 */}
<View className='address-card dashed-card mt-20'> <View className='address-card surface-card mt-20'>
<View className='star-badge' />
<View className='address-header'> <View className='address-header'>
<View className='flex-center'> <View className='flex-center'>
<Image className='card-icon-img' src={assetUrl('/icon/地址.png')} mode='aspectFit' /> <Image className='card-icon-img' src={assetUrl('/icon/地址.png')} mode='aspectFit' />
@@ -175,7 +171,7 @@ export default function OrderDetailPage() {
<Text className='address-phone'>{address.phone}</Text> <Text className='address-phone'>{address.phone}</Text>
</View> </View>
<Text className='address-detail'> <Text className='address-detail'>
{address.region?.join(' ')} {address.detail} {(address.region || []).join(' ')} {address.detail}
</Text> </Text>
</View> </View>
) : ( ) : (
@@ -186,8 +182,7 @@ export default function OrderDetailPage() {
</View> </View>
{/* 订单信息 */} {/* 订单信息 */}
<View className='meta-card dashed-card mt-20'> <View className='meta-card surface-card mt-20'>
<View className='star-badge' />
<Text className='meta-title'>订单信息</Text> <Text className='meta-title'>订单信息</Text>
<View className='meta-row'> <View className='meta-row'>
<Text className='meta-label'>订单编号</Text> <Text className='meta-label'>订单编号</Text>
@@ -208,7 +203,7 @@ export default function OrderDetailPage() {
{/* 地址选择底部弹窗 */} {/* 地址选择底部弹窗 */}
{showAddrPicker && ( {showAddrPicker && (
<View className='modal-overlay' style={{ alignItems: 'flex-end', justifyContent: 'flex-end' }}> <View className='modal-overlay' style={{ alignItems: 'flex-end', justifyContent: 'flex-end' }}>
<View className='addr-picker-sheet dashed-card'> <View className='addr-picker-sheet surface-card'>
<View className='addr-picker-header'> <View className='addr-picker-header'>
<Text className='addr-picker-title'>选择收货地址</Text> <Text className='addr-picker-title'>选择收货地址</Text>
<Text className='addr-picker-close' onTap={() => setShowAddrPicker(false)}>✕</Text> <Text className='addr-picker-close' onTap={() => setShowAddrPicker(false)}>✕</Text>
@@ -217,7 +212,7 @@ export default function OrderDetailPage() {
{addrList.map((addr) => ( {addrList.map((addr) => (
<View <View
key={addr.id} key={addr.id}
className={`addr-picker-item ${address?.id === addr.id ? 'active' : ''}`} className={`addr-picker-item ${address && address.id === addr.id ? 'active' : ''}`}
onTap={() => handlePickAddress(addr)} onTap={() => handlePickAddress(addr)}
> >
<View className='addr-picker-row'> <View className='addr-picker-row'>
@@ -226,7 +221,7 @@ export default function OrderDetailPage() {
{addr.isDefault && <Text className='addr-picker-default'>默认</Text>} {addr.isDefault && <Text className='addr-picker-default'>默认</Text>}
</View> </View>
<Text className='addr-picker-detail'> <Text className='addr-picker-detail'>
{addr.region?.join(' ')} {addr.detail} {(addr.region || []).join(' ')} {addr.detail}
</Text> </Text>
</View> </View>
))} ))}
src/pages/orders/index.scss
+13 -13
View File
@@ -22,11 +22,11 @@
} }
.tab-label { .tab-label {
font-size: 28px; font-size: 28px;
color: #b08d8d; color: var(--text-secondary);
font-weight: 500; font-weight: 500;
} }
.tab-item.active .tab-label { .tab-item.active .tab-label {
color: #ff9a9e; color: var(--accent-primary);
font-weight: 700; font-weight: 700;
} }
.tab-underline { .tab-underline {
@@ -36,7 +36,7 @@
transform: translateX(-50%); transform: translateX(-50%);
width: 40px; width: 40px;
height: 4px; height: 4px;
background: #ff9a9e; background: var(--accent-primary);
border-radius: 4px; border-radius: 4px;
} }
@@ -54,12 +54,12 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 2px dashed #fce4ec; border-bottom: 1rpx solid var(--border);
margin-bottom: 20px; margin-bottom: 20px;
} }
.order-date { .order-date {
font-size: 24px; font-size: 24px;
color: #b08d8d; color: var(--text-secondary);
} }
.order-body { .order-body {
@@ -70,7 +70,7 @@
.order-icon-wrapper { .order-icon-wrapper {
width: 120px; width: 120px;
height: 120px; height: 120px;
background: linear-gradient(135deg, #fff0f5 0%, #e3f2fd 100%); background: var(--bg-input);
border-radius: 16px; border-radius: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -91,25 +91,25 @@
.order-product { .order-product {
font-size: 30px; font-size: 30px;
font-weight: 700; font-weight: 700;
color: #5c3a3a; color: var(--text-primary);
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
} }
.order-sku { .order-sku {
font-size: 24px; font-size: 24px;
color: #b08d8d; color: var(--text-secondary);
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
} }
.order-meta { .order-meta {
font-size: 22px; font-size: 22px;
color: #ccc; color: var(--text-muted);
display: block; display: block;
} }
.order-footer { .order-footer {
padding-top: 16px; padding-top: 16px;
border-top: 2px dashed #fce4ec; border-top: 1rpx solid var(--border);
} }
.order-price-bar { .order-price-bar {
display: flex; display: flex;
@@ -119,13 +119,13 @@
} }
.price-label { .price-label {
font-size: 24px; font-size: 24px;
color: #b08d8d; color: var(--text-secondary);
margin-right: 8px; margin-right: 8px;
} }
.price-value { .price-value {
font-size: 36px; font-size: 36px;
font-weight: 800; font-weight: 800;
color: #ff6b81; color: var(--accent-primary);
} }
.order-actions { .order-actions {
display: flex; display: flex;
@@ -135,7 +135,7 @@
.order-btn { .order-btn {
padding: 14px 28px !important; padding: 14px 28px !important;
font-size: 26px !important; font-size: 26px !important;
border-radius: 40px !important; border-radius: 999rpx !important;
} }
/* 空状态 */ /* 空状态 */
src/pages/orders/index.tsx
+19 -15
View File
@@ -62,9 +62,15 @@ export default function OrdersPage() {
// 页面每次显示时刷新（处理下单后同步） // 页面每次显示时刷新（处理下单后同步）
useEffect(() => { useEffect(() => {
Taro.eventCenter?.once?.('orders:refresh', load) if (Taro.eventCenter) {
Taro.eventCenter.once('orders:refresh', load)
}
load() load()
return () => { Taro.eventCenter?.off?.('orders:refresh', load) } return () => {
if (Taro.eventCenter) {
Taro.eventCenter.off('orders:refresh', load)
}
}
}, []) }, [])
const filteredOrders = activeTab === 'all' const filteredOrders = activeTab === 'all'
@@ -81,8 +87,7 @@ export default function OrdersPage() {
<LoginGuard> <LoginGuard>
<View className='orders-page'> <View className='orders-page'>
<View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}> <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<View className='star-badge' />
<Text className='page-title'>我的订单</Text> <Text className='page-title'>我的订单</Text>
</View> </View>
@@ -106,13 +111,12 @@ export default function OrdersPage() {
<ScrollView className='orders-list' scrollY> <ScrollView className='orders-list' scrollY>
{filteredOrders.map((order) => { {filteredOrders.map((order) => {
const status = STATUS_MAP[order.statusCode] || STATUS_MAP.pending const status = STATUS_MAP[order.statusCode] || STATUS_MAP.pending
const rawIcon = order.productIcon?.startsWith('/icon/') || /^https?:/i.test(order.productIcon || '') const rawIcon = (order.productIcon || '').startsWith('/icon/') || /^https?:/i.test(order.productIcon || '')
? order.productIcon ? order.productIcon
: '/icon/四角星.svg' : '/icon/四角星.svg'
const iconSrc = assetUrl(rawIcon) const iconSrc = assetUrl(rawIcon)
return ( return (
<View key={order.id} className='order-card dashed-card' onTap={() => goDetail(order)}> <View key={order.id} className='order-card surface-card' onTap={() => goDetail(order)}>
<View className='star-badge' />
<View className='order-header'> <View className='order-header'>
<Text className='order-date'>{order.date}</Text> <Text className='order-date'>{order.date}</Text>
<Text className={`badge ${status.badge}`}>{status.label}</Text> <Text className={`badge ${status.badge}`}>{status.label}</Text>
@@ -134,36 +138,36 @@ export default function OrdersPage() {
</View> </View>
<View className='order-actions'> <View className='order-actions'>
{order.statusCode === 'pending' && ( {order.statusCode === 'pending' && (
<View className='btn-gradient order-btn'> <View className='btn-primary order-btn'>
<Text>立即付款</Text> <Text>立即付款</Text>
</View> </View>
)} )}
{order.statusCode === 'paid' && ( {order.statusCode === 'paid' && (
<View className='btn-outline order-btn'> <View className='btn-secondary order-btn'>
<Text>催发货</Text> <Text>催发货</Text>
</View> </View>
)} )}
{order.statusCode === 'shipping' && ( {order.statusCode === 'shipping' && (
<> <>
<View className='btn-outline order-btn' onTap={(e) => { e.stopPropagation(); Taro.showToast({ title: '查看物流', icon: 'none' }) }}> <View className='btn-secondary order-btn' onTap={(e) => { e.stopPropagation(); Taro.showToast({ title: '查看物流', icon: 'none' }) }}>
<Text>查看物流</Text> <Text>查看物流</Text>
</View> </View>
<View className='btn-gradient order-btn' onTap={(e) => { e.stopPropagation(); Taro.showToast({ title: '确认收货', icon: 'none' }) }}> <View className='btn-primary order-btn' onTap={(e) => { e.stopPropagation(); Taro.showToast({ title: '确认收货', icon: 'none' }) }}>
<Text>确认收货</Text> <Text>确认收货</Text>
</View> </View>
</> </>
)} )}
{order.statusCode === 'done' && ( {order.statusCode === 'done' && (
<> <>
<View className='btn-outline order-btn' onTap={(e) => { e.stopPropagation(); Taro.showToast({ title: '申请售后', icon: 'none' }) }}> <View className='btn-secondary order-btn' onTap={(e) => { e.stopPropagation(); Taro.showToast({ title: '申请售后', icon: 'none' }) }}>
<Text>申请售后</Text> <Text>申请售后</Text>
</View> </View>
<View className='btn-gradient order-btn' onTap={(e) => { e.stopPropagation(); Taro.showToast({ title: '再来一单', icon: 'none' }) }}> <View className='btn-primary order-btn' onTap={(e) => { e.stopPropagation(); Taro.showToast({ title: '再来一单', icon: 'none' }) }}>
<Text>再来一单</Text> <Text>再来一单</Text>
</View> </View>
</> </>
)} )}
<View className='btn-outline order-btn' onTap={(e) => { e.stopPropagation(); goDetail(order) }}> <View className='btn-secondary order-btn' onTap={(e) => { e.stopPropagation(); goDetail(order) }}>
<Text>详情</Text> <Text>详情</Text>
</View> </View>
</View> </View>
@@ -177,7 +181,7 @@ export default function OrdersPage() {
<Image className='empty-icon-img' src={assetUrl('/icon/包裹.png')} mode='aspectFit' /> <Image className='empty-icon-img' src={assetUrl('/icon/包裹.png')} mode='aspectFit' />
<Text className='empty-text'>暂无订单</Text> <Text className='empty-text'>暂无订单</Text>
<Text className='empty-sub'>去首页开始定制吧</Text> <Text className='empty-sub'>去首页开始定制吧</Text>
<View className='btn-gradient' onTap={() => Taro.switchTab({ url: '/pages/index/index' })}> <View className='btn-primary' onTap={() => Taro.switchTab({ url: '/pages/index/index' })}>
<Text>去定制</Text> <Text>去定制</Text>
</View> </View>
</View> </View>