{{item.char}}
@@ -94,7 +94,13 @@
@@ -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) {