feat: refresh product and customization flows

src/pages/shop/detail/index.tsx

@@ -21,8 +21,9 @@ export default function ShopDetailPage() {
   // 顶部为沉浸式商品图，状态栏始终使用白字。
   useStatusBar(resolvedTheme, { mode: 'light' })
 
-  const routerParams = Taro.getCurrentInstance().router?.params
-  const productId = routerParams?.id || ''
+  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)
 
   useEffect(() => {
@@ -35,7 +36,7 @@ export default function ShopDetailPage() {
   }, [])
 
   const handleScroll = useCallback((e: any) => {
-    const st = e.detail?.scrollTop ?? 0
+    const st = (e.detail && e.detail.scrollTop) || 0
     const total = winHeight * 1.2
     const p = clamp(st / total, 0, 1)
     setProgress(p)
@@ -103,7 +104,7 @@ export default function ShopDetailPage() {
     }
   }, [progress])
 
-  const tone = useMemo(() => product?.tone || [28, 22, 18], [product])
+  const tone = useMemo(() => (product ? product.tone : [28, 22, 18]), [product])
 
   if (!product) {
     return (
@@ -129,7 +130,7 @@ export default function ShopDetailPage() {
         >
           <Image
             className="shop-hero-img"
-            src={product.images?.[0] || product.iconImg || ''}
+            src={(product.images && product.images[0]) || product.iconImg || ''}
             mode="aspectFill"
             style={{
               width: '100%',