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 {
font-size: 28px;
color: var(--accent-blue);
color: var(--accent-secondary);
font-weight: 500;
}
@@ -35,7 +35,7 @@
}
.tab-item.active .tab-label {
color: var(--accent-pink);
color: var(--accent-primary);
font-weight: 700;
}
@@ -46,7 +46,7 @@
transform: translateX(-50%);
width: 40px;
height: 4px;
background: var(--accent-pink);
background: var(--accent-primary);
border-radius: 2px;
}
@@ -68,14 +68,14 @@
width: 36px;
height: 36px;
border-radius: 50%;
border: 3px dashed var(--text-secondary);
border: 2rpx solid var(--border-strong);
flex-shrink: 0;
transition: all 0.2s;
}
.batch-checkbox.checked {
border-color: var(--accent-pink);
background: var(--accent-pink);
border-color: var(--accent-primary);
background: var(--accent-primary);
}
.batch-text {
@@ -90,7 +90,7 @@
}
.batch-delete.active {
color: #ff4757;
color: var(--danger);
font-weight: 600;
}
@@ -106,8 +106,8 @@
}
.design-card.selected {
border-color: var(--accent-pink);
background: rgba(255, 154, 158, 0.06);
border-color: var(--accent-primary);
background: var(--accent-primary-soft);
}
.design-body {
@@ -155,7 +155,7 @@
.design-total {
font-size: 26px;
font-weight: 600;
color: var(--accent-pink);
color: var(--accent-primary);
}
.design-actions {
src/pages/designList/index.tsx
+7 -7
View File
@@ -120,7 +120,7 @@ export default function DesignListPage() {
<ThemedPageMeta />
<LoginGuard>
<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%' }}>
<Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
<Text className='page-title'>我的设计清单</Text>
@@ -148,7 +148,7 @@ export default function DesignListPage() {
{/* 批量管理工具栏 */}
{managing && (
<View className='batch-bar dashed-card'>
<View className='batch-bar surface-card'>
<View className='flex-between' style={{ width: '100%' }}>
<View className='batch-select-all' onTap={toggleSelectAll}>
<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>
{filtered.map(item => {
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
: PRODUCT_ICON_MAP[item.productId] || '/icon/四角星.svg'
const iconSrc = assetUrl(rawIcon)
@@ -173,7 +173,7 @@ export default function DesignListPage() {
return (
<View
key={item.id}
className={`design-card dashed-card ${isSelected ? 'selected' : ''}`}
className={`design-card surface-card ${isSelected ? 'selected' : ''}`}
onTap={() => managing ? toggleSelect(item.id) : undefined}
>
<View className='design-body'>
@@ -193,12 +193,12 @@ export default function DesignListPage() {
{!managing && (
<View className='design-actions'>
{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>
</View>
)}
{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>
</View>
)}
@@ -213,7 +213,7 @@ export default function DesignListPage() {
<Image className='empty-icon-img' src={assetUrl('/icon/调色盘.png')} mode='aspectFit' />
<Text className='empty-text'>还没有设计清单</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>
</View>
</View>
src/pages/orderDetail/index.scss
+21 -21
View File
@@ -43,7 +43,7 @@
top: 8px;
bottom: 8px;
width: 2px;
background: var(--line-star);
background: var(--border);
opacity: 0.3;
}
@@ -63,7 +63,7 @@
height: 18px;
border-radius: 50%;
background: var(--bg-card);
border: 3px solid var(--line-star);
border: 2rpx solid var(--border-strong);
margin-right: 20px;
flex-shrink: 0;
margin-left: -20px;
@@ -71,8 +71,8 @@
}
.timeline-item.active .timeline-dot {
background: var(--accent-pink);
border-color: var(--accent-pink);
background: var(--accent-primary);
border-color: var(--accent-primary);
}
.timeline-content {
@@ -112,12 +112,12 @@
.address-change {
padding: 6px 16px;
border-radius: 8px;
background: rgba(91, 140, 255, 0.08);
background: var(--accent-secondary-soft);
}
.change-text {
font-size: 24px;
color: var(--accent-blue);
color: var(--accent-secondary);
}
.address-body {
@@ -181,11 +181,11 @@
.addr-picker-item {
padding: 20px 16px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
border-bottom: 1rpx solid var(--border);
}
.addr-picker-item.active {
background: rgba(91, 140, 255, 0.06);
background: var(--accent-secondary-soft);
border-radius: 12px;
}
@@ -209,8 +209,8 @@
.addr-picker-default {
font-size: 22px;
color: var(--accent-pink);
border: 1px solid var(--accent-pink);
color: var(--accent-primary);
border: 1rpx solid var(--accent-primary);
padding: 2px 8px;
border-radius: 6px;
}
@@ -231,13 +231,13 @@
margin-top: 16px;
padding: 20px;
text-align: center;
border: 2px dashed var(--accent-blue);
border: 1rpx solid var(--border-strong);
border-radius: 12px;
}
.addr-picker-add-text {
font-size: 28px;
color: var(--accent-blue);
color: var(--accent-secondary);
}
/* 卡片标题 icon（物流/地址） */
@@ -299,7 +299,7 @@
align-items: center;
justify-content: space-between;
padding: 16px 0;
border-top: 1px dashed rgba(0,0,0,0.06);
border-top: 1rpx solid var(--border);
}
.price-label {
@@ -324,7 +324,7 @@
.total-value {
font-size: 36px;
font-weight: 800;
color: var(--accent-pink);
color: var(--accent-primary);
}
/* 信息卡片 */
@@ -365,7 +365,7 @@
justify-content: space-between;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px dashed rgba(0,0,0,0.06);
border-bottom: 1rpx solid var(--border);
}
.logistics-title {
@@ -391,7 +391,7 @@
top: 8px;
bottom: 8px;
width: 2px;
background: var(--line-star);
background: var(--border);
opacity: 0.3;
}
@@ -411,7 +411,7 @@
height: 18px;
border-radius: 50%;
background: var(--bg-card);
border: 3px solid var(--line-star);
border: 2rpx solid var(--border-strong);
margin-right: 20px;
flex-shrink: 0;
margin-left: -20px;
@@ -419,8 +419,8 @@
}
.timeline-item.active .timeline-dot {
background: var(--accent-pink);
border-color: var(--accent-pink);
background: var(--accent-primary);
border-color: var(--accent-primary);
}
.timeline-content {
@@ -479,10 +479,10 @@
.design-preview {
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;
overflow: hidden;
border: 3px dashed var(--accent-blue);
border: 1rpx solid var(--border-strong);
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 { useState, useEffect } from 'react'
import './index.scss'
@@ -14,8 +14,9 @@ export default function OrderDetailPage() {
const { theme, resolvedTheme } = useThemeContext()
const safe = useSafeArea()
useStatusBar(resolvedTheme)
const params = Taro.getCurrentInstance().router?.params
const orderId = params?.orderId || ''
const router = Taro.getCurrentInstance().router
const params = router ? router.params : {}
const orderId = (params && params.orderId) || ''
const [order, setOrder] = useState<OrderItem | null>(null)
const [address, setAddress] = useState<AddressItem | null>(null)
@@ -55,7 +56,7 @@ export default function OrderDetailPage() {
<View className={`theme-${resolvedTheme}`}>
<ThemedPageMeta />
<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>
</View>
</View>
@@ -68,8 +69,7 @@ export default function OrderDetailPage() {
<ThemedPageMeta />
<View className='order-detail-page'>
<View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<View className='star-badge' />
<View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<View className='flex-between' style={{ width: '100%' }}>
<Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
<Text className='page-title'>订单详情</Text>
@@ -78,8 +78,7 @@ export default function OrderDetailPage() {
</View>
{/* 状态横幅 */}
<View className='status-banner dashed-card mt-20'>
<View className='star-badge' />
<View className='status-banner surface-card mt-20'>
<Text className='status-text'>
{order.statusCode === 'pending' && '待付款'}
{order.statusCode === 'paid' && '待发货'}
@@ -96,8 +95,7 @@ export default function OrderDetailPage() {
{/* 物流信息（仅 shipping/done） */}
{(order.statusCode === 'shipping' || order.statusCode === 'done') && (
<View className='logistics-card dashed-card mt-20'>
<View className='star-badge' />
<View className='logistics-card surface-card mt-20'>
<View className='logistics-header'>
<View className='flex-center'>
<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='star-badge' />
<View className='product-card surface-card mt-20'>
<View className='product-row'>
<View className='product-icon-wrapper'>
<Image
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'
/>
</View>
@@ -157,8 +154,7 @@ export default function OrderDetailPage() {
</View>
{/* 收货地址 */}
<View className='address-card dashed-card mt-20'>
<View className='star-badge' />
<View className='address-card surface-card mt-20'>
<View className='address-header'>
<View className='flex-center'>
<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>
</View>
<Text className='address-detail'>
{address.region?.join(' ')} {address.detail}
{(address.region || []).join(' ')} {address.detail}
</Text>
</View>
) : (
@@ -186,8 +182,7 @@ export default function OrderDetailPage() {
</View>
{/* 订单信息 */}
<View className='meta-card dashed-card mt-20'>
<View className='star-badge' />
<View className='meta-card surface-card mt-20'>
<Text className='meta-title'>订单信息</Text>
<View className='meta-row'>
<Text className='meta-label'>订单编号</Text>
@@ -208,7 +203,7 @@ export default function OrderDetailPage() {
{/* 地址选择底部弹窗 */}
{showAddrPicker && (
<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'>
<Text className='addr-picker-title'>选择收货地址</Text>
<Text className='addr-picker-close' onTap={() => setShowAddrPicker(false)}>✕</Text>
@@ -217,7 +212,7 @@ export default function OrderDetailPage() {
{addrList.map((addr) => (
<View
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)}
>
<View className='addr-picker-row'>
@@ -226,7 +221,7 @@ export default function OrderDetailPage() {
{addr.isDefault && <Text className='addr-picker-default'>默认</Text>}
</View>
<Text className='addr-picker-detail'>
{addr.region?.join(' ')} {addr.detail}
{(addr.region || []).join(' ')} {addr.detail}
</Text>
</View>
))}
src/pages/orders/index.scss
+13 -13
View File
@@ -22,11 +22,11 @@
}
.tab-label {
font-size: 28px;
color: #b08d8d;
color: var(--text-secondary);
font-weight: 500;
}
.tab-item.active .tab-label {
color: #ff9a9e;
color: var(--accent-primary);
font-weight: 700;
}
.tab-underline {
@@ -36,7 +36,7 @@
transform: translateX(-50%);
width: 40px;
height: 4px;
background: #ff9a9e;
background: var(--accent-primary);
border-radius: 4px;
}
@@ -54,12 +54,12 @@
justify-content: space-between;
align-items: center;
padding-bottom: 20px;
border-bottom: 2px dashed #fce4ec;
border-bottom: 1rpx solid var(--border);
margin-bottom: 20px;
}
.order-date {
font-size: 24px;
color: #b08d8d;
color: var(--text-secondary);
}
.order-body {
@@ -70,7 +70,7 @@
.order-icon-wrapper {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #fff0f5 0%, #e3f2fd 100%);
background: var(--bg-input);
border-radius: 16px;
display: flex;
align-items: center;
@@ -91,25 +91,25 @@
.order-product {
font-size: 30px;
font-weight: 700;
color: #5c3a3a;
color: var(--text-primary);
display: block;
margin-bottom: 8px;
}
.order-sku {
font-size: 24px;
color: #b08d8d;
color: var(--text-secondary);
display: block;
margin-bottom: 8px;
}
.order-meta {
font-size: 22px;
color: #ccc;
color: var(--text-muted);
display: block;
}
.order-footer {
padding-top: 16px;
border-top: 2px dashed #fce4ec;
border-top: 1rpx solid var(--border);
}
.order-price-bar {
display: flex;
@@ -119,13 +119,13 @@
}
.price-label {
font-size: 24px;
color: #b08d8d;
color: var(--text-secondary);
margin-right: 8px;
}
.price-value {
font-size: 36px;
font-weight: 800;
color: #ff6b81;
color: var(--accent-primary);
}
.order-actions {
display: flex;
@@ -135,7 +135,7 @@
.order-btn {
padding: 14px 28px !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(() => {
Taro.eventCenter?.once?.('orders:refresh', load)
if (Taro.eventCenter) {
Taro.eventCenter.once('orders:refresh', load)
}
load()
return () => { Taro.eventCenter?.off?.('orders:refresh', load) }
return () => {
if (Taro.eventCenter) {
Taro.eventCenter.off('orders:refresh', load)
}
}
}, [])
const filteredOrders = activeTab === 'all'
@@ -81,8 +87,7 @@ export default function OrdersPage() {
<LoginGuard>
<View className='orders-page'>
<View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<View className='star-badge' />
<View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<Text className='page-title'>我的订单</Text>
</View>
@@ -106,13 +111,12 @@ export default function OrdersPage() {
<ScrollView className='orders-list' scrollY>
{filteredOrders.map((order) => {
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
: '/icon/四角星.svg'
const iconSrc = assetUrl(rawIcon)
return (
<View key={order.id} className='order-card dashed-card' onTap={() => goDetail(order)}>
<View className='star-badge' />
<View key={order.id} className='order-card surface-card' onTap={() => goDetail(order)}>
<View className='order-header'>
<Text className='order-date'>{order.date}</Text>
<Text className={`badge ${status.badge}`}>{status.label}</Text>
@@ -134,36 +138,36 @@ export default function OrdersPage() {
</View>
<View className='order-actions'>
{order.statusCode === 'pending' && (
<View className='btn-gradient order-btn'>
<View className='btn-primary order-btn'>
<Text>立即付款</Text>
</View>
)}
{order.statusCode === 'paid' && (
<View className='btn-outline order-btn'>
<View className='btn-secondary order-btn'>
<Text>催发货</Text>
</View>
)}
{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>
</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>
</View>
</>
)}
{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>
</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>
</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>
</View>
</View>
@@ -177,7 +181,7 @@ export default function OrdersPage() {
<Image className='empty-icon-img' src={assetUrl('/icon/包裹.png')} mode='aspectFit' />
<Text className='empty-text'>暂无订单</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>
</View>
</View>