diff --git a/.env.development b/.env.development
index 79adbd8..1afde8e 100644
--- a/.env.development
+++ b/.env.development
@@ -1,7 +1,9 @@
 VITE_APP_PREVIEW=true
-# VITE_APP_API_BASE_URL=http://172.16.20.21:8166/web/
+# VITE_APP_API_BASE_URL=http://172.16.20.21:20001/api/web/
+# VITE_APP_API_BASE_URL=http://172.16.0.40:20001/api/web/
+VITE_APP_API_BASE_URL=https://shop.api.suwa3d.com/api/web/
 # VITE_APP_API_BASE_URL=https://wechat-test.api.puabadge.com/web/
-VITE_APP_API_BASE_URL=https://wechat.api.puabadge.com/web/
+# VITE_APP_API_BASE_URL=https://wechat.api.puabadge.com/web/
 # VITE_APP_API_WX_URL=https://wechat.api.puabadge.com/web/
 # http://web.suwa3d.dev:28499/
 VITE_HTTP_MOCK=true
diff --git a/src/config/cartoon.ts b/src/config/cartoon.ts
new file mode 100644
index 0000000..43dd137
--- /dev/null
+++ b/src/config/cartoon.ts
@@ -0,0 +1,493 @@
+// 卡通手办页面配置
+export const cartoonConfig = {
+  // 路由配置
+  routes: {
+    record: '/cartoon/photoAlbum',
+    myOrder: '/cartoon/myOrder',
+    preview: '/cartoon/previewOrder',
+    orderDetail: '/cartoon/orderDetail',
+    home: '/cartoon'
+  },
+  
+  // 产品类型配置
+  productTypes: {
+    1: { name: '立体徽章', key: 'badge_3d' },
+    2: { name: '浮雕相框', key: 'relief_frame' },
+    3: { name: '3D冰箱贴', key: 'fridge_magnet' },
+    4: { name: '3D卡通手办', key: 'cartoon_figure' },
+    6: { name: '浮雕挂饰', key: 'relief_pendant' }
+  },
+  
+  // 主体类型配置
+  subjectTypes: {
+    person: {
+      id: 7,
+      name: '人物主体',
+      prodIds: [7, 1, 25], // 不同产品类型对应的人物产品ID
+      group: 'gp',
+      supportSubject: 1
+    },
+    pet: {
+      id: 8,
+      name: '宠物主体',
+      prodIds: [8, 2, 19, 24], // 不同产品类型对应的宠物产品ID
+      group: 'pet',
+      supportSubject: 2
+    }
+  },
+  
+  // 产品ID映射配置（根据typeId和subjectId映射到实际产品ID）
+  productIdMapping: {
+    4: { // typeId == 4 (3D卡通手办)
+      person: 1,
+      pet: 19
+    },
+    6: { // typeId == 6 (浮雕挂饰)
+      person: 25,
+      pet: 24
+    },
+    3: { // typeId == 3 (3D冰箱贴)
+      person: 7,
+      pet: 8
+    },
+    default: { // 其他类型
+      person: 7,
+      pet: 8
+    }
+  },
+  
+  // 产品限制配置
+  productLimits: {
+    // 根据产品ID配置是否需要人脸检测
+    faceCheckRequired: [7, 1, 25],
+    // 根据产品ID配置是否支持多视角参考图
+    multiViewSupported: [19],
+    // 根据产品ID配置是否支持风格类型
+    kindListSupported: [4],
+    // 根据typeId配置是否显示照片示例
+    photoExampleTypes: ['3D真人肖像']
+  },
+  
+  // 上传配置
+  upload: {
+    minWidth: 300,
+    minHeight: 300,
+    maxSize: 10 * 1024 * 1024, // 10MB
+    maxReferCount: 3,
+    cropOptions: {
+      canScale: true,
+      autoCropWidth: 1024,
+      autoCropHeight: 1024,
+      ceilbutton: true,
+      infoTrue: true,
+      fixed: false,
+      fixedNumber: [3, 4],
+      fixedBox: false,
+      canMoveBox: true,
+      enlarge: 2
+    }
+  },
+  
+  // 图片资源路径配置（在组件中通过 import 导入）
+  assets: {
+    sheji: '@/assets/badge/sheji.png',
+    order: '@/assets/badge/order.png'
+  },
+  
+  // 提示信息配置
+  messages: {
+    personPhotoTip: {
+      single: '1',
+      multiple: '1-3',
+      unit: '人'
+    },
+    petPhotoTip: {
+      count: '1-3',
+      unit: '只'
+    }
+  },
+  
+  // 业务规则配置
+  businessRules: {
+    // 禁止的产品ID组合（typeId, subjectId）
+    disabled: [
+      { typeId: 3, subjectId: 7, message: '人物3D冰箱贴暂未开放' }
+    ],
+    // 订单类型限制（typeId, currentProdId, targetSubjectId, message）
+    orderRestrictions: [
+      { typeId: 4, prodId: 19, targetSubjectId: 8, message: '该订单属于宠物卡通手办' },
+      { typeId: 4, prodId: 1, targetSubjectId: 7, message: '该订单属于人物卡通手办' }
+    ]
+  },
+  
+  // 样式配置
+  styles: {
+    colors: {
+      primary: '#50cf54',
+      primaryGradient: 'linear-gradient(90deg, #D1ED8E 0%, #55E668 100%)',
+      textPrimary: '#222',
+      textSecondary: '#333',
+      textTertiary: '#888',
+      textDisabled: '#b0b0b0',
+      background: '#F0F2F5',
+      backgroundSecondary: '#F2F2F2',
+      border: '#E5E5E5',
+      success: '#15CF5F',
+      progressBar: '#6fdc8c'
+    },
+    spacing: {
+      pagePadding: '16px',
+      sectionMargin: '16px',
+      itemGap: '8px'
+    }
+  },
+  
+  // Preview页面配置
+  preview: {
+    // 图片尺寸配置
+    imageSize: {
+      previewWidth: 320,
+      previewHeight: 320,
+      compareImageSize: 120
+    },
+    
+    // 进度条配置
+    progress: {
+      maxProgress: 90,
+      interval: 300, // ms
+      thresholds: {
+        stage1: 25,
+        stage2: 50,
+        stage3: 75
+      },
+      stages: {
+        stage1: '照片数据分析中',
+        stage2: '提炼图像关键词',
+        stage3: '图像生成中',
+        stage4: '图像后处理与优化'
+      },
+      totalTime: 90 // 秒
+    },
+    
+    // 形状ID配置
+    shapeIds: {
+      round: [1, 2], // 圆形形状
+      specialFrame: [15, 16], // 特殊相框
+      frame: [17, 18], // 相框
+      topBottomText: [27, 28] // 支持上下文字的形状
+    },
+    
+    // 文字配置默认值
+    textConfig: {
+      front: {
+        x: 163,
+        y: 222,
+        width: 700,
+        height: 700,
+        radius: 350,
+        fontSize: 72,
+        maxLength: 18
+      },
+      back: {
+        x: 238,
+        y: 297,
+        width: 550,
+        height: 550,
+        radius: 275,
+        fontSize: 60,
+        maxLength: 56
+      },
+      defaultColor: '#000000',
+      defaultWeight: 'normal'
+    },
+    
+    // 图片缩放比例
+    imageScale: 0.6,
+    
+    // 默认值配置
+    defaults: {
+      group: 1,
+      imgKey: 101,
+      countryId: 45,
+      addrId: 0
+    },
+    
+    // 轮询配置
+    polling: {
+      interval: 10000, // 10秒
+      compareImageDelay: 1000 // 1秒
+    },
+    
+    // 特殊code配置（用于地址识别功能）
+    specialCodes: {
+      addressRecognition: 'ACAYOAAC3PFCPO3CD6DVM1'
+    },
+    
+    // 产品名称映射（根据typeId和prodId）
+    productNames: {
+      1: { // typeId == 1 (立体徽章)
+        7: '人物立体徽章',
+        8: '宠物立体徽章'
+      },
+      2: { // typeId == 2 (浮雕相框)
+        7: '人物浮雕相框',
+        8: '宠物浮雕相框'
+      },
+      3: { // typeId == 3 (3D冰箱贴)
+        7: '人物3D冰箱贴',
+        8: '宠物3D冰箱贴'
+      },
+      4: { // typeId == 4 (3D卡通手办)
+        1: '人物卡通手办',
+        19: '宠物卡通手办'
+      },
+      6: { // typeId == 6 (浮雕挂饰)
+        25: '人物浮雕挂饰',
+        24: '宠物浮雕挂饰'
+      }
+    },
+    
+    // 提示信息
+    messages: {
+      invalidInput: '输入的文字不能包含特殊符号！',
+      selectQuantity: '请先选择下单数量',
+      fillContactName: '请先填写收货人信息',
+      fillContactMobile: '请先填写收货人手机号',
+      selectArea: '请先选择地区',
+      fillAddress: '请先填写详细地址',
+      orderSuccess: '下单成功',
+      noRemainingCount: '当前次数已用完,请重新购买',
+      confirmRegenerate: '请确认是否重新生成。',
+      confirmOrder: '请再次确认是否选择这个模型下单，下单后预计需要10天完成生产发货。如对产品有疑问，可以联系客服咨询。',
+      addressPlaceholder: '请输入姓名、手机号、详细地址（如：张三 13800138000 广东省深圳市南山区科技园1号）',
+      addressRecognitionResult: '识别结果',
+      compareTip: '温馨提示：AI设计的徽章效果图是根据用户提供的照片机器学习生成的，多试几次就能找到你满意的徽章~',
+      saveImageTip: '长按图片 → 保存到相册',
+      designing: '设计中',
+      designFailed: '设计失败',
+      remainingExchange: '剩余兑换',
+      process: '工艺',
+      productType: '产品类型',
+      orderQuantity: '订购数量',
+      addressRecognition: '地址识别',
+      shippingAddress: '收货地址',
+      regenerate: '再次生成',
+      compare: '前后对比',
+      saveImage: '保存图片',
+      confirmSelect: '确认选择',
+      originalImage: '原图',
+      previewImage: '效果图',
+      badgePreview: '徽章预览'
+    }
+  },
+  
+  // PhotoAlbum页面配置
+  photoAlbum: {
+    // 分页配置
+    pagination: {
+      pageSize: 20,
+      initialPage: 1
+    },
+    
+    // 状态配置
+    status: {
+      success: 1, // 设计成功
+      designing: 0, // 设计中
+      failed: 2 // 设计失败
+    },
+    
+    // 图片资源路径（在组件中通过 import 导入）
+    assets: {
+      nullData: '@/assets/badge/null-data.png'
+    },
+    
+    // 样式配置
+    styles: {
+      gridColumns: 2, // 网格列数
+      gap: 16, // 间距
+      borderRadius: 12 // 圆角
+    },
+    
+    // 提示信息
+    messages: {
+      title: '设计记录',
+      note: '注：可点击效果图进行下单打印',
+      noMore: '没有更多了',
+      loading: '加载中...',
+      noData: '暂无数据',
+      designing: '设计中',
+      designFailed: '设计失败',
+      getDataFailed: '获取数据失败'
+    }
+  },
+  
+  // MyOrder页面配置
+  myOrder: {
+    // 分页配置
+    pagination: {
+      pageSize: 30,
+      initialPage: 1,
+      defaultStatus: 0 // 默认订单状态
+    },
+    
+    // 订单状态配置
+    orderStatus: {
+      pending: 1, // 待支付
+      cancelled: 2, // 已取消
+      producing: 100, // 生产中
+      shipping: 200, // 待收货
+      completed: 300 // 已完成
+    },
+    
+    // 订单状态文本映射
+    statusText: {
+      1: '待支付',
+      2: '已取消',
+      100: '生产中',
+      200: '待收货',
+      300: '已完成'
+    },
+    
+    // 订单状态样式配置
+    statusStyles: {
+      processing: {
+        background: '#bdbdbd' // 处理中状态背景色
+      },
+      finished: {
+        background: '#8bc34a' // 完成状态背景色
+      },
+      default: {
+        background: '#bdbdbd',
+        color: '#fff',
+        opacity: 0.9
+      }
+    },
+    
+    // 图片资源路径（在组件中通过 import 导入）
+    assets: {
+      nullData: '@/assets/badge/null-data.png'
+    },
+    
+    // 样式配置
+    styles: {
+      gap: 8, // 间距
+      itemWidth: 'calc(50% - 4px)', // 订单项宽度
+      itemHeight: '43vw', // 订单项高度
+      borderRadius: 12, // 圆角
+      padding: {
+        horizontal: 16,
+        vertical: 24
+      },
+      status: {
+        bottom: 5,
+        right: 5,
+        padding: {
+          vertical: 2,
+          horizontal: 12
+        },
+        borderRadius: 12,
+        fontSize: 12
+      },
+      shadow: '0 2px 8px rgba(0,0,0,0.08)' // 阴影
+    },
+    
+    // 提示信息
+    messages: {
+      title: '我的订单',
+      noData: '暂无数据'
+    }
+  },
+  
+  // OrderDetail页面配置
+  orderDetail: {
+    // 订单类型配置
+    orderTypes: {
+      shipping: 2 // 需要收货地址的订单类型
+    },
+    
+    // 产品类型配置（需要特殊显示的产品类型）
+    productTypes: {
+      reliefPendant: 6 // 浮雕挂饰（需要显示双面）
+    },
+    
+    // 图片尺寸配置
+    imageSize: {
+      width: 320,
+      height: 320,
+      borderRadius: 10
+    },
+    
+    // 图片缩放比例
+    imageScale: 0.6,
+    
+    // 样式配置
+    styles: {
+      padding: {
+        horizontal: 16,
+        vertical: 0
+      },
+      statusInfo: {
+        padding: {
+          horizontal: 16,
+          vertical: 0
+        },
+        title: {
+          fontSize: 18,
+          fontWeight: 'bold',
+          color: '#222',
+          marginBottom: 8
+        },
+        desc: {
+          fontSize: 10,
+          color: '#888'
+        }
+      },
+      productInfo: {
+        padding: {
+          horizontal: 16,
+          vertical: 0
+        },
+        title: {
+          fontSize: 15,
+          fontWeight: 'bold',
+          color: '#111',
+          marginBottom: 10
+        },
+        details: {
+          gap: 8
+        },
+        label: {
+          color: '#bdbdbd',
+          fontSize: 14
+        },
+        value: {
+          color: '#222',
+          fontSize: 14
+        }
+      },
+      avatar: {
+        gap: 10,
+        borderRadius: 10
+      },
+      bottomSpacing: 30
+    },
+    
+    // 提示信息
+    messages: {
+      title: '订单详情',
+      statusDesc: '下单后预计需要10天完成生产发货。如对产品有疑问，可以联系客服咨询。',
+      shippingInfo: '收货信息',
+      contactInfo: '收货人信息',
+      shippingAddress: '收货地址',
+      productInfo: '产品信息',
+      productName: '产品名称',
+      size: '尺寸',
+      shape: '形状',
+      quantity: '购买数量',
+      orderInfo: '订单信息',
+      orderId: '购买订单id',
+      orderTime: '购买时间'
+    }
+  }
+}
+
diff --git a/src/main.ts b/src/main.ts
index d766720..59588f1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { createApp, onMounted } from 'vue'
+import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { createRouterScroller } from 'vue-router-better-scroller'
@@ -105,13 +105,34 @@ app.use(createRouterScroller({
   },
 }))
 
-onMounted(() => {
-  window.addEventListener('beforeunload', handleBeforeUnload);
-});
- 
+// 处理页面隐藏事件（可以区分刷新和关闭）
+function handlePageHide(event: PageTransitionEvent) {
+  // event.persisted 为 true 表示页面被缓存（刷新），保留 code
+  // event.persisted 为 false 表示页面未被缓存（关闭），清除 code
+  if (!event.persisted) {
+    // 页面关闭（非刷新），清除 code 和 userId，避免下一个用户使用上一个用户的 code
+    localStorage.remove('code')
+    localStorage.remove('userId')
+    console.log('页面关闭，已清除 code 和 userId')
+  } else {
+    // 页面刷新（persisted === true），保留 code
+    console.log('页面刷新，保留 code')
+  }
+}
+
+// 处理页面卸载事件（作为备用方案，某些浏览器可能不支持 pagehide）
 function handleBeforeUnload(_event: BeforeUnloadEvent) {
-  localStorage.remove('code')
-  localStorage.remove('trialCode')
+  // 注意：beforeunload 无法区分刷新和关闭
+  // 主要依赖 pagehide 事件来处理
+  // 这里不做任何操作，避免误清除刷新时的 code
 }
 
