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

- 新增 PaymentCountdown、ProductImage 组件
- 完善 checkout/orders/orderDetail 订单支付链路与地址、商品、设计数据
- request 接口地址改为构建期注入并保留真实网络错误，默认兜底线上地址
- 同步重新构建 dist 产物

src/pages/diy/stickerEdit/index.tsx

@@ -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>