浮雕挂饰

src/views/badge/index.vue

@@ -27,6 +27,9 @@
           <div class="order-type-item-title" v-if="typeId == 4">
             {{ toValueWithout("3D卡通手办") }}
           </div>
+          <div class="order-type-item-title" v-if="typeId == 6">
+            {{ toValueWithout("浮雕挂饰") }}
+          </div>
         </div>
       </div>
       <div class="size-title">
@@ -76,11 +79,11 @@
       <p style="font-size: 12px; color: #000; margin-left: 16px;">{{ toValueWithout("注：需要先输入手机号才可体验徽章设计") }}</p>
       <div class="style-box">
         <div class="style-box-item">
-          <div class="style-item-title" :class="{ styleActive: prodId == 7 || prodId == 1 }" @click="styleChange(7)">
-            {{ prop == '3D真人肖像' ? toValueWithout('3D真人肖像') : toValueWithout('人物立体徽章') }} 
+          <div class="style-item-title" :class="{ styleActive: prodId == 7 || prodId == 1 || prodId == 25 }" @click="styleChange(7)">
+            {{ prop == '3D真人肖像' ? toValueWithout('3D真人肖像') : toValueWithout('人物主体') }} 
           </div>
-          <div class="style-item-title" :class="{ styleActive: prodId == 8 || prodId == 2 }" @click="styleChange(8)">
-            {{ toValueWithout("宠物立体徽章") }}
+          <div class="style-item-title" :class="{ styleActive: prodId == 8 || prodId == 2 || prodId == 24 }" @click="styleChange(8)">
+            {{ toValueWithout("宠物主体") }}
           </div>
         </div>
       </div>
@@ -116,10 +119,10 @@
     </div>
     <div class="tag-change-box" v-if="trialCode == false">
       <div class="tag-change-item">
-        <div class="tag-change-item-title" :class="{ tagActive: prodId == 7 || prodId == 1 }" @click="prodChange(7)">
+        <div class="tag-change-item-title" :class="{ tagActive: prodId == 7 || prodId == 1 || prodId == 25 }" @click="prodChange(7)">
           {{ toValueWithout("人物主体") }}
         </div>
-        <div class="tag-change-item-title" :class="{ tagActive: prodId == 8 || prodId == 19 }" @click="prodChange(8)">
+        <div class="tag-change-item-title" :class="{ tagActive: prodId == 8 || prodId == 19 || prodId == 24 }" @click="prodChange(8)">
           {{ toValueWithout("宠物主体") }}
         </div>
       </div>
@@ -194,8 +197,8 @@
       </div>
     </div>
     <div v-if="typeId != 4">
-      <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7 || prodId == 1">{{ toValueWithout("温馨提示：请上传只有") }}{{ prop == '3D真人肖像' ? '1' : '1-3' }}{{ toValueWithout("人的照片") }}</div>
-      <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8 || prodId == 2">{{ toValueWithout("温馨提示：请上传只有") }}1-3{{ toValueWithout("只宠物的照片") }}</div>
+      <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7 || prodId == 1 || prodId == 25">{{ toValueWithout("温馨提示：请上传只有") }}{{ prop == '3D真人肖像' ? '1' : '1-3' }}{{ toValueWithout("人的照片") }}</div>
+      <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8 || prodId == 2 || prodId == 24">{{ toValueWithout("温馨提示：请上传只有") }}1-3{{ toValueWithout("只宠物的照片") }}</div>
     </div>
     <div style="height: 120px;"></div>
     <div class="design-action-bar">
