浮雕挂饰

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%;
 }