+// 在应用挂载前设置事件监听器
+// 优先使用 pagehide 事件（可以区分刷新和关闭）
+// 在支持的浏览器中，这是最可靠的方法
+window.addEventListener('pagehide', handlePageHide)
+
+// 监听 beforeunload 作为备用（某些旧浏览器可能不支持 pagehide）
+window.addEventListener('beforeunload', handleBeforeUnload)
+
 app.mount('#app')
diff --git a/src/router/cartoon.ts b/src/router/cartoon.ts
new file mode 100644
index 0000000..380aa5c
--- /dev/null
+++ b/src/router/cartoon.ts
@@ -0,0 +1,60 @@
+// https://router.vuejs.org/zh/
+import 'nprogress/nprogress.css'
+
+import cartoon from '@/views/cartoon/index.vue'
+import previewOrder from '@/views/cartoon/previewOrder.vue'
+import photoAlbum from '@/views/cartoon/photoAlbum.vue'
+import myOrder from '@/views/cartoon/myOrder.vue'
+import orderDetail from '@/views/cartoon/orderDetail.vue'
+// 定义路由，每个路由都需要映射到一个组件
+export const routes = [
+  {
+    path: '/cartoon',
+    name: 'cartoon',
+    component: cartoon,
+    meta: {
+      needGuard: true,
+      title: '卡通手办',
+    },
+  },
+  {
+    path: '/cartoon/previewOrder',
+    name: 'previewOrder',
+    component: previewOrder,
+    meta: {
+      needGuard: true,
+      title: '预览效果图',
+    },
+  },
+  {
+    path: '/cartoon/photoAlbum',
+    name: 'photoAlbum',
+    component: photoAlbum,
+    meta: {
+      needGuard: true,
+      title: '设计记录',
+    },
+  },
+  {
+    path: '/cartoon/myOrder',
+    name: 'myOrder',
+    component: myOrder,
+    meta: {
+      needGuard: true,
+      title: '我的订单',
+    },
+  },
+  {
+    path: '/cartoon/orderDetail',
+    name: 'orderDetail',
+    component: orderDetail,
+    meta: {
+      needGuard: true,
+      title: '订单详情',
+    },
+  }
+]
+
+export function mergeRoutes(allRoutes: any[]) {
+  allRoutes.push(...routes)
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index a2f80d3..a97153d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,8 +3,10 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 // 导入路由组件
-import * as badgeRouter from './badge'
-import badge from '@/views/badge/index.vue'
+// import * as badgeRouter from './badge'
+import * as cartoonRouter from './cartoon'
+// import badge from '@/views/badge/index.vue'
+import cartoon from '@/views/cartoon/index.vue'
 import {useStore} from '@/stores'
 import { config } from '@/config/config'
 import { localStorage } from '@/utils/local-storage'
@@ -15,8 +17,8 @@ NProgress.configure({ showSpinner: true, parent: '#app' })
 const routes = [
   {
     path: '/',
-    name: 'badge',
-    component: badge,
+    name: 'cartoon',
+    component: cartoon,
     meta: {
       needGuard: true,
       title: '首页',
@@ -24,7 +26,8 @@ const routes = [
   },
 ]
 
-badgeRouter.mergeRoutes(routes)
+// badgeRouter.mergeRoutes(routes)
+cartoonRouter.mergeRoutes(routes)
 // 创建路由实例并传递 `routes` 配置
 const router = createRouter({
   history: createWebHashHistory(process.env.VUE_APP_PUBLIC_PATH),
@@ -35,18 +38,25 @@ router.beforeEach((_to, _from, next) => {
   // const tokenStore = useTokenStore()
   const store = useStore()
   const code = _to.query.code
-  if (code) {
-    localStorage.set('code', code as string);
+  
+  // 如果 URL 中有 code 参数，保存到 localStorage（用于刷新时保留）
+  if (code && typeof code === 'string') {
+    localStorage.set('code', code)
+    console.log('保存 code 到 localStorage:', code)
   }
-  const trialCode = _to.query.trialCode
-  if (trialCode) {
-    localStorage.set('trialCode', trialCode as string);
+  
+  // 如果 URL 中没有 code，尝试从 localStorage 读取（用于刷新时恢复）
+  const savedCode = localStorage.get('code')
+  if (!code && savedCode) {
+    console.log('从 localStorage 恢复 code:', savedCode)
   }
-  console.log('code===>', code);
-  if (code || trialCode) {
+  
+  console.log('当前 code===>', code || savedCode)
+  
+  if (code) {
     let url = store.redirectUrl()
 
-    if (_to.path !== '/badge') {
+    if (_to.path !== '/cartoon') {
       if (url) {
         store.setRedirect('')
         next(url)
diff --git a/src/utils/request.ts b/src/utils/request.ts
index f206914..f6c6560 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -50,18 +50,18 @@ const errorHandler = (error: RequestError): Promise<any> => {
 
 // 请求拦截器
 const requestHandler = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig> => {
-  // const savedToken = localStorage.get(STORAGE_TOKEN_KEY)
-  // 如果 token 存在
+  // 从 localStorage 读取 code（刷新时也能获取到）
   const code = localStorage.get('code')
-  const trialCode = localStorage.get('trialCode')
   const userId = localStorage.get('userId')
+  
   // 让每个请求携带自定义 token, 请根据实际情况修改
-  if (code)
+  if (code) {
     config.headers['Authorization'] = code
-  if (trialCode)
-    config.headers['Authorization'] = trialCode
-  if (userId)
+  }
+  if (userId) {
     config.headers['Userid'] = userId
+  }
+  
   return config
 }
 
diff --git a/src/views/badge/index.vue b/src/views/badge/index.vue
index a6a325b..1753c99 100644
--- a/src/views/badge/index.vue
+++ b/src/views/badge/index.vue
@@ -710,7 +710,7 @@ const getPid = async () => {
     try {
       const uploadTasks = [
         sendToOss(imgurl.value, res.url),
-        sendToOss(imgurl.value, res.oss_url)
+        // sendToOss(imgurl.value, res.oss_url)
       ]
       await Promise.all(uploadTasks)
       if (typeId.value == 4 && prodId.value == 19 && referPicture.value.length > 0) {
@@ -898,9 +898,10 @@ function Encrypt(word: string): string {
    return encrypted.ciphertext.toString();
 }
 function handleBeforeUnload(_event: BeforeUnloadEvent) {
-  localStorage.remove('code')
-  localStorage.remove('trialCode')
-  localStorage.remove('userId')
+  // code 的清除已在 main.ts 中统一处理，这里只清除 userId（如果需要）
+  // 注意：刷新时不应该清除 userId，只有关闭时才清除
+  // 由于无法精确区分刷新和关闭，这里保留清除逻辑，但主要依赖 main.ts 的处理
+  // localStorage.remove('userId')
 }
 onMounted(() => {
   getSundryList()
diff --git a/src/views/badge/preview.vue b/src/views/badge/preview.vue
index c563a64..aa17155 100644
--- a/src/views/badge/preview.vue
+++ b/src/views/badge/preview.vue
@@ -1216,12 +1216,11 @@ const getOrderStat = () => {
 }
 
 function handleBeforeUnload(_event: BeforeUnloadEvent) {
-  localStorage.remove('code')
-  localStorage.remove('trialCode')
-  localStorage.remove('userId')
+  // code 的清除已在 main.ts 中统一处理，这里只处理页面特定的清理逻辑
   // 清除轮询和进度条计时器
   clearInterval(timer.value)
   clearInterval(progressTimer.value)
+  // trialCode 和 userId 的清除由 main.ts 统一处理
 }
 
 const pid = ref(0)
diff --git a/src/views/cartoon/index.vue b/src/views/cartoon/index.vue
new file mode 100644
index 0000000..131a2f1
--- /dev/null
+++ b/src/views/cartoon/index.vue
@@ -0,0 +1,1165 @@
+<template>
+  <div class="photo-upload-page">
+    <div class="badge-size">
+      <div class="order-type">
+        <div class="order-type-item" v-if="orderStat.order_no">
+          <div class="order-type-item-title">
+            {{ toValueWithout("订单编号") }}
+          </div>
+          <div class="order-type-item-title">
+            {{ orderStat.order_no }}
+          </div>
+        </div>
+        <div class="order-type-item" v-if="prodId">
+          <div class="order-type-item-title">
+            {{ toValueWithout("产品类型") }}
+          </div>
+          <div class="order-type-item-title" v-if="productTypeConfig">
+            {{ toValueWithout(productTypeConfig.name) }}
+          </div>
+        </div>
+      </div>
+      <div class="size-title">
+        {{ toValueWithout("剩余兑换数量") }}
+      </div>
+      <div class="size-options">
+        <div class="size-item" v-for="item in sizeList" :key="item.id">
+          <div class="size-text">
+            {{ item.size }}
+          </div>
+          <div class="size-count">
+            （{{ toValueWithout("剩余兑换") }}：{{ item.remaining }}）
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="badge-info">
+      <div class="badge-item" @click="goToRecord">
+        <div class="badge-title">
+          {{ toValueWithout("设计图集") }}
+        </div>
+        <div class="badge-count">
+          {{ orderStat.create_count || 0 }}{{ toValueWithout("张") }}
+        </div>
+      </div>
+      <div class="badge-item" @click="goToMyOrder">
+        <div class="badge-title">
+          {{ toValueWithout("我的订单") }}
+        </div>
+        <div class="badge-count">
+          {{ orderStat.order_count || 0 }}{{ toValueWithout("笔") }}
+        </div>
+      </div>
+    </div>
+    <div :style="`height: ${config.styles.spacing.itemGap};background: ${config.styles.colors.backgroundSecondary};`"></div>
+    <div class="step-container">
+      <div class="step-item active">
+        <div class="step-num">
+          1
+        </div>
+        <div class="step-content">
+          <div class="step-title">
+            {{ toValueWithout("上传正面照片") }}
+          </div>
+          <div class="step-desc">
+            {{ toValueWithout("1张五官清晰的正面照片") }}
+          </div>
+        </div>
+      </div>
+      <div class="step-item">
+        <div class="step-num">
+          2
+        </div>
+        <div class="step-content">
+          <div class="step-title">
+            {{ toValueWithout("确认下单") }}
+          </div>
+          <div class="step-desc">
+            {{ toValueWithout("选择一个你喜欢的设计") }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tag-change-box">
+      <div class="tag-change-item">
+        <div 
+          class="tag-change-item-title" 
+          :class="{ tagActive: isPersonSubject }" 
+          @click="prodChange(config.subjectTypes.person.id)">
+          {{ toValueWithout(config.subjectTypes.person.name) }}
+        </div>
+        <div 
+          class="tag-change-item-title" 
+          :class="{ tagActive: isPetSubject }" 
+          @click="prodChange(config.subjectTypes.pet.id)">
+          {{ toValueWithout(config.subjectTypes.pet.name) }}
+        </div>
+      </div>
+      <div :style="`font-size: 12px; color: ${config.styles.colors.textTertiary}; text-align: center;`">
+        {{ toValueWithout("不同主体的照片检测标准不同") }}
+      </div>
+    </div>
+    <div class="step-line" v-if="shouldShowPhotoExample">
+      <div class="step-line-item">
+        <div class="step-line-item-title">
+          <span style="display: flex; align-items: center;justify-content: center;">
+            <span :style="`height: 1px; background: ${config.styles.colors.border};width: 50px;`"></span>
+            <span :style="`margin: 0 8px; color: ${config.styles.colors.textTertiary};`">{{ toValueWithout("照片示例") }}</span>
+            <span :style="`height: 1px; background: ${config.styles.colors.border};width: 50px;`"></span>
+          </span>
+        </div>
+        <div class="step-line-item-desc">
+          <div class="step-line-item-desc-item">
+            <img :src="example1" :style="`width: 20vw;height: 20vw;border-radius: 8px;`" alt="">
+          </div>
+          <div class="step-line-item-desc-item">
+            <img :src="example2" :style="`width: 20vw;height: 20vw;border-radius: 8px;`" alt="">
+          </div>
+          <div class="step-line-item-desc-item">
+            <img :src="example3" :style="`width: 20vw;height: 20vw;border-radius: 8px;`" alt="">
+          </div>
+          <div class="step-line-item-desc-item">
+            <img :src="example4" :style="`width: 20vw;height: 20vw;border-radius: 8px;`" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="photo-upload-body">
+      <div v-if="!picture" class="photo-upload-box">
+        <div class="photo-upload-header" @click="imgShow = true">
+          <van-icon name="question-o" size="16px" class="photo-upload-guide-icon" />
+          <span class="photo-upload-guide-text">{{ toValueWithout("图片上传指南") }}</span>
+        </div>
+        <div class="photo-upload-area">
+          <div class="photo-upload-plus">
+            +
+          </div>
+          <div class="photo-upload-text">
+            {{ toValueWithout("点击上传照片") }}
+          </div>
+          <div class="photo-upload-tip">
+            *{{ toValueWithout("上传照片时建议勾选[原图]") }}
+          </div>
+        </div>
+        <div class="photo-upload-footer">
+          {{ toValueWithout("请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务") }}
+        </div>
+      </div>
+      <img class="photo-upload-img" v-if="picture" :src="picture" alt="" srcset="">
+      <div class="photo-upload-box-1">
+        <h5-cropper :option="option" @getbase64Data="getbase64Data" @imgorigoinf="imgorigoinf"></h5-cropper>
+      </div>
+    </div>
+    <div v-if="shouldShowKindList">
+      <div :style="`font-size: 16px; color: ${config.styles.colors.textPrimary}; font-weight: bold; margin-top: ${config.styles.spacing.sectionMargin};padding: 0 ${config.styles.spacing.pagePadding};`">
+        {{ toValueWithout("风格类型") }}
+      </div>
+      <div class="kind-box">
+        <div class="kind-box-item" v-for="item in kindList" :key="item.id" :class="{ styleActive: kindId == item.id }">
+          <div class="kind-item-title" @click="kindChange(item.id)">
+            {{ toValueWithout(item.name) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="shouldShowMultiView">
+      <div :style="`font-size: 16px; color: ${config.styles.colors.textPrimary}; font-weight: bold; margin-top: ${config.styles.spacing.sectionMargin};padding: 0 ${config.styles.spacing.pagePadding};`">
+        {{ toValueWithout("多视角参考图") }}
+      </div>
+      <div :style="`font-size: 12px; color: ${config.styles.colors.textTertiary}; margin-top: ${config.styles.spacing.itemGap};padding: 0 ${config.styles.spacing.pagePadding};`">
+        {{ toValueWithout("AI建模具有随机性，上传参考图有助于更好的还原主体特征") }}
+      </div>
+      <div class="photo-upload-box-refer">
+        <van-uploader 
+          v-model="referPicture" 
+          multiple 
+          :max-count="config.upload.maxReferCount" 
+          :max-size="config.upload.maxSize" 
+          @oversize="onOversize" 
+          :deletable="true" 
+          :show-preview="true" 
+          :before-read="beforeRead" 
+          upload-icon="plus" />
+      </div>
+    </div>
+    <div v-if="shouldShowPhotoTip">
+      <div 
+        :style="`font-size: 12px; color: red; margin-top: ${config.styles.spacing.sectionMargin}; text-align: center;`" 
+        v-if="isPersonSubject">
+        {{ toValueWithout("温馨提示：请上传只有") }}{{ personPhotoCount }}{{ toValueWithout("人的照片") }}
+      </div>
+      <div 
+        :style="`font-size: 12px; color: red; margin-top: ${config.styles.spacing.sectionMargin}; text-align: center;`" 
+        v-if="isPetSubject">
+        {{ toValueWithout("温馨提示：请上传只有") }}{{ config.messages.petPhotoTip.count }}{{ toValueWithout("只宠物的照片") }}
+      </div>
+    </div>
+    <div :style="`height: 120px;`"></div>
+    <div class="design-action-bar">
+      <div class="design-left">
+        <img class="design-leaf-icon" width="18" height="18" :src="leafIcon" alt="">
+        <span class="design-remaining">{{ toValueWithout("剩余") }}{{ orderStat.remain_count || 0 }}{{ toValueWithout("次") }}</span>
+      </div>
+      <button class="design-btn" @click="goToPreview">
+        <span>{{ toValueWithout("开始设计") }}</span>
+        <img class="design-arrow" :src="arrowIcon" alt="">
+      </button>
+    </div>
+  </div>
+
+  <van-action-sheet v-model:show="imgShow" :title="toValueWithout('图片上传指南')" :close-on-click-overlay="true" closeable>
+    <div :style="`padding: 0 ${config.styles.spacing.pagePadding} 24px ${config.styles.spacing.pagePadding};`">
+      <div style="text-align: center;">
+        <img :src="sundryList[0]?.path" alt="照片上传指南" :style="`width: 90vw; border-radius: 16px; margin-bottom: ${config.styles.spacing.sectionMargin};`">
+      </div>
+      <div :style="`display: flex; justify-content: space-between; margin-bottom: ${config.styles.spacing.sectionMargin};`">
+        <div style="flex: 1; text-align: center;" v-for="(item, index) in sundryList.slice(1, 4)" :key="index">
+          <img :src="item.path" :alt="item.name" :style="`width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;`">
+          <div :style="`font-size: 13px; color: ${config.styles.colors.textTertiary}; margin-top: 4px;`">
+            {{ toValueWithout(item.name) }}
+          </div>
+        </div>
+      </div>
+      <div :style="`display: flex; justify-content: space-around; margin-bottom: 24px;`">
+        <div style="flex: 1; text-align: center;" v-for="(item, index) in sundryList.slice(4, 6)" :key="index">
+          <img :src="item.path" :alt="item.name" :style="`width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;`">
+          <div :style="`font-size: 13px; color: ${config.styles.colors.textTertiary}; margin-top: 4px;`">
+            {{ toValueWithout(item.name) }}
+          </div>
+        </div>
+      </div>
+      <div :style="`margin-top: 24px; text-align: center;`">
+        <button 
+          :style="`width: 90%; height: 44px; background: ${config.styles.colors.primaryGradient}; border: none; border-radius: 22px; color: ${config.styles.colors.textPrimary}; font-size: 18px; font-weight: bold; cursor: pointer;`" 
+          @click="imgShow = false">
+          {{ toValueWithout("我已了解") }}
+        </button>
+      </div>
+    </div>
+  </van-action-sheet>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import H5Cropper from 'vue-cropper-h5'
+import "vue-cropper-h5/dist/style.css"
+import { showLoadingToast, showToast, closeToast, showFailToast, showSuccessToast } from 'vant';
+import type { UploaderFileListItem } from 'vant'
+import * as badgeApi from '@/api/badge'
+import { useTranslation } from "i18next-vue";
+import * as i18n from '@/lang/utils'
+import { toValueWithout } from '@/lang/utils'
+import { cartoonConfig } from '@/config/cartoon'
+import leafIcon from '@/assets/badge/leaf.png'
+import arrowIcon from '@/assets/badge/arrow.png'
+import example1 from '@/assets/badge/1.png'
+import example2 from '@/assets/badge/2.png'
+import example3 from '@/assets/badge/3.png'
+import example4 from '@/assets/badge/4.png'
+
+// 初始化翻译功能
+const { t } = useTranslation();
+i18n.set(t);
+
+// 使用配置
+const config = cartoonConfig
+
+const imgShow = ref(false)
+const referPicture = ref<UploaderFileListItem[]>([])
+const router = useRouter()
+
+// 初始化裁剪器配置
+const option = ref({
+  ...config.upload.cropOptions
+})
+
+// 判断是否是APP
+const openApp = () => {
+  const ua = navigator.userAgent;
+  const isIOS = /iPhone|iPad|iPod/i.test(ua);
+  const isAndroid = /Android/i.test(ua);
+
+  if (isIOS) {
+    option.value.ceilbutton = true
+  } else if (isAndroid) {
+    option.value.ceilbutton = false
+  } else {
+    option.value.ceilbutton = true
+  }
+}
+
+const imgurl = ref('')
+
+// 跳转设计图集
+function goToRecord() {
+  router.push(config.routes.record)
+}
+
+// 跳转我的订单
+function goToMyOrder() {
+  router.push(config.routes.myOrder)
+}
+
+// 获取兑换数量
+const sizeList = ref([])
+const getSizeList = () => {
+  badgeApi.getOrderPrice({}).then((res: any) => {
+    sizeList.value = res
+  })
+}
+
+// 获取首页显示的数量和类型
+const orderStat = ref({})
+const prodId = ref(config.subjectTypes.person.id)
+const prop = ref('')
+const typeId = ref(0)
+
+const getOrderStat = () => {
+  badgeApi.getOrderStat({}).then((res: any) => {
+    orderStat.value = res
+    prodId.value = getDefaultProdId(res)
+    if (res.type_id === 4) {
+      getKindList()
+    }
+    prop.value = res.prop
+    typeId.value = res.type_id
+    getSundryList()
+  })
+}
+
+// 根据配置获取默认产品ID
+const getDefaultProdId = (res: any): number => {
+  const mapping = config.productIdMapping[res.type_id] || config.productIdMapping.default
+  // 判断当前产品ID是否属于人物主体
+  const isPerson = config.subjectTypes.person.prodIds.includes(res.prod_id)
+  return isPerson ? mapping.person : mapping.pet
+}
+
+// 计算属性：当前产品类型配置
+const productTypeConfig = computed(() => {
+  return config.productTypes[typeId.value]
+})
+
+// 计算属性：是否是人物主体
+const isPersonSubject = computed(() => {
+  return config.subjectTypes.person.prodIds.includes(prodId.value)
+})
+
+// 计算属性：是否是宠物主体
+const isPetSubject = computed(() => {
+  return config.subjectTypes.pet.prodIds.includes(prodId.value)
+})
+
+// 计算属性：是否显示照片示例
+const shouldShowPhotoExample = computed(() => {
+  return config.productLimits.photoExampleTypes.includes(prop.value)
+})
+
+// 计算属性：是否显示风格类型
+const shouldShowKindList = computed(() => {
+  return typeId.value === 4 && kindList.value.length > 0
+})
+
+// 计算属性：是否显示多视角参考图
+const shouldShowMultiView = computed(() => {
+  return typeId.value === 4 && config.productLimits.multiViewSupported.includes(prodId.value)
+})
+
+// 计算属性：是否显示照片提示
+const shouldShowPhotoTip = computed(() => {
+  return typeId.value !== 4
+})
+
+// 计算属性：人物照片数量提示
+const personPhotoCount = computed(() => {
+  return prop.value === '3D真人肖像' 
+    ? config.messages.personPhotoTip.single 
+    : config.messages.personPhotoTip.multiple
+})
+
+const kindList = ref([])
+const getKindList = () => {
+  badgeApi.getKindList({
+    support_subject: getSupportSubject(),
+    type_id: 4
+  }).then((res: any) => {
+    kindList.value = res.list
+    kindId.value = res.list && res.list[0]?.id
+  })
+}
+
+const getSupportSubject = (): number => {
+  return isPetSubject.value 
+    ? config.subjectTypes.pet.supportSubject 
+    : config.subjectTypes.person.supportSubject
+}
+
+// 产品切换
+const prodChange = (subjectId: number) => {
+  // 检查是否被禁用
+  const disabledRule = config.businessRules.disabled.find(
+    rule => rule.typeId === typeId.value && rule.subjectId === subjectId
+  )
+  if (disabledRule) {
+    showToast(toValueWithout(disabledRule.message))
+    return
+  }
+  
+  // 检查订单限制
+  const restriction = config.businessRules.orderRestrictions.find(
+    rule => rule.typeId === typeId.value && rule.prodId === prodId.value && rule.targetSubjectId === subjectId
+  )
+  if (restriction) {
+    showToast(toValueWithout(restriction.message))
+    return
+  }
+  
+  // 根据配置映射产品ID
+  const mapping = config.productIdMapping[typeId.value] || config.productIdMapping.default
+  if (typeId.value === 6) {
+    prodId.value = subjectId === config.subjectTypes.pet.id ? mapping.pet : mapping.person
+  } else if (typeId.value === 4) {
+    prodId.value = subjectId === config.subjectTypes.pet.id ? mapping.pet : mapping.person
+  } else {
+    prodId.value = subjectId === config.subjectTypes.person.id ? mapping.person : mapping.pet
+  }
+  
+  picture.value = null
+  kindId.value = 0
+}
+
+const kindId = ref(0)
+const kindChange = (id: number) => {
+  kindId.value = id
+}
+
+const isLoading = ref(false)
+
+// 生成图片
+function goToPreview() {
+  if (isLoading.value) {
+    return
+  }
+  if (!imgurl.value) {
+    showToast(toValueWithout('请先上传照片'))
+    return
+  }
+  if (orderStat.value.remain_count <= 0) {
+    showToast(toValueWithout('剩余次数不足'))
+    return
+  }
+  isLoading.value = true
+  getPid()
+}
+
+const picture = ref(null)
+
+const imageWidth = ref(0);
+const imageHeight = ref(0);
+
+function getbase64Data(data: string) {
+  picture.value = data;
+
+  const img = new Image();
+  img.src = data;
+  img.onload = () => {
+    imageWidth.value = img.naturalWidth;
+    imageHeight.value = img.naturalHeight;
+    if (imageWidth.value < config.upload.minWidth || imageHeight.value < config.upload.minHeight) {
+      showToast(toValueWithout(`请上传尺寸大于${config.upload.minWidth}*${config.upload.minHeight}像素的照片`))
+      imgurl.value = null
+      picture.value = null
+      return false;
+    }
+    const blob = base64ToBlob(data);
+    if (blob.size > config.upload.maxSize) {
+      showToast(toValueWithout(`照片大小不能超过${config.upload.maxSize / 1024 / 1024}M`))
+      imgurl.value = null
+      picture.value = null
+      return false;
+    }
+    imgurl.value = blob;
+    if (config.productLimits.faceCheckRequired.includes(prodId.value)) {
+      getUploadUrl()
+    }
+  }
+}
+
+function base64ToBlob(base64: string) {
+  const arr = base64.split(',');
+  const mime = arr[0].match(/:(.*?);/)?.[1] || 'image/jpeg';
+  const bstr = atob(arr[1]);
+  const n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  for (let i = 0; i < n; i++) {
+    u8arr[i] = bstr.charCodeAt(i);
+  }
+  return new Blob([u8arr], {
+    type: mime
+  });
+}
+
+function imgorigoinf(data: File) {
+  const img = new Image();
+  const objectUrl = URL.createObjectURL(data);
+  img.src = objectUrl;
+  img.onload = () => {
+    imageWidth.value = img.naturalWidth;
+    imageHeight.value = img.naturalHeight;
+    if (imageWidth.value < config.upload.minWidth || imageHeight.value < config.upload.minHeight) {
+      showToast(toValueWithout(`请上传尺寸大于${config.upload.minWidth}*${config.upload.minHeight}像素的照片`))
+      setTimeout(() => {
+        const btn = document.querySelector('.btn')
+        if (btn) {
+          (btn as HTMLElement).click()
+        }
+      }, 1500);
+      imgurl.value = null
+      picture.value = null
+      return
+    }
+    URL.revokeObjectURL(objectUrl)
+  }
+  img.onerror = () => {
+    URL.revokeObjectURL(objectUrl)
+  }
+}
+
+const getUploadUrl = () => {
+  badgeApi.getUploadUrl({}).then((res: any) => {
+    if (res) {
+      sendFaceToOss(imgurl.value, res.upload_url, res.path)
+    }
+  })
+}
+
+// 人脸识别上传
+const sendFaceToOss = async (src: Blob, url: string, path: string) => {
+  try {
+    const response = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'image/jpeg'
+      },
+      body: src
+    })
+    if (!response.ok) {
+      throw new Error('Upload failed')
+    }
+    if (response.status === 200) {
+      badgeApi.faceCheck({
+        path: path,
+        prop: prop.value,
+        prod_id: prodId.value
+      }).then(() => {
+        showSuccessToast({
+          message: toValueWithout('人脸检测成功'),
+          duration: 2000,
+        })
+      }).catch((err: any) => {
+        showFailToast({
+          message: err.message || toValueWithout('人脸检测失败'),
+          icon: 'none',
+          duration: 2000,
+        })
+        imgurl.value = null
+        picture.value = null
+      }).finally(() => {
+        setTimeout(() => {
+          closeToast()
+        }, 2000);
+      })
+    }
+  } catch (err: any) {
+    closeToast()
+    showFailToast({
+      message: err.message || toValueWithout('上传失败'),
+      icon: 'none',
+      duration: 2000,
+    })
+  }
+}
+
+const onOversize = (file: any) => {
+  if (file.size > config.upload.maxSize) {
+    showToast(toValueWithout(`照片大小不能超过${config.upload.maxSize / 1024 / 1024}M`))
+    return false
+  }
+  return true
+}
+
+const beforeRead = (file: any) => {
+  const toPreviewAndCheck = (input: any): Promise<UploaderFileListItem> => {
+    return new Promise((resolve, reject) => {
+      const raw: File = input.file || input
+      if (raw.size > config.upload.maxSize) {
+        showToast(toValueWithout(`照片大小不能超过${config.upload.maxSize / 1024 / 1024}M`))
+        reject(false)
+        return
+      }
+      const objectUrl = URL.createObjectURL(raw)
+      const img = new Image()
+      img.src = objectUrl
+      img.onload = () => {
+        const width = img.naturalWidth
+        const height = img.naturalHeight
+        imageWidth.value = width
+        imageHeight.value = height
+        URL.revokeObjectURL(objectUrl)
+        if (width < config.upload.minWidth || height < config.upload.minHeight) {
+          showToast(toValueWithout(`请上传尺寸大于${config.upload.minWidth}×${config.upload.minHeight}像素的照片`))
+          reject(false)
+          return
+        }
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          const url = e.target?.result as string
+          const out: any = input
+          out.url = url
+          resolve(out)
+        }
+        reader.onerror = () => {
+          showToast(toValueWithout('图片读取失败'))
+          reject(false)
+        }
+        reader.readAsDataURL(raw)
+      }
+      img.onerror = () => {
+        showToast(toValueWithout('图片加载失败'))
+        URL.revokeObjectURL(objectUrl)
+        reject(false)
+      }
+    })
+  }
+
+  if (Array.isArray(file)) {
+    return Promise.allSettled(file.map(toPreviewAndCheck)).then((results) => {
+      const passed = results
+        .filter(r => r.status === 'fulfilled')
+        .map((r: any) => r.value)
+      if (passed.length === 0) return Promise.reject(false)
+      return passed
+    })
+  }
+  return toPreviewAndCheck(file)
+}
+
+// 获取Pid
+const pid = ref('')
+const getPid = async () => {
+  showLoadingToast({
+    message: toValueWithout('上传中...'),
+    forbidClick: true,
+    loadingType: 'spinner',
+    duration: 0,
+  })
+  const params = {
+    prod_id: prodId.value,
+    extend_value: -1,
+    type_id: typeId.value,
+    subject_id: getSupportSubject()
+  }
+  try {
+    const res = await badgeApi.getPid(params) as any
+    isLoading.value = false
+    pid.value = res.pid
+    try {
+      const uploadTasks = [
+        sendToOss(imgurl.value, res.url),
+      ]
+      await Promise.all(uploadTasks)
+      if (shouldShowMultiView.value && referPicture.value.length > 0) {
+        const multiUrlTasks = referPicture.value.map((item) => {
+          return badgeApi.getMultiUrl({
+            pid: pid.value,
+          }).then((res: any) => {
+            return sendToOss(item.file, res.multi_url)
+          })
+        })
+        await Promise.all(multiUrlTasks)
+      }
+    } catch (err) {
+      closeToast()
+      console.error('上传失败:', err)
+      showFailToast({
+        message: toValueWithout('上传失败'),
+        duration: 2000,
+      })
+      isLoading.value = false
+      return
+    }
+  } catch (err: any) {
+    isLoading.value = false
+    closeToast()
+    showToast({
+      message: err.message,
+      duration: 2000,
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 上传到OSS
+const pendingUploads = ref(0)
+const isAnotherAPICalled = ref(false)
+const sendToOss = async (src: string | Blob | File, url: string) => {
+  try {
+    pendingUploads.value++
+    const response = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'image/jpeg'
+      },
+      body: src
+    })
+
+    if (!response.ok) {
+      throw new Error('Upload failed')
+    }
+    
+    if (--pendingUploads.value === 0 && !isAnotherAPICalled.value) {
+      isAnotherAPICalled.value = true
+      createLog()
+      // const params = {
+      //   pid: pid.value,
+      //   group: 1,
+      //   prod_id: prodId.value,
+      //   extend_value: -1,
+      //   type_id: typeId.value,
+      //   kind_id: kindId.value
+      // }
+      // badgeApi.putModeling(params).then(() => {
+      //   createLog()
+      // }).catch((err) => {
+      //   console.log('putModeling', err)
+      // }).finally(() => {
+      //   closeToast()
+      // })
+    }
+
+  } catch (err: any) {
+    closeToast()
+    pendingUploads.value--
+    showFailToast({
+      message: err.message,
+      duration: 2000,
+    })
+  }
+}
+
+// 创建日志
+const createLog = () => {
+  const params = {
+    pid: pid.value,
+    group: 1,
+    prod_id: prodId.value,
+    type_id: typeId.value,
+    kind_id: kindId.value
+  }
+  badgeApi.createLog(params).then(() => {
+    closeToast()
+    showSuccessToast({
+      message: toValueWithout('照片上传成功'),
+      duration: 2000,
+    })
+    setTimeout(() => {
+      closeToast()
+      router.push({
+        path: config.routes.preview,
+        query: {
+          pid: pid.value,
+          group: 1,
+          prod_id: prodId.value,
+          type_id: typeId.value,
+          kind_id: kindId.value
+        },
+      })
+    }, 1000);
+  }).catch((err: any) => {
+    showFailToast({
+      message: err.message,
+      duration: 2000,
+    })
+  }).finally(() => {
+    closeToast()
+  })
+}
+
+// 获取首页图片上传指南图片
+const sundryList = ref<any[]>([])
+const getSundryList = () => {
+  const group = isPersonSubject.value 
+    ? config.subjectTypes.person.group 
+    : config.subjectTypes.pet.group
+  
+  badgeApi.getSundryList({
+    page: 1,
+    size: 6,
+    group: group,
+  }).then((res: any) => {
+    const data = res || []
+    sundryList.value = data.list
+  }).catch((err: any) => {
+    showToast({
+      message: err.message,
+      duration: 2000,
+    })
+  })
+}
+
+onMounted(() => {
+  watch(
+    () => prodId.value,
+    () => {
+      getSundryList()
+    }
+  )
+  getSundryList()
+  openApp()
+  getOrderStat()
+  getSizeList()
+})
+</script>
+
+<style lang="scss" scoped>
+.photo-upload-page {
+  height: auto;
+  overflow-y: scroll!important;
+}
+.badge-size {
+  padding: 16px;
+  .size-title {
+    font-size: 14px;
+    color: #000;
+  }
+  .size-options {
+    .size-item {
+      margin-top: 8px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .size-text {
+        font-size: 14px;
+        color: #333;
+        text-align: center;
+        padding: 4px 10px;
+        background: #F0F2F5;
+        border-radius: 4px;
+        margin-right: 5px;
+        display: inline-block;
+      }
+      .size-count {
+        font-size: 12px;
+        color: #999;
+        display: inline-block;
+      }
+    }
+  }
+}
+.badge-info {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px 16px 16px;
+  .badge-item:first-child {
+    background-image: url('@/assets/badge/sheji.png');
+    background-size: cover;
+    background-position: center;
+    margin-right: 5px;
+  }
+  .badge-item:last-child {
+    background-image: url('@/assets/badge/order.png');
+    background-size: cover;
+    background-position: center;
+    margin-left: 5px;
+  }
+  .badge-item {
+    padding: 18px 12px;
+    flex: 1;
+    text-align: left;
+    cursor: pointer;
+    height: 88px;
+    .badge-title {
+      font-size: 16px;
+      color: #000;
+      font-weight: bold;
+    }
+    .badge-count {
+      font-size: 15px;
+      color: #333;
+      font-weight: bold;
+      margin-top: 8px;
+    }
+  }
+}
+.step-container {
+  display: flex;
+  align-items: flex-start;
+  padding: 16px 0 16px 16px;
+}
+.step-item {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.step-item.active {
+  flex: 2;
+  margin-left: 50px;
+}
+.step-num {
+  font-size: 48px;
+  line-height: 1;
+  position: relative;
+  margin-right: 8px;
+  text-shadow: 0 2px 8px #e6f7e6;
+  color: #CCCCCC;
+}
+.step-item.active .step-num {
+  color: #fff;
+  text-shadow:
+    1px 1px 0 #000,
+    -1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px -1px 0 #000,
+    0 1px 0 #000,
+    1px 0 0 #000,
+    0 -1px 0 #000,
+    -1px 0 0 #000;
+}
+.step-item.active .step-num::after {
+  content: '';
+  position: absolute;
+  top: 20px;
+  right: 0;
+  width: 15px;
+  height: 15px;
+  background-color: #50cf54;
+  opacity: 0.5;
+  border-radius: 50%;
+}
+.step-content {
+  display: flex;
+  flex-direction: column;
+}
+.step-title {
+  font-size: 16px;
+  color: #808080;
+}
+.step-desc {
+  font-size: 12px;
+  color: #808080;
+  margin-top: 2px;
+}
+
+.photo-upload-body {
+  position: relative;
+  width: 80vw;
+  height: 80vw;
+  margin: 16px auto 0 auto;
+  text-align: center;
+}
+.photo-upload-box {
+  margin: 16px auto 0 auto;
+  width: 80vw;
+  height: 80vw;
+  border-radius: 12px;
+  background: #F0F2F5;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+}
+.photo-upload-box-1 {
+  width: 80vw;
+  height: 70vw;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.photo-upload-img {
+  max-width: 80vw;
+  max-height: 80vw;
+  border-radius: 12px;
+}
+.photo-upload-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 12px 16px 0 12px;
+  font-size: 14px;
+  color: #888;
+  justify-content: flex-end;
+}
+.photo-upload-guide-icon {
+  font-size: 16px;
+  margin-right: 4px;
+}
+.photo-upload-guide-text {
+  font-size: 13px;
+}
+.photo-upload-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+.photo-upload-plus {
+  font-size: 48px;
+  color: #c2c2c2;
+  margin-bottom: 0;
+}
+.photo-upload-text {
+  font-size: 16px;
+  color: #888;
+  margin-bottom: 4px;
+}
+.photo-upload-tip {
+  font-size: 12px;
+  color: #b0b0b0;
+}
+.photo-upload-footer {
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  color: #b0b0b0;
+  padding: 0 12px;
+  line-height: 1.5;
+}
+
+.step-line-item-desc {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 16px 16px 0 16px;
+}
+
+.design-action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background: #fff;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+}
+.design-left {
+  display: flex;
+  align-items: center;
+}
+.design-leaf-icon {
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.design-remaining {
+  color: #222;
+  font-size: 16px;
+  font-weight: 500;
+}
+.design-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  width: 50vw;
+  height: 56px;
+  border-radius: 28px;
+  font-size: 20px;
+  font-weight: bold;
+  background: linear-gradient(90deg, #D1ED8E 0%, #55E668 100%);
+  color: #222;
+  box-shadow: 0 2px 8px rgba(80, 207, 84, 0.10);
+  transition: background 0.2s;
+  position: relative;
+}
+.design-btn .design-arrow {
+  margin-left: 20px;
+  vertical-align: middle;
+  position: absolute;
+  right: 30px;
+  transition: transform 0.2s;
+  width: 18px;
+  height: 12px;
+}
+.order-type-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+  border-radius: 12px;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+.tag-change-box {
+  margin: 0 auto;
+}
+.tag-change-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 10px 0;
+}
+.tag-change-item-title {
+  font-size: 14px;
+  color: #333;
+  background: #E5E5E5;
+  width: 120px;
+  height: 32px;
+  text-align: center;
+  line-height: 32px;
+}
+.tag-change-item-title:first-child {
+  border-top-left-radius: 16px;
+  border-bottom-left-radius: 16px;
+}
+.tag-change-item-title:last-child {
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+.tag-change-item-title.tagActive {
+  background: #50CF54;
+  color: #fff;
+}
+.kind-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  padding: 16px 36px;
+}
+.kind-box-item {
+  margin-right: 10px;
+  padding: 6px 10px;
+  background: #f5f5f5;
+  border-radius: 8px;
+  color: #333;
+}
+.kind-item-title {
+  font-size: 14px;
+}
+.kind-box-item.styleActive {
+  background: #50CF54;
+  color: #fff;
+}
+.photo-upload-box-refer {
+  margin: 16px;
+}
+</style>
+
diff --git a/src/views/cartoon/myOrder.vue b/src/views/cartoon/myOrder.vue
new file mode 100644
index 0000000..c35a519
--- /dev/null
+++ b/src/views/cartoon/myOrder.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="my-order">
+    <div class="header" @click="goBack">
+      <span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> {{ toValueWithout(config.myOrder.messages.title) }}</span>
+    </div>
+    <div class="order-list" v-if="orders.length > 0">
+      <div class="order-item" @click="OrderDetail(item.id)" v-for="item in orders" :key="item.id">
+        <img class="order-img" :src="item.path" alt="order1" />
+        <span class="order-status status-finished">{{ getStatus(item.status) }}</span>
+      </div>
+    </div>
+    <div v-else class="record-image-item-null">
+      <img :src="nullDataImage" :alt="toValueWithout(config.myOrder.messages.noData)">
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import * as badgeApi from '@/api/badge'
+import { onMounted, ref } from 'vue'
+import { toValueWithout } from '@/lang/utils'
+import { cartoonConfig as config } from '@/config/cartoon'
+import nullDataImage from '@/assets/badge/null-data.png'
+
+const router = useRouter()
+const page = ref(config.myOrder.pagination.initialPage)
+const loading = ref(false)
+const finished = ref(false)
+const orders = ref([])
+
+onMounted(() => {
+  getOrder()
+})
+
+function getOrder() {
+  if(loading.value) return
+  loading.value = true
+  badgeApi.getMyOrder({
+    page: page.value,
+    size: config.myOrder.pagination.pageSize,
+    status: config.myOrder.pagination.defaultStatus,
+  }).then(res => {
+    if(page.value === config.myOrder.pagination.initialPage) {
+      orders.value = res.list
+    } else {
+      orders.value.push(...res.list)
+    }
+    if(res.total <= orders.value.length) {
+      finished.value = true
+    } else {
+      page.value++
+    }
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
+function goBack() {
+  router.push(config.routes.home)
+}
+
+function OrderDetail(id: number) {
+  router.push({
+    path: config.routes.orderDetail,
+    query: {
+      id: id,
+    },
+  })
+}
+
+function getStatus(status: number) {
+  const statusText = config.myOrder.statusText[status]
+  if (statusText) {
+    return toValueWithout(statusText)
+  }
+  return ''
+}
+</script>
+
+<style scoped>
+.header {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  font-size: 14px;
+  color: #999;
+  padding: 16px 16px 0 16px;
+}
+
+.back-icon {
+  margin-right: 8px;
+  color: #222;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.order-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: v-bind('config.myOrder.styles.gap + "px"');
+  padding: v-bind('config.myOrder.styles.padding.vertical + "px"') v-bind('config.myOrder.styles.padding.horizontal + "px"');
+}
+
+.order-item {
+  position: relative;
+  width: v-bind('config.myOrder.styles.itemWidth');
+  height: v-bind('config.myOrder.styles.itemHeight');
+  box-shadow: v-bind('config.myOrder.styles.shadow');
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.order-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: v-bind('config.myOrder.styles.borderRadius + "px"');
+}
+
+.order-status {
+  position: absolute;
+  bottom: v-bind('config.myOrder.styles.status.bottom + "px"');
+  right: v-bind('config.myOrder.styles.status.right + "px"');
+  padding: v-bind('config.myOrder.styles.status.padding.vertical + "px"') v-bind('config.myOrder.styles.status.padding.horizontal + "px"');
+  border-radius: v-bind('config.myOrder.styles.status.borderRadius + "px"');
+  font-size: v-bind('config.myOrder.styles.status.fontSize + "px"');
+  color: v-bind('config.myOrder.statusStyles.default.color');
+  background: v-bind('config.myOrder.statusStyles.default.background');
+  opacity: v-bind('config.myOrder.statusStyles.default.opacity');
+  pointer-events: none;
+}
+
+.status-processing {
+  background: v-bind('config.myOrder.statusStyles.processing.background');
+}
+
+.status-finished {
+  background: v-bind('config.myOrder.statusStyles.finished.background');
+}
+
+.record-image-item-null {
+  height: 50vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.record-image-item-null img {
+  width: 80vw;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/cartoon/orderDetail.vue b/src/views/cartoon/orderDetail.vue
new file mode 100644
index 0000000..80edc52
--- /dev/null
+++ b/src/views/cartoon/orderDetail.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="my-order">
+    <div class="header" @click="goBack">
+      <span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> {{ toValueWithout(config.orderDetail.messages.title) }}</span>
+    </div>
+    <div class="order-status">
+      <div class="avatar-wrapper">
+        <div class="avatar-front-box" v-if="order.type_id != config.orderDetail.productTypes.reliefPendant">
+          <img class="avatar-font-img" :src="imageUrl" :alt="order.kind_name" />
+        </div>
+        <div class="avatar-front-box-double" v-if="order.type_id == config.orderDetail.productTypes.reliefPendant">
+          <img class="avatar-font-img" :src="imageUrl" />
+          <img class="avatar-font-img" :src="backImageUrl" />
+        </div>
+      </div>
+    </div>
+    <div class="status-info">
+      <div class="status-title">{{ getStatus(order.status) }}</div>
+      <div class="status-desc">
+        {{ toValueWithout(config.orderDetail.messages.statusDesc) }}
+      </div>
+    </div>
+    <div :style="`padding: 0 ${config.orderDetail.styles.padding.horizontal}px;`">
+      <van-divider />
+    </div>
+    <div class="product-info" v-if="order.use_type == config.orderDetail.orderTypes.shipping">
+      <div class="product-title">{{ toValueWithout(config.orderDetail.messages.shippingInfo) }}</div>
+      <div class="product-details">
+        <div class="product-row">
+          <span class="product-label">{{ toValueWithout(config.orderDetail.messages.contactInfo) }}</span>
+          <span class="product-value">{{order.contact_name}} {{order.contact_mobile}}</span>
+        </div>
+        <div class="product-row">
+          <span class="product-label">{{ toValueWithout(config.orderDetail.messages.shippingAddress) }}</span>
+          <span class="product-value">{{order.province_name}} {{order.city_name}} {{order.county_name}} {{order.address}}</span>
+        </div>
+      </div>
+    </div>
+    <div :style="`padding: 0 ${config.orderDetail.styles.padding.horizontal}px;`" v-if="order.use_type == config.orderDetail.orderTypes.shipping">
+      <van-divider />
+    </div>
+    <div class="product-info">
+      <div class="product-title">{{ toValueWithout(config.orderDetail.messages.productInfo) }}</div>
+      <div class="product-details">
+        <div class="product-row">
+          <span class="product-label">{{ toValueWithout(config.orderDetail.messages.productName) }}</span>
+          <span class="product-value" v-if="order.type_id && config.preview.productNames[order.type_id]">
+            {{ toValueWithout(config.preview.productNames[order.type_id][order.prod_id] || '') }}
+          </span>
+        </div>
+        <div class="product-row">
+          <span class="product-label">{{ toValueWithout(config.orderDetail.messages.size) }}</span>
+          <span class="product-value">{{order.model_size}}</span>
+        </div>
+        <div class="product-row" v-if="shape_name && order.type_id != config.orderDetail.productTypes.reliefPendant">
+          <span class="product-label">{{ toValueWithout(config.orderDetail.messages.shape) }}</span>
+          <span class="product-value">{{ toValueWithout(shape_name) }}</span>
+        </div>
+        <div class="product-row">
+          <span class="product-label">{{ toValueWithout(config.orderDetail.messages.quantity) }}</span>
+          <span class="product-value">{{order.count}}</span>
+        </div>
+      </div>
+    </div>
+    <div :style="`padding: 0 ${config.orderDetail.styles.padding.horizontal}px;`">
+      <van-divider />
+    </div>
+    <div class="product-info">
+      <div class="product-title">{{ toValueWithout(config.orderDetail.messages.orderInfo) }}</div>
+      <div class="product-details">
+        <div class="product-row">
+          <span class="product-label">{{ toValueWithout(config.orderDetail.messages.orderId) }}</span>
+          <span class="product-value">{{order.sw_oid}}</span>
+        </div>
+        <div class="product-row">
+          <span class="product-label">{{ toValueWithout(config.orderDetail.messages.orderTime) }}</span>
+          <span class="product-value">{{order.pay_at}}</span>
+        </div>
+      </div>
+    </div>
+    <div :style="`height: ${config.orderDetail.styles.bottomSpacing}px;`"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter, useRoute } from 'vue-router';
+import * as badgeApi from '@/api/badge';
+import { onMounted, ref } from 'vue';
+import { toValueWithout } from '@/lang/utils';
+import { cartoonConfig as config } from '@/config/cartoon';
+
+const route = useRoute();
+const router = useRouter();
+const order = ref({})
+const id = ref(0)
+
+onMounted(() => {
+  id.value = route.query.id as any
+  getOrderDetail()
+})
+
+const shapeImage = ref('')
+const imageUrl = ref('')
+const backImageUrl = ref('')
+const getStyle = ref('')
+const shape_name = ref('')
+const imageList = ref([])
+
+function getOrderDetail() {
+  badgeApi.getOrderDetail({
+    id: id.value,
+  }).then(res => {
+    order.value = res;
+    imageUrl.value = res.path;
+    backImageUrl.value = res.back_path;
+    shapeImage.value = res.shape_details?.frame_path || '';
+    shape_name.value = res.shape_details?.name || '';
+    imageList.value = [
+      res.path,
+      res.back_path,
+    ];
+  })
+}
+
+const ImageShow = (item: any) => {
+  const scale = config.orderDetail.imageScale
+  const img = new Image()
+  img.src = item.frame_path
+  img.onload = () => {
+    console.log('img', img)
+    const ratioWidth = config.orderDetail.imageSize.width / img.width;
+    const ratioHeight = config.orderDetail.imageSize.height / img.height;
+    const x = item.axisx * ratioWidth * scale;
+    const y = item.axisy * ratioHeight * scale;
+    const path_width = item.width * ratioWidth * scale;
+    const path_height = item.height * ratioHeight * scale;
+    getStyle.value = `left: ${x}px;top: ${y}px;width: ${path_width}px;height: ${path_height}px;transform: rotate3D(1, 1, 0, 0deg)`
+  }
+}
+
+function goBack() {
+  router.back()
+}
+
+function getStatus(status: number) {
+  const statusText = config.myOrder.statusText[status]
+  if (statusText) {
+    return toValueWithout(statusText)
+  }
+  return ''
+}
+</script>
+
+<style scoped>
+.header {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  font-size: 14px;
+  color: #999;
+  padding: 16px 16px 0 16px;
+}
+
+.back-icon {
+  margin-right: 8px;
+  color: #222;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.order-status {
+  margin: 0 auto;
+  width: 100vw;
+  height: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.avatar-wrapper {
+  position: relative;
+  width: v-bind('config.orderDetail.imageSize.width + "px"');
+  height: v-bind('config.orderDetail.imageSize.height + "px"');
+  display: flex;
+  justify-content: center;
+}
+
+.avatar-back-img {
+  position: absolute;
+  width: v-bind('config.orderDetail.imageSize.width + "px"');
+  height: v-bind('config.orderDetail.imageSize.height + "px"');
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.avatar-front-box {
+  position: absolute;
+  z-index: 1;
+}
+
+.avatar-font-img {
+  width: 100%;
+  height: auto;
+  max-height: v-bind('config.orderDetail.imageSize.height + "px"');
+  border-radius: v-bind('config.orderDetail.imageSize.borderRadius + "px"');
+}
+
+.avatar-front-box-double {
+  display: flex;
+  flex-direction: row;
+  gap: v-bind('config.orderDetail.styles.avatar.gap + "px"');
+  overflow-x: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+}
+
+.status-info {
+  display: flex;
+  flex-direction: column;
+  padding: v-bind('config.orderDetail.styles.statusInfo.padding.vertical + "px"') v-bind('config.orderDetail.styles.statusInfo.padding.horizontal + "px"');
+}
+
+.status-title {
+  font-size: v-bind('config.orderDetail.styles.statusInfo.title.fontSize + "px"');
+  font-weight: v-bind('config.orderDetail.styles.statusInfo.title.fontWeight');
+  color: v-bind('config.orderDetail.styles.statusInfo.title.color');
+  margin-bottom: v-bind('config.orderDetail.styles.statusInfo.title.marginBottom + "px"');
+}
+
+.status-desc {
+  font-size: v-bind('config.orderDetail.styles.statusInfo.desc.fontSize + "px"');
+  color: v-bind('config.orderDetail.styles.statusInfo.desc.color');
+}
+
+.product-info {
+  width: 100%;
+  padding: v-bind('config.orderDetail.styles.productInfo.padding.vertical + "px"') v-bind('config.orderDetail.styles.productInfo.padding.horizontal + "px"');
+}
+
+.product-title {
+  font-size: v-bind('config.orderDetail.styles.productInfo.title.fontSize + "px"');
+  font-weight: v-bind('config.orderDetail.styles.productInfo.title.fontWeight');
+  color: v-bind('config.orderDetail.styles.productInfo.title.color');
+  margin-bottom: v-bind('config.orderDetail.styles.productInfo.title.marginBottom + "px"');
+}
+
+.product-details {
+  display: flex;
+  flex-direction: column;
+  gap: v-bind('config.orderDetail.styles.productInfo.details.gap + "px"');
+}
+
+.product-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.product-label {
+  color: v-bind('config.orderDetail.styles.productInfo.label.color');
+  font-size: v-bind('config.orderDetail.styles.productInfo.label.fontSize + "px"');
+}
+
+.product-value {
+  color: v-bind('config.orderDetail.styles.productInfo.value.color');
+  font-size: v-bind('config.orderDetail.styles.productInfo.value.fontSize + "px"');
+}
+</style>
+
diff --git a/src/views/cartoon/photoAlbum.vue b/src/views/cartoon/photoAlbum.vue
new file mode 100644
index 0000000..d2b58c9
--- /dev/null
+++ b/src/views/cartoon/photoAlbum.vue
@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <div class="header" @click="goBack" style="text-align: center;">
+      <span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> {{ toValueWithout(config.photoAlbum.messages.title) }}</span>
+    </div>
+    <div class="record-container">
+      <div class="record-note">{{ toValueWithout(config.photoAlbum.messages.note) }}</div>
+      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          :finished-text="toValueWithout(config.photoAlbum.messages.noMore)"
+          @load="onLoad"
+        >
+          <div class="record-images" v-if="images.length > 0">
+            <div class="record-image-item" v-for="item in images" :key="item.id">
+              <block v-if="item.status == config.photoAlbum.status.success" @click="goPreview(item)">
+                <img :src="item.path" :alt="item.name" class="record-image">
+                <div class="record-image-item-shadow"></div>
+              </block>
+              <div v-else-if="item.status == config.photoAlbum.status.designing || item.reason" class="record-image-item-loading">
+                <div style="font-size: 12px;color: #999;text-align: center;">ID: {{ item.sw_pid }}</div>
+                <div style="width: 70%;font-size: 12px;">{{ item.reason || toValueWithout(config.photoAlbum.messages.designing) }}</div>
+              </div>
+              <div v-else-if="item.status == config.photoAlbum.status.failed || item.reason" class="record-image-item-loading">
+                <div style="font-size: 12px;color: #999;text-align: center;">ID: {{ item.sw_pid }}</div>
+                <div style="width: 70%;font-size: 12px;">{{ item.reason || toValueWithout(config.photoAlbum.messages.designFailed) }}</div>
+              </div>
+            </div>
+          </div>
+          <div v-else-if="loading && page.value === config.photoAlbum.pagination.initialPage" class="record-image-item-loading">
+            {{ toValueWithout(config.photoAlbum.messages.loading) }}
+          </div>
+          <div v-else class="record-image-item-null">
+            <img :src="nullDataImage" :alt="toValueWithout(config.photoAlbum.messages.noData)">
+          </div>
+        </van-list>
+      </van-pull-refresh>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import * as badgeApi from '@/api/badge';
+import { onMounted, ref, onUnmounted } from 'vue';
+import { toValueWithout } from '@/lang/utils';
+import { cartoonConfig as config } from '@/config/cartoon';
+import nullDataImage from '@/assets/badge/null-data.png';
+
+const router = useRouter();
+const images = ref([]);
+const page = ref(config.photoAlbum.pagination.initialPage);
+const loading = ref(false);
+const finished = ref(false);
+const error = ref(null);
+const refreshing = ref(false);
+
+// 获取设计记录列表
+async function getList() {
+  // 如果正在加载或者已经加载完所有数据，则返回
+  console.log(loading.value, finished.value);
+  if (loading.value || finished.value) return;
+
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const res = await badgeApi.getLogOage({
+      page: page.value,
+      size: config.photoAlbum.pagination.pageSize,
+    });
+
+    if (page.value === config.photoAlbum.pagination.initialPage) {
+      images.value = res.list || [];
+    } else {
+      images.value.push(...(res.list || []));
+    }
+
+    // 判断是否还有更多数据
+    if (!res.list || res.list.length < config.photoAlbum.pagination.pageSize) {
+      finished.value = true;
+    } else {
+      page.value++;
+    }
+  } catch (err: any) {
+    error.value = err.message || toValueWithout(config.photoAlbum.messages.getDataFailed);
+    console.error('获取设计记录失败', err);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 查看设计预览
+function goPreview(item) {
+  router.push({
+    path: config.routes.preview,
+    query: {
+      pid: item.sw_pid,
+      group: item.group_count,
+      key: item.num,
+      prod_id: item.prod_id
+    },
+  });
+}
+
+// 上拉加载更多
+function onLoad() {
+  loading.value = false;
+  getList();
+}
+
+// 下拉刷新
+async function onRefresh() {
+  refreshing.value = true;
+  page.value = config.photoAlbum.pagination.initialPage;
+  finished.value = false;
+  await getList();
+  refreshing.value = false;
+}
+
+// 返回上一页
+function goBack() {
+  router.push('/cartoon');
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  getList();
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  loading.value = false;
+  finished.value = false;
+  page.value = config.photoAlbum.pagination.initialPage;
+});
+</script>
+
+<style scoped>
+.header {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  font-size: 14px;
+  color: #999;
+  padding: 16px 16px 0 16px;
+}
+
+.back-icon {
+  margin-right: 8px;
+  color: #222;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.record-container {
+  padding: 16px;
+}
+
+.record-note {
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 16px;
+}
+
+.record-images {
+  display: grid;
+  grid-template-columns: repeat(v-bind('config.photoAlbum.styles.gridColumns'), 1fr);
+  gap: v-bind('config.photoAlbum.styles.gap + "px"');
+}
+
+.record-image-item {
+  width: 100%;
+  padding-bottom: 100%;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: v-bind('config.photoAlbum.styles.borderRadius + "px"');
+}
+
+.record-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.record-image-item-shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -2px -2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.record-image-item-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: #f5f5f5;
+  font-size: 16px;
+  color: #999;
+  text-align: center;
+}
+
+.record-image-item-null {
+  height: 50vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.record-image-item-null img {
+  width: 80vw;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/cartoon/previewOrder.vue b/src/views/cartoon/previewOrder.vue
new file mode 100644
index 0000000..e9ec086
--- /dev/null
+++ b/src/views/cartoon/previewOrder.vue
@@ -0,0 +1,1551 @@
+<template>
+  <div class="preview-container"> 
+    <view class="backstyle_1"></view>
+    <view class="backstyle_2"></view>
+    <div class="header" @click="goBack">
+      <span class="back-icon"><van-icon name="arrow-left" size="16px" /> {{ toValueWithout("效果预览") }}</span>
+    </div>
+    <div class="step-container">
+      <div class="step-item">
+        <div class="step-content">
+          <div class="step-title">{{ toValueWithout("正面照片") }}</div>
+          <div class="step-desc">{{ toValueWithout("清晰的正面照片") }}</div>
+        </div>
+      </div>
+      <div class="step-item active">
+        <div class="step-num">2</div>
+        <div class="step-content">
+          <div class="step-title">{{ toValueWithout("确认下单") }}</div>
+          <div class="step-desc">{{ toValueWithout("选择一个你喜欢的效果图下单") }}</div>
+        </div>
+      </div>
+    </div>
+    <div v-if="!imageUrl" class="progress-section">
+      <div class="progress-bar-bg">
+        <div class="progress-bar-fg" :style="{ width: progress + '%' }"></div>
+      </div>
+      <div class="progress-text">{{progressText}} {{progress}}%</div>
+      <div class="progress-desc">{{ toValueWithout(`总计大约需要${config.preview.progress.totalTime}秒，请耐心等待...`) }}</div>
+    </div>
+    <div v-else class="progress-section-picture" :style="`width: ${config.preview.imageSize.previewWidth}px;height: ${config.preview.imageSize.previewHeight}px;`">
+      <div class="progress-section-img" :style="`width: ${config.preview.imageSize.previewWidth}px;height: ${config.preview.imageSize.previewHeight}px;`">
+        <img v-if="shapeImage" class="box1-back-image" :src="getImageUrl(shapeImage)" :style="`width: ${config.preview.imageSize.previewWidth}px;height: ${config.preview.imageSize.previewHeight}px;`"  alt="">
+        <div class="box1-front-box" :style="getStyle">
+          <img class="box1-front-image" :src="imageUrl" alt="" :style="`max-height: ${config.preview.imageSize.previewHeight}px;`">
+        </div>
+        <div class="shape-text" :style="shapeTextStyle" v-if="shapeText">{{shapeText}}</div>
+        <div class="shape-text" :style="topTextStyle" v-if="topText">{{topText}}</div>
+        <div class="shape-text" :style="bottomTextStyle" v-if="bottomText">{{bottomText}}</div>
+        <div v-if="badgeTypeId == 6 && axisz == 1 && roundTextConfigFront.width && roundTextConfigFront.charList" class="roundText font-chinese" :style="`left: ${roundTextConfigFront.x}px;top: ${roundTextConfigFront.y}px;width: ${roundTextConfigFront.width}px;height: ${roundTextConfigFront.height}px;position: absolute;pointer-events: none;z-index: 10;`">
+          <div v-for="item in roundTextConfigFront.charList" :key="item.char" class="round-text-char" :style="`position: absolute;left: ${item.x}px;top: ${item.y}px;font-size: ${item.fontSize}px;font-weight: ${item.fontWeight};color: ${item.color};transform: translate(-50%, -50%) rotate(${item.rotateDeg}deg);transform-origin: center;white-space: nowrap;`">
+            <span>{{item.char}}</span>
+          </div>
+        </div>
+        <div v-if="badgeTypeId == 6 && axisz == -1 && roundTextConfigBack.width && roundTextConfigBack.charList" class="roundText font-chinese" :style="`left: ${roundTextConfigBack.x}px;top: ${roundTextConfigBack.y}px;width: ${roundTextConfigBack.width}px;height: ${roundTextConfigBack.height}px;position: absolute;pointer-events: none;z-index: 10;`">
+          <div v-for="(item, index) in roundTextConfigBack.charList" :key="index" class="round-text-char" :style="`position: absolute;left: ${item.x}px;top: ${item.y}px;font-size: ${item.fontSize}px;font-weight: ${item.fontWeight};color: ${item.color};transform: translate(-50%, -50%) rotate(${item.rotateDeg}deg);transform-origin: center;white-space: nowrap;`">
+            <span>{{item.char}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="image-list-box" v-if="imageList.length > 1">
+      <div class="image-list-item" v-for="item in imageList" :key="item.key">
+        <img v-if="item.status == 1" class="image-list-item-img" :class="{ imgActive: item.key == imgKey }" :src="item.origin_url" alt="" @click="changeImage(item)">
+        <div v-else-if="item.status == 0" class="image-list-item-loading">
+          {{ toValueWithout(config.preview.messages.designing) }}
+        </div>
+        <div v-else-if="item.status == 2" class="image-list-item-loading">
+          {{ toValueWithout(config.preview.messages.designFailed) }}
+        </div>
+      </div>
+    </div>
+    <div class="info-section">
+      <div class="info-item">
+        <div class="info-title" v-if="productName">{{ toValueWithout(productName) }}</div>
+        <div class="info-content">{{ toValueWithout(config.preview.messages.productType) }}</div>
+      </div>
+      <div class="info-item">
+        <div class="info-title">{{ toValueWithout("3D全彩打印") }}</div>
+        <div class="info-content">{{ toValueWithout(config.preview.messages.process) }}</div>
+      </div>
+      <div class="info-item">
+        <div class="info-title">ID</div>
+        <div class="info-content">{{ pid }}</div>
+      </div>
+    </div>
+    <div class="shape-body">
+      <div class="shape-type" v-if="imageUrl && typeId == 3">
+        <div class="shape-type-item" :class="{ 'shape-active': item.id == shapeId }" v-for="item in shapeList" :key="item.id" @click="shapeChange(item)">{{item.name}}</div>
+      </div>
+      <div class="shape-box" v-if="imageUrl && typeId != 3 && typeId != 4">
+        <block v-for="item in shapeList" :key="item.id">
+          <div class="shape-item" @click="shapeChange(item)">
+            <div class="shape-item-list">
+              <img class="shape-item-image" :class="{ 'shape-item-image-round': config.preview.shapeIds.round.includes(item.id) }" :src="getImageUrl(item.cover_path) || imageUrl"/>
+              <van-icon v-if="item.id == shapeId" class="shape-icon" :color="config.styles.colors.success" name="checked" size="18px" />
+            </div>
+            <div class="shape-item-text">{{ toValueWithout(item.name) }}</div>
+          </div>
+        </block>
+      </div>
+      <div class="shape-box-input" v-if="imageUrl && custom_switch == 1 && typeId == 2">
+        <div v-if="config.preview.shapeIds.topBottomText.includes(shapeId)">
+          <input class="shape-box-input-text" type="text" :placeholder="toValueWithout('请输入顶部文字')" v-model="topText" @change="changeTopText" @input="changeTopText" @onBlur="changeTopText" />
+          <input class="shape-box-input-text" type="text" :placeholder="toValueWithout('请输入底部文字')" style="margin-top: 10px;" v-model="bottomText" @change="changeBottomText" @input="changeBottomText" @onBlur="changeBottomText" />
+        </div>
+        <div v-else style="width: 100%;">
+          <input class="shape-box-input-text" type="text" :placeholder="toValueWithout('请输入文字')" v-model="shapeText" @change="changeShapeText" @input="changeShapeText" @onBlur="changeShapeText" />
+        </div>
+      </div>
+      <div class="shape-box-input-box" v-if="imageUrl && custom_switch == 1 && typeId == 6">
+        <input class="shape-box-input-text" v-if="axisz == 1" type="text" :placeholder="toValueWithout('请输入正面文字')" v-model="frontText" @change="changeFrontText" @input="changeFrontText" @onBlur="changeFrontText" />
+        <input class="shape-box-input-text" v-if="axisz == -1" type="text" :placeholder="toValueWithout('请输入背面文字')" v-model="backText" @change="changeBackText" @input="changeBackText" @onBlur="changeBackText" />
+      </div>
+    </div>
+    <div style="padding: 0 16px;">
+      <van-divider />
+    </div>
+    <div class="order-section" v-if="imageUrl">
+      <div class="order-title">{{ toValueWithout(config.preview.messages.orderQuantity) }}</div>
+      <block v-for="item in sizeList" :key="item.id">
+        <block>
+          <div class="order-item">
+            <span class="order-size">{{ item.size }}</span>
+            <span class="order-free">({{ toValueWithout(config.preview.messages.remainingExchange) }}：{{ item.remaining }})</span>
+            <div class="order-ctrl">
+              <van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" />
+            </div>
+          </div>
+        </block>
+      </block>
+    </div>
+    <div class="address-box" v-if="orderStat.use_type == 2 && imageUrl">
+      <div class="order-title" style="padding: 0 16px;">{{ toValueWithout(config.preview.messages.shippingAddress) }}</div>
+      <div class="address-item">
+        <van-address-edit
+          :area-list="areaList"
+          :tel-validator="true"
+          tel-maxlength="11"
+          show-delete
+          show-search-result
+          :search-result="searchResult"
+          :area-columns-placeholder="[toValueWithout('请选择'), toValueWithout('请选择'), toValueWithout('请选择')]"
+          @change="nameTelChange"
+          @change-area="changeArea"
+          @change-detail="onChangeDetail"
+        />
+      </div>
+    </div>
+    <div style="height: 130px;"></div>
+    <div class="confirm-box">
+      <div class="action-section">
+        <!-- <button @click="sureReload" :disabled="flag < 1" class="action-btn"><img class="action-img" :src="reloadImage" alt=""> {{ toValueWithout(config.preview.messages.regenerate) }}</button> -->
+        <button @click="compare" :disabled="flag < 1" class="action-btn"><img class="action-img" :src="compareImage" alt=""> {{ toValueWithout(config.preview.messages.compare) }}</button>
+        <button @click="save" :disabled="flag < 1" class="action-btn"><img class="action-img" :src="downloadImage" alt=""> {{ toValueWithout(config.preview.messages.saveImage) }}</button>
+      </div>
+      <div class="btn-box">
+        <button @click="confirm" :disabled="flag < 1" class="confirm-btn">{{ toValueWithout(config.preview.messages.confirmSelect) }}</button>
+      </div>
+    </div>
+  </div>
+  
+  <van-action-sheet v-model:show="showCompare" :title="toValueWithout(config.preview.messages.compare)" :close-on-click-overlay="true" closeable>
+    <div style="padding: 16px;">
+      <div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
+        <div style="text-align: center;">
+          <img :src="compareList.origin_path" :alt="toValueWithout(config.preview.messages.originalImage)" :style="`max-width: ${config.preview.imageSize.compareImageSize}px; max-height: ${config.preview.imageSize.compareImageSize}px; border-radius: 8px;`">
+        </div>
+        <div style="font-size: 24px; color: #333;">
+          <van-icon name="arrow" size="20px" />
+        </div>
+        <div style="text-align: center;">
+          <img :src="imageUrl" :alt="toValueWithout(config.preview.messages.previewImage)" :style="`width: ${config.preview.imageSize.compareImageSize}px; height: ${config.preview.imageSize.compareImageSize}px; border-radius: 8px;`">
+        </div>
+      </div>
+      <div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;">
+        {{ toValueWithout(config.preview.messages.compareTip) }}
+      </div>
+    </div>
+  </van-action-sheet>
+
+  <div v-if="showPreview">
+    <div class="preview-mask" @click="showPreview = false">
+      <img :src="imageWater" :alt="toValueWithout(config.preview.messages.badgePreview)" />
+      <p>{{ toValueWithout(config.preview.messages.saveImageTip) }}</p>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, onUnmounted, nextTick, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { showSuccessToast, showToast, showConfirmDialog } from 'vant';
+import { localStorage } from '@/utils/local-storage'
+import * as badgeApi from '@/api/badge'
+import { areaList } from '@/utils/area'
+import { toValueWithout } from '@/lang/utils'
+import { createTextPosition } from '@/utils/textHelper'
+import { cartoonConfig as config } from '@/config/cartoon'
+
+// 导入图片资源
+import reloadImageSrc from '@/assets/badge/reload.png'
+import compareImageSrc from '@/assets/badge/duibi.png'
+import downloadImageSrc from '@/assets/badge/down.png'
+
+const reloadImage = reloadImageSrc
+const compareImage = compareImageSrc
+const downloadImage = downloadImageSrc
+
+const router = useRouter();
+const showCompare = ref(false)
+const imageList = ref([])
+const imageWater = ref('')
+
+const frontText = ref('')
+const backText = ref('')
+const frontKey = ref(1)
+
+// 圆形文字配置
+const roundTextConfigFront = ref({})
+const roundTextConfigBack = ref({})
+const cachedImageInfo = ref(null)
+const imageInfo = ref(null)
+const badgeTypeId = ref(0)
+const axisz = ref(1)
+
+// 创建适配 Vue 的 textHelper 实例
+const textHelper = createTextPosition({
+  setData: (data: any) => {
+    Object.keys(data).forEach(key => {
+      if (key === 'roundTextConfigFront') {
+        roundTextConfigFront.value = data[key]
+      } else if (key === 'roundTextConfigBack') {
+        roundTextConfigBack.value = data[key]
+      } else if (key === 'cachedImageInfo') {
+        cachedImageInfo.value = data[key]
+      } else if (key === 'imageInfo') {
+        imageInfo.value = data[key]
+      }
+    })
+  }
+})
+
+// 计算产品名称
+const productName = computed(() => {
+  if (!typeId.value || !prodId.value) return ''
+  const typeConfig = config.preview.productNames[typeId.value]
+  if (typeConfig && typeConfig[prodId.value]) {
+    return typeConfig[prodId.value]
+  }
+  return ''
+})
+
+function compare() {
+  showCompare.value = true
+}
+
+function sureReload() {
+  console.log('orderStat', orderStat.value)
+  if (orderStat.value.remain_count <= 0) {
+    showToast(toValueWithout(config.preview.messages.noRemainingCount))
+    return
+  }
+  isPreview.value = false
+  showConfirmDialog({
+    title: toValueWithout(config.preview.messages.regenerate),
+    message: toValueWithout(config.preview.messages.confirmRegenerate),
+  })
+  .then(() => {
+    group.value = newGroup.value
+    const params = {
+      pid: pid.value,
+      group: config.preview.defaults.group,
+      prod_id: prodId.value,
+      type_id: typeId.value,
+      kind_id: kindId.value
+    }
+    badgeApi.putModeling(params).then((res: any) => {
+      console.log('putModeling', res)
+      imageUrl.value = '';
+      imageList.value = []
+      imgKey.value = '';
+      createLog()
+    }).catch((err) => {
+      console.log('putModeling', err)
+      showToast({
+        message: err.message,
+        duration: 2000,
+      })
+    })
+  })
+  .catch(() => {
+    // on cancel
+  });
+}
+
+const imgKey = ref(config.preview.defaults.imgKey)
+const frameUrl = ref('')
+const changeImage = (item: any) => {
+  console.log('changeImage', item)
+  imgKey.value = item.key
+  imageUrl.value = config.preview.shapeIds.specialFrame.includes(shapeId.value) ? item.frame_url : item.origin_url
+  frameUrl.value = item.frame_url
+  imageWater.value = item.image_url
+}
+
+const createLog = () => {
+  badgeApi.createLog({
+    pid: pid.value,
+    group: config.preview.defaults.group,
+    prod_id: prodId.value,
+    type_id: typeId.value,
+    kind_id: kindId.value
+  }).then((res: any) => {
+    console.log('createLog', res)
+    progressTimer.value = null
+    getImageList()
+    progressList()
+    getCompareImage()
+    timer.value = setInterval(() => {
+      getImageList()
+    }, config.preview.polling.interval)
+  }).catch((err) => {
+    console.log('createLog', err)
+    showToast({
+      message: err.message,
+      duration: 2000,
+    })
+  })
+}
+
+const showPreview = ref(false)
+function save() {
+  showPreview.value = true;
+}
+const compareList = ref({})
+const style_name = ref('')
+function getCompareImage() {
+  badgeApi.getCompareImage({
+    pid: pid.value,
+    group: config.preview.defaults.group,
+    prod_id: prodId.value,
+    type_id: typeId.value
+  }).then((res: any) => {
+    console.log('getCompareImage', res)
+    compareList.value = res
+    style_name.value = res.list[0].kind_name || res.kind_name
+  }).catch((err) => {
+    console.log('getCompareImage', err)
+    showToast({
+      message: err.message,
+      duration: 2000,
+    })
+  })
+}
+function goBack() {
+  router.back()
+}
+
+const sizeList = ref([])
+const getSizeList = () => {
+  badgeApi.getOrderPrice({}).then((res: any) => {
+    console.log('getSizeList', res);
+    sizeList.value = res
+    if (typeId.value != 4) {
+      getShapeList()
+    }
+  })
+}
+
+const contact_name = ref('')
+const contact_mobile = ref('')
+const province_id = ref(0)
+const city_id = ref(0)
+const county_id = ref(0)
+const province_name = ref('')
+const city_name = ref('')
+const county_name = ref('')
+const address = ref('')
+const nameTelChange = (res: any) => {
+  console.log('nameTelChange', res)
+  if (res.key == 'name') {
+    contact_name.value = res.value
+  } else {
+    contact_mobile.value = res.value
+  }
+}
+
+const changeArea = (value: any) => {
+  console.log('changeArea', value)
+  province_id.value = value[0].value
+  city_id.value = value[1].value
+  county_id.value = value[2].value
+  province_name.value = value[0].text
+  city_name.value = value[1].text
+  county_name.value = value[2].text
+}
+
+const onChangeDetail = (value: any) => {
+  console.log('onChangeDetail', value)
+  address.value = value
+}
+
+const payAmount = ref(0)
+const changeValue = (value: number) => {
+  console.log(value) 
+  payAmount.value = value
+}
+
+const loading = ref(false)
+const confirm = () => {
+  if (loading.value) return
+  console.log('confirm')
+  if (payAmount.value <= 0) {
+    showToast(toValueWithout(config.preview.messages.selectQuantity))
+    return
+  }
+  if (orderStat.value.use_type == 2 && !contact_name.value) {
+    showToast(toValueWithout(config.preview.messages.fillContactName))
+    return
+  }
+  if (orderStat.value.use_type == 2 && !contact_mobile.value) {
+    showToast(toValueWithout(config.preview.messages.fillContactMobile))
+    return
+  }
+  if (orderStat.value.use_type == 2 && !province_id.value) {
+    showToast(toValueWithout(config.preview.messages.selectArea))
+    return
+  }
+  if (orderStat.value.use_type == 2 && !address.value) {
+    showToast(toValueWithout(config.preview.messages.fillAddress))
+    return
+  }
+  getPosition()
+  loading.value = true
+  showConfirmDialog({
+    title: toValueWithout(config.preview.messages.confirmSelect),
+    message: toValueWithout(config.preview.messages.confirmOrder),
+  })
+  .then(() => {
+    const parms = {
+      pid: pid.value,
+      key: imgKey.value,
+      pay_amount: payAmount.value,
+      products: sizeList.value,
+      prod_id: prodId.value,
+      shape_id: shapeId.value,
+      custom_text: shapeText.value ? shapeText.value : frontText.value,
+      back_text: backText.value ? backText.value : '',
+      shape_ids: shapeIds.value,
+      type_id: typeId.value,
+      up_text: topText.value ? topText.value : '',
+      down_text: bottomText.value ? bottomText.value : '',
+    }
+    if (orderStat.value.use_type == 2) {
+      parms.province_id = province_id.value
+      parms.city_id = city_id.value
+      parms.county_id = county_id.value
+      parms.province_name = province_name.value
+      parms.city_name = city_name.value
+      parms.county_name = county_name.value
+      parms.address = address.value
+      parms.contact_name = contact_name.value
+      parms.contact_mobile = contact_mobile.value
+      parms.addr_id = config.preview.defaults.addrId
+      parms.country_id = config.preview.defaults.countryId
+    }
+    console.log('parms', parms)
+    badgeApi.creatOrder(parms).then((res: any) => {
+      console.log('creatOrder', res)
+      showSuccessToast({
+        message: toValueWithout(config.preview.messages.orderSuccess),
+        duration: 2000,
+      })
+      router.push({
+        path: config.routes.myOrder
+      })
+      loading.value = false
+    }).catch((err) => {
+      console.log('creatOrder', err)
+      loading.value = false
+      showToast({
+        message: err.message,
+        duration: 2000,
+      })
+    }).finally(() => {
+      loading.value = false
+    })
+  })
+  .catch(() => {
+    loading.value = false
+  });
+}
+
+const getPosition = () => {
+  badgeApi.composite({
+    pid: pid.value,
+    num: imgKey.value,
+    custom_text: shapeText.value ? shapeText.value : frontSaveText.value,
+    back_text: backSaveText.value ? backSaveText.value : '',
+    shape_id: shapeId.value,
+    type_id: typeId.value,
+    shape_ids: shapeIds.value,
+    up_text: topText.value ? topText.value : '',
+    down_text: bottomText.value ? bottomText.value : '',
+  }).then((res: any) => {
+    console.log('getPosition', res)
+  }).catch((err) => {
+    console.log('getPosition', err)
+  })
+}
+
+const imageUrl = ref('')
+const originUrl = ref('')
+const group = ref(config.preview.defaults.group);
+// 轮询获取图片
+const flag = ref(1)
+const timer = ref()
+const progress = ref(0)
+const progressTimer = ref()
+const progressText = ref('')
+const progressList = () => {
+  progress.value = 0
+  if (!progressTimer.value) {
+    progressTimer.value = setInterval(() => {
+      if (progress.value < config.preview.progress.maxProgress) {
+        progress.value += 1
+        const thresholds = config.preview.progress.thresholds
+        if (progress.value < thresholds.stage1) {
+          progressText.value = toValueWithout(config.preview.progress.stages.stage1)
+        } else if (progress.value < thresholds.stage2) {
+          progressText.value = toValueWithout(config.preview.progress.stages.stage2)
+        } else if (progress.value < thresholds.stage3) {
+          progressText.value = toValueWithout(config.preview.progress.stages.stage3)
+        } else {
+          progressText.value = toValueWithout(config.preview.progress.stages.stage4)
+        }
+      }
+    }, config.preview.progress.interval)
+  }
+}
+
+const newGroup = ref(0)
+const isPreview = ref(false)
+const getImageList = () => {
+  badgeApi.getImageList({
+    pid: pid.value, 
+    group: config.preview.defaults.group,
+    prod_id: prodId.value
+  }).then((res: any) => {
+    console.log('getImageList', res)
+    const data = res || []
+    flag.value = data.flag
+    if (data.flag === 1) {
+      newGroup.value = data.next_group
+      
+      nextTick(() => {
+        const newList = data.list.map(item => ({
+          ...item,
+          isNew: true
+        }))
+
+        const firstGeneratedImage = newList.find(item => item.status === 1)
+
+        if (firstGeneratedImage && !isPreview.value) {
+          originUrl.value = firstGeneratedImage.origin_url
+          imageUrl.value = firstGeneratedImage.origin_url
+          frameUrl.value = firstGeneratedImage.frame_url
+          imageWater.value = firstGeneratedImage.image_url
+          imgKey.value = firstGeneratedImage.key
+          isPreview.value = true
+        }
+
+        const mergedList = imageList.value.map(item => {
+          const newItem = newList.find(n => n.key === item.key)
+          return newItem || item
+        })
+
+        newList.forEach(newItem => {
+          if (!mergedList.find(item => item.key === newItem.key)) {
+            mergedList.push(newItem)
+          }
+        })
+
+        imageList.value = mergedList
+
+        console.log('imgKey.value', imgKey.value)
+        if (imgKey.value) {
+          const currentImage = mergedList.filter((item: any) => item.key === imgKey.value)[0]
+          console.log('currentImage', currentImage)
+          if (currentImage && currentImage.status === 1) {
+            originUrl.value = currentImage.origin_url
+            imageUrl.value = currentImage.origin_url
+            frameUrl.value = currentImage.frame_url
+            imageWater.value = currentImage.image_url
+            isPreview.value = true
+          } else {
+            originUrl.value = currentImage.origin_url
+            imageUrl.value = currentImage.origin_url
+            frameUrl.value = currentImage.frame_url
+            imageWater.value = currentImage.image_url
+            isPreview.value = true
+          }
+        }
+      })
+    }
+    if (data.flag === 2) {
+      newGroup.value = data.next_group
+      clearInterval(timer.value)
+      clearInterval(progressTimer.value)
+      
+      progress.value = 100
+      
+      imageList.value = data.list
+      if (imgKey.value) {
+        originUrl.value = data.list.filter((item: any) => item.key == imgKey.value)[0].origin_url
+        imageUrl.value = data.list.filter((item: any) => item.key == imgKey.value)[0].origin_url
+        frameUrl.value = data.list.filter((item: any) => item.key == imgKey.value)[0].frame_url
+        imageWater.value = data.list.filter((item: any) => item.key == imgKey.value)[0].image_url
+      } else {
+        originUrl.value = data.list[0].origin_url
+        imageUrl.value = data.list[0].origin_url
+        frameUrl.value = data.list[0].frame_url
+        imageWater.value = data.list[0].image_url
+        imgKey.value = data.list[0].key
+      }
+      localStorage.remove('userId')
+    }
+  }).catch((err) => {
+    showToast({
+      message: err.message,
+      duration: 2000,
+    })
+  })
+}
+
+const shapeId = ref(0)
+const shapeIds = ref([])
+const shapeImage = ref('')
+
+const shapeList = ref([])
+const custom_switch = ref(0)
+const limitCount = ref(0)
+const getShapeList = () => {
+  badgeApi.getShapeList({
+    prod_id: prodId.value,
+    type_id: typeId.value
+  }).then((res: any) => {
+    console.log('getShapeList', res)
+    shapeList.value = res.list
+    shapeId.value = res.list[0].id
+    shapeImage.value = res.list[0]?.frame_path
+    custom_switch.value = res.list[0]?.custom_switch
+    limitCount.value = res.list[0]?.text_limit_max
+    ImageShow(res.list[0])
+    if (custom_switch.value == 1 && typeId.value == 2) {
+      shapeText.value = ''
+      topText.value = ''
+      bottomText.value = ''
+      topTextStyle.value = ''
+      bottomTextStyle.value = ''
+      shapeTextStyle.value = ''
+      textShow(res.list[0])
+    }
+    if (custom_switch.value == 1 && typeId.value == 6) {
+      shapeIds.value = res.list.map((item: any) => item.id)
+      if (res.list[0].axisz == 1) {
+        axisz.value = 1
+        frontKey.value = 1
+        frontTextShow(res.list[0], true)
+      } else if (res.list[0].axisz == -1) {
+        axisz.value = -1
+        frontKey.value = 2
+        frontTextShow(res.list[0], false)
+      } else {
+        axisz.value = 1
+        frontKey.value = 1
+        frontTextShow(res.list[0], true)
+      }
+    }
+  }).catch((err) => {
+    console.log('getShapeList', err)
+  })
+}
+
+const getImageUrl = (path: string) => {
+  return 'https://suwa3d-3dview.oss-cn-shanghai.aliyuncs.com/' + path
+}
+
+const getStyle = ref('')
+const ImageShow = (item: any) => {
+  const scale = config.preview.imageScale;
+  const img = new Image()
+  img.src = getImageUrl(item.frame_path)
+  img.onload = () => {
+    console.log('img', img)
+    const ratioWidth = config.preview.imageSize.previewWidth / img.width;
+    const ratioHeight = config.preview.imageSize.previewHeight / img.height;
+    const x = item.axisx * ratioWidth * scale;
+    const y = item.axisy * ratioHeight * scale;
+    const path_width = item.width * ratioWidth * scale;
+    const path_height = item.height * ratioHeight * scale;
+    getStyle.value = `left: ${x}px;top: ${y}px;width: ${path_width}px;height: ${path_height}px;`
+  }
+}
+
+const shapeTextStyle = ref('')
+const topTextStyle = ref('')
+const bottomTextStyle = ref('')
+const textShow = (item: any, type: string = 'shape') => {
+  const scale = config.preview.imageScale;
+  const img = new Image()
+  img.src = getImageUrl(item.frame_path)
+  img.onload = () => {
+    console.log('img', img)
+    const ratioWidth = config.preview.imageSize.previewWidth / img.width;
+    const ratioHeight = config.preview.imageSize.previewHeight / img.height;
+    const x = item.text_axisx * ratioWidth * scale;
+    const y = item.text_axisy * ratioHeight * scale;
+    const path_width = item.text_width * ratioWidth * scale;
+    const path_height = item.text_height * ratioHeight * scale;
+    const text_size = item.font_size * Math.min(ratioWidth * scale, ratioHeight * scale);
+    if (type == 'shape') {
+      shapeTextStyle.value = `left: ${x}px;top: ${y}px;width: ${path_width}px;height: ${path_height}px;text-align: center;line-height: ${path_height}px;font-size: ${text_size}px;color: ${item.font_color};font-weight: ${item.font_weight};`
+    } else if (type == 'top') {
+      topTextStyle.value = `left: ${x}px;top: ${y}px;width: ${path_width}px;height: ${path_height}px;text-align: center;line-height: ${path_height}px;font-size: ${text_size}px;color: ${item.font_color};font-weight: ${item.font_weight};`
+    } else if (type == 'bottom') {
+      bottomTextStyle.value = `left: ${x}px;top: ${y}px;width: ${path_width}px;height: ${path_height}px;text-align: center;line-height: ${path_height}px;font-size: ${text_size}px;color: ${item.font_color};font-weight: ${item.font_weight};`
+    }
+  }
+}
+
+const frontTextShow = (event: any, isFront: boolean | null = null) => {
+  if (isFront === null) {
+    isFront = frontKey.value == 1;
+  }
+  isFront = Boolean(isFront);
+  
+  let config_text: any = {};
+  if (isFront) {
+    config_text = {
+      x: event.front_text_axisx || config.preview.textConfig.front.x,
+      y: event.front_text_axisy || config.preview.textConfig.front.y,
+      width: event.front_text_width || config.preview.textConfig.front.width,
+      height: event.front_text_height || config.preview.textConfig.front.height,
+      radius: event.front_text_radius || config.preview.textConfig.front.radius,
+      fontSize: event.front_font_size || config.preview.textConfig.front.fontSize,
+      maxLength: config.preview.textConfig.front.maxLength
+    };
+  } else {
+    config_text = {
+      x: event.back_text_axisx !== undefined ? event.back_text_axisx : config.preview.textConfig.back.x,
+      y: event.back_text_axisy !== undefined ? event.back_text_axisy : config.preview.textConfig.back.y,
+      width: event.back_text_width !== undefined ? event.back_text_width : config.preview.textConfig.back.width,
+      height: event.back_text_height !== undefined ? event.back_text_height : config.preview.textConfig.back.height,
+      radius: event.back_text_radius !== undefined ? event.back_text_radius : config.preview.textConfig.back.radius,
+      fontSize: event.back_font_size !== undefined ? event.back_font_size : config.preview.textConfig.back.fontSize,
+      maxLength: config.preview.textConfig.back.maxLength
+    };
+  }
+  
+  const text = isFront ? frontText.value : backText.value;
+  const bindKey = isFront ? 'roundTextConfigFront' : 'roundTextConfigBack';
+  const shapeImagePath = event.frame_path || shapeImage.value;
+  const cachedInfo = cachedImageInfo.value;
+  const needFetchImage = !cachedInfo || cachedInfo.src !== shapeImagePath;
+  
+  if (!needFetchImage && cachedInfo) {
+    textHelper.roundText({
+      shapeImage: shapeImagePath,
+      x: config_text.x,
+      y: config_text.y,
+      width: config_text.width,
+      height: config_text.height,
+      radius: config_text.radius,
+      text: text,
+      isFront: isFront,
+      style: {
+        fontSize: config_text.fontSize,
+        color: event.font_color || config.preview.textConfig.defaultColor,
+        fontWeight: event.font_weight || config.preview.textConfig.defaultWeight,
+        textAlign: 'center',
+      },
+      bindKey: bindKey,
+      cachedImageInfo: cachedInfo
+    });
+    
+    nextTick(() => {
+      const currentConfig = isFront ? roundTextConfigFront.value : roundTextConfigBack.value;
+      if (frontKey.value == (isFront ? 1 : 2) && currentConfig && currentConfig.charList) {
+        // Vue 会自动响应式更新
+      }
+    });
+  } else {
+    textHelper.roundText({
+      shapeImage: shapeImagePath,
+      x: config_text.x,
+      y: config_text.y,
+      width: config_text.width,
+      height: config_text.height,
+      radius: config_text.radius,
+      text: text,
+      isFront: isFront,
+      style: {
+        fontSize: config_text.fontSize,
+        color: event.font_color || config.preview.textConfig.defaultColor,
+        fontWeight: event.font_weight || config.preview.textConfig.defaultWeight,
+        textAlign: 'center',
+      },
+      bindKey: bindKey,
+      onImageInfoCached: (imageInfo: any) => {
+        cachedImageInfo.value = imageInfo;
+      }
+    });
+    
+    const checkAndUpdate = (attempts = 0) => {
+      if (attempts > 10) return;
+      
+      const currentConfig = isFront ? roundTextConfigFront.value : roundTextConfigBack.value;
+      if (frontKey.value == (isFront ? 1 : 2)) {
+        if (currentConfig && currentConfig.charList && currentConfig.charList.length > 0) {
+          // Vue 会自动响应式更新
+        } else if (attempts < 10) {
+          setTimeout(() => {
+            checkAndUpdate(attempts + 1);
+          }, 50);
+        }
+      }
+    };
+    
+    setTimeout(() => {
+      checkAndUpdate(0);
+    }, 50);
+  }
+}
+
+const shapeText = ref('')
+const changeShapeText = (e: any) => {
+  console.log('changeShapeText', e.target.value)
+  if (!validateInput(e.target.value)) {
+    showToast(config.preview.messages.invalidInput)
+    shapeText.value = e.target.value.replace(/[^a-zA-Z0-9\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff\uac00-\ud7a3\u00c0-\u017f\s~！@#￥%……&*（）——+_)(*&^%$#@!~?><:"}{|、】【'；、。，'.]/g, '');
+    return;
+  } 
+  handleInput(e.target.value)
+}
+
+const topText = ref('')
+const changeTopText = (e: any) => {
+  console.log('changeTopText', e.target.value)
+  if (!validateInput(e.target.value)) {
+    showToast(config.preview.messages.invalidInput)
+    topText.value = e.target.value.replace(/[^a-zA-Z0-9\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff\uac00-\ud7a3\u00c0-\u017f\s~！@#￥%……&*（）——+_)(*&^%$#@!~?><:"}{|、】【'；、。，'.]/g, '');
+    return;
+  } 
+  handleInput(e.target.value, 'top')
+  const textPos = shapeList.value.find((item: any) => item.id === shapeId.value)?.text_pos?.find((d: any) => d.position_place == 'top')
+  if (textPos) {
+    textPos.frame_path = shapeImage.value;
+    textShow(textPos, 'top')
+  }
+}
+
+const bottomText = ref('')
+const changeBottomText = (e: any) => {
+  console.log('changeBottomText', e.target.value)
+  if (!validateInput(e.target.value)) {
+    showToast(config.preview.messages.invalidInput)
+    bottomText.value = e.target.value.replace(/[^a-zA-Z0-9\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff\uac00-\ud7a3\u00c0-\u017f\s~！@#￥%……&*（）——+_)(*&^%$#@!~?><:"}{|、】【'；、。，'.]/g, '');
+    return;
+  } 
+  handleInput(e.target.value, 'bottom')
+  const textPos = shapeList.value.find((item: any) => item.id === shapeId.value)?.text_pos?.find((d: any) => d.position_place == 'bottom')
+  if (textPos) {
+    textPos.frame_path = shapeImage.value;
+    textShow(textPos, 'bottom')
+  }
+}
+
+const frontSaveText = ref('')
+const changeFrontText = (e: any) => {
+  const inputValue = e?.target?.value ?? frontText.value
+  console.log('changeFrontText', inputValue)
+  frontText.value = inputValue
+  frontSaveText.value = inputValue
+  handleInput(inputValue)
+  if (typeId.value == 6 && shapeList.value.length > 0) {
+    const currentShape = shapeList.value.find((item: any) => item.id === shapeId.value)
+    if (currentShape && currentShape.axisz == 1) {
+      frontTextShow(currentShape, true)
+    }
+  }
+}
+
+const backSaveText = ref('')
+const changeBackText = (e: any) => {
+  const inputValue = e?.target?.value ?? backText.value
+  console.log('changeBackText', inputValue)
+  backText.value = inputValue
+  backSaveText.value = inputValue
+  handleInput(inputValue)
+  if (typeId.value == 6 && shapeList.value.length > 0) {
+    const currentShape = shapeList.value.find((item: any) => item.id === shapeId.value)
+    if (currentShape && currentShape.axisz == -1) {
+      frontTextShow(currentShape, false)
+    }
+  }
+}
+
+const validateInput = (input: string) => {
+  const regex = /^[a-zA-Z0-9\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff\uac00-\ud7a3\u00c0-\u017f\s~！@#￥%……&*（）——+_)(*&^%$#@!~?><:"}{|、】【'；、。，'.]+$/;
+  return regex.test(input);
+}
+
+const handleInput = (value: string, type: string = 'shape') => {
+  let byteLength = calculateByteLength(value);
+  console.log('byteLength', byteLength, limitCount.value)
+  if (byteLength > limitCount.value) {
+    let validValue = '';
+    let currentBytes = 0;
+    for (let i = 0; i < value.length; i++) {
+      const char = value.charAt(i);
+      const code = char.charCodeAt(0);
+      let charBytes = 0;
+      if (code === 32) {
+        charBytes = 1;
+      } else {
+        charBytes = code > 255 ? 2 : 1;
+      }
+      if (currentBytes + charBytes <= limitCount.value) {
+        validValue += char;
+        currentBytes += charBytes;
+      } else {
+        break;
+      }
+    }
+    if (typeId.value == 2) {
+      if (config.preview.shapeIds.topBottomText.includes(shapeId.value)) {
+        type == 'top' ? topText.value = validValue : bottomText.value = validValue;
+      } else {
+        shapeText.value = validValue;
+      }
+    } else {
+      if (axisz.value == 1) {
+        frontText.value = validValue;
+        frontSaveText.value = validValue;
+      } else {
+        backText.value = validValue;
+        backSaveText.value = validValue;
+      }
+    }
+    if (typeId.value == 6 && shapeList.value.length > 0) {
+      const currentShape = shapeList.value.find((item: any) => item.id === shapeId.value)
+      if (currentShape) {
+        if (currentShape.axisz == 1) {
+          frontTextShow(currentShape, true)
+        } else if (currentShape.axisz == -1) {
+          frontTextShow(currentShape, false)
+        }
+      }
+    }
+    return;
+  }
+  if (typeId.value == 2) {
+    if (config.preview.shapeIds.topBottomText.includes(shapeId.value)) {
+      type == 'top' ? topText.value = value : bottomText.value = value;
+    } else {
+      shapeText.value = value;
+    }
+  } else {
+    if (axisz.value == 1) {
+      frontText.value = value;
+      frontSaveText.value = value;
+    } else {
+      backText.value = value;
+      backSaveText.value = value;
+    }
+  }
+  if (typeId.value == 6 && shapeList.value.length > 0) {
+    const currentShape = shapeList.value.find((item: any) => item.id === shapeId.value)
+    if (currentShape) {
+      if (currentShape.axisz == 1) {
+        frontTextShow(currentShape, true)
+      } else if (currentShape.axisz == -1) {
+        frontTextShow(currentShape, false)
+      }
+    }
+  }
+}
+
+const calculateByteLength = (str: string) => {
+  let len = 0;
+  for (let i = 0; i < str.length; i++) {
+    const code = str.charCodeAt(i);
+    if (code === 32) {
+      len += 1;
+    } else {
+      len += code > 255 ? 2 : 1;
+    }
+  }
+  return len;
+}
+
+const shapeChange = (item: any) => {
+  console.log('shapeChange', item)
+  sizeList.value.map((item: any) => {
+    if (item.shape_id !== item.id) {
+      item.count = 0
+    }
+  })
+  shapeText.value = '';
+  shapeId.value = item.id
+  shapeImage.value = item.frame_path
+  custom_switch.value = item.custom_switch
+  limitCount.value = item.text_limit_max
+  if (typeId.value == 3) {
+    imageUrl.value = config.preview.shapeIds.frame.includes(item.id) ? originUrl.value : frameUrl.value
+  } else {
+    imageUrl.value = originUrl.value
+  }
+  ImageShow(item)
+  if (custom_switch.value == 1 && typeId.value == 2) {
+    shapeText.value = ''
+    topText.value = ''
+    bottomText.value = ''
+    topTextStyle.value = ''
+    bottomTextStyle.value = ''
+    shapeTextStyle.value = ''
+    textShow(item)
+  }
+  if (custom_switch.value == 1 && typeId.value == 6) {
+    if (item.axisz == 1) {
+      axisz.value = 1
+      frontKey.value = 1
+      frontText.value = frontSaveText.value ? frontSaveText.value : ''
+      backText.value = backSaveText.value ? backSaveText.value : ''
+      frontTextShow(item, true)
+    } else if (item.axisz == -1) {
+      axisz.value = -1
+      frontKey.value = 2
+      backText.value = backSaveText.value ? backSaveText.value : ''
+      frontText.value = frontSaveText.value ? frontSaveText.value : ''
+      frontTextShow(item, false)
+    }
+  }
+}
+
+const orderStat = ref({})
+const typeId = ref(0)
+const getOrderStat = () => {
+  badgeApi.getOrderStat({}).then((res: any) => {
+    console.log('getOrderStat', res)
+    orderStat.value = res
+    typeId.value = res.type_id
+    badgeTypeId.value = res.type_id
+    getSizeList()
+  })
+}
+
+function handleBeforeUnload(_event: BeforeUnloadEvent) {
+  // code 的清除已在 main.ts 中统一处理，这里只处理页面特定的清理逻辑
+  // 清除轮询和进度条计时器
+  clearInterval(timer.value)
+  clearInterval(progressTimer.value)
+  // userId 的清除由 main.ts 统一处理
+}
+
+const pid = ref(0)
+const route = useRoute()
+const prodId = ref(0)
+const kindId = ref(0)
+onMounted(() => {
+  pid.value = route.query.pid
+  group.value = route.query.group
+  if (route.query.key) {
+    imgKey.value = route.query.key
+  }
+  if (route.query.prod_id) {
+    prodId.value = route.query.prod_id
+  }
+  if (route.query.kind_id) {
+    kindId.value = Number(route.query.kind_id)
+  }
+  getOrderStat()
+
+  getImageList()
+  progressList()
+  setTimeout(() => {
+    getCompareImage()
+  }, config.preview.polling.compareImageDelay)
+  timer.value = setInterval(() => {
+    getImageList()
+  }, config.preview.polling.interval)
+  window.addEventListener('beforeunload', handleBeforeUnload);
+})
+
+onUnmounted(() => {
+  clearInterval(timer.value)
+  clearInterval(progressTimer.value)
+})
+
+const searchResult = ref([])
+</script>
+<style scoped>
+.preview-container {
+  min-height: 100vh;
+  font-family: 'PingFang SC', Arial, sans-serif;
+  color: #222;
+}
+.backstyle_1 {
+  position: fixed;
+  left: -110px;
+  top: -40px;
+  width: 328px;
+  height: 216px;
+  opacity: 0.2;
+  transform: rotate(-13.72deg);
+  border-radius: 50%;
+  background-image: radial-gradient( rgba(250, 182, 55, 0.726), #ebd5a09c, #d4cab100);
+  z-index: -10;
+}
+.backstyle_2 {
+  position: fixed;
+  left: 97px;
+  top: -95px;
+  width: 370px;
+  height: 374px;
+  opacity: 0.1;
+  border-radius: 50%;
+  background-image: radial-gradient( rgb(69, 255, 63), #90f2729a, #90f27200);
+  z-index: -10;
+}
+.header {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  font-size: 14px;
+  color: #999;
+  padding: 16px 16px 0 16px;
+}
+.back-icon {
+  margin-right: 8px;
+  color: #222;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.step-container {
+  display: flex;
+  align-items: flex-start;
+  padding: 16px 16px 16px 0;
+}
+.step-item {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.step-item.active {
+  flex: 2.5;
+}
+.step-num {
+  font-size: 48px;
+  line-height: 1;
+  position: relative;
+  margin-right: 8px;
+  text-shadow: 0 2px 8px #e6f7e6;
+  color: #CCCCCC;
+}
+.step-item.active .step-num {
+  color: #fff;
+  text-shadow:
+    1px 1px 0 #000,
+    -1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px -1px 0 #000,
+    0 1px 0 #000,
+    1px 0 0 #000,
+    0 -1px 0 #000,
+    -1px 0 0 #000;
+}
+.step-item.active .step-num::after {
+  content: '';
+  position: absolute;
+  top: 20px;
+  right: 0;
+  width: 15px;
+  height: 15px;
+  background-color: #50cf54;
+  opacity: 0.5;
+  border-radius: 50%;
+}
+.step-content {
+  display: flex;
+  flex-direction: column;
+  height: 48px;
+}
+.step-item.active .step-title {
+  color: #000;
+  font-weight: bold;
+  font-size: 16px;
+}
+.step-item.active .step-desc {
+  color: #808080;
+  font-size: 13px;
+}
+.step-title {
+  font-size: 16px;
+  color: #808080;;
+}
+.step-desc {
+  font-size: 12px;
+  color: #808080;
+  margin-top: 2px;
+}
+.progress-section {
+  margin: 0 auto;
+  text-align: center;
+  width: 100vw;
+  height: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.progress-section-picture {
+  width: 320px;
+  height: 320px;
+  position: relative;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.progress-section-img {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+.box1-back-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  object-fit: cover;
+  border-radius: 10px;
+} 
+.box1-front-box {
+  position: absolute;
+  z-index: 1;
+}
+.box1-front-image {
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.3);
+}
+.progress-bar-bg {
+  width: 70%;
+  height: 10px;
+  background: #eee;
+  border-radius: 5px;
+  margin: 0 auto 8px auto;
+  position: relative;
+  overflow: hidden;
+}
+.progress-bar-fg {
+  height: 100%;
+  background: #6fdc8c;
+  border-radius: 5px;
+  transition: width 0.3s;
+}
+.progress-text {
+  font-size: 15px;
+  color: #222;
+  margin-bottom: 2px;
+}
+.progress-desc {
+  font-size: 12px;
+  color: #999;
+}
+.info-section {
+  display: flex;
+  justify-content: flex-start;
+  padding: 16px;
+}
+.info-item {
+  flex: 1;
+}
+.info-title {
+  font-size: 13px;
+  color: #222;
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+.info-content {
+  font-size: 12px;
+  color: #999;
+}
+.order-section {
+  border-radius: 10px;
+  padding: 0 16px;
+  margin-bottom: 18px;
+}
+.order-title {
+  font-size: 14px;
+  color: #222;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.order-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.order-size {
+  font-size: 15px;
+  color: #222;
+  margin-right: 8px;
+}
+.order-free {
+  font-size: 12px;
+  color: #999;
+  margin-right: 16px;
+}
+.order-ctrl {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+.confirm-box {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #fff;
+  z-index: 10;
+  padding: 0 16px 16px 16px;
+  border-top: 1px solid #e6e6e6;
+}
+.action-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  padding: 0 16px;
+}
+.action-btn {
+  flex: 1;
+  margin: 0 4px;
+  border: none;
+  border-radius: 8px;
+  color: #222;
+  font-size: 13px;
+  padding: 8px 0;
+  cursor: pointer;
+  transition: background 0.2s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+}
+.action-img {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+.btn-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.confirm-btn {
+  width: 80vw;
+  background: linear-gradient(90deg, #D1ED8E 0%, #55E668 100%);
+  color: #000;
+  font-size: 17px;
+  font-weight: 600;
+  border: none;
+  border-radius: 24px;
+  padding: 12px 0;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(111,220,140,0.08);
+  letter-spacing: 2px;
+}
+.confirm-btn:active {
+  background: linear-gradient(90deg, #5ccf7a 0%, #8fdca0 100%);
+}
+.preview-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.preview-mask img {
+  max-width: 80%;
+  max-height: 80%;
+  border-radius: 10px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+.preview-mask p {
+  margin-top: 16px;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+} 
+.progress-image-item-shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 80vw;
+  height: 80vw;
+  object-fit: cover;
+  box-shadow: inset 2px 2px 4px  rgba(255, 255, 255, 0.5),inset -2px -2px 4px  rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+}
+.image-list-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 16px 16px 0 16px;
+}
+.image-list-item {
+  width: 20vw;
+  height: 20vw;
+}
+.image-list-item-img {
+  width: 20vw;
+  height: 20vw;
+  border-radius: 12px;
+  border: 3px solid #fff;
+  background: rgba(0, 0, 0, 0.3);
+}
+.image-list-item-img.imgActive {
+  border: 3px solid #50cf54;
+}
+.image-list-item-loading {
+  width: 20vw;
+  height: 20vw;
+  border-radius: 12px;
+  background: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #999;
+}
+.shape-body {
+  background: #fff;
+  border-radius: 8px;
+  padding: 0 20px;
+}
+.shape-box {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.shape-title {
+  padding-bottom: 12px;
+  font-size: 14px;
+  font-weight: bold;
+}
+.shape-item {
+  position: relative;
+  flex: 0 0 24%;
+  /* margin-right: calc(4% / 3); */
+  margin-bottom: calc(4% / 2);
+  margin-right: 8px!important;
+}
+.shape-item:nth-child(4n){ 
+  margin-right: 0; 
+} 
+.shape-item:last-child{ 
+  margin-right: auto; 
+}
+.shape-item-image {
+  width: 20vw;
+  height: 20vw;
+  border-radius: 8px;
+}
+.shape-icon {
+  position: absolute;
+  right: 6px;
+  top: 14vw;
+}
+.shape-item-text {
+  font-size: 12px;
+  text-align: center;
+  max-width: 20vw;
+}
+.shape-type {
+  display: -webkit-box;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding-bottom: 16px;
+}
+.shape-type-item {
+  background: #F0F2F5;
+  font-size: 12px;
+  height: 7vw;
+  padding: 0px 16px;
+  border-radius: 4px;
+  margin-right: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.shape-active {
+  background: #15CF5F;
+  color: #fff;
+}
+.shape-box-input {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+}
+.shape-box-input-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+  gap: 10px;
+  flex-direction: column;
+}
+.shape-box-input-text {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 0 10px;
+}
+.shape-text {
+  position: absolute;
+  z-index: 2;
+  font-family: chinese;
+  overflow: hidden;
+  text-shadow: 1px 0px 1px #000000a1;
+  white-space: pre-wrap;
+}
+.font-chinese {
+  font-family: chinese;
+}
+.shape-item-image-round {
+  border-radius: 50%;
+}
+.van-address-edit {
+  padding: 0!important;
+}
+</style>
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index c34a37c..909666f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -144,6 +144,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     server: {
       host: true,
       port: 80,
+      // https: false,
       https: true,
       proxy,
       // proxy: env.VITE_HTTP_MOCK === 'true'