@@ -356,11 +359,9 @@ const typeId = ref(0)
 const getOrderStat = () => {
   badgeApi.getOrderStat({}).then((res: any) => {
     orderStat.value = res
+    prodId.value = res.prod_id
     if (res.type_id == 4) {
-      prodId.value = res.prod_id == 1 ? 1 : 19
       getKindList()
-    } else {
-      prodId.value = res.type_id == 3 ? 8 : res.prod_id
     }
     prop.value = res.prop
     typeId.value = res.type_id
@@ -371,7 +372,7 @@ const getOrderStat = () => {
 const kindList = ref([])
 const getKindList = () => {
   badgeApi.getKindList({
-    support_subject: prodId.value == 19 ? 2 : 1,
+    support_subject: getSupportSubject(),
     type_id: 4
   }).then((res: any) => {
     kindList.value = res.list
@@ -380,8 +381,15 @@ const getKindList = () => {
   })
 }
 
+const getSupportSubject = () => {
+  if (prodId.value == 19 || prodId.value == 24 || prodId.value == 8) {
+    return 2
+  } else {
+    return 1
+  }
+}
+
 const prodChange = (id: number) => {
-  console.log('prodChange', id)
   if (typeId.value == 3 && id == 7) {
     showToast(toValueWithout('人物3D冰箱贴暂未开放'))
     return 
@@ -396,7 +404,14 @@ const prodChange = (id: number) => {
       return 
     }
   }
-  prodId.value = typeId.value == 4 ? id == 8 ? 19 : 1 : id == 7 ? 7 : 8
+  if (typeId.value == 6) {
+    prodId.value = id == 8 ? 24 : 25
+  } else if (typeId.value == 4) {
+    prodId.value = id == 8 ? 19 : 1
+  } else {
+    prodId.value = id == 7 ? 7 : 8
+  }
+  console.log('prodChange', prodId.value)
   picture.value = null
   kindId.value = 0
 }
@@ -489,7 +504,7 @@ function getbase64Data(data) {
       return false;
     }
     imgurl.value = blob;
-    if (prodId.value == 7 || prodId.value == 1) {
+    if (prodId.value == 7 || prodId.value == 1 || prodId.value == 25) {
       getUploadUrl()
     }
   }
@@ -815,7 +830,7 @@ const getSundryList = () => {
   badgeApi.getSundryList({
     page: 1,
     size: 6,
-    group: prodId.value == 7 || prodId.value == 1 ? 'gp' : 'pet',
+    group: prodId.value == 7 || prodId.value == 1 || prodId.value == 25 ? 'gp' : 'pet',
   }).then((res: any) => {
     const data = res || []
     sundryList.value = data.list

src/views/badge/orderDetail.vue

@@ -6,9 +6,13 @@
     <div class="order-status">
       <div class="avatar-wrapper">
         <!-- <img v-if="shapeImage" class="avatar-back-img" :src="shapeImage" alt=""> -->
-        <div class="avatar-front-box">
+        <div class="avatar-front-box" v-if="order.type_id != 6">
           <img class="avatar-font-img" :src="imageUrl" :alt="order.kind_name" />
         </div>
+        <div class="avatar-front-box-double" v-if="order.type_id == 6">
+          <img class="avatar-font-img" :src="imageUrl" />
+          <img class="avatar-font-img" :src="backImageUrl" />
+        </div>
       </div>
     </div>
     <div class="status-info">
@@ -45,12 +49,13 @@
           <span class="product-value" v-if="order.type_id == 2">{{ order.prod_id == 7 ? toValueWithout('人物浮雕相框') : toValueWithout('宠物浮雕相框') }}</span>
           <span class="product-value" v-if="order.type_id == 3">{{ order.prod_id == 7 ? toValueWithout('人物冰箱贴') : toValueWithout('宠物冰箱贴') }}</span>
           <span class="product-value" v-if="order.type_id == 4">{{ order.prod_id == 1 ? toValueWithout('人物卡通手办') : toValueWithout('宠物卡通手办') }}</span>
+          <span class="product-value" v-if="order.type_id == 6">{{ order.prod_id == 25 ? toValueWithout('人物浮雕挂饰') : toValueWithout('宠物浮雕挂饰') }}</span>
         </div>
         <div class="product-row">
           <span class="product-label">{{ toValueWithout("尺寸") }}</span>
           <span class="product-value">{{order.model_size}}</span>
         </div>
-        <div class="product-row" v-if="shape_name">
+        <div class="product-row" v-if="shape_name && order.type_id != 6">
           <span class="product-label">{{ toValueWithout("形状") }}</span>
           <span class="product-value">{{ toValueWithout(shape_name) }}</span>
         </div>
@@ -60,20 +65,6 @@
         </div>
       </div>
     </div>
-    <!-- <div style="padding: 0 16px;">
-      <van-divider />
-    </div> -->
-    <!-- <div class="address-info" style="padding: 0 16px;">
-      <div class="address-title">收货信息</div>
-      <div class="address-row">
-        <img class="address-img" src="@/assets/badge/location.png" alt="" >
-        <span class="address-name">张先生</span>
-        <span class="address-phone">136****0731</span>
-      </div>
-      <div class="address-detail">
-        详细地址详细地址详细地址详细地址详细地址详细地址
-      </div>
-    </div> -->
     <div style="padding: 0 16px;">
       <van-divider />
     </div>
@@ -99,6 +90,7 @@ import * as badgeApi from '@/api/badge';
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { toValueWithout } from '@/lang/utils';
+
 const route = useRoute();
 const order = ref({})
 const id = ref(0)
@@ -109,17 +101,24 @@ onMounted(() => {
 
 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
-    shapeImage.value = res.shape_details.frame_path
-    shape_name.value = res.shape_details.name
+    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,
+    ];
     // if (res.shape_details) {
     //   ImageShow(res.shape_details)
     // }
@@ -209,6 +208,14 @@ function getStatus(status: number) {
     max-height: 320px;
     border-radius: 10px;
   }
+  .avatar-front-box-double {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    overflow-x: auto;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
   .progress-image-item-shadow {
     position: absolute;
     top: 0;

src/views/badge/preview.vue

@@ -35,6 +35,18 @@
           <!-- <div class="box1-round-shadow" v-if="shapeId == 1 && shapeImage == ''" style="width: 320px;height: 320px;"></div> -->
         </div>
         <div class="shape-text" :style="shapeTextStyle" v-if="shapeText">{{shapeText}}</div>
+        <!-- <div class="shape-text" :style="frontTextStyle" v-if="frontText">{{frontText}}</div>
+        <div class="shape-text" :style="backTextStyle" v-if="backText">{{backText}}</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">
@@ -54,6 +66,7 @@
         <div class="info-title" v-if="typeId == 2">{{ prodId == 7 ? toValueWithout('人物浮雕相框') : toValueWithout('宠物浮雕相框') }}</div>
         <div class="info-title" v-if="typeId == 3">{{ prodId == 7 ? toValueWithout('人物3D冰箱贴') : toValueWithout('宠物3D冰箱贴') }}</div>
         <div class="info-title" v-if="typeId == 4">{{ prodId == 1 ? toValueWithout('人物卡通手办') : toValueWithout('宠物卡通手办') }}</div>
+        <div class="info-title" v-if="typeId == 6">{{ prodId == 25 ? toValueWithout('人物浮雕挂饰') : toValueWithout('宠物浮雕挂饰') }}</div>
         <div class="info-content">{{ toValueWithout("产品类型") }}</div>
       </div>
       <div class="info-item">
@@ -80,9 +93,13 @@
           </div>
         </block>
       </div>
-      <div class="shape-box-input" v-if="imageUrl && custom_switch == 1">
+      <div class="shape-box-input" v-if="imageUrl && custom_switch == 1 && typeId == 2">
         <input class="shape-box-input-text" type="text" :placeholder="toValueWithout('请输入文字')" v-model="shapeText" @change="changeShapeText" @input="changeShapeText" @onBlur="changeShapeText" />
       </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 class="info-desc">
       下单后预计需要7天完成生产发货。<br>
@@ -103,15 +120,6 @@
             </div>
           </div>
         </block>
-        <!-- <block v-if="orderStat.use_type == 2">
-          <div class="order-item">
-            <span class="order-size">{{ item.size }}</span>
-            <span class="order-free">({{ toValueWithout("剩余兑换") }}：{{ 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 && code == 'ACAYOAAC3PFCPO3CD6DVM1'">
@@ -193,13 +201,15 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, onUnmounted } from 'vue';
+import { onMounted, ref, onUnmounted, nextTick } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { showSuccessToast, showToast, showNotify, showConfirmDialog, AddressEdit, Area } 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'
+
 const router = useRouter();
 const value = ref(0);
 const showReload = ref(false)
@@ -209,6 +219,36 @@ const currentIndex = ref(0)
 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) => {
+    // 适配 Vue 的 setData，直接更新 ref 值
+    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 code = localStorage.get('code')
 
 function compare() {
@@ -497,7 +537,10 @@ const confirm = () => {
       products: sizeList.value,
       prod_id: prodId.value,
       shape_id: shapeId.value,
-      custom_text: shapeText.value
+      custom_text: shapeText.value ? shapeText.value : frontText.value,
+      back_text: backText.value,
+      shape_ids: shapeIds.value,
+      type_id: typeId.value,
     }
     if (orderStat.value.use_type == 2) {
       parms.province_id = province_id.value
@@ -545,8 +588,11 @@ const getPosition = () => {
   badgeApi.composite({
     pid: pid.value,
     num: imgKey.value,
-    custom_text: shapeText.value,
+    custom_text: shapeText.value ? shapeText.value : frontSaveText.value,
+    back_text: backSaveText.value,
     shape_id: shapeId.value,
+    type_id: typeId.value,
+    shape_ids: shapeIds.value,
   }).then((res: any) => {
     console.log('getPosition', res)
   }).catch((err) => {
@@ -697,6 +743,7 @@ const getImageList = () => {
 }
 
 const shapeId = ref(0)
+const shapeIds = ref([])
 const shapeImage = ref('')
 
 const shapeList = ref([])
@@ -714,13 +761,29 @@ const getShapeList = () => {
     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) {
+    if (custom_switch.value == 1 && typeId.value == 2) {
       textShow(res.list[0])
     }
+    if (custom_switch.value == 1 && typeId.value == 6) {
+      shapeIds.value = res.list.map((item: any) => item.id)
+      // 根据第一个形状的 id 设置 axisz
+      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)
-  }).finally((err) => {
-    
   })
 }
 
@@ -759,6 +822,133 @@ const textShow = (item: any) => {
   }
 }
 
+const frontTextStyle = ref('')
+const backTextStyle = ref('')
+const frontTextShow = (event: any, isFront: boolean | null = null) => {
+  // 如果没有传递 isFront，从 frontKey 获取
+  if (isFront === null) {
+    isFront = frontKey.value == 1;
+  }
+  // 确保 isFront 是布尔值
+  isFront = Boolean(isFront);
+  
+  // 根据正面/背面设置不同的参数
+  let config: any = {};
+  if (isFront) {
+    // 正面文字参数（使用硬编码值或从 event 获取）
+    config = {
+      x: event.front_text_axisx || 163,
+      y: event.front_text_axisy || 222,
+      width: event.front_text_width || 700,
+      height: event.front_text_height || 700,
+      radius: event.front_text_radius || 350,
+      fontSize: event.front_font_size || 72,
+      maxLength: 18
+    };
+  } else {
+    // 背面文字参数（使用 event 中的背面专用参数，完全独立于正面参数）
+    // 优先使用 back_ 开头的参数，如果没有则使用默认值
+    config = {
+      x: event.back_text_axisx !== undefined ? event.back_text_axisx : 238,
+      y: event.back_text_axisy !== undefined ? event.back_text_axisy : 297,
+      width: event.back_text_width !== undefined ? event.back_text_width : 550,
+      height: event.back_text_height !== undefined ? event.back_text_height : 550,
+      radius: event.back_text_radius !== undefined ? event.back_text_radius : 275,
+      fontSize: event.back_font_size !== undefined ? event.back_font_size : 60,
+      maxLength: 56
+    };
+  }
+  
+  const text = isFront ? frontText.value : backText.value;
+  
+  // roundText 会计算字符位置并更新到 ref 中，Vue 会自动渲染
+  // 根据正面/背面存储到不同的配置键
+  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.x,
+      y: config.y,
+      width: config.width,
+      height: config.height,
+      radius: config.radius,
+      text: text,
+      isFront: isFront,
+      style: {
+        fontSize: config.fontSize,
+        color: event.font_color || '#000000',
+        fontWeight: event.font_weight || 'normal',
+        textAlign: 'center',
+      },
+      bindKey: bindKey,
+      cachedImageInfo: cachedInfo // 传入缓存的图片信息
+    });
+    
+    // 立即更新显示（因为使用了缓存，计算是同步的）
+    nextTick(() => {
+      const currentConfig = isFront ? roundTextConfigFront.value : roundTextConfigBack.value;
+      if (frontKey.value == (isFront ? 1 : 2) && currentConfig && currentConfig.charList) {
+        // Vue 会自动响应式更新，无需手动 setData
+      }
+    });
+  } else {
+    // 需要获取图片信息
+    textHelper.roundText({
+      shapeImage: shapeImagePath,
+      x: config.x,
+      y: config.y,
+      width: config.width,
+      height: config.height,
+      radius: config.radius,
+      text: text,
+      isFront: isFront,
+      style: {
+        fontSize: config.fontSize,
+        color: event.font_color || '#000000',
+        fontWeight: event.font_weight || 'normal',
+        textAlign: 'center',
+      },
+      bindKey: bindKey,
+      onImageInfoCached: (imageInfo: any) => {
+        // 缓存图片信息，下次输入时可以直接使用
+        cachedImageInfo.value = imageInfo;
+      }
+    });
+    
+    // 延迟更新当前显示的配置（根据 frontKey），确保数据已更新
+    const checkAndUpdate = (attempts = 0) => {
+      if (attempts > 10) return; // 最多尝试10次，避免无限循环
+      
+      const currentConfig = isFront ? roundTextConfigFront.value : roundTextConfigBack.value;
+      // 如果当前显示的是对应的面，配置已自动更新（Vue 响应式）
+      if (frontKey.value == (isFront ? 1 : 2)) {
+        if (currentConfig && currentConfig.charList && currentConfig.charList.length > 0) {
+          // Vue 会自动响应式更新，无需手动 setData
+        } 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)
@@ -770,6 +960,40 @@ const changeShapeText = (e: any) => {
   handleInput(e.target.value)
 }
 
+const frontSaveText = ref('')
+const changeFrontText = (e: any) => {
+  // 由于使用了 v-model，frontText.value 已经自动更新
+  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) => {
+  // 由于使用了 v-model，backText.value 已经自动更新
+  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-\u9fa5\s]+$/;
@@ -798,10 +1022,52 @@ const handleInput = (value: string) => {
         break;
       }
     }
-    shapeText.value = validValue;
+    if (typeId.value == 2) {
+      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;
   }
-  shapeText.value = value;
+  if (typeId.value == 2) {
+    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) => {
@@ -835,9 +1101,28 @@ const shapeChange = (item: any) => {
     imageUrl.value = originUrl.value
   }
   ImageShow(item)
-  if (custom_switch.value == 1) {
+  if (custom_switch.value == 1 && typeId.value == 2) {
     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 trialCode = ref(false)
@@ -857,7 +1142,8 @@ const getOrderStat = () => {
     console.log('getOrderStat', res)
     orderStat.value = res
     typeId.value = res.type_id
-    prodId.value = res.prod_id
+    // prodId.value = res.prod_id
+    badgeTypeId.value = res.type_id // 设置 badgeTypeId
     getSizeList()
   })
 }
@@ -1446,6 +1732,14 @@ onUnmounted(() => {
   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;
@@ -1461,6 +1755,9 @@ onUnmounted(() => {
   text-shadow: 1px 0px 1px #000000a1;
   white-space: pre-wrap;
 }
+.font-chinese {
+  font-family: chinese;
+}
 .shape-item-image-round {
   border-radius: 50%;
 }