From ae2e5a916bb8189162e1ffc9f8197ff47795b2c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 23 Sep 2024 16:29:44 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/custom-module/model-icon/index.vue |  90 ++++++++++
 .../model-icon/model-icon-style.vue           | 162 ++++++++++++++++++
 .../model-image/model-image-style.vue         |   2 +-
 .../model-text/model-text-style.vue           |   2 +-
 src/components/model-carousel/index.vue       |   4 +-
 .../model-custom/components/index.scss        |  15 +-
 .../model-custom/components/index.vue         |   2 +-
 src/components/model-goods-list/index.vue     |  14 +-
 src/components/model-seckill/index.vue        |   8 +-
 9 files changed, 282 insertions(+), 17 deletions(-)
 create mode 100644 src/components/common/custom-module/model-icon/index.vue
 create mode 100644 src/components/common/custom-module/model-icon/model-icon-style.vue

diff --git a/src/components/common/custom-module/model-icon/index.vue b/src/components/common/custom-module/model-icon/index.vue
new file mode 100644
index 00000000..aac5af13
--- /dev/null
+++ b/src/components/common/custom-module/model-icon/index.vue
@@ -0,0 +1,90 @@
+<template>
+    <div class="img-outer re oh" :style="com_style">
+        <div :style="text_style" class="break">
+            <template v-if="form.is_rich_text == '1'">
+                <div class="rich-text-content" :innerHTML="text_title"></div>
+            </template>
+            <template v-else>
+                {{ text_title }}
+            </template>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { radius_computer, padding_computer } from '@/utils';
+import { isEmpty } from 'lodash';
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => {
+            return {};
+        },
+        required: true
+    },
+    sourceList: {
+        type: Object,
+        default: () => {
+            return {};
+        }
+    },
+    isPercentage: {
+        type: Boolean,
+        default: false
+    }
+});
+// 用于页面判断显示
+const form = reactive(props.value);
+const text_title = computed(() => {
+    let text = '';
+    if (!isEmpty(form.text_title)) {
+        text = form.text_title;
+    } else if(!isEmpty(props.sourceList[form.data_source_id])) {
+        text =  props.sourceList[form.data_source_id];
+    } else if(!props.isPercentage){
+        text = '请在此输入文字';
+    }
+    return text;
+});
+
+const text_style = computed(() => {
+    let style = `font-size: ${ form.text_size }px;color: ${ form.text_color }; text-align: ${ form.text_location }; transform: rotate(${form.text_rotate}deg);text-decoration: ${ form.text_option };${ padding_computer(form.text_padding) };`;
+    if (form.text_weight == 'italic') {
+        style += `font-style: italic`;
+    } else if (form.text_weight == '500') {
+        style += `font-weight: 500`;
+    }
+    return style;
+});
+
+const com_style = computed(() => {
+    let style = `${ set_count() } background-color: ${ form.com_bg }; ${ radius_computer(form.bg_radius) }`;
+    if (form.border_show == '1') {
+        style += `border: ${form.border_size}px ${form.border_style} ${form.border_color};`;
+    }
+    // 是富文本并且开启了上下滚动的开关
+    if (form.is_rich_text == '1' && form.is_up_down == '1') {
+        style += `overflow-y: auto;`
+    }
+    return style;
+});
+const set_count = () => {
+    if (props.isPercentage) {
+        return '';
+    } else {
+        return `width: ${ form.com_width }px; height: ${ form.com_height }px;`;
+    }
+};
+</script>
+<style lang="scss" scoped>
+.break{
+    word-wrap: break-word;
+    word-break:break-all;
+}
+.rich-text-content {
+    white-space: normal;
+    word-break:break-all;
+    * {
+        max-width: 100%;
+    }
+}
+</style>
diff --git a/src/components/common/custom-module/model-icon/model-icon-style.vue b/src/components/common/custom-module/model-icon/model-icon-style.vue
new file mode 100644
index 00000000..ccf1e73c
--- /dev/null
+++ b/src/components/common/custom-module/model-icon/model-icon-style.vue
@@ -0,0 +1,162 @@
+<template>
+    <div class="w h bg-f">
+        <el-form :model="form" label-width="70">
+            <card-container>
+                <div class="mb-12">文本设置</div>
+                <el-form-item label="文本内容">
+                    <el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" clearable :rows="3" @input="text_change('1')"></el-input>
+                </el-form-item>
+                <el-form-item label="数据字段">
+                    <el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择图片数据字段" size="default" class="flex-1" @change="text_change('2')">
+                        <el-option v-for="item in options.filter((item) => item.type == 'icon')" :key="item.field" :label="item.name" :value="item.field" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="链接">
+                    <url-value v-model="form.text_link"></url-value>
+                </el-form-item>
+                <el-form-item label="文字颜色">
+                    <color-picker v-model="form.text_color" default-color="#FF3F3F"></color-picker>
+                </el-form-item>
+                <el-form-item label="文字大小">
+                    <el-radio-group v-model="form.text_weight">
+                        <el-radio value="500">加粗</el-radio>
+                        <el-radio value="normal">正常</el-radio>
+                        <el-radio value="italic">倾斜</el-radio>
+                    </el-radio-group>
+                    <el-form-item label="字号" label-width="40" class="mb-0 w">
+                        <slider v-model="form.text_size" :max="100"></slider>
+                    </el-form-item>
+                </el-form-item>
+                <el-form-item label="字符选项">
+                    <el-radio-group v-model="form.text_option">
+                        <el-radio value="none"><span style="text-decoration: none">Aa</span></el-radio>
+                        <el-radio value="underline"><span style="text-decoration: underline">Aa</span></el-radio>
+                        <el-radio value="line-through"><span style="text-decoration: line-through">Aa</span></el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="文字位置">
+                    <el-radio-group v-model="form.text_location" is-button>
+                        <el-tooltip content="左对齐" placement="top" effect="light">
+                            <el-radio-button value="left"><icon name="iconfont icon-left"></icon></el-radio-button>
+                        </el-tooltip>
+                        <el-tooltip content="居中" placement="top" effect="light">
+                            <el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
+                        </el-tooltip>
+                        <el-tooltip content="右对齐" placement="top" effect="light">
+                            <el-radio-button value="right"><icon name="iconfont icon-right"></icon></el-radio-button>
+                        </el-tooltip>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="内边距">
+                    <padding :value="form.text_padding" @update:value="padding_change"></padding>
+                </el-form-item>
+                <el-form-item label="旋转角度">
+                    <slider v-model="form.text_rotate" :max="1000"></slider>
+                </el-form-item>
+                <el-form-item label="是否置底">
+                    <el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
+                </el-form-item>
+            </card-container>
+            <div class="bg-f5 divider-line" />
+            <card-container>
+                <div class="mb-12">容器设置</div>
+                <el-form-item label="容器宽度">
+                    <slider v-model="form.com_width" :max="1000"></slider>
+                </el-form-item>
+                <el-form-item label="容器高度">
+                    <slider v-model="form.com_height" :max="1000"></slider>
+                </el-form-item>
+                <el-form-item label="背景颜色">
+                    <color-picker v-model="form.com_bg" default-color="#FF3F3F"></color-picker>
+                </el-form-item>
+                <el-form-item label="圆角">
+                    <radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>
+                </el-form-item>
+            </card-container>
+            <div class="bg-f5 divider-line" />
+            <card-container>
+                <div class="mb-12">边框设置</div>
+                <el-form-item label="边框显示">
+                    <el-switch v-model="form.border_show" active-value="1" inactive-value="0"/>
+                </el-form-item>
+                <template v-if="form.border_show == '1'">
+                    <el-form-item label="边框颜色">
+                        <color-picker v-model="form.border_color" default-color="#FF3F3F"></color-picker>
+                    </el-form-item>
+                    <el-form-item label="边框样式">
+                        <el-radio-group v-model="form.border_style">
+                            <el-radio value="dashed"><div class="border-style-item" style="border: 1px dashed #979797"></div></el-radio>
+                            <el-radio value="solid"><div class="border-style-item" style="border: 1px solid #979797"></div></el-radio>
+                            <el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="边框粗细">
+                        <slider v-model="form.border_size" :max="1000"></slider>
+                    </el-form-item>
+                </template>
+            </card-container>
+        </el-form>
+    </div>
+</template>
+<script setup lang="ts">
+import { location_compute } from '@/utils';
+import { pick, cloneDeep } from 'lodash';
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    options: {
+        type: Array<any>,
+        default: () => [],
+    },
+});
+// 默认值
+const state = reactive({
+    diy_data: props.value,
+});
+// 如果需要解构，确保使用toRefs
+const { diy_data } = toRefs(state);
+const form = ref(diy_data.value.com_data);
+const center_height = defineModel('height', { type: Number, default: 0 });
+
+const padding_change = (padding: any) => {
+    form.value.text_padding = Object.assign(form.value.text_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
+};
+const bg_radius_change = (radius: any) => {
+    form.value.bg_radius = Object.assign(form.value.bg_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
+};
+
+const text_change = (key: string) => {
+    if (key == '2') {
+        form.value.text_title = '';
+    } else {
+        form.value.data_source_id = '';
+    }
+};
+
+watch(
+    diy_data,
+    (val) => {
+        diy_data.value.location.x = location_compute(form.value.com_width, val.location.x, 390);
+        diy_data.value.location.y = location_compute(form.value.com_height, val.location.y, center_height.value);
+        diy_data.value.location.record_x = location_compute(form.value.com_width, val.location.record_x, 390);
+        diy_data.value.location.record_y = location_compute(form.value.com_height, val.location.record_y, center_height.value);
+        diy_data.value.location.staging_y = location_compute(form.value.com_height, val.location.staging_y, center_height.value);
+
+        form.value.staging_height = form.value.com_height;
+    },
+    { immediate: true, deep: true }
+);
+</script>
+<style lang="scss" scoped>
+.card.mb-8 {
+    .el-form-item:last-child {
+        margin-bottom: 0;
+    }
+}
+.border-style-item {
+    width: 3rem;
+    height: 2rem;
+}
+</style>
diff --git a/src/components/common/custom-module/model-image/model-image-style.vue b/src/components/common/custom-module/model-image/model-image-style.vue
index e0a7c173..0fb6a79a 100644
--- a/src/components/common/custom-module/model-image/model-image-style.vue
+++ b/src/components/common/custom-module/model-image/model-image-style.vue
@@ -7,7 +7,7 @@
                     <upload v-model="form.img" :limit="1" size="50" @update:model-value="img_src_change('1')"></upload>
                 </el-form-item>
                 <el-form-item label="数据字段">
-                    <el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择图片数据字段" size="default" class="flex-1" @change="img_src_change('2')">
+                    <el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="img_src_change('2')">
                         <el-option v-for="item in options.filter(item => item.type == 'images')" :key="item.field" :label="item.name" :value="item.field" />
                     </el-select>
                 </el-form-item>
diff --git a/src/components/common/custom-module/model-text/model-text-style.vue b/src/components/common/custom-module/model-text/model-text-style.vue
index 276ec3d3..932a09b1 100644
--- a/src/components/common/custom-module/model-text/model-text-style.vue
+++ b/src/components/common/custom-module/model-text/model-text-style.vue
@@ -7,7 +7,7 @@
                     <el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" clearable :rows="3" @input="text_change('1')"></el-input>
                 </el-form-item>
                 <el-form-item label="数据字段">
-                    <el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择图片数据字段" size="default" class="flex-1" @change="text_change('2')">
+                    <el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="text_change('2')">
                         <el-option v-for="item in options.filter((item) => item.type == 'text')" :key="item.field" :label="item.name" :value="item.field" />
                     </el-select>
                 </el-form-item>
diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index cfa01c7f..dfb5bd41 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -34,7 +34,7 @@
                             <template v-else>
                                 <el-icon :class="`iconfont ${ !isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang' } size-14`" :style="`color:${new_style.video_icon_color};`" />
                             </template>
-                            <span v-if="!isEmpty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;`">{{ item.video_title }}</span>
+                            <span v-if="!isEmpty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;text-wrap: nowrap;`">{{ item.video_title }}</span>
                         </div>
                     </div>
                 </swiper-slide>
@@ -48,7 +48,7 @@
                             <template v-else>
                                 <el-icon :class="`iconfont ${ !isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang' } size-14`" :style="`color:${new_style.video_icon_color};`" />
                             </template>
-                            <span v-if="!isEmpty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;`">{{ item.video_title }}</span>
+                            <span v-if="!isEmpty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;text-wrap: nowrap;`">{{ item.video_title }}</span>
                         </div>
                     </div>
                 </swiper-slide>
diff --git a/src/components/model-custom/components/index.scss b/src/components/model-custom/components/index.scss
index 4b2e090e..f041a7d6 100644
--- a/src/components/model-custom/components/index.scss
+++ b/src/components/model-custom/components/index.scss
@@ -66,7 +66,20 @@
             .vdr-handle.vdr-handle-bm,
             .vdr-handle.vdr-handle-br {
                 display: block !important;
-                z-index: 2;
+                z-index: 1;
+            }
+        }
+        :deep(.plug-in-show-tabs.vdr-handle-z-index.vdr-container) {
+            .vdr-handle.vdr-handle-tl,
+            .vdr-handle.vdr-handle-tr,
+            .vdr-handle.vdr-handle-tm,
+            .vdr-handle.vdr-handle-ml,
+            .vdr-handle.vdr-handle-mr,
+            .vdr-handle.vdr-handle-bl,
+            .vdr-handle.vdr-handle-bm,
+            .vdr-handle.vdr-handle-br {
+                display: block !important;
+                z-index: 0;
             }
         }
         .plug-in-border {
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index ddb05b21..aee1b007 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -41,7 +41,7 @@
                         <div class="w h" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
                             <DraggableContainer v-if="draggable_container" :reference-line-visible="true" :disabled="false" reference-line-color="#ddd" @selectstart.prevent @contextmenu.prevent @dragstart.prevent>
                                 <!-- @mouseover="on_choose(index)" -->
-                                <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{ 'plug-in-show-tabs': item.show_tabs == '1'}" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index)" @resize-end="resizingHandle($event, item.key, index)">
+                                <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{ 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1'}" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index)" @resize-end="resizingHandle($event, item.key, index)">
                                     <div v-if="item.show_tabs == '1'" class="plug-in-right" chosenClass="close">
                                         <el-icon class="iconfont icon-del" @click.stop="del(index)" />
                                         <el-icon class="iconfont icon-copy" @click.stop="copy(index)" />
diff --git a/src/components/model-goods-list/index.vue b/src/components/model-goods-list/index.vue
index d7709531..16f8c4f7 100644
--- a/src/components/model-goods-list/index.vue
+++ b/src/components/model-goods-list/index.vue
@@ -6,7 +6,7 @@
                     <template v-if="theme == '6'">
                         <div :class="['flex-row align-c jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]">
                             <div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
-                            <div v-if="is_show('price')" class="num nowrap" :style="`color: ${new_style.shop_price_color}`">
+                            <div v-if="is_show('price') && !isEmpty(item.min_price)" class="num nowrap" :style="`color: ${new_style.shop_price_color}`">
                                 <span class="identifying">{{ item.show_price_symbol }}</span
                                 ><span :style="trends_config('price')">{{ item.min_price }}</span>
                                 <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
@@ -31,12 +31,12 @@
                             </div>
                             <div v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5 oh">
                                 <div :class="[form.is_price_solo == '1' ? 'flex-row align-c nowrap' : 'flex-col gap-5']">
-                                    <div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
+                                    <div v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="`color: ${new_style.shop_price_color}`">
                                         <span class="identifying">{{ item.show_price_symbol }}</span
                                         ><span :style="trends_config('price')">{{ item.min_price }}</span>
                                         <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                                     </div>
-                                    <div v-if="show_content && is_show('original_price')" class="size-10 flex">
+                                    <div v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="size-10 flex">
                                         <span class="original-price-left"></span
                                         ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
                                             >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
@@ -66,12 +66,12 @@
                             </div>
                             <div v-else class="flex-row align-c jc-sb">
                                 <div class="flex-row align-c nowrap">
-                                    <div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
+                                    <div v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="`color: ${new_style.shop_price_color}`">
                                         <span class="identifying">{{ item.show_price_symbol }}</span
                                         ><span :style="trends_config('price')">{{ item.min_price }}</span>
                                         <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                                     </div>
-                                    <div v-if="show_content && is_show('original_price')" class="size-10 flex">
+                                    <div v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="size-10 flex">
                                         <span class="original-price-left"></span
                                         ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
                                             >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
@@ -115,12 +115,12 @@
                                 </div>
                                 <div class="flex-row align-c jc-sb">
                                     <div class="flex-row align-c nowrap">
-                                        <div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
+                                        <div v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="`color: ${new_style.shop_price_color}`">
                                             <span class="identifying">{{ item.show_price_symbol }}</span
                                             ><span :style="trends_config('price')">{{ item.min_price }}</span>
                                             <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                                         </div>
-                                        <div v-if="show_content && is_show('original_price')" class="size-10 flex">
+                                        <div v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="size-10 flex">
                                             <span class="original-price-left"></span
                                             ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
                                                 >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
diff --git a/src/components/model-seckill/index.vue b/src/components/model-seckill/index.vue
index f352d9f3..28b9192b 100644
--- a/src/components/model-seckill/index.vue
+++ b/src/components/model-seckill/index.vue
@@ -66,13 +66,13 @@
                             </div>
                             <div class="flex-row align-e gap-10 jc-sb">
                                 <div class="flex-col gap-5">
-                                    <div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
+                                    <div v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="`color: ${new_style.shop_price_color}`">
                                         <span v-if="form.shop_style_type == '1'" class="size-10 pr-4">秒杀价</span>
                                         <span class="identifying">{{ item.show_price_symbol }}</span
                                         ><span :style="trends_config('price')">{{ item.min_price }}</span>
                                         <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                                     </div>
-                                    <div v-if="is_show('original_price')" class="size-11 flex" :style="`color: ${new_style.original_price_color}`">
+                                    <div v-if="is_show('original_price') && !isEmpty(item.min_original_price)" class="size-11 flex" :style="`color: ${new_style.original_price_color}`">
                                         <span class="original-price text-line-1 flex-1"
                                             >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                             <template v-if="is_show('original_price_unit')">
@@ -127,13 +127,13 @@
                             </div>
                             <div class="flex-row align-e gap-10 jc-sb">
                                 <div class="flex-col gap-5">
-                                    <div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
+                                    <div v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="`color: ${new_style.shop_price_color}`">
                                         <span v-if="form.shop_style_type == '1'" class="size-10 pr-4">秒杀价</span>
                                         <span class="identifying">{{ item.show_price_symbol }}</span
                                         ><span :style="trends_config('price')">{{ item.min_price }}</span>
                                         <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                                     </div>
-                                    <div v-if="is_show('original_price')" class="size-11 flex" :style="`color: ${new_style.original_price_color}`">
+                                    <div v-if="is_show('original_price') && !isEmpty(item.min_original_price)" class="size-11 flex" :style="`color: ${new_style.original_price_color}`">
                                         <span class="original-price text-line-1 flex-1"
                                             >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                             <template v-if="is_show('original_price_unit')">

From efe8ac7255c34267c423afca8a5237fc39c6395d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 23 Sep 2024 17:31:38 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/custom-module/model-icon/index.vue | 56 +++++--------------
 .../model-icon/model-icon-style.vue           | 46 ++++++---------
 .../model-lines/model-lines-style.vue         |  2 +-
 .../model-text/model-text-style.vue           |  2 +-
 src/components/model-carousel/index.vue       |  2 +
 .../model-custom/components/index-default.ts  | 38 +++++++++++++
 .../model-custom/components/index.vue         | 10 +++-
 src/components/model-custom/index.vue         |  3 +
 .../model-custom/model-custom-content.vue     |  3 +
 9 files changed, 86 insertions(+), 76 deletions(-)

diff --git a/src/components/common/custom-module/model-icon/index.vue b/src/components/common/custom-module/model-icon/index.vue
index aac5af13..3528a066 100644
--- a/src/components/common/custom-module/model-icon/index.vue
+++ b/src/components/common/custom-module/model-icon/index.vue
@@ -1,18 +1,12 @@
 <template>
     <div class="img-outer re oh" :style="com_style">
-        <div :style="text_style" class="break">
-            <template v-if="form.is_rich_text == '1'">
-                <div class="rich-text-content" :innerHTML="text_title"></div>
-            </template>
-            <template v-else>
-                {{ text_title }}
-            </template>
+        <div :style="icon_style" class="flex-row">
+            <icon :name="form.icon_class" :color="form.icon_color" :size="form.icon_size"></icon>
         </div>
     </div>
 </template>
 <script setup lang="ts">
 import { radius_computer, padding_computer } from '@/utils';
-import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -34,36 +28,23 @@ const props = defineProps({
 });
 // 用于页面判断显示
 const form = reactive(props.value);
-const text_title = computed(() => {
-    let text = '';
-    if (!isEmpty(form.text_title)) {
-        text = form.text_title;
-    } else if(!isEmpty(props.sourceList[form.data_source_id])) {
-        text =  props.sourceList[form.data_source_id];
-    } else if(!props.isPercentage){
-        text = '请在此输入文字';
-    }
-    return text;
-});
-
-const text_style = computed(() => {
-    let style = `font-size: ${ form.text_size }px;color: ${ form.text_color }; text-align: ${ form.text_location }; transform: rotate(${form.text_rotate}deg);text-decoration: ${ form.text_option };${ padding_computer(form.text_padding) };`;
-    if (form.text_weight == 'italic') {
-        style += `font-style: italic`;
-    } else if (form.text_weight == '500') {
-        style += `font-weight: 500`;
-    }
-    return style;
-});
 
 const com_style = computed(() => {
     let style = `${ set_count() } background-color: ${ form.com_bg }; ${ radius_computer(form.bg_radius) }`;
     if (form.border_show == '1') {
         style += `border: ${form.border_size}px ${form.border_style} ${form.border_color};`;
     }
-    // 是富文本并且开启了上下滚动的开关
-    if (form.is_rich_text == '1' && form.is_up_down == '1') {
-        style += `overflow-y: auto;`
+    return style;
+});
+
+const icon_style = computed(() => {
+    let style = `transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding) };`;
+    if (form.icon_location == 'center') {
+        style += `justify-content: center;`;
+    } else if (form.icon_location == 'left') {
+        style += `justify-content: flex-start;`;
+    } else if (form.icon_location == 'right') {
+        style += `justify-content: flex-end;`;
     }
     return style;
 });
@@ -76,15 +57,4 @@ const set_count = () => {
 };
 </script>
 <style lang="scss" scoped>
-.break{
-    word-wrap: break-word;
-    word-break:break-all;
-}
-.rich-text-content {
-    white-space: normal;
-    word-break:break-all;
-    * {
-        max-width: 100%;
-    }
-}
 </style>
diff --git a/src/components/common/custom-module/model-icon/model-icon-style.vue b/src/components/common/custom-module/model-icon/model-icon-style.vue
index ccf1e73c..5765b6cc 100644
--- a/src/components/common/custom-module/model-icon/model-icon-style.vue
+++ b/src/components/common/custom-module/model-icon/model-icon-style.vue
@@ -3,39 +3,25 @@
         <el-form :model="form" label-width="70">
             <card-container>
                 <div class="mb-12">文本设置</div>
-                <el-form-item label="文本内容">
-                    <el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" clearable :rows="3" @input="text_change('1')"></el-input>
+                <el-form-item label="选择图标">
+                    <upload v-model:icon-value="form.icon_class" :limit="1" size="50" is-icon type="icon" @update:model-value="icon_change('1')"></upload>
                 </el-form-item>
                 <el-form-item label="数据字段">
-                    <el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择图片数据字段" size="default" class="flex-1" @change="text_change('2')">
+                    <el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="icon_change('2')">
                         <el-option v-for="item in options.filter((item) => item.type == 'icon')" :key="item.field" :label="item.name" :value="item.field" />
                     </el-select>
                 </el-form-item>
                 <el-form-item label="链接">
-                    <url-value v-model="form.text_link"></url-value>
+                    <url-value v-model="form.icon_link"></url-value>
                 </el-form-item>
-                <el-form-item label="文字颜色">
-                    <color-picker v-model="form.text_color" default-color="#FF3F3F"></color-picker>
+                <el-form-item label="图标颜色">
+                    <color-picker v-model="form.icon_color" default-color="#FF3F3F"></color-picker>
                 </el-form-item>
-                <el-form-item label="文字大小">
-                    <el-radio-group v-model="form.text_weight">
-                        <el-radio value="500">加粗</el-radio>
-                        <el-radio value="normal">正常</el-radio>
-                        <el-radio value="italic">倾斜</el-radio>
-                    </el-radio-group>
-                    <el-form-item label="字号" label-width="40" class="mb-0 w">
-                        <slider v-model="form.text_size" :max="100"></slider>
-                    </el-form-item>
+                <el-form-item label="图标大小">
+                    <slider v-model="form.icon_size" :max="100"></slider>
                 </el-form-item>
-                <el-form-item label="字符选项">
-                    <el-radio-group v-model="form.text_option">
-                        <el-radio value="none"><span style="text-decoration: none">Aa</span></el-radio>
-                        <el-radio value="underline"><span style="text-decoration: underline">Aa</span></el-radio>
-                        <el-radio value="line-through"><span style="text-decoration: line-through">Aa</span></el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item label="文字位置">
-                    <el-radio-group v-model="form.text_location" is-button>
+                <el-form-item label="图标位置">
+                    <el-radio-group v-model="form.icon_location" is-button>
                         <el-tooltip content="左对齐" placement="top" effect="light">
                             <el-radio-button value="left"><icon name="iconfont icon-left"></icon></el-radio-button>
                         </el-tooltip>
@@ -48,10 +34,10 @@
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item label="内边距">
-                    <padding :value="form.text_padding" @update:value="padding_change"></padding>
+                    <padding :value="form.icon_padding" @update:value="padding_change"></padding>
                 </el-form-item>
                 <el-form-item label="旋转角度">
-                    <slider v-model="form.text_rotate" :max="1000"></slider>
+                    <slider v-model="form.icon_rotate" :max="1000"></slider>
                 </el-form-item>
                 <el-form-item label="是否置底">
                     <el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
@@ -67,7 +53,7 @@
                     <slider v-model="form.com_height" :max="1000"></slider>
                 </el-form-item>
                 <el-form-item label="背景颜色">
-                    <color-picker v-model="form.com_bg" default-color="#FF3F3F"></color-picker>
+                    <color-picker v-model="form.com_bg"></color-picker>
                 </el-form-item>
                 <el-form-item label="圆角">
                     <radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>
@@ -121,15 +107,15 @@ const form = ref(diy_data.value.com_data);
 const center_height = defineModel('height', { type: Number, default: 0 });
 
 const padding_change = (padding: any) => {
-    form.value.text_padding = Object.assign(form.value.text_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
+    form.value.icon_padding = Object.assign(form.value.icon_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
 };
 const bg_radius_change = (radius: any) => {
     form.value.bg_radius = Object.assign(form.value.bg_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
 };
 
-const text_change = (key: string) => {
+const icon_change = (key: string) => {
     if (key == '2') {
-        form.value.text_title = '';
+        form.value.icon_title = '';
     } else {
         form.value.data_source_id = '';
     }
diff --git a/src/components/common/custom-module/model-lines/model-lines-style.vue b/src/components/common/custom-module/model-lines/model-lines-style.vue
index 1dc49af5..bfa17240 100644
--- a/src/components/common/custom-module/model-lines/model-lines-style.vue
+++ b/src/components/common/custom-module/model-lines/model-lines-style.vue
@@ -29,7 +29,7 @@
                     <slider v-model="form.line_size" :min="1" :max="100"></slider>
                 </el-form-item>
                 <el-form-item label="线条颜色">
-                    <color-picker v-model="form.line_color" default-color="#FF3F3F"></color-picker>
+                    <color-picker v-model="form.line_color"></color-picker>
                 </el-form-item>
                 <el-form-item label="是否置底">
                     <el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
diff --git a/src/components/common/custom-module/model-text/model-text-style.vue b/src/components/common/custom-module/model-text/model-text-style.vue
index 932a09b1..cb758d34 100644
--- a/src/components/common/custom-module/model-text/model-text-style.vue
+++ b/src/components/common/custom-module/model-text/model-text-style.vue
@@ -73,7 +73,7 @@
                     <slider v-model="form.com_height" :max="1000"></slider>
                 </el-form-item>
                 <el-form-item label="背景颜色">
-                    <color-picker v-model="form.com_bg" default-color="#FF3F3F"></color-picker>
+                    <color-picker v-model="form.com_bg"></color-picker>
                 </el-form-item>
                 <el-form-item label="圆角">
                     <radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>
diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index dfb5bd41..cc1bc1dc 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -309,5 +309,7 @@ const slideChange = (swiper: { realIndex: number }) => {
 }
 .video-class {
     max-width: 100%;
+    margin-right: 10px;
+    margin-left: 10px;
 }
 </style>
diff --git a/src/components/model-custom/components/index-default.ts b/src/components/model-custom/components/index-default.ts
index 9c6535ea..0f90dacc 100644
--- a/src/components/model-custom/components/index-default.ts
+++ b/src/components/model-custom/components/index-default.ts
@@ -82,6 +82,44 @@ export const line_com_data = {
     bottom_up: '1',
 }
 
+// icon的默认值
+export const icon_com_data = {
+    com_width: 36,
+    com_height: 36,
+    staging_height: 36,
+    icon_class: '',
+    data_source_id: '',
+    data_source_list: {},
+    icon_link: {},
+    is_rich_icon: '0',
+    is_up_down: '1',
+    icon_color: '#000',
+    icon_weight: 'normal',
+    icon_size: 12,
+    icon_option: 'none',
+    icon_location: 'left',
+    icon_padding: {
+        padding: 0,
+        padding_top: 0,
+        padding_bottom: 0,
+        padding_left: 0,
+        padding_right: 0,
+    },
+    icon_rotate: 0,
+    border_show: '0',
+    border_color: '#FF5D5D',
+    border_style: 'solid',
+    bg_radius: {
+        radius: 0,
+        radius_top_left: 0,
+        radius_top_right: 0,
+        radius_bottom_left: 0,
+        radius_bottom_right: 0,
+    },
+    border_size: 1,
+    com_bg: '',
+    bottom_up: '1',
+}
 // 判断两个矩形是否有交集或者被包裹
 export const isRectangleIntersecting = (rect1: react1, rect2: react1) => {
     // 矩形的格式为 { x, y, width, height }
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index aee1b007..83dbb2a4 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -56,6 +56,9 @@
                                         <template v-else-if="item.key == 'auxiliary-line'">
                                             <model-lines :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-lines>
                                         </template>
+                                        <template v-else-if="item.key == 'icon'">
+                                            <model-icon :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-icon>
+                                        </template>
                                     </div>
                                 </Vue3DraggableResizable>
                             </DraggableContainer>
@@ -82,7 +85,7 @@
 <script setup lang="ts">
 import { cloneDeep, isEmpty } from 'lodash';
 import { get_math } from '@/utils';
-import { text_com_data, img_com_data, line_com_data, isRectangleIntersecting } from "./index-default";
+import { text_com_data, img_com_data, line_com_data, icon_com_data, isRectangleIntersecting } from "./index-default";
 // 删除
 const app = getCurrentInstance();
 //#region 传递参数和传出数据的处理
@@ -115,6 +118,11 @@ const components = reactive([
                 name: '线条',
                 com_data: line_com_data,
             },
+            {
+                key: 'icon',
+                name: '图标',
+                com_data: icon_com_data,
+            },
         ],
     },
 ]);
diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 15d9e1b2..3f3f344a 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -11,6 +11,9 @@
                 <template v-else-if="item.key == 'auxiliary-line'">
                     <model-lines :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-lines>
                 </template>
+                <template v-else-if="item.key == 'icon'">
+                    <model-icon :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-icon>
+                </template>
             </div>
         </div>
     </div>
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 9f4a7d25..115855f5 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -32,6 +32,9 @@
                     <template v-else-if="diy_data.key == 'auxiliary-line'">
                         <model-lines-style :key="key" v-model:height="center_height" :value="diy_data"></model-lines-style>
                     </template>
+                    <template v-else-if="diy_data.key == 'icon'">
+                        <model-icon-style :key="key" v-model:height="center_height" :value="diy_data"></model-icon-style>
+                    </template>
                     <template v-else>
                         <div class="w h flex align-c bg-f">
                             <no-data></no-data>