新增：新增产品蝴蝶礼盒款

src/views/badge/preview.vue

@@ -35,8 +35,8 @@
           <!-- <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="topTextStyle" v-if="topText">{{topText}}</div>
-        <div class="shape-text" :style="backTextStyle" v-if="backText">{{backText}}</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>
@@ -94,7 +94,13 @@
         </block>
       </div>
       <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 v-if="shapeId == 27 || shapeId == 28">
+          <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" />
@@ -538,9 +544,11 @@ const confirm = () => {
       prod_id: prodId.value,
       shape_id: shapeId.value,
       custom_text: shapeText.value ? shapeText.value : frontText.value,
-      back_text: backText.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
@@ -589,16 +597,16 @@ const getPosition = () => {
     pid: pid.value,
     num: imgKey.value,
     custom_text: shapeText.value ? shapeText.value : frontSaveText.value,
-    back_text: backSaveText.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)
-  }).finally((err) => {
-    
   })
 }
 
@@ -762,6 +770,12 @@ const getShapeList = () => {
     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) {
@@ -805,7 +819,9 @@ const ImageShow = (item: any) => {
 }
 
 const shapeTextStyle = ref('')
-const textShow = (item: any) => {
+const topTextStyle = ref('')
+const bottomTextStyle = ref('')
+const textShow = (item: any, type: string = 'shape') => {
   const scale = 0.6;
   const img = new Image()
   img.src = item.frame_path
@@ -818,7 +834,13 @@ const textShow = (item: any) => {
     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);
-    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};`
+    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};`
+    }
   }
 }
 
@@ -960,6 +982,38 @@ const changeShapeText = (e: any) => {
   handleInput(e.target.value)
 }
 
+const topText = ref('')
+const changeTopText = (e: any) => {
+  console.log('changeTopText', e.target.value)
+  if (!validateInput(e.target.value)) {
+    showToast('输入的文字不能包含特殊符号！')
+    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, '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('输入的文字不能包含特殊符号！')
+    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, '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) => {
   // 由于使用了 v-model，frontText.value 已经自动更新
@@ -999,7 +1053,7 @@ const validateInput = (input: string) => {
   return regex.test(input);
 }
 
-const handleInput = (value: string) => {
+const handleInput = (value: string, type: string = 'shape') => {
   let byteLength = calculateByteLength(value);
   console.log('byteLength', byteLength, limitCount.value)
   if (byteLength > limitCount.value) {
@@ -1022,7 +1076,11 @@ const handleInput = (value: string) => {
       }
     }
     if (typeId.value == 2) {
-      shapeText.value = validValue;
+      if (shapeId.value == 27 || shapeId.value == 28) {
+        type == 'top' ? topText.value = validValue : bottomText.value = validValue;
+      } else {
+        shapeText.value = validValue;
+      }
     } else {
       if (axisz.value == 1) {
         frontText.value = validValue;
@@ -1046,7 +1104,11 @@ const handleInput = (value: string) => {
     return;
   }
   if (typeId.value == 2) {
-    shapeText.value = value;
+    if (shapeId.value == 27 || shapeId.value == 28) {
+      type == 'top' ? topText.value = value : bottomText.value = value;
+    } else {
+      shapeText.value = value;
+    }
   } else {
     if (axisz.value == 1) {
       frontText.value = value;
@@ -1101,6 +1163,12 @@ const shapeChange = (item: any) => {
   }
   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) {