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

feat(r3-order-pay): 结算与订单支付流程、支付倒计时/商品图组件，接口地址改为构建期注入

Browse Source 
- 新增 PaymentCountdown、ProductImage 组件
- 完善 checkout/orders/orderDetail 订单支付链路与地址、商品、设计数据
- request 接口地址改为构建期注入并保留真实网络错误，默认兜底线上地址
- 同步重新构建 dist 产物
This commit is contained in:
fenjoyoung
2026-09-13 14:50:39 +08:00
parent a13e380009
commit 8fdf0b1b4f
50 changed files with 895 additions and 777 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PaymentCountdown/index.tsx
+42
View File
@@ -0,0 +1,42 @@
import { Text } from '@tarojs/components'
import { useEffect, useRef, useState } from 'react'
interface PaymentCountdownProps {
deadline?: string | null
className?: string
onExpired?: () => void
}
const remainingSeconds = (deadline?: string | null) => {
if (!deadline) return null
const timestamp = new Date(deadline).getTime()
if (Number.isNaN(timestamp)) return null
return Math.max(0, Math.ceil((timestamp - Date.now()) / 1000))
}
/** 待付款订单的显示倒计时；支付资格仍由服务端截止时间最终校验。 */
export default function PaymentCountdown({ deadline, className, onExpired }: PaymentCountdownProps) {
const [seconds, setSeconds] = useState<number | null>(() => remainingSeconds(deadline))
const notified = useRef(false)
useEffect(() => {
notified.current = false
const tick = () => setSeconds(remainingSeconds(deadline))
tick()
const timer = setInterval(tick, 1000)
return () => clearInterval(timer)
}, [deadline])
useEffect(() => {
if (seconds === 0 && !notified.current) {
notified.current = true
onExpired?.()
}
}, [onExpired, seconds])
if (seconds === null) return null
if (seconds === 0) return <Text className={className}>订单超时未支付</Text>
const minutes = Math.floor(seconds / 60)
const remaining = seconds % 60
return <Text className={className}>剩余支付时间 {String(minutes).padStart(2, '0')}:{String(remaining).padStart(2, '0')}</Text>
}
src/components/ProductImage/index.tsx
+46
View File
@@ -0,0 +1,46 @@
import { Image } from '@tarojs/components'
import { useEffect, useState } from 'react'
import { assetUrl } from '../../utils/asset'
interface ProductImageProps {
src?: string | null
fallback?: string | null
className?: string
mode?: any
style?: any
lazyLoad?: boolean
}
/**
* 商品图优先显示 OSS 图片；资源桶超时或图片不存在时退回小程序包内图标，
* 避免首页、商城和详情页出现空白图片区域。
*/
export default function ProductImage({
src,
fallback = '/icon/四角星.svg',
className,
mode = 'aspectFit',
style,
lazyLoad = false,
}: ProductImageProps) {
const primary = assetUrl(src)
const fallbackSrc = assetUrl(fallback)
const [displaySrc, setDisplaySrc] = useState(primary || fallbackSrc)
useEffect(() => {
setDisplaySrc(primary || fallbackSrc)
}, [primary, fallbackSrc])
return (
<Image
className={className}
src={displaySrc}
mode={mode}
style={style}
lazyLoad={lazyLoad}
onError={() => {
if (displaySrc !== fallbackSrc) setDisplaySrc(fallbackSrc)
}}
/>
)
}
src/pages/address/index.tsx
+27 -32
View File
@@ -2,8 +2,8 @@ import { View, Text, Image, Input, Picker } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useEffect } from 'react'
import './index.scss'
import { getAddressList, setAddressList, addAddress, updateAddress, deleteAddress } from '../../utils/store'
import { fetchAddresses, createAddress, updateAddress as updateAddressApi, deleteAddress as deleteAddressApi } from '../../utils/api'
import { getAddressList, addAddress, updateAddress as updateLocalAddress, deleteAddress as deleteLocalAddress, setAddressList } from '../../utils/store'
import { fetchAddresses, createAddress, updateAddress, deleteAddress, setDefaultAddress } from '../../utils/api/address'
import type { AddressItem } from '../../types'
import { useThemeContext } from '../../context/ThemeContext'
import { useSafeArea } from '../../hooks/useSafeArea'
@@ -27,16 +27,14 @@ export default function AddressPage() {
const [detail, setDetail] = useState('')
const [isDefault, setIsDefault] = useState(false)
const load = () => {
// 缓存优先展示（冷启动不空屏），再拉服务端刷新；
// 刷新成功回写缓存并以服务端为准覆盖（旧本地数据不自动合并，route-r2 风险节）
setList(getAddressList())
fetchAddresses()
.then(data => {
setList(data)
setAddressList(data)
})
.catch(() => setList(getAddressList()))
const load = async () => {
try {
const remote = await fetchAddresses()
setList(remote)
setAddressList(remote)
} catch {
setList(getAddressList())
}
}
useEffect(() => {
@@ -67,15 +65,17 @@ export default function AddressPage() {
setShowForm(true)
}
const handleSetDefault = async (id: string) => {
try { const next = await setDefaultAddress(id); setList(prev => prev.map(item => ({ ...item, isDefault: item.id === next.id }))); Taro.showToast({ title: '已设为默认', icon: 'success' }) } catch (error) { Taro.showToast({ title: (error as Error).message || '设置失败', icon: 'none' }) }
}
const handleDelete = (id: string) => {
Taro.showModal({
title: '确认删除',
content: '删除后将无法恢复该地址',
success: (res) => {
if (res.confirm) {
deleteAddressApi(id)
.catch(() => deleteAddress(id)) // 失败降级本地删除
.finally(load)
deleteAddress(id).then(() => load()).catch(error => { deleteLocalAddress(id); load(); Taro.showToast({ title: (error as Error).message || '删除失败', icon: 'none' }) })
}
}
})
@@ -86,28 +86,22 @@ export default function AddressPage() {
Taro.setClipboardData({ data: text })
}
const handleSave = () => {
const handleSave = async () => {
if (!name.trim() || !phone.trim() || region.length === 0 || !detail.trim()) {
Taro.showToast({ title: '请填写完整信息', icon: 'none' })
return
}
const payload = { name, phone, region, detail, isDefault }
const save = editing
? updateAddressApi(editing.id, payload)
: createAddress(payload)
save
.then(() => Taro.showToast({ title: '保存成功', icon: 'success' }))
.catch(() => {
// 服务端不可达时降级本地保存，联网后进入页面会刷新
if (editing) updateAddress(editing.id, payload)
else addAddress(payload)
Taro.showToast({ title: '网络不可用，已暂存到本地', icon: 'none' })
})
.finally(() => {
setShowForm(false)
resetForm()
load()
})
try {
const saved = editing ? await updateAddress(editing.id, payload) : await createAddress(payload)
const next = editing ? list.map(item => item.id === saved.id ? saved : item) : [saved, ...list]
setList(next); setAddressList(next)
Taro.showToast({ title: '保存成功', icon: 'success' }); setShowForm(false); resetForm()
} catch (error) {
// API 失败时保留原有本地兜底，避免离线编辑丢失。
if (editing) updateLocalAddress(editing.id, payload); else addAddress(payload)
Taro.showToast({ title: (error as Error).message || '保存失败，已暂存本地', icon: 'none' }); setShowForm(false); resetForm(); load()
}
}
const onRegionChange = (e: any) => {
@@ -149,6 +143,7 @@ export default function AddressPage() {
<View className='address-actions'>
<Text className='address-act' onTap={() => openEdit(item)}>编辑</Text>
<Text className='address-act' onTap={() => handleCopy(item)}>复制</Text>
{!item.isDefault && <Text className='address-act' onTap={() => handleSetDefault(item.id)}>设为默认</Text>}
<Text className='address-act delete' onTap={() => handleDelete(item.id)}>删除</Text>
</View>
</View>
src/pages/checkout/index.tsx
+62 -16
View File
@@ -2,7 +2,10 @@ import { View, Text, Image, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useEffect } from 'react'
import './index.scss'
import { getDesignList, designToOrder, getDefaultAddress, getAddressList, type AddressItem } from '../../utils/store'
import { getDesignList, getDefaultAddress, getAddressList, setDesignList, type AddressItem } from '../../utils/store'
import { createDesign, fetchDesign } from '../../utils/api/design'
import { fetchAddresses } from '../../utils/api/address'
import { createOrder, payOrder } from '../../utils/api/order'
import { useThemeContext } from '../../context/ThemeContext'
import { useSafeArea } from '../../hooks/useSafeArea'
import { useStatusBar } from '../../hooks/useStatusBar'
@@ -18,20 +21,34 @@ export default function CheckoutPage() {
const [address, setAddress] = useState<AddressItem | null>(null)
const [showAddrPicker, setShowAddrPicker] = useState(false)
const [addrList, setAddrList] = useState<AddressItem[]>([])
const [serverTotal, setServerTotal] = useState<number | null>(null)
const [submitting, setSubmitting] = useState(false)
useEffect(() => {
const router = Taro.getCurrentInstance().router
const params = router ? router.params : undefined
const dId = params ? params.designId : undefined
if (!dId) return
const list = getDesignList()
const d = list.find(x => x.id === dId)
setDesign(d || null)
setAddress(getDefaultAddress())
setAddrList(getAddressList())
const load = async () => {
try {
const remote = await fetchDesign(dId)
setDesign(remote)
const addresses = await fetchAddresses()
setAddrList(addresses)
setAddress(addresses.find(item => item.isDefault) || addresses[0] || null)
} catch {
const list = getDesignList()
const d = list.find(x => x.id === dId)
setDesign(d || null)
setAddress(getDefaultAddress())
setAddrList(getAddressList())
}
}
void load()
}, [])
const handleConfirm = () => {
const handleConfirm = async () => {
if (submitting) return
if (!address) {
Taro.showToast({ title: '请先添加收货地址', icon: 'none' })
return
@@ -39,13 +56,42 @@ export default function CheckoutPage() {
Taro.showModal({
title: '确认下单',
content: `确认后将从设计清单生成订单，并寄送至：\n${formatAddress(address.region, address.detail)}`,
success: (res) => {
success: async (res) => {
if (res.confirm) {
designToOrder(design.id)
Taro.showToast({ title: '下单成功', icon: 'success' })
setTimeout(() => {
Taro.switchTab({ url: '/pages/index/index' })
}, 1500)
setSubmitting(true)
try {
// 直购在极短的网络抖动下可能仍保留本地 DSG... 草稿。
// 下单前补建服务端设计清单，确保永远不会把临时 id 传给订单接口。
let designListId = design.id
if (String(designListId).startsWith('DSG')) {
const saved = await createDesign({
productId: design.productId,
productName: design.productName,
unitPrice: design.unitPrice,
count: design.count,
designData: design.designData,
})
setDesignList(getDesignList().map(item => item.id === design.id ? saved : item))
setDesign(saved)
designListId = saved.id
}
const order = await createOrder({
designListId,
addressId: address.id,
requestId: `checkout-${designListId}-${Date.now()}`,
items: [{ productId: design.productId, quantity: design.count }],
})
setServerTotal(order.totalAmount)
const payment = await payOrder(order.id)
if (!payment.configured) {
Taro.showModal({ title: '订单已创建', content: '当前暂不支持微信支付，订单已保留在待付款。', showCancel: false, success: () => Taro.switchTab({ url: '/pages/orders/index' }) })
} else {
Taro.showToast({ title: '订单已创建', icon: 'success' })
Taro.switchTab({ url: '/pages/orders/index' })
}
} catch (error) {
Taro.showToast({ title: (error as Error).message || '下单失败，请重试', icon: 'none' })
} finally { setSubmitting(false) }
}
}
})
@@ -156,7 +202,7 @@ export default function CheckoutPage() {
</View>
<View className='info-row total-row'>
<Text className='info-label'>总价</Text>
<Text className='info-total'>¥{(design.unitPrice * design.count).toFixed(2)}</Text>
<Text className='info-total'>¥{(serverTotal ?? design.unitPrice * design.count).toFixed(2)}</Text>
</View>
</View>
@@ -190,8 +236,8 @@ export default function CheckoutPage() {
<View className='btn-secondary' onTap={() => Taro.navigateBack()}>
<Text>返回修改</Text>
</View>
<View className='btn-primary' onTap={handleConfirm}>
<Text>确认下单</Text>
<View className={`btn-primary ${submitting ? 'disabled' : ''}`} onTap={handleConfirm}>
<Text>{submitting ? '提交中…' : '确认下单'}</Text>
</View>
</BottomActionBar>
src/pages/designList/index.tsx
+6 -16
View File
@@ -2,8 +2,8 @@ import { View, Text, ScrollView, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useEffect, useCallback } from 'react'
import './index.scss'
import { getDesignList, setDesignList, removeDesigns, type DesignItem } from '../../utils/store'
import { fetchDesignList, deleteDesigns } from '../../utils/api'
import { getDesignList, removeDesigns, setDesignList, type DesignItem } from '../../utils/store'
import { fetchDesignList, deleteDesigns } from '../../utils/api/design'
import { PRODUCT_ICON_MAP } from '../../utils/productConfig'
import { assetUrl } from '../../utils/asset'
import { useThemeContext } from '../../context/ThemeContext'
@@ -27,7 +27,7 @@ const VISIBLE_STATUS_TABS = STATUS_TABS.filter(tab => tab.code !== 'undesigned')
const STATUS_STYLE: Record<string, { label: string; cls: string }> = {
undesigned: { label: '未设计', cls: 'badge-pink' },
designing: { label: '设计中', cls: 'badge-blue' },
processing: { label: '生产中', cls: 'badge-warning' },
processing: { label: '生产中', cls: 'badge-blue' },
ordered: { label: '已下单', cls: 'badge-green' }
}
@@ -41,15 +41,7 @@ export default function DesignListPage() {
const [selected, setSelected] = useState<Set<string>>(new Set())
const load = useCallback(() => {
// 缓存优先展示（冷启动不空屏），再拉服务端刷新；
// 刷新成功回写缓存并以服务端为准覆盖（旧本地数据不自动合并，route-r2 风险节）
setList(getDesignList())
fetchDesignList()
.then(data => {
setList(data)
setDesignList(data)
})
.catch(() => setList(getDesignList()))
fetchDesignList().then(remote => { setList(remote); setDesignList(remote) }).catch(() => setList(getDesignList()))
}, [])
const init = useCallback(() => {
@@ -112,11 +104,9 @@ export default function DesignListPage() {
success: (res) => {
if (res.confirm) {
const ids = Array.from(selected)
deleteDesigns(ids).then(() => load()).catch(() => removeDesigns(ids))
setSelected(new Set())
setManaging(false)
deleteDesigns(ids)
.catch(() => removeDesigns(ids)) // 失败降级本地删除
.finally(load)
}
}
})
@@ -177,7 +167,7 @@ export default function DesignListPage() {
{/* 列表 */}
<ScrollView className='design-list' scrollY>
{filtered.map(item => {
const style = STATUS_STYLE[item.status] || STATUS_STYLE.undesigned
const style = STATUS_STYLE[item.status]
const rawIcon = (item.productIcon || '').startsWith('/icon/') || /^https?:/i.test(item.productIcon || '')
? item.productIcon
: PRODUCT_ICON_MAP[item.productId] || '/icon/四角星.svg'
src/pages/diy/index.scss
-3
View File
@@ -103,8 +103,6 @@
position: absolute;
max-width: 100%;
max-height: 100%;
/* 问题1 修正：碰撞盒按左上角计算，缩放原点统一为左上角，渲染与碰撞语义自洽 */
transform-origin: top left;
z-index: 5;
border: 2rpx solid transparent;
border-radius: 8rpx;
@@ -393,7 +391,6 @@
position: absolute;
max-width: 100%;
max-height: 100%;
transform-origin: top left;
z-index: 5;
}
src/pages/diy/index.tsx
+60 -181
View File
@@ -1,10 +1,11 @@
import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useEffect, useRef } from 'react'
import { useState, useEffect } from 'react'
import './index.scss'
import { getProductById } from '../../utils/productConfig'
import { getDesignList, setDesignList, updateDesign, type DesignItem, type StickerItem } from '../../utils/store'
import { createDesign, updateDesign as updateDesignApi, persistDesignMedia } from '../../utils/api'
import { getDesignList, setDesignList, updateDesign as updateLocalDesign, type DesignItem, type StickerItem } from '../../utils/store'
import { persistDesignMedia } from '../../utils/api'
import { createDesign, updateDesign as updateRemoteDesign } from '../../utils/api/design'
import { useThemeContext } from '../../context/ThemeContext'
import { useSafeArea } from '../../hooks/useSafeArea'
import { useStatusBar } from '../../hooks/useStatusBar'
@@ -26,41 +27,7 @@ export default function DIYPage() {
const [startPos, setStartPos] = useState({ x: 0, y: 0 })
const [previewMode, setPreviewMode] = useState(false)
const [hasOverlap, setHasOverlap] = useState(false)
/** 进入 DIY 即创建清单条目，并推进到「设计中」（问题3 修正：进入工作台即 SUBMITTED），失败降级本地 */
const createDesignEntry = (product: { id: string; name: string; price: number; icon: string }, count: number) => {
createDesign({
productId: product.id,
productName: product.name,
unitPrice: product.price,
count
})
.then(item => {
setDesignList([item, ...getDesignList()]) // 回写缓存，checkout 等页面仍读缓存
setDesignId(item.id)
return updateDesignApi(item.id, { status: 'designing' })
.then(updated => {
setDesignList(getDesignList().map(d => d.id === item.id ? { ...d, status: updated.status } : d))
})
.catch(() => {
setDesignList(getDesignList().map(d => d.id === item.id ? { ...d, status: 'designing' as const } : d))
})
})
.catch(() => {
const newDesign: DesignItem = {
id: 'DSG' + Date.now(),
productId: product.id,
productName: product.name,
productIcon: product.icon,
unitPrice: product.price,
count,
status: 'designing',
createdAt: new Date().toISOString().slice(0, 10)
}
setDesignList([...getDesignList(), newDesign])
setDesignId(newDesign.id)
})
}
const [isCreatingDesign, setIsCreatingDesign] = useState(false)
useEffect(() => {
const router = Taro.getCurrentInstance().router
@@ -68,13 +35,46 @@ export default function DIYPage() {
const source = params ? params.source : undefined
const productId = (params && params.productId) || (params && params.category)
const createDraftForProduct = async (product: any, count: number) => {
const draft: DesignItem = {
id: 'DSG' + Date.now(),
productId: product.id,
productName: product.name,
productIcon: product.icon,
unitPrice: product.price,
count,
status: 'designing',
createdAt: new Date().toISOString().slice(0, 10),
}
// 先写本地草稿，保证离线时仍能编辑；在线时立即换成服务端真实 id。
setDesignList([...getDesignList(), draft])
setDesignId(draft.id)
setIsCreatingDesign(true)
try {
const saved = await createDesign({
productId: draft.productId,
productName: draft.productName,
unitPrice: draft.unitPrice,
count: draft.count,
designData: draft.designData,
})
setDesignList(getDesignList().map(item => item.id === draft.id ? saved : item))
setDesignId(saved.id)
} catch {
// 保留本地草稿；结算页会在网络恢复后继续走本地兜底。
} finally {
setIsCreatingDesign(false)
}
}
if (source === 'product' && productId) {
const product = getProductById(productId)
if (product) {
setCategory(product)
const count = Number(params ? params.quantity : undefined) || 1
setQuantity(count)
createDesignEntry(product, count)
void createDraftForProduct(product, count)
}
return
}
@@ -88,42 +88,22 @@ export default function DIYPage() {
setQuantity(design.count)
const product = getProductById(design.productId)
if (product) setCategory(product)
const dd = design.designData
const rawStickers = dd ? dd.stickers : undefined
if (rawStickers) {
// 问题1 留意点：旧数据 width/height 为图片原始像素语义，读取端按 mask 等比归一化
//（契约实现注记，不做存量迁移）；新语义数据（≤mask 短边 60%）原样通过
const mask = (dd && dd.category && dd.category.mask) || (product ? product.mask : undefined)
const normalized: StickerItem[] = mask
? rawStickers.map(s => {
if (s.width > mask.width || s.height > mask.height) {
const k = (Math.min(mask.width, mask.height) * 0.6) / Math.max(s.width, s.height)
return { ...s, width: Math.round(s.width * k), height: Math.round(s.height * k) }
}
return s
})
: rawStickers
setStickers(normalized)
} else if (dd ? dd.imageSrc : undefined) {
if (design.designData ? design.designData.stickers : undefined) {
setStickers(design.designData.stickers)
} else if (design.designData ? design.designData.imageSrc : undefined) {
// 兼容旧版数据
const s: StickerItem = {
id: 'legacy_' + Date.now(),
src: dd.imageSrc,
x: dd.imagePos ? dd.imagePos.x || 0 : 0,
y: dd.imagePos ? dd.imagePos.y || 0 : 0,
scale: dd.imagePos ? dd.imagePos.scale || 1 : 1,
src: design.designData.imageSrc,
x: design.designData.imagePos ? design.designData.imagePos.x || 0 : 0,
y: design.designData.imagePos ? design.designData.imagePos.y || 0 : 0,
scale: design.designData.imagePos ? design.designData.imagePos.scale || 1 : 1,
width: 200,
height: 200,
isOverlapping: false
}
setStickers([s])
}
// 问题3 修正：继续设计同样进入「设计中」状态（单向状态机，undesigned → designing）
if (design.status === 'undesigned') {
updateDesign(dId, { status: 'designing' })
updateDesignApi(dId, { status: 'designing' }).catch(() => {})
}
}
return
}
@@ -133,71 +113,11 @@ export default function DIYPage() {
const found = getProductById(productId)
if (found) {
setCategory(found)
createDesignEntry(found, 1)
void createDraftForProduct(found, 1)
}
}
}, [])
// ---------- 草稿持久化（修正工作流 问题2）----------
// 贴纸变化防抖 800ms：本地缓存即时同步 + 服务端静默同步；不推状态（SUBMITTED 只由显式动作触发）
const draftTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
const latestRef = useRef({ designId: '', quantity: 1, category: null as any, stickers: [] as StickerItem[] })
latestRef.current = { designId, quantity, category, stickers }
const saveDraft = () => {
const { designId: dId, quantity: qty, category: cat, stickers: st } = latestRef.current
if (!dId || !cat) return
// WCD 红线：基于缓存中服务端最新 designData 合并（保留 wordcloud 分组），只覆盖本页编辑字段
const cached = getDesignList().find(d => d.id === dId)
const designData = {
...(cached && cached.designData ? cached.designData : {}),
version: 1 as const,
category: { id: cat.id, mask: cat.mask, ...(cat.tone ? { tone: cat.tone } : {}) },
stickers: st
}
updateDesign(dId, { designData }) // 本地缓存即时同步（问题4：贴纸编辑页从这里读取）
updateDesignApi(dId, {
item: { productId: cat.id, productName: cat.name, unitPrice: cat.price, count: qty, designData }
}).catch(() => {}) // 草稿静默降级：失败仅落缓存
}
const flushDraft = () => {
if (draftTimerRef.current) {
clearTimeout(draftTimerRef.current)
draftTimerRef.current = null
}
saveDraft()
}
// 隐藏页面（切后台/跳转）时强制落盘，防止防抖窗口内的改动丢失
Taro.useDidHide(flushDraft)
// 卸载时同样落盘
useEffect(() => flushDraft, [])
// eslint-disable-next-line react-hooks/exhaustive-deps
const skipDraftRef = useRef(true)
useEffect(() => {
if (skipDraftRef.current) { skipDraftRef.current = false; return }
if (draftTimerRef.current) clearTimeout(draftTimerRef.current)
draftTimerRef.current = setTimeout(saveDraft, 800)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [stickers])
// 问题5 留意点：页面栈返回（贴纸编辑页保存后 navigateBack）不触发重新挂载，
// 需在 onShow 从缓存同步最新贴纸（src/edits），否则工作台仍渲染旧 state。
// 首次 onShow 跳过——mount 读取端已做过旧数据归一化，避免被未归一化的缓存覆盖。
const skipShowRef = useRef(true)
Taro.useDidShow(() => {
if (skipShowRef.current) { skipShowRef.current = false; return }
const dId = latestRef.current.designId
if (!dId) return
const cached = getDesignList().find(d => d.id === dId)
const list = cached && cached.designData ? cached.designData.stickers : undefined
if (list && list.length) {
setStickers(checkOverlap(list))
}
})
// 矩形碰撞检测
const checkOverlap = (list: StickerItem[]) => {
const newList = list.map(s => ({ ...s, isOverlapping: false }))
@@ -236,17 +156,14 @@ export default function DIYPage() {
Taro.getImageInfo({
src,
success: (info) => {
// 问题1 修正：归一化到画布坐标空间（width/height = 画布显示像素，契约实现注记）
const maskMin = Math.min(category.mask.width, category.mask.height)
const k = (maskMin * 0.6) / Math.max(info.width, info.height)
const newSticker: StickerItem = {
id: 'stk_' + Date.now(),
src,
x: 0,
y: 0,
scale: 1,
width: Math.round(info.width * k),
height: Math.round(info.height * k),
width: info.width,
height: info.height,
isOverlapping: false
}
const next = [...stickers, newSticker]
@@ -255,17 +172,15 @@ export default function DIYPage() {
setActiveStickerId(newSticker.id)
},
fail: () => {
// fallback 尺寸（同样按画布空间归一化）
const maskMin = Math.min(category.mask.width, category.mask.height)
const k = (maskMin * 0.6) / 200
// fallback 尺寸
const newSticker: StickerItem = {
id: 'stk_' + Date.now(),
src,
x: 0,
y: 0,
scale: 1,
width: Math.round(200 * k),
height: Math.round(200 * k),
width: 200,
height: 200,
isOverlapping: false
}
const next = [...stickers, newSticker]
@@ -297,7 +212,6 @@ export default function DIYPage() {
const handleStickerTouchMove = (e: any) => {
if (!isDragging || !activeStickerId) return
const touch = e.touches[0]
// 需求决定（2026-09-12）：贴纸允许拖出画布外自由摆放，不做坐标钳制
const next = stickers.map(s => {
if (s.id !== activeStickerId) return s
return { ...s, x: touch.clientX - startPos.x, y: touch.clientY - startPos.y }
@@ -310,7 +224,6 @@ export default function DIYPage() {
const handleEditSticker = () => {
if (!activeStickerId || !designId) return
flushDraft() // 问题4：跳编辑页前清掉防抖窗口，缓存里保证有最新贴纸
Taro.navigateTo({
url: `/pages/diy/stickerEdit/index?designId=${designId}&stickerId=${activeStickerId}`
})
@@ -325,18 +238,6 @@ export default function DIYPage() {
setStickers(checked)
}
// 问题5 修正：渲染端消费贴纸 edits（亮度/色相/对比度 → CSS filter），
// 与贴纸编辑页同一呈现逻辑；checkout 预览消费 edits 记入 R3 待办
const stickerFilter = (s: StickerItem) => {
const ed = s.edits
if (!ed) return undefined
const b = ed.brightness || 0
const h = ed.hue || 0
const c = ed.contrast || 0
if (b === 0 && h === 0 && c === 0) return undefined
return `brightness(${100 + b}%) hue-rotate(${h}deg) contrast(${100 + c}%)`
}
const goBack = () => {
Taro.navigateBack()
}
@@ -354,42 +255,22 @@ export default function DIYPage() {
}
const handleComplete = async () => {
if (isCreatingDesign) {
Taro.showToast({ title: '正在创建设计，请稍候', icon: 'none' })
return
}
if (hasOverlap) {
Taro.showToast({ title: '贴纸不能重叠', icon: 'none' })
return
}
if (designId && category) {
if (designId) {
// 贴纸/底图持久化（决策#4，R4 负责）：本地图 → COS 持久 URL，保证后端 WCD 打包可下载素材
const data = await persistDesignMedia({ stickers, category, version: 1 })
// category 裁剪为 {id, mask, tone}（阶段0 决策#2；契约约束#3：mask 必须保留）
const trimmedCategory = {
id: category.id,
mask: category.mask,
...(category.tone ? { tone: category.tone } : {})
}
// WCD 红线：基于服务端已有 designData 合并（保留 R4 写入的 wordcloud 分组等），只覆盖本页编辑的字段
const cached = getDesignList().find(d => d.id === designId)
const designData = {
...(cached && cached.designData ? cached.designData : {}),
version: 1 as const,
category: trimmedCategory,
stickers: data.stickers || stickers
}
// 本地缓存同步（checkout 仍读缓存）
updateDesign(designId, { status: 'designing', designData })
updateLocalDesign(designId, { designData: data })
try {
await updateDesignApi(designId, {
status: 'designing',
item: {
productId: category.id,
productName: category.name,
unitPrice: category.price,
count: quantity,
designData
}
})
await updateRemoteDesign(designId, { designData: data, status: 'designing' })
} catch {
Taro.showToast({ title: '网络不可用，已暂存到本地', icon: 'none' })
// 离线草稿继续由本地存储承接；线上草稿会在下一次操作时重试同步。
}
}
setPreviewMode(false)
@@ -437,7 +318,6 @@ export default function DIYPage() {
transform: `translate(${s.x}px, ${s.y}px) scale(${s.scale})`,
opacity: isDragging && activeStickerId === s.id ? 0.8 : 1,
zIndex: activeStickerId === s.id ? 10 : 5,
filter: stickerFilter(s),
width: s.width || 200,
height: s.height || 200
}}
@@ -523,7 +403,6 @@ export default function DIYPage() {
src={s.src}
style={{
transform: `translate(${s.x}px, ${s.y}px) scale(${s.scale})`,
filter: stickerFilter(s),
width: s.width || 200,
height: s.height || 200
}}
src/pages/diy/stickerEdit/index.scss
-37
View File
@@ -81,16 +81,6 @@
box-shadow: var(--shadow-card);
}
/* 预览图（Image + CSS filter，替代 Canvas 预览） */
.edit-preview-img {
width: 100%;
height: 480rpx;
background: var(--bg-input);
border-radius: 24rpx;
border: 1rpx solid var(--border-strong);
box-shadow: var(--shadow-card);
}
/* 工具面板 */
.edit-tools {
padding: 24rpx;
@@ -236,30 +226,3 @@
.mt-20 {
margin-top: 24rpx;
}
/* 空态（贴纸未找到） */
.edit-empty {
margin: 24rpx 24rpx 0;
padding: 60rpx 40rpx;
border-radius: 24rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 24rpx;
}
.edit-empty-title {
font-size: 32rpx;
font-weight: 600;
}
.edit-empty-desc {
font-size: 26rpx;
opacity: 0.65;
text-align: center;
}
.edit-empty .btn-primary {
padding: 16rpx 60rpx;
border-radius: 44rpx;
}
src/pages/diy/stickerEdit/index.tsx
+242 -142
View File
@@ -1,9 +1,10 @@
import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useEffect, useRef } from 'react'
import { View, Text, Canvas, Image } from '@tarojs/components'
import Taro, { createCanvasContext, canvasToTempFilePath } from '@tarojs/taro'
import { useState, useEffect, useRef, useCallback } from 'react'
import './index.scss'
import { getDesignList, updateDesign, type StickerItem } from '../../../utils/store'
import { sketchImage, updateDesign as updateDesignApi } from '../../../utils/api'
import { getProductById } from '../../../utils/productConfig'
import { getDesignList, setDesignList, updateDesign, type DesignItem, type StickerItem } from '../../../utils/store'
import { sketchImage } from '../../../utils/api'
import { useThemeContext } from '../../../context/ThemeContext'
import { useSafeArea } from '../../../hooks/useSafeArea'
import { useStatusBar } from '../../../hooks/useStatusBar'
@@ -12,59 +13,55 @@ import ScrollTopMask from '../../../components/ScrollTopMask'
import BottomActionBar from '../../../components/BottomActionBar'
/* ============================================================
贴纸编辑（亮度/色相/对比度/裁剪/线稿）
问题5 修正：edits 参数化保存（src 不变），预览用 Image + CSS filter
所见即所得，不再依赖 Canvas 2D ctx.filter（开发者工具不支持）；
DIY 渲染端按同一 edits 套 CSS filter 呈现（契约 §4：edits 不进 WCD
document.json，仅 manifest.meta，src 保持原样对 R4 无影响）。
使用 Canvas 实现贴纸编辑（亮度/色相/线稿）
============================================================ */
const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max)
/** 拖动手势滑块组件（问题5 修正：选择器查询按 id 定位，touchstart 时缓存 rect） */
/** 拖动手势滑块组件 */
interface SliderProps {
id: string
value: number
min: number
max: number
step?: number
onChange: (val: number) => void
showValue?: boolean
format?: (v: number) => string
}
function TouchSlider({ id, value, min, max, onChange, format }: SliderProps) {
const rectRef = useRef<{ left: number; width: number } | null>(null)
function TouchSlider({ value, min, max, step = 1, onChange, format }: SliderProps) {
const trackRef = useRef<any>(null)
const [dragging, setDragging] = useState(false)
const measure = (cb?: () => void) => {
Taro.createSelectorQuery()
.select(`#${id}`)
.boundingClientRect((rect: any) => {
if (rect && rect.width > 0) rectRef.current = { left: rect.left, width: rect.width }
if (cb) cb()
})
.exec()
}
const valueFromX = (clientX: number) => {
const rect = rectRef.current
if (!rect || !rect.width) return value
const computedFromClientX = (clientX: number) => {
if (!trackRef.current) return value
const query = Taro.createSelectorQuery().in(trackRef.current)
// 注意：这里需要取 track 元素的位置信息
const rect = trackRef.current.getBoundingClientRect ? trackRef.current.getBoundingClientRect() : { left: 0, width: 300 }
const ratio = clamp((clientX - rect.left) / rect.width, 0, 1)
return clamp(min + (max - min) * ratio, min, max)
let raw = min + (max - min) * ratio
if (step > 0) {
raw = Math.round(raw / step) * step
}
return clamp(raw, min, max)
}
const handleTouchStart = (e: any) => {
setDragging(true)
const touch = e.touches && e.touches[0]
if (!touch) return
measure(() => onChange(valueFromX(touch.clientX)))
const x = touch ? touch.clientX : 0
onChange(computedFromClientX(x))
}
const handleTouchMove = (e: any) => {
if (!dragging) return
const touch = e.touches && e.touches[0]
if (!touch) return
if (!rectRef.current) {
measure(() => onChange(valueFromX(touch.clientX)))
return
}
onChange(valueFromX(touch.clientX))
const x = touch ? touch.clientX : 0
onChange(computedFromClientX(x))
}
const handleTouchEnd = () => {
setDragging(false)
}
const pct = `${((value - min) / (max - min)) * 100}%`
@@ -72,14 +69,14 @@ function TouchSlider({ id, value, min, max, onChange, format }: SliderProps) {
return (
<View className='slider-wrap'>
<View
id={id}
className='slider-track'
ref={trackRef}
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={() => { /* rect 已缓存，无需处理 */ }}
onTouchEnd={handleTouchEnd}
>
<View className='slider-fill' style={{ width: pct }} />
<View className='slider-thumb' style={{ left: pct }} />
<View className={`slider-thumb ${dragging ? 'dragging' : ''}`} style={{ left: pct }} />
</View>
<Text className='slider-value'>{format ? format(value) : value}</Text>
</View>
@@ -93,15 +90,50 @@ export default function StickerEditPage() {
const [designId, setDesignId] = useState('')
const [stickerId, setStickerId] = useState('')
const [sticker, setSticker] = useState<StickerItem | null>(null)
const [notFound, setNotFound] = useState(false)
// 裁剪/线稿产生的 src 替换（保存时一并落库；取消则丢弃）
const [pendingSrc, setPendingSrc] = useState<string | null>(null)
// 编辑参数
const [brightness, setBrightness] = useState(0)
const [hue, setHue] = useState(0)
const [contrast, setContrast] = useState(0)
const [loading, setLoading] = useState(false)
const [canvasReady, setCanvasReady] = useState(false)
const canvasRef = useRef<any>(null)
const ctxRef = useRef<any>(null)
const canvasNodeRef = useRef<any>(null)
const canvasSizeRef = useRef<{width:number, height:number}>({width:0,height:0})
// 使用 nextTick + 重试初始化 Canvas（小程序 2D）
const initCanvas = useCallback((st: StickerItem) => {
if (canvasReady) return
Taro.nextTick(() => {
const query = Taro.createSelectorQuery()
query.select('#editCanvas')
.fields({ node: true, size: true })
.exec((res: any) => {
const resFirst = res && res[0]
const canvas = resFirst ? resFirst.node : undefined
if (!canvas) {
setTimeout(() => initCanvas(st), 300)
return
}
const ctx = canvas.getContext('2d')
let cw = (res[0] && res[0].width) || 300
let ch = (res[0] && res[0].height) || 400
if (cw <= 0) cw = 300
if (ch <= 0) ch = 400
const dpr = Taro.getSystemInfoSync().pixelRatio || 1
canvas.width = Math.round(cw * dpr)
canvas.height = Math.round(ch * dpr)
ctx.scale(dpr, dpr)
canvasNodeRef.current = canvas
ctxRef.current = ctx
canvasSizeRef.current = { width: cw, height: ch }
setCanvasReady(true)
drawSticker(ctx, cw, ch, st)
})
})
}, [canvasReady])
useEffect(() => {
const router = Taro.getCurrentInstance().router
@@ -119,44 +151,96 @@ export default function StickerEditPage() {
setBrightness((st.edits && st.edits.brightness) || 0)
setHue((st.edits && st.edits.hue) || 0)
setContrast((st.edits && st.edits.contrast) || 0)
} else {
// 问题4 留意点：找不到贴纸时给出空态，而不是停在空白 Canvas
setNotFound(true)
initCanvas(st)
}
}, [])
}, [initCanvas])
/** canvas 上绘制带滤镜的贴纸 */
const drawSticker = (ctx: any, cw: number, ch: number, st: StickerItem, opts?: { brightness: number; hue: number; contrast: number }) => {
if (!ctx || !canvasNodeRef.current) return
const canvas = canvasNodeRef.current
// 防护：cw/ch 为 0 时容易绘制异常
if (!cw || !ch) return
const imgW = st.width || 200
const imgH = st.height || 200
const img = canvas.createImage()
img.onload = () => {
ctx.clearRect(0, 0, cw, ch)
ctx.save()
// 居中缩放显示（限制最大为画板 90%）
const scale = Math.min(cw / imgW, ch / imgH, 4) * 0.9
const w = imgW * scale
const h = imgH * scale
const x = (cw - w) / 2
const y = (ch - h) / 2
// 应用滤镜（小程序 Canvas 2D 支持 filter 属性 2.16.0+）
const b = opts ? opts.brightness : brightness
const hVal = opts ? opts.hue : hue
const c = opts ? opts.contrast : contrast
if (b !== 0 || hVal !== 0 || c !== 0) {
ctx.filter = `brightness(${100 + b}%) hue-rotate(${hVal}deg) contrast(${100 + c}%)`
} else {
ctx.filter = 'none'
}
ctx.drawImage(img, x, y, w, h)
ctx.restore()
}
img.onerror = (err: any) => {
console.error('Canvas load image error:', err, st.src)
Taro.showToast({ title: '图片加载失败', icon: 'none' })
}
if (st.src) {
img.src = st.src
}
}
/** 重新绘制（参数变化时） */
const redraw = () => {
if (!sticker || !ctxRef.current || !canvasNodeRef.current) return
const { width, height } = canvasSizeRef.current
drawSticker(ctxRef.current, width, height, sticker, { brightness, hue, contrast })
}
useEffect(() => {
redraw()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [brightness, hue, contrast])
/** 保存：edits 参数化持久化（src 不变），裁剪/线稿的 src 替换一并落库 */
const handleSave = () => {
if (!sticker || !designId) return
setLoading(true)
const dList = getDesignList()
const dIdx = dList.findIndex(d => d.id === designId)
if (dIdx === -1) { setLoading(false); setNotFound(true); return }
const d = dList[dIdx]
const stickers = (d.designData && d.designData.stickers) || []
const sIdx = stickers.findIndex(s => s.id === stickerId)
if (sIdx === -1) { setLoading(false); setNotFound(true); return }
stickers[sIdx] = {
...stickers[sIdx],
...(pendingSrc ? { src: pendingSrc } : {}),
edits: { brightness, hue, contrast }
}
// WCD 红线：基于服务端已有 designData 合并（保留 wordcloud 分组），只覆盖 stickers
const designData = { ...d.designData, stickers }
updateDesign(designId, { designData }) // 本地缓存同步
// 服务端保存（items 全量替换，必须带全 4 个基本字段）；失败暂存本地
updateDesignApi(designId, {
item: {
productId: d.productId,
productName: d.productName,
unitPrice: d.unitPrice,
count: d.count,
designData
// 使用 Canvas 2D 导出
// @ts-ignore
Taro.canvasToTempFilePath({
canvas: canvasNodeRef.current,
quality: 0.92,
success: (res: any) => {
const newSrc = res.tempFilePath
const dList = getDesignList()
const dIdx = dList.findIndex(d => d.id === designId)
if (dIdx === -1) { setLoading(false); return }
const stickers = dList[dIdx].designData ? dList[dIdx].designData.stickers || [] : []
const sIdx = stickers.findIndex(s => s.id === stickerId)
if (sIdx === -1) { setLoading(false); return }
stickers[sIdx] = {
...stickers[sIdx],
src: newSrc,
edits: { brightness, hue, contrast }
}
updateDesign(designId, { designData: { ...dList[dIdx].designData, stickers } })
Taro.showToast({ title: '保存成功', icon: 'success' })
Taro.navigateBack()
},
fail: () => {
setLoading(false)
Taro.showToast({ title: '保存失败', icon: 'none' })
}
}).catch(() => Taro.showToast({ title: '网络不可用，已暂存到本地', icon: 'none' }))
setLoading(false)
Taro.showToast({ title: '保存成功', icon: 'success' })
Taro.navigateBack()
})
}
/** 裁剪：调用微信cropImage */
@@ -174,62 +258,47 @@ export default function StickerEditPage() {
success: (res) => {
const newSticker = { ...sticker, src: res.tempFilePath }
setSticker(newSticker)
setPendingSrc(res.tempFilePath)
// 重绘
setTimeout(() => redraw(), 200)
}
})
}
/** 线稿：调真实后端接口（POST /api/sketch，带 token）；失败降级前端灰度参数 */
/** 线稿：调真实后端接口（POST /api/sketch，带 token）；失败降级前端灰度 */
const handleSketch = async () => {
if (!sticker) return
setLoading(true)
try {
const res = await sketchImage(sticker.src)
if (res?.imageUrl) {
setSticker({ ...sticker, src: res.imageUrl })
setPendingSrc(res.imageUrl)
const newSticker = { ...sticker, src: res.imageUrl, edits: { ...sticker.edits, sketchSrc: res.imageUrl } }
setSticker(newSticker)
setLoading(false)
setTimeout(() => redraw(), 200)
Taro.showToast({ title: '线稿生成成功', icon: 'success' })
} else {
throw new Error('no imageUrl')
}
} catch {
// 如果接口不可用/失败，降级为前端灰度滤镜参数（保存时随 edits 持久化）
Taro.showToast({ title: '使用本地线稿', icon: 'none' })
setBrightness(20)
setContrast(80)
setHue(0)
setLoading(false)
// 如果接口不可用/失败，降级为前端灰度+边缘检测
applyFrontendSketch()
}
}
const previewFilter = brightness === 0 && hue === 0 && contrast === 0
? 'none'
: `brightness(${100 + brightness}%) hue-rotate(${hue}deg) contrast(${100 + contrast}%)`
if (notFound) {
return (
<View className={`theme-${resolvedTheme}`}>
<ThemedPageMeta />
<ScrollTopMask title="编辑贴纸" targetSelector=".edit-header" showBack />
<View className='sticker-edit-page'>
<View className='edit-header' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
<Text className='edit-back' onTap={() => Taro.navigateBack()}>←</Text>
<Text className='edit-title'>编辑贴纸</Text>
<Text className='edit-save' />
</View>
<View className='edit-empty surface-card mt-20'>
<Text className='edit-empty-title'>未找到该贴纸</Text>
<Text className='edit-empty-desc'>贴纸可能已被删除，请返回工作台重新添加</Text>
<View className='btn-primary' onTap={() => Taro.navigateBack()}>
<Text>返回工作台</Text>
</View>
</View>
</View>
</View>
)
/** 前端线稿降级方案：灰度+反相高对比 */
const applyFrontendSketch = () => {
if (!sticker || !ctxRef.current) { setLoading(false); return }
Taro.showToast({ title: '使用本地线稿', icon: 'none' })
setBrightness(20)
setContrast(80)
setHue(0)
setLoading(false)
}
const bPct = `${((brightness + 100) / 200) * 100}%`
const hPct = `${((hue + 180) / 360) * 100}%`
const cPct = `${((contrast + 100) / 200) * 100}%`
return (
<View className={`theme-${resolvedTheme}`}>
<ThemedPageMeta />
@@ -242,13 +311,13 @@ export default function StickerEditPage() {
<Text className='edit-save' onTap={handleSave}>保存</Text>
</View>
{/* 预览：Image + CSS filter 所见即所得（不依赖 Canvas ctx.filter） */}
{/* Canvas 预览 */}
<View className='edit-canvas-wrap'>
<Image
className='edit-preview-img'
src={sticker ? sticker.src : ''}
mode='aspectFit'
style={{ filter: previewFilter }}
<Canvas
id='editCanvas'
type='2d'
className='edit-canvas'
style={{ width: '100%', height: '480rpx' }}
/>
</View>
@@ -267,42 +336,73 @@ export default function StickerEditPage() {
</View>
{/* 亮度 */}
<View className='edit-row slider-row'>
<View className='edit-row slider-row'
onTouchMove={(e) => {
const { clientX } = e.changedTouches[0]
// 取得滑轨位置
const query = Taro.createSelectorQuery().in(e.currentTarget as any)
query.select('.slider-track').boundingClientRect((rect: any) => {
if (!rect) return
const ratio = clamp((clientX - rect.left) / rect.width, 0, 1)
const v = Math.round((-100 + 200 * ratio) / 1) * 1
setBrightness(clamp(v, -100, 100))
}).exec()
}}
>
<Text className='edit-label'>亮度</Text>
<TouchSlider
id='slider-brightness'
value={brightness}
min={-100}
max={100}
onChange={setBrightness}
format={(v) => (v > 0 ? `+${v}` : `${v}`)}
/>
<View className='slider-wrap'>
<View className='slider-track'>
<View className='slider-fill' style={{ width: bPct }} />
<View className='slider-thumb' style={{ left: bPct }} />
</View>
<Text className='slider-value'>{brightness > 0 ? `+${brightness}` : brightness}</Text>
</View>
</View>
{/* 色相 */}
<View className='edit-row slider-row'>
<View className='edit-row slider-row'
onTouchMove={(e) => {
const { clientX } = e.changedTouches[0]
const query = Taro.createSelectorQuery().in(e.currentTarget as any)
query.select('.slider-track').boundingClientRect((rect: any) => {
if (!rect) return
const ratio = clamp((clientX - rect.left) / rect.width, 0, 1)
const v = Math.round((-180 + 360 * ratio) / 1) * 1
setHue(clamp(v, -180, 180))
}).exec()
}}
>
<Text className='edit-label'>色相</Text>
<TouchSlider
id='slider-hue'
value={hue}
min={-180}
max={180}
onChange={setHue}
format={(v) => (v > 0 ? `+${v}` : `${v}`)}
/>
<View className='slider-wrap'>
<View className='slider-track'>
<View className='slider-fill' style={{ width: hPct }} />
<View className='slider-thumb' style={{ left: hPct }} />
</View>
<Text className='slider-value'>{hue > 0 ? `+${hue}` : hue}</Text>
</View>
</View>
{/* 对比度 */}
<View className='edit-row slider-row'>
<View className='edit-row slider-row'
onTouchMove={(e) => {
const { clientX } = e.changedTouches[0]
const query = Taro.createSelectorQuery().in(e.currentTarget as any)
query.select('.slider-track').boundingClientRect((rect: any) => {
if (!rect) return
const ratio = clamp((clientX - rect.left) / rect.width, 0, 1)
const v = Math.round((-100 + 200 * ratio) / 1) * 1
setContrast(clamp(v, -100, 100))
}).exec()
}}
>
<Text className='edit-label'>对比度</Text>
<TouchSlider
id='slider-contrast'
value={contrast}
min={-100}
max={100}
onChange={setContrast}
format={(v) => (v > 0 ? `+${v}` : `${v}`)}
/>
<View className='slider-wrap'>
<View className='slider-track'>
<View className='slider-fill' style={{ width: cPct }} />
<View className='slider-thumb' style={{ left: cPct }} />
</View>
<Text className='slider-value'>{contrast > 0 ? `+${contrast}` : contrast}</Text>
</View>
</View>
</View>
src/pages/index/index.tsx
+25 -8
View File
@@ -1,16 +1,20 @@
import { View, Text, Image, Input, Button, Swiper, SwiperItem } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react'
import { useState, useEffect } from 'react'
import './index.scss'
import { CATEGORIES } from '../../utils/productConfig'
import { assetUrl } from '../../utils/asset'
import { fetchProducts } from '../../utils/api/product'
import type { ProductCategory } from '../../types'
import { useThemeContext } from '../../context/ThemeContext'
import { useSafeArea } from '../../hooks/useSafeArea'
import { useStatusBar } from '../../hooks/useStatusBar'
import ThemedPageMeta from '../../components/ThemedPageMeta'
import ScrollTopMask from '../../components/ScrollTopMask'
import ProductImage from '../../components/ProductImage'
import { getProductIconImg } from '../../utils/productConfig'
// 成品展示配图（从 img 里取对应实物图）
// 成品展示配图：/img 路径由 assetUrl 根据 OSS_BASE_URL 拼接为资源桶地址。
const SHOWCASE_LIST = [
{
title: '毕业纪念笔记本',
@@ -56,7 +60,7 @@ const SHOWCASE_LIST = [
}
]
// 品类对应的实物照片映射（首页卡片顶部大图）
// 品类对应的实物图片映射（首页卡片顶部大图）
const PRODUCT_IMG_MAP: Record<string, string> = {
'notebook-small': assetUrl('/img/book_small/The1.jpg'),
'notebook-large': assetUrl('/img/book_big/The1.jpg'),
@@ -70,6 +74,8 @@ export default function Index() {
const safe = useSafeArea()
useStatusBar(resolvedTheme)
const [searchKey, setSearchKey] = useState('')
const [products, setProducts] = useState<ProductCategory[]>(CATEGORIES)
useEffect(() => { fetchProducts({ page: 1, pageSize: 100 }).then(result => setProducts(result.list)).catch(() => { /* 静态目录兜底 */ }) }, [])
const navigateToProduct = (categoryId: string) => {
Taro.navigateTo({ url: `/pages/product/index?id=${categoryId}` })
@@ -87,10 +93,10 @@ export default function Index() {
}
const filteredCategories = searchKey.trim()
? CATEGORIES.filter(
? products.filter(
(c) => c.name.includes(searchKey) || c.desc.includes(searchKey)
)
: CATEGORIES
: products
const handleSearch = (e: any) => {
setSearchKey(e.detail.value)
@@ -144,7 +150,12 @@ export default function Index() {
{SHOWCASE_LIST.map((item, idx) => (
<SwiperItem key={idx} className='showcase-swiper-item'>
<View className='hero-block'>
<Image className='hero-media' src={item.image} mode='aspectFill' />
<ProductImage
className='hero-media'
src={item.image}
fallback={getProductIconImg(CATEGORIES.find(category => category.id === item.categoryId))}
mode='aspectFill'
/>
<View className='glass-overlay'>
<Text className='hero-title'>{item.title}</Text>
<Text className='hero-desc'>{item.desc}</Text>
@@ -166,9 +177,10 @@ export default function Index() {
onTap={() => navigateToProduct(cat.id)}
>
<View className='media-card-image'>
<Image
<ProductImage
className='media-card-img'
src={PRODUCT_IMG_MAP[cat.id] || assetUrl('/icon/四角星.svg')}
fallback={getProductIconImg(cat)}
mode='aspectFill'
/>
</View>
@@ -200,7 +212,12 @@ export default function Index() {
onTap={() => navigateFromShowcase(item)}
>
<View className='media-card-image'>
<Image className='media-card-img' src={item.image} mode='aspectFill' />
<ProductImage
className='media-card-img'
src={item.image}
fallback={getProductIconImg(CATEGORIES.find(category => category.id === item.categoryId))}
mode='aspectFill'
/>
</View>
<View className='media-card-body'>
<Text className='media-card-title'>{item.title}</Text>
src/pages/orderDetail/index.scss
+9
View File
@@ -82,6 +82,15 @@
color: var(--text-secondary);
}
.payment-countdown {
display: block;
margin-top: 12rpx;
font-size: 26rpx;
font-weight: 700;
color: var(--accent-primary);
font-variant-numeric: tabular-nums;
}
/* --- 通用卡片 --- */
.detail-card {
margin-bottom: 24rpx;
src/pages/orderDetail/index.tsx
+42 -35
View File
@@ -7,9 +7,12 @@ import { useSafeArea } from '../../hooks/useSafeArea'
import { useStatusBar } from '../../hooks/useStatusBar'
import ThemedPageMeta from '../../components/ThemedPageMeta'
import ScrollTopMask from '../../components/ScrollTopMask'
import { getOrderList, getDefaultAddress, getAddressList, type AddressItem, type OrderItem } from '../../utils/store'
import { PRODUCT_ICON_MAP } from '../../utils/productConfig'
import { getOrderList, type AddressItem, type OrderItem } from '../../utils/store'
import { fetchOrderDetail, payOrder, cancelOrder, confirmOrder } from '../../utils/api/order'
import { getProductIconImg } from '../../utils/productConfig'
import { assetUrl } from '../../utils/asset'
import BottomActionBar from '../../components/BottomActionBar'
import PaymentCountdown from '../../components/PaymentCountdown'
export default function OrderDetailPage() {
const { theme, resolvedTheme } = useThemeContext()
@@ -19,39 +22,33 @@ export default function OrderDetailPage() {
const params = router ? router.params : {}
const orderId = (params && params.orderId) || ''
const [order, setOrder] = useState<OrderItem | null>(null)
const [order, setOrder] = useState<any>(null)
const [address, setAddress] = useState<AddressItem | null>(null)
const [showAddrPicker, setShowAddrPicker] = useState(false)
const [addrList, setAddrList] = useState<AddressItem[]>([])
useEffect(() => {
const orders = getOrderList()
const o = orders.find(x => x.id === orderId)
if (o) {
setOrder(o)
// 优先显示订单已有地址，否则用默认地址
if ((o as any).address) {
setAddress((o as any).address)
} else {
setAddress(getDefaultAddress())
}
}
setAddrList(getAddressList())
fetchOrderDetail(orderId).then(remote => {
const first = remote.items[0]
setOrder({ id: remote.id, orderNo: remote.orderNo, productId: first?.productId, productName: first?.name || '定制商品', productIcon: getProductIconImg({ id: first?.productId }), statusCode: remote.status === 'PENDING' ? 'pending' : remote.status === 'PAID' || remote.status === 'PROCESSING' ? 'paid' : remote.status === 'SHIPPED' ? 'shipping' : remote.status === 'COMPLETED' ? 'done' : remote.status === 'PAYMENT_EXPIRED' ? 'expired' : 'cancelled', date: new Date(remote.createdAt).toLocaleString('zh-CN'), price: `¥${Number(remote.totalAmount).toFixed(2)}`, count: first?.quantity || 0, sku: remote.orderNo, paymentExpiresAt: remote.paymentExpiresAt })
const snapshot = remote.addressSnapshot
setAddress({ id: snapshot.id || '', name: snapshot.name, phone: snapshot.phone, region: [snapshot.province, snapshot.city, snapshot.district], detail: snapshot.detail, isDefault: false })
}).catch(() => {
const local = getOrderList().find(x => x.id === orderId)
if (local) setOrder(local)
})
}, [orderId])
const handlePickAddress = (addr: AddressItem) => {
setAddress(addr)
void addr
setShowAddrPicker(false)
// 同步更新订单里的地址
const orders = getOrderList()
const idx = orders.findIndex(x => x.id === orderId)
if (idx >= 0) {
orders[idx] = { ...orders[idx], address: addr } as any
// 这里不直接写回 store，用临时状态即可，实际后端会有 order update API
}
Taro.showToast({ title: '地址已更改', icon: 'success' })
Taro.showToast({ title: '订单地址创建后不可更改', icon: 'none' })
}
const handlePay = async () => { try { const result = await payOrder(orderId); Taro.showToast({ title: result.configured ? '支付准备中' : '支付未配置', icon: 'none' }) } catch (error) { Taro.showToast({ title: (error as Error).message || '支付失败', icon: 'none' }) } }
const handleCancel = async () => { try { await cancelOrder(orderId); Taro.showToast({ title: '订单已取消', icon: 'success' }); setTimeout(() => Taro.navigateBack(), 500) } catch (error) { Taro.showToast({ title: (error as Error).message || '取消失败', icon: 'none' }) } }
const handleConfirm = async () => { try { await confirmOrder(orderId); Taro.showToast({ title: '已确认收货', icon: 'success' }); setTimeout(() => Taro.navigateBack(), 500) } catch (error) { Taro.showToast({ title: (error as Error).message || '操作失败', icon: 'none' }) } }
if (!order) {
return (
<View className={`theme-${resolvedTheme}`}>
@@ -95,13 +92,22 @@ export default function OrderDetailPage() {
{order.statusCode === 'paid' && '待发货'}
{order.statusCode === 'shipping' && '待收货'}
{order.statusCode === 'done' && '已完成'}
{order.statusCode === 'expired' && '订单超时未支付'}
</Text>
<Text className='status-desc'>
{order.statusCode === 'pending' && '请在30分钟内完成支付'}
{order.statusCode === 'paid' && '商品正在打包中，即将发货'}
{order.statusCode === 'shipping' && '快递运输中，请注意查收'}
{order.statusCode === 'done' && '交易已完成，感谢惠顾'}
{order.statusCode === 'expired' && '该订单已超过 30 分钟支付时限'}
</Text>
{order.statusCode === 'pending' && (
<PaymentCountdown
className='payment-countdown'
deadline={order.paymentExpiresAt}
onExpired={() => setOrder((current: any) => current ? { ...current, statusCode: 'expired' } : current)}
/>
)}
</View>
{/* 物流信息（仅 shipping/done） */}
@@ -112,31 +118,31 @@ export default function OrderDetailPage() {
<Image className='card-icon-img' src={assetUrl('/icon/包裹.png')} mode='aspectFit' />
<Text className='logistics-title'>物流信息</Text>
</View>
<Text className='logistics-num'>单号: SF1234567890</Text>
<Text className='logistics-num'>物流信息占位</Text>
</View>
<View className='timeline'>
<View className='timeline-item active'>
<View className='timeline-dot' />
<View className='timeline-content'>
<Text className='timeline-status'>运输中</Text>
<Text className='timeline-time'>2024-01-15 14:30</Text>
<Text className='timeline-desc'>【北京市】快件已到达北京朝阳转运中心</Text>
<Text className='timeline-time'>待接入物流</Text>
<Text className='timeline-desc'>物流轨迹将在发货后显示</Text>
</View>
</View>
<View className='timeline-item'>
<View className='timeline-dot' />
<View className='timeline-content'>
<Text className='timeline-status'>已发货</Text>
<Text className='timeline-time'>2024-01-15 09:00</Text>
<Text className='timeline-desc'>【深圳市】商家已发货，等待揽收</Text>
<Text className='timeline-time'>待接入物流</Text>
<Text className='timeline-desc'>当前为展示占位</Text>
</View>
</View>
<View className='timeline-item'>
<View className='timeline-dot' />
<View className='timeline-content'>
<Text className='timeline-status'>已下单</Text>
<Text className='timeline-time'>2024-01-14 20:15</Text>
<Text className='timeline-desc'>订单已生成，等待商家发货</Text>
<Text className='timeline-time'>订单创建后显示</Text>
<Text className='timeline-desc'>真实物流数据尚未配置</Text>
</View>
</View>
</View>
@@ -149,7 +155,7 @@ export default function OrderDetailPage() {
<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={order.productIcon || assetUrl('/icon/四角星.svg')}
mode='aspectFit'
/>
</View>
@@ -171,9 +177,7 @@ export default function OrderDetailPage() {
<Image className='card-icon-img' src={assetUrl('/icon/地址.png')} mode='aspectFit' />
<Text className='address-title'>收货地址</Text>
</View>
<View className='address-change' onTap={() => setShowAddrPicker(true)}>
<Text className='change-text'>更改收货地址</Text>
</View>
<Text className='change-text'>下单时快照</Text>
</View>
{address ? (
<View className='address-body'>
@@ -209,6 +213,9 @@ export default function OrderDetailPage() {
</View>
</View>
{order.statusCode === 'pending' && <BottomActionBar><View className='btn-secondary' onTap={handleCancel}><Text>取消订单</Text></View><View className='btn-primary' onTap={handlePay}><Text>支付</Text></View></BottomActionBar>}
{order.statusCode === 'shipping' && <BottomActionBar><View className='btn-primary' onTap={handleConfirm}><Text>确认收货</Text></View></BottomActionBar>}
{/* 地址选择底部弹窗 */}
{showAddrPicker && (
<View className='modal-overlay' style={{ alignItems: 'flex-end', justifyContent: 'flex-end' }}>
src/pages/orders/index.scss
+9
View File
@@ -167,6 +167,15 @@
font-variant-numeric: tabular-nums;
}
.orders-page .order-countdown {
display: block;
margin-top: 8rpx;
font-size: 22rpx;
line-height: 1.4;
color: var(--accent-primary);
font-variant-numeric: tabular-nums;
}
.orders-page .order-footer {
display: flex;
align-items: center;
src/pages/orders/index.tsx
+42 -8
View File
@@ -3,7 +3,8 @@ import Taro from '@tarojs/taro'
import { useState, useEffect } from 'react'
import './index.scss'
import { getOrderList, type OrderItem } from '../../utils/store'
import { PRODUCT_ICON_MAP } from '../../utils/productConfig'
import { fetchOrders, payOrder, cancelOrder, confirmOrder, type ServerOrder } from '../../utils/api/order'
import { getProductIconImg } from '../../utils/productConfig'
import { assetUrl } from '../../utils/asset'
import { useThemeContext } from '../../context/ThemeContext'
import { useSafeArea } from '../../hooks/useSafeArea'
@@ -11,13 +12,15 @@ import { useStatusBar } from '../../hooks/useStatusBar'
import LoginGuard from '../../components/LoginGuard'
import ThemedPageMeta from '../../components/ThemedPageMeta'
import ScrollTopMask from '../../components/ScrollTopMask'
import PaymentCountdown from '../../components/PaymentCountdown'
const STATUS_TABS = [
{ code: 'all', label: '全部' },
{ code: 'pending', label: '待付款' },
{ code: 'paid', label: '待发货' },
{ code: 'shipping', label: '待收货' },
{ code: 'done', label: '已完成' }
{ code: 'done', label: '已完成' },
{ code: 'expired', label: '已超时' }
]
const STATUS_MAP: Record<string, { label: string; badge: string }> = {
@@ -25,7 +28,8 @@ const STATUS_MAP: Record<string, { label: string; badge: string }> = {
paid: { label: '待发货', badge: 'badge-blue' },
shipping: { label: '待收货', badge: 'badge-blue' },
done: { label: '已完成', badge: 'badge-green' },
cancelled: { label: '已取消', badge: 'badge-gray' }
cancelled: { label: '已取消', badge: 'badge-gray' },
expired: { label: '订单超时未支付', badge: 'badge-gray' }
}
export default function OrdersPage() {
@@ -35,7 +39,14 @@ export default function OrdersPage() {
const [activeTab, setActiveTab] = useState('all')
const [orders, setOrders] = useState<OrderItem[]>([])
const load = () => setOrders(getOrderList())
const mapOrder = (order: ServerOrder): OrderItem => {
const first = order.items[0]
const statusCode = order.status === 'PENDING' ? 'pending' : order.status === 'PAID' || order.status === 'PROCESSING' ? 'paid' : order.status === 'SHIPPED' ? 'shipping' : order.status === 'COMPLETED' ? 'done' : order.status === 'PAYMENT_EXPIRED' ? 'expired' : 'cancelled'
return { id: order.id, productName: first?.name || '定制商品', productIcon: getProductIconImg({ id: first?.productId }), statusCode, date: new Date(order.createdAt).toLocaleString('zh-CN'), price: `¥${Number(order.totalAmount).toFixed(2)}`, count: first?.quantity || 0, sku: order.orderNo, paymentExpiresAt: order.paymentExpiresAt }
}
const load = async () => {
try { const remote = await fetchOrders({ page: 1, pageSize: 100 }); setOrders(remote.list.map(mapOrder)) } catch { setOrders(getOrderList()) }
}
useEffect(load, [])
@@ -82,6 +93,19 @@ export default function OrdersPage() {
Taro.navigateTo({ url: `/pages/orderDetail/index?orderId=${order.id}` })
}
const handlePay = async (order: OrderItem, e: any) => {
e.stopPropagation()
try { const result = await payOrder(order.id); Taro.showToast({ title: result.configured ? '支付准备中' : '支付未配置', icon: 'none' }) } catch (error) { Taro.showToast({ title: (error as Error).message || '支付失败', icon: 'none' }) }
}
const handleCancel = async (order: OrderItem, e: any) => {
e.stopPropagation()
try { await cancelOrder(order.id); await load(); Taro.showToast({ title: '订单已取消', icon: 'success' }) } catch (error) { Taro.showToast({ title: (error as Error).message || '取消失败', icon: 'none' }) }
}
const handleConfirm = async (order: OrderItem, e: any) => {
e.stopPropagation()
try { await confirmOrder(order.id); await load(); Taro.showToast({ title: '已确认收货', icon: 'success' }) } catch (error) { Taro.showToast({ title: (error as Error).message || '操作失败', icon: 'none' }) }
}
return (
<View className={`theme-${resolvedTheme}`}>
<ThemedPageMeta />
@@ -131,6 +155,13 @@ export default function OrdersPage() {
<Text className='order-product'>{order.productName}</Text>
<Text className='order-sku'>{order.sku}</Text>
<Text className='order-meta'>数量: {order.count} 件 | {order.id}</Text>
{order.statusCode === 'pending' && (
<PaymentCountdown
className='order-countdown'
deadline={order.paymentExpiresAt}
onExpired={() => setOrders(current => current.map(item => item.id === order.id ? { ...item, statusCode: 'expired' } : item))}
/>
)}
</View>
</View>
<View className='order-footer'>
@@ -140,9 +171,12 @@ export default function OrdersPage() {
</View>
<View className='order-actions'>
{order.statusCode === 'pending' && (
<View className='btn-primary order-btn'>
<Text>立即付款</Text>
</View>
<>
<View className='btn-primary order-btn' onTap={(e) => handlePay(order, e)}>
<Text>立即付款</Text>
</View>
<View className='btn-secondary order-btn' onTap={(e) => handleCancel(order, e)}><Text>取消订单</Text></View>
</>
)}
{order.statusCode === 'paid' && (
<View className='btn-secondary order-btn'>
@@ -154,7 +188,7 @@ export default function OrdersPage() {
<View className='btn-secondary order-btn' onTap={(e) => { e.stopPropagation(); Taro.showToast({ title: '查看物流', icon: 'none' }) }}>
<Text>查看物流</Text>
</View>
<View className='btn-primary order-btn' onTap={(e) => { e.stopPropagation(); Taro.showToast({ title: '确认收货', icon: 'none' }) }}>
<View className='btn-primary order-btn' onTap={(e) => handleConfirm(order, e)}>
<Text>确认收货</Text>
</View>
</>
src/pages/product/index.tsx
+25 -24
View File
@@ -1,10 +1,9 @@
import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react'
import { useState, useEffect } from 'react'
import './index.scss'
import { getProductById } from '../../utils/productConfig'
import { addDesign, getDesignList, setDesignList } from '../../utils/store'
import { createDesign } from '../../utils/api'
import { useThemeContext } from '../../context/ThemeContext'
import { useSafeArea } from '../../hooks/useSafeArea'
import { useStatusBar } from '../../hooks/useStatusBar'
@@ -12,6 +11,9 @@ import ThemedPageMeta from '../../components/ThemedPageMeta'
import ScrollTopMask from '../../components/ScrollTopMask'
import BottomActionBar from '../../components/BottomActionBar'
import { getProductIconImg } from '../../utils/productConfig'
import { fetchProduct } from '../../utils/api/product'
import { createDesign } from '../../utils/api/design'
import ProductImage from '../../components/ProductImage'
export default function ProductPage() {
const { theme, resolvedTheme } = useThemeContext()
@@ -23,7 +25,8 @@ export default function ProductPage() {
const router = Taro.getCurrentInstance().router
const params = router ? router.params : undefined
const productId = params && params.id ? params.id : ''
const product = getProductById(productId)
const [product, setProduct] = useState(getProductById(productId))
useEffect(() => { if (productId) fetchProduct(productId).then(setProduct).catch(() => { /* 本地配置兜底 */ }) }, [productId])
if (!product) {
return (
@@ -60,26 +63,19 @@ export default function ProductPage() {
setShowModal(true)
}
const confirmAdd = () => {
// 写服务端（需登录，创建即 DRAFT），成功后回写本地缓存；失败降级本地
createDesign({
productId: product.id,
productName: product.name,
unitPrice: product.price,
count: quantity
})
.then(item => {
setDesignList([item, ...getDesignList()])
Taro.showToast({ title: `已加入设计清单 x${quantity}`, icon: 'success' })
})
.catch(() => {
addDesign(product, quantity)
Taro.showToast({ title: `网络不可用，已加入本地清单 x${quantity}`, icon: 'none' })
})
.finally(() => {
setShowModal(false)
setTimeout(() => Taro.navigateBack(), 1200)
})
const confirmAdd = async () => {
const local = addDesign(product, quantity)
try {
// 用服务端返回的 id 替换临时 DSG... id。后续从设计清单进入结算时，
// 就不会把本地临时 id 当作 designListId 传给后端。
const saved = await createDesign({ productId: product.id, productName: product.name, unitPrice: product.price, count: quantity, designData: local.designData })
setDesignList(getDesignList().map(item => item.id === local.id ? saved : item))
} catch {
// 网络不可用时仍可保留本地草稿，恢复网络后可从设计清单继续编辑。
}
setShowModal(false)
Taro.showToast({ title: `已加入设计清单 x${quantity}`, icon: 'success' })
setTimeout(() => Taro.navigateBack(), 1200)
}
const goToDIY = () => {
@@ -129,7 +125,12 @@ export default function ProductPage() {
product.images.map((img, idx) => (
<SwiperItem key={idx}>
<View className='hero-block'>
<Image className='hero-image' src={img} mode='aspectFill' />
<ProductImage
className='hero-image'
src={img}
fallback={getProductIconImg(product)}
mode='aspectFill'
/>
</View>
</SwiperItem>
))
src/pages/profile/index.tsx
+15 -9
View File
@@ -11,6 +11,7 @@ import ScrollTopMask from '../../components/ScrollTopMask'
import { login, getMe, updateProfile, getToken } from '../../utils/api'
import { safeHideLoading } from '../../utils/request'
import { assetUrl } from '../../utils/asset'
import { fetchOrders } from '../../utils/api/order'
const ICON_MAP: Record<string, string> = {
'我的设计': assetUrl('/icon/调色盘.png'),
@@ -60,16 +61,21 @@ export default function ProfilePage() {
toDesign: 0, pending: 0, paid: 0, shipping: 0, done: 0
})
const loadStats = () => {
const orders = getOrderList()
const loadStats = async () => {
const designs = getDesignList()
setOrderStats({
toDesign: designs.filter(d => d.status === 'undesigned' || d.status === 'designing').length,
pending: orders.filter(o => o.statusCode === 'pending').length,
paid: orders.filter(o => o.statusCode === 'paid').length,
shipping: orders.filter(o => o.statusCode === 'shipping').length,
done: orders.filter(o => o.statusCode === 'done').length
})
try {
const remote = (await fetchOrders({ page: 1, pageSize: 100 })).list
setOrderStats({
toDesign: designs.filter(d => d.status === 'undesigned' || d.status === 'designing').length,
pending: remote.filter(o => o.status === 'PENDING').length,
paid: remote.filter(o => o.status === 'PAID' || o.status === 'PROCESSING').length,
shipping: remote.filter(o => o.status === 'SHIPPED').length,
done: remote.filter(o => o.status === 'COMPLETED').length
})
} catch {
const orders = getOrderList()
setOrderStats({ toDesign: designs.filter(d => d.status === 'undesigned' || d.status === 'designing').length, pending: orders.filter(o => o.statusCode === 'pending').length, paid: orders.filter(o => o.statusCode === 'paid').length, shipping: orders.filter(o => o.statusCode === 'shipping').length, done: orders.filter(o => o.statusCode === 'done').length })
}
}
const sync = () => {
src/pages/shop/detail/index.tsx
+11 -3
View File
@@ -1,8 +1,9 @@
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useEffect, useCallback, useMemo } from 'react'
import './index.scss'
import { PRODUCTS } from '../../../utils/productConfig'
import { fetchProduct } from '../../../utils/api/product'
import { ProductCategory } from '../../../types'
import { useSafeArea } from '../../../hooks/useSafeArea'
import { useStatusBar } from '../../../hooks/useStatusBar'
@@ -10,6 +11,7 @@ import { useThemeContext } from '../../../context/ThemeContext'
import ThemedPageMeta from '../../../components/ThemedPageMeta'
import ScrollTopMask from '../../../components/ScrollTopMask'
import BottomActionBar from '../../../components/BottomActionBar'
import ProductImage from '../../../components/ProductImage'
const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max)
const lerp = (a: number, b: number, t: number) => a + (b - a) * t
@@ -26,7 +28,12 @@ export default function ShopDetailPage() {
const routerParams = Taro.getCurrentInstance().router
const routerParamsValues = routerParams ? routerParams.params : undefined
const productId = routerParamsValues ? routerParamsValues.id : ''
const product: ProductCategory | undefined = PRODUCTS.find(p => p.id === productId)
const [product, setProduct] = useState<ProductCategory | undefined>(PRODUCTS.find(p => p.id === productId))
useEffect(() => {
if (!productId) return
fetchProduct(productId).then(setProduct).catch(() => { /* 保留本地兜底 */ })
}, [productId])
useEffect(() => {
try {
@@ -132,9 +139,10 @@ export default function ShopDetailPage() {
transform: `translateY(${winHeight * heroStyles.translateY / 100}px)`
}}
>
<Image
<ProductImage
className="shop-hero-img"
src={(product.images && product.images[0]) || product.iconImg || ''}
fallback={product.iconImg || product.icon}
mode="aspectFill"
style={{
width: '100%',
src/pages/shop/index.tsx
+13 -4
View File
@@ -1,5 +1,6 @@
import { View, Text, Image } from '@tarojs/components'
import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useEffect, useState } from 'react'
import { useThemeContext } from '../../context/ThemeContext'
import { useSafeArea } from '../../hooks/useSafeArea'
import { useStatusBar } from '../../hooks/useStatusBar'
@@ -7,11 +8,17 @@ import ThemedPageMeta from '../../components/ThemedPageMeta'
import ScrollTopMask from '../../components/ScrollTopMask'
import './index.scss'
import { PRODUCTS } from '../../utils/productConfig'
import { fetchProducts } from '../../utils/api/product'
import type { ProductCategory } from '../../types'
import ProductImage from '../../components/ProductImage'
export default function ShopPage() {
const { resolvedTheme } = useThemeContext()
const safe = useSafeArea()
useStatusBar(resolvedTheme)
const [products, setProducts] = useState<ProductCategory[]>(PRODUCTS)
const [error, setError] = useState(false)
useEffect(() => { fetchProducts({ page: 1, pageSize: 100 }).then(result => { setProducts(result.list); setError(false) }).catch(() => setError(true)) }, [])
const openDetail = (productId: string) => {
Taro.navigateTo({ url: `/pages/shop/detail/index?id=${productId}` })
@@ -24,11 +31,12 @@ export default function ShopPage() {
<View className="shop-list">
<View className="shop-header" style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
<Text className="shop-header-title">智绘精选</Text>
<Text className="shop-header-sub">激光微雕定制好物</Text>
<Text className="shop-header-sub">激光微雕定制好物</Text>
{error && <Text className="shop-header-sub">网络不可用，当前显示本地缓存</Text>}
</View>
<View className="shop-grid">
{PRODUCTS.map(product => {
{products.map(product => {
const imageSrc = product.images[0] || product.iconImg || ''
return (
<View
@@ -37,9 +45,10 @@ export default function ShopPage() {
onTap={() => openDetail(product.id)}
>
<View className="shop-card-img-wrap">
<Image
<ProductImage
className="shop-card-img"
src={imageSrc}
fallback={product.iconImg || product.icon}
mode="aspectFill"
lazyLoad
/>
src/types/index.ts
+7 -21
View File
@@ -77,15 +77,8 @@ export interface StickerItem {
export interface DesignDataV1 {
/** 结构版本；旧数据缺省视为 v1 */
version?: 1
/**
* 商品品类（契约 §2 冻结：仅 {id, mask, tone}，DIY 保存时裁剪）；
* mask 是画布尺寸来源，说明见 docs/mask-config-guide.md
*/
category?: {
id: string
mask: MaskConfig
tone?: [number, number, number]
}
/** 商品品类：mask 是画布尺寸来源，说明见 docs/mask-config-guide.md */
category?: ProductCategory
/** 底图（持久 URL），WCD 打包的画布底 */
background?: {
src: string
@@ -149,23 +142,17 @@ export interface WordCloudDispatchResult {
message?: string
}
/** 设计清单条目（与后端 DesignList 一一对应，api-contract-v1 §5） */
/** 设计清单条目 */
export interface DesignItem {
id: string
productId: string
productName: string
/**
* 条目图标。服务端不存储（契约 forbidNonWhitelisted 拒绝多余字段），
* 页面按 PRODUCT_ICON_MAP[productId] 兜底推导；仅本地缓存/旧数据可能携带
*/
productIcon?: string
productIcon: string
unitPrice: number
count: number
/** undesigned/designing 由前端驱动；processing/ordered 由服务端状态映射产生（R3 驱动） */
status: 'undesigned' | 'designing' | 'processing' | 'ordered'
designData?: DesignDataV1
orderId?: string
/** 服务端 createdAt（ISO），展示时取日期部分 */
createdAt: string
}
@@ -174,14 +161,15 @@ export interface OrderItem {
id: string
productName: string
productIcon: string
statusCode: 'pending' | 'paid' | 'shipping' | 'done'
statusCode: 'pending' | 'paid' | 'shipping' | 'done' | 'cancelled' | 'expired'
date: string
price: string
count: number
sku: string
paymentExpiresAt?: string | null
}
/** 收货地址（后端 province/city/district/detail 以 region 数组表达，转换只在 api/address.ts） */
/** 收货地址 */
export interface AddressItem {
id: string
name: string
@@ -189,8 +177,6 @@ export interface AddressItem {
region: string[] // [province, city, district]
detail: string // 门牌号/详细地址
isDefault: boolean
/** 服务端创建时间（ISO 8601），本地缓存数据可能没有 */
createdAt?: string
}
/** 编辑器中的图片状态（向后兼容） */
src/utils/api/address.ts
+24 -74
View File
@@ -1,93 +1,43 @@
/**
* R2 收货地址接口（api-contract-v1 §4）。
*
* 唯一负责 region: [province, city, district] ↔ 后端 province/city/district
* 双向转换的文件；页面与 store 不得出现第二次转换（route-r2 §3）。
*/
import http from '../request'
import type { AddressItem } from '../../types'
/** 后端 Address 结构（契约 §4：四个独立地址字段） */
interface ServerAddress {
id: string
name: string
phone: string
province: string
city: string
district: string
detail: string
isDefault: boolean
createdAt?: string
updatedAt?: string
}
type AddressPayload = Omit<AddressItem, 'id' | 'region'> & { region: string[] }
type ServerAddress = { id: string; name: string; phone: string; province: string; city: string; district: string; detail: string; isDefault: boolean }
/** ServerAddress → 前端 AddressItem（合并省市区为 region 数组） */
function toAddressItem(rec: ServerAddress): AddressItem {
return {
id: rec.id,
name: rec.name,
phone: rec.phone,
region: [rec.province, rec.city, rec.district],
detail: rec.detail,
isDefault: rec.isDefault,
createdAt: rec.createdAt,
}
}
const toClient = (address: ServerAddress): AddressItem => ({
id: address.id,
name: address.name,
phone: address.phone,
region: [address.province, address.city, address.district],
detail: address.detail,
isDefault: address.isDefault,
})
/** 前端 region 数组 → 后端四个独立字段 */
function toServerFields(addr: {
name?: string
phone?: string
region?: string[]
detail?: string
isDefault?: boolean
}): Record<string, unknown> {
// 后端 ValidationPipe forbidNonWhitelisted：undefined 字段会被 JSON 序列化丢弃，
// 这里显式展开保证只传后端声明的字段
const body: Record<string, unknown> = {}
if (addr.name !== undefined) body.name = addr.name
if (addr.phone !== undefined) body.phone = addr.phone
if (addr.region !== undefined) {
const [province = '', city = '', district = ''] = addr.region
body.province = province
body.city = city
body.district = district
}
if (addr.detail !== undefined) body.detail = addr.detail
if (addr.isDefault !== undefined) body.isDefault = addr.isDefault
return body
}
const toServer = (address: Partial<AddressPayload>) => ({
...(address.name === undefined ? {} : { name: address.name }),
...(address.phone === undefined ? {} : { phone: address.phone }),
...(address.region ? { province: address.region[0] || '', city: address.region[1] || '', district: address.region[2] || '' } : {}),
...(address.detail === undefined ? {} : { detail: address.detail }),
...(address.isDefault === undefined ? {} : { isDefault: address.isDefault }),
})
/** 我的收货地址列表（默认地址在前） */
export async function fetchAddresses(): Promise<AddressItem[]> {
const list = await http.get<ServerAddress[]>('/api/addresses')
return (list || []).map(toAddressItem)
const rows = await http.get<ServerAddress[]>('/api/addresses')
return rows.map(toClient)
}
/** 新增收货地址（首个地址后端自动设为默认） */
export async function createAddress(
addr: Omit<AddressItem, 'id' | 'createdAt'>,
): Promise<AddressItem> {
const rec = await http.post<ServerAddress>('/api/addresses', toServerFields(addr))
return toAddressItem(rec)
export async function createAddress(address: Omit<AddressItem, 'id'>): Promise<AddressItem> {
return toClient(await http.post<ServerAddress>('/api/addresses', toServer(address)))
}
/** 更新本人地址（只传显式给出的字段；isDefault=true 由后端事务保证唯一默认） */
export async function updateAddress(
id: string,
patch: Partial<Omit<AddressItem, 'id' | 'createdAt'>>,
): Promise<AddressItem> {
const rec = await http.patch<ServerAddress>(`/api/addresses/${id}`, toServerFields(patch))
return toAddressItem(rec)
export async function updateAddress(id: string, patch: Partial<AddressItem>): Promise<AddressItem> {
return toClient(await http.patch<ServerAddress>(`/api/addresses/${id}`, toServer(patch)))
}
/** 删除本人地址（若删的是默认地址，后端自动补偿最新一条为默认） */
export async function deleteAddress(id: string): Promise<void> {
await http.del(`/api/addresses/${id}`)
}
/** 设为默认地址 */
export async function setDefaultAddress(id: string): Promise<AddressItem> {
const rec = await http.patch<ServerAddress>(`/api/addresses/${id}/default`)
return toAddressItem(rec)
return toClient(await http.patch<ServerAddress>(`/api/addresses/${id}/default`))
}
src/utils/api/design.ts
+40 -99
View File
@@ -1,119 +1,60 @@
/**
* R2 设计清单接口（api-contract-v1 §5）。
*
* 映射约定（阶段0 决策，见 docs/r2-workflow.md）：
* - 一条前端 DesignItem = 一条后端 DesignList 记录，items 固定 1 个元素；
* - title 由 productName 承担（后端必填）；
* - productIcon 不入库（后端 forbidNonWhitelisted 会拒绝），页面按 productId 兜底推导；
* - 状态映射：DRAFT↔undesigned、SUBMITTED↔designing、PROCESSING↔processing、DONE↔ordered；
* - 前端只允许提交 designing（→SUBMITTED），PROCESSING/DONE 由 R3 驱动。
*/
import http from '../request'
import type { DesignDataV1, DesignItem } from '../../types'
import { getProductIconImg } from '../productConfig'
/** 后端 DesignListStatus → 前端状态码（契约 §5 映射表） */
const SERVER_STATUS_MAP: Record<string, DesignItem['status']> = {
DRAFT: 'undesigned',
SUBMITTED: 'designing',
PROCESSING: 'processing',
DONE: 'ordered',
type ServerEntry = { productId: string; productName: string; unitPrice: number; count: number; designData?: DesignDataV1 }
type ServerList = { id: string; title: string; items: ServerEntry[]; status: 'DRAFT' | 'SUBMITTED' | 'PROCESSING' | 'DONE'; orderId?: string; createdAt: string }
const statusToClient = (item: ServerList): DesignItem['status'] => {
if (item.orderId || item.status === 'DONE') return 'ordered'
if (item.status === 'PROCESSING') return 'processing'
if (item.status === 'DRAFT') return 'undesigned'
return 'designing'
}
/** 清单条目（后端 items[] 固定 1 个元素，契约 §5） */
export interface DesignListEntryPayload {
productId: string
productName: string
unitPrice: number
count: number
designData?: DesignDataV1
}
const statusToServer = (status: DesignItem['status']) =>
status === 'undesigned' ? 'DRAFT' : status === 'designing' ? 'SUBMITTED' : status === 'processing' ? 'PROCESSING' : 'DONE'
/** 后端 DesignList 记录结构 */
interface ServerDesignList {
id: string
userId?: string
title: string
items: (Partial<DesignListEntryPayload> & Record<string, unknown>)[]
status: string
createdAt: string
updatedAt?: string
}
/** ServerDesignList → 前端 DesignItem */
function toDesignItem(rec: ServerDesignList): DesignItem {
const entry = rec.items && rec.items[0]
const toClient = (list: ServerList): DesignItem => {
const item = list.items[0]
return {
id: rec.id,
productId: entry?.productId ?? '',
productName: entry?.productName || rec.title,
// productIcon 有意不返回：服务端不存储，页面按 PRODUCT_ICON_MAP[productId] 兜底
unitPrice: entry?.unitPrice ?? 0,
count: entry?.count ?? 1,
status: SERVER_STATUS_MAP[rec.status] ?? 'undesigned',
designData: entry?.designData,
createdAt: (rec.createdAt || '').slice(0, 10),
id: list.id,
productId: item.productId,
productName: item.productName,
productIcon: getProductIconImg({ id: item.productId }),
unitPrice: Number(item.unitPrice),
count: item.count,
status: statusToClient(list),
designData: item.designData,
orderId: list.orderId,
createdAt: list.createdAt,
}
}
/** 我的设计清单（createdAt 倒序） */
export async function fetchDesignList(): Promise<DesignItem[]> {
const list = await http.get<ServerDesignList[]>('/api/design-list')
return (list || []).map(toDesignItem)
const rows = await http.get<ServerList[]>('/api/design-list')
return rows.filter(row => row.items?.length > 0).map(toClient)
}
/** 创建清单（一条设计一条清单；后端初始状态 DRAFT/undesigned） */
export async function createDesign(entry: DesignListEntryPayload): Promise<DesignItem> {
const rec = await http.post<ServerDesignList>('/api/design-list', {
title: entry.productName,
items: [
{
productId: entry.productId,
productName: entry.productName,
unitPrice: entry.unitPrice,
count: entry.count,
...(entry.designData !== undefined ? { designData: entry.designData } : {}),
},
],
})
return toDesignItem(rec)
export async function fetchDesign(id: string): Promise<DesignItem> {
return toClient(await http.get<ServerList>(`/api/design-list/${id}`))
}
export interface UpdateDesignPayload {
/** 新标题（前端一般不传） */
title?: string
/** 状态迁移：前端只允许 designing（→SUBMITTED，DIY 保存设计时） */
status?: 'designing'
/** 条目整体替换（items 是全量覆盖，修改 designData 时必须带全 4 个基本字段） */
item?: DesignListEntryPayload
export async function createDesign(item: Omit<DesignItem, 'id' | 'createdAt' | 'status' | 'productIcon'>): Promise<DesignItem> {
return toClient(await http.post<ServerList>('/api/design-list', { title: item.productName, items: [{ productId: item.productId, productName: item.productName, unitPrice: item.unitPrice, count: item.count, designData: item.designData }] }))
}
/** 更新本人清单（部分更新：只传显式给出的字段） */
export async function updateDesign(id: string, payload: UpdateDesignPayload): Promise<DesignItem> {
const body: Record<string, unknown> = {}
if (payload.title !== undefined) body.title = payload.title
if (payload.status !== undefined) body.status = 'SUBMITTED'
if (payload.item !== undefined) {
body.items = [
{
productId: payload.item.productId,
productName: payload.item.productName,
unitPrice: payload.item.unitPrice,
count: payload.item.count,
...(payload.item.designData !== undefined ? { designData: payload.item.designData } : {}),
},
]
export async function updateDesign(id: string, patch: Partial<DesignItem>): Promise<DesignItem> {
const current = await fetchDesign(id)
const merged = { ...current, ...patch }
const data: Record<string, unknown> = {}
if (patch.designData !== undefined || patch.productId !== undefined || patch.productName !== undefined || patch.unitPrice !== undefined || patch.count !== undefined) {
data.items = [{ productId: merged.productId, productName: merged.productName, unitPrice: merged.unitPrice, count: merged.count, designData: merged.designData }]
}
const rec = await http.patch<ServerDesignList>(`/api/design-list/${id}`, body)
return toDesignItem(rec)
if (patch.productName !== undefined) data.title = patch.productName
if (patch.status !== undefined) data.status = statusToServer(patch.status)
return toClient(await http.patch<ServerList>(`/api/design-list/${id}`, data))
}
/** 删除本人清单 */
export async function deleteDesign(id: string): Promise<void> {
await http.del(`/api/design-list/${id}`)
}
/** 批量删除（后端只删本人条目，返回实际删除数；部分 id 无效不报错） */
export async function deleteDesigns(ids: string[]): Promise<number> {
const res = await http.post<{ deleted: number }>('/api/design-list/batch-delete', { ids })
return res?.deleted ?? 0
}
export async function deleteDesign(id: string): Promise<void> { await http.del(`/api/design-list/${id}`) }
export async function deleteDesigns(ids: string[]): Promise<void> { await http.post('/api/design-list/batch-delete', { ids }) }
src/utils/api/order.ts
+45 -7
View File
@@ -1,7 +1,45 @@
/**
* R3 订单接口归属文件。
* 后端 /api/orders 就绪后，在这里补充：
* createOrder / fetchOrders / fetchOrderDetail / payOrder
* 金额一律以服务端重算结果为准，前端只提交商品/设计数据与地址快照。
*/
export {}
import http from '../request'
export type ServerOrderStatus = 'PENDING' | 'PAID' | 'PROCESSING' | 'SHIPPED' | 'COMPLETED' | 'CANCELLED' | 'PAYMENT_EXPIRED'
export interface ServerOrderItem {
id: string
productId?: string
name: string
price: number
quantity: number
}
export interface ServerOrder {
id: string
orderNo: string
status: ServerOrderStatus
totalAmount: number
items: ServerOrderItem[]
addressSnapshot: { id?: string; name: string; phone: string; province: string; city: string; district: string; detail: string }
designListId?: string
createdAt: string
paidAt?: string | null
paymentExpiresAt?: string | null
payment?: { status: string }
}
export interface OrderPage { list: ServerOrder[]; total: number; page: number; pageSize: number }
export interface CreateOrderInput {
designListId?: string
addressId: string
requestId?: string
items: { productId: string; quantity: number }[]
}
export function createOrder(input: CreateOrderInput): Promise<ServerOrder> { return http.post('/api/orders', input) }
export function fetchOrders(params: { status?: ServerOrderStatus; page?: number; pageSize?: number } = {}): Promise<OrderPage> {
const query = new URLSearchParams()
if (params.status) query.set('status', params.status)
if (params.page) query.set('page', String(params.page))
if (params.pageSize) query.set('pageSize', String(params.pageSize))
const suffix = query.toString()
return http.get(`/api/orders${suffix ? `?${suffix}` : ''}`)
}
export function fetchOrderDetail(id: string): Promise<ServerOrder> { return http.get(`/api/orders/${id}`) }
export function payOrder(id: string): Promise<{ configured: boolean; message: string }> { return http.post(`/api/payments/${id}/pay`) }
export function cancelOrder(id: string): Promise<ServerOrder> { return http.post(`/api/orders/${id}/cancel`) }
export function confirmOrder(id: string): Promise<ServerOrder> { return http.patch(`/api/orders/${id}/confirm`) }
src/utils/api/product.ts
+30 -4
View File
@@ -1,13 +1,39 @@
import http from '../request'
import type { ProductCategory } from '../../types'
import { assetUrl } from '../asset'
export interface ProductPage { list: ProductCategory[]; total: number; page: number; pageSize: number }
const normalize = (product: any): ProductCategory => ({
id: product.id,
name: product.name,
desc: product.subtitle || product.description || '',
icon: assetUrl(product.iconImg || '/icon/四角星.svg'),
iconImg: assetUrl(product.iconImg),
price: Number(product.price),
originalPrice: product.originalPrice == null ? undefined : Number(product.originalPrice),
leadTime: product.leadTime || '7-10个工作日',
description: product.description || product.subtitle || '',
subtitle: product.subtitle,
tone: Array.isArray(product.tone) && product.tone.length === 3 ? product.tone : undefined,
story: product.story,
scene: product.scene,
tags: product.tags || [],
specs: Array.isArray(product.specs) ? product.specs : [],
mask: product.mask || { shape: 'rect', width: 300, height: 420 },
images: Array.isArray(product.images) ? product.images.map(assetUrl) : [],
})
/** 商品列表 */
export async function fetchProducts() {
return http.get('/api/products', { auth: false })
export async function fetchProducts(params: { page?: number; pageSize?: number; categoryId?: string; keyword?: string } = {}): Promise<ProductPage> {
const query = Object.entries(params).filter(([, value]) => value !== undefined).map(([key, value]) => `${key}=${encodeURIComponent(String(value))}`).join('&')
const result = await http.get<{ list: any[]; total: number; page: number; pageSize: number }>(`/api/products${query ? `?${query}` : ''}`, { auth: false })
return { ...result, list: result.list.map(normalize) }
}
/** 商品详情 */
export async function fetchProduct(id: string) {
return http.get(`/api/products/${id}`, { auth: false })
export async function fetchProduct(id: string): Promise<ProductCategory> {
return normalize(await http.get(`/api/products/${id}`, { auth: false }))
}
/** 分类列表 */
src/utils/request.ts
+32 -7
View File
@@ -1,11 +1,17 @@
import Taro from '@tarojs/taro'
declare const __API_BASE_URL__: string | undefined
/**
* 后端接口请求封装
* 后端统一响应：{ code, message, data }，code === 0 表示成功
* token 通过 Authorization: Bearer <token> 传入
*/
export const BASE_URL = 'https://wxbackend.tokenleaping.com'
// 地址由 Taro 在构建期注入；微信小程序运行时不提供 Node 的 process 对象。
// 兜底必须是线上地址，保证缺少环境变量时不会连到某台开发机的本机。
export const BASE_URL = typeof __API_BASE_URL__ !== 'undefined' && __API_BASE_URL__
? __API_BASE_URL__
: 'https://wxbackend.tokenleaping.com'
const TOKEN_KEY = 'smart_access_token'
@@ -85,6 +91,29 @@ async function sendRequest(
})
}
/**
* 保留微信运行时给出的请求失败原因。此前所有失败都被改写为“网络异常”，
* 会掩盖如「域名未配置」「连接被拒绝」等实际可定位的信息。
*/
function createNetworkError(path: string, method: string, cause: unknown): Error & { statusCode?: number } {
const url = `${BASE_URL}${path}`
const raw = cause as { errMsg?: unknown; message?: unknown } | null
const detail = typeof raw?.errMsg === 'string'
? raw.errMsg
: typeof raw?.message === 'string'
? raw.message
: typeof cause === 'string'
? cause
: '未知网络错误'
// 不记录请求体或 Authorization，避免 code / token 出现在调试日志中。
console.error('[API] 请求失败', { method, url, detail, cause })
const err = new Error(`网络请求失败：${detail}`) as Error & { statusCode?: number }
err.statusCode = -1
return err
}
export async function request<T = unknown>(
path: string,
options: RequestOptions = {},
@@ -104,9 +133,7 @@ export async function request<T = unknown>(
try {
res = await sendRequest(path, method, data, buildHeaders())
} catch (e) {
const err = new Error('网络异常，请稍后重试') as Error & { statusCode?: number }
err.statusCode = -1
throw err
throw createNetworkError(path, method, e)
}
// HTTP 未授权：先尝试自动续登一次，成功则用新 token 重试原请求
@@ -116,9 +143,7 @@ export async function request<T = unknown>(
try {
res = await sendRequest(path, method, data, buildHeaders())
} catch (e) {
const err = new Error('网络异常，请稍后重试') as Error & { statusCode?: number }
err.statusCode = -1
throw err
throw createNetworkError(path, method, e)
}
}
}
src/utils/store/address.ts
-7
View File
@@ -1,10 +1,3 @@
/**
* 收货地址本地存储 —— R2 后降级为「离线兜底缓存」层（按 openid 隔离，见 keys.ts）。
* 真实 CRUD 已走 utils/api/address.ts；本层职责：
* - 页面 API 成功 → 回写缓存，供冷启动先展示与未迁移页面（checkout 等）读取；
* - API 失败/断网 → 页面读缓存正常浏览；
* - 联网刷新以服务端为准覆盖缓存，旧本地数据不做自动合并（route-r2 风险节：默认忽略）。
*/
import Taro from '@tarojs/taro'
import type { AddressItem } from '../../types'
import { key } from './keys'
src/utils/store/design.ts
-7
View File
@@ -1,10 +1,3 @@
/**
* 设计清单本地存储 —— R2 后降级为「离线兜底缓存」层（按 openid 隔离，见 keys.ts）。
* 真实 CRUD 已走 utils/api/design.ts；本层职责：
* - 页面 API 成功 → 回写缓存，供冷启动先展示与未迁移页面（checkout 等）读取；
* - API 失败/断网 → 页面读缓存正常浏览；
* - 联网刷新以服务端为准覆盖缓存，旧本地数据不做自动合并（route-r2 风险节：默认忽略）。
*/
import Taro from '@tarojs/taro'
import type { DesignItem } from '../../types'
import { assetUrl } from '../asset'
src/utils/store/keys.ts
+4 -2
View File
@@ -5,9 +5,11 @@ export const USER_KEY = 'smart_user_info'
/** 当前激活 openid 在 Storage 中的 key */
export const ACTIVE_USER_KEY = 'smart_active_openid'
/** 判断 openid 是否为历史版 mock 残留（形如 mock_xxx） */
/** 判断 openid 是否为历史版仅前端 mock 残留（形如 mock_xxx）。
* 本地后端 WX_MOCK_LOGIN=1 返回 mock-xxx，属于可校验的联调用户，不能清除其 token。
*/
export function isMockOpenid(openid?: string | null): boolean {
return !!openid && (openid.startsWith('mock_') || openid.startsWith('mock-'))
return !!openid && openid.startsWith('mock_')
}
/** 取当前用户 openid；没有登录态时回退 _guest_ 并缓存 */