fix(checkout): 设计效果确认页消费贴纸 edits 滤镜 + 按 zIndex 排层
与 DIY 工作台同一 stickerFilter 逻辑(diy-fix-workflow 问题5 的 R3 待办), 修复贴纸编辑保存后确认页预览与工作台图片不一致; 图层顺序改为按 zIndex(无 zIndex 按数组序兜底),与 WCD 打包规则一致。 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -105,6 +105,27 @@ export default function CheckoutPage() {
|
|||||||
|
|
||||||
const hasStickers = design && design.designData && design.designData.stickers && design.designData.stickers.length > 0
|
const hasStickers = design && design.designData && design.designData.stickers && design.designData.stickers.length > 0
|
||||||
const hasLegacyImage = design && design.designData ? design.designData.imageSrc : undefined
|
const hasLegacyImage = design && design.designData ? design.designData.imageSrc : undefined
|
||||||
|
|
||||||
|
// 预览消费贴纸 edits(亮度/色相/对比度 → CSS filter),与 DIY 工作台同一呈现逻辑
|
||||||
|
//(diy-fix-workflow 问题5 的 R3 待办:不消费会导致确认页图片与工作台不一致)
|
||||||
|
const stickerFilter = (s: { edits?: { brightness?: number; hue?: number; contrast?: number } }) => {
|
||||||
|
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}%)`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图层顺序与 WCD 打包规则一致(按 zIndex,无 zIndex 按数组序兜底)
|
||||||
|
const previewStickers = hasStickers
|
||||||
|
? design.designData!.stickers!
|
||||||
|
.map((s: any, i: number) => ({ s, z: typeof s.zIndex === 'number' ? s.zIndex : i }))
|
||||||
|
.sort((a, b) => a.z - b.z)
|
||||||
|
.map((it) => it.s)
|
||||||
|
: []
|
||||||
|
|
||||||
const formatAddress = (region: string[] | undefined, detail: string) => {
|
const formatAddress = (region: string[] | undefined, detail: string) => {
|
||||||
const regionText = region ? region.join(' ') : ''
|
const regionText = region ? region.join(' ') : ''
|
||||||
return regionText ? `${regionText} ${detail}` : detail
|
return regionText ? `${regionText} ${detail}` : detail
|
||||||
@@ -159,13 +180,14 @@ export default function CheckoutPage() {
|
|||||||
<View className='checkout-canvas surface-card'>
|
<View className='checkout-canvas surface-card'>
|
||||||
<View className='canvas-area' style={maskStyle}>
|
<View className='canvas-area' style={maskStyle}>
|
||||||
{hasStickers ? (
|
{hasStickers ? (
|
||||||
design.designData.stickers.map((s: any) => (
|
previewStickers.map((s: any) => (
|
||||||
<Image
|
<Image
|
||||||
key={s.id}
|
key={s.id}
|
||||||
className='checkout-image'
|
className='checkout-image'
|
||||||
src={s.src}
|
src={s.src}
|
||||||
style={{
|
style={{
|
||||||
transform: `translate(${s.x}px, ${s.y}px) scale(${s.scale || 1})`,
|
transform: `translate(${s.x}px, ${s.y}px) scale(${s.scale || 1})`,
|
||||||
|
filter: stickerFilter(s),
|
||||||
width: s.width || 200,
|
width: s.width || 200,
|
||||||
height: s.height || 200
|
height: s.height || 200
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user