From 9ffd40a2f4f7768f29ea0c3a649052f13b0f8410 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 22 Aug 2024 15:05:39 +0800
Subject: [PATCH 1/8] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-module/model-image/index.vue       |  13 ++-
 .../model-image/model-image-style.vue         |  27 ++---
 .../common/custom-module/model-text/index.vue |  22 +++-
 .../model-text/model-text-style.vue           |  27 ++---
 .../common/product-show-config/index.vue      |   2 +-
 .../common/url-value/url-value-dialog.vue     |   2 +
 .../model-custom/components/index.vue         |   9 +-
 src/components/model-custom/index.vue         |   6 +-
 .../model-custom/model-custom-content.vue     | 102 ++++++++++++++----
 src/components/model-shop-list/index.vue      |  11 +-
 .../model-shop-tabs-styles.vue                |   7 +-
 src/layout/components/main/default/custom.ts  |   2 +
 .../components/main/default/shop-tabs.ts      |   6 +-
 13 files changed, 161 insertions(+), 75 deletions(-)

diff --git a/src/components/common/custom-module/model-image/index.vue b/src/components/common/custom-module/model-image/index.vue
index c83a12f6..6b8c8ace 100644
--- a/src/components/common/custom-module/model-image/index.vue
+++ b/src/components/common/custom-module/model-image/index.vue
@@ -14,6 +14,12 @@ const props = defineProps({
         },
         required: true
     },
+    sourceList: {
+        type: Object,
+        default: () => {
+            return {};
+        }
+    },
     isPercentage: {
         type: Boolean,
         default: false
@@ -21,13 +27,14 @@ const props = defineProps({
 });
 // 用于页面判断显示
 const form = reactive(props.value);
-
 const img_src = computed(() => {
     if (!isEmpty(form.img_src[0])) {
         return form.img_src[0];
     } else {
-        return {
-            url: form.data_source_list.url
+        if (!isEmpty(props.sourceList)) {
+            return props.sourceList[form.data_source_id];
+        } else {
+            return '';
         }
     }
 });
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 d6dfbd33..f8529e62 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
@@ -4,19 +4,12 @@
             <card-container>
                 <div class="mb-12">图片设置</div>
                 <el-form-item label="上传图片">
-                    <div class="flex-column w">
-                        <upload v-model="form.img_src" :limit="1" size="50"></upload>
-                        <div class="flex-row align-c gap-10 mt-12">
-                            <el-select v-model="form.data_source_id" value-key="id" placeholder="请选择图片数据字段" size="default" class="flex-1">
-                                <el-option v-for="item in options.filter(item => item.type == 'images')" :key="item.field" :label="item.name" :value="item.field" />
-                            </el-select>
-                            <el-popover placement="top-start" :width="200" trigger="hover" content="this is content, this is content, this is content">
-                                <template #reference>
-                                    <icon name="tips" size="24"></icon>
-                                </template>
-                            </el-popover>
-                        </div>
-                    </div>
+                    <upload v-model="form.img_src" :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 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>
                 <el-form-item label="链接">
                     <url-value v-model="form.link"></url-value>
@@ -97,6 +90,14 @@ const border_radius_change = (radius: any) => {
     form.value.border_radius = Object.assign(form.value.border_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
 };
 
+const img_src_change = (key: string) => {
+    if (key == '2') {
+        form.value.img_src = [];
+    } else {
+        form.value.data_source_id = '';
+    }
+}
+
 watch(
     diy_data,
     (val) => {
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index bfac84d8..bae1d789 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -2,16 +2,17 @@
     <div class="img-outer re" :style="com_style">
         <div :style="text_style" class="break">
             <template v-if="form.is_rich_text">
-                <div :innerHTML="form.text_title"></div>
+                <div :innerHTML="text_title"></div>
             </template>
             <template v-else>
-                {{ form.text_title }}
+                {{ 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,
@@ -20,6 +21,12 @@ const props = defineProps({
         },
         required: true
     },
+    sourceList: {
+        type: Object,
+        default: () => {
+            return {};
+        }
+    },
     isPercentage: {
         type: Boolean,
         default: false
@@ -27,6 +34,17 @@ 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) };`;
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 bf7d5a44..12ec980d 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
@@ -4,19 +4,12 @@
             <card-container>
                 <div class="mb-12">文本设置</div>
                 <el-form-item label="文本内容">
-                    <div class="flex-column w">
-                        <el-input v-model="form.text_title" placeholder="请输入链接" type="textarea" :rows="3"></el-input>
-                        <div class="flex-row align-c gap-10 mt-12">
-                            <el-select v-model="form.data_source_id" value-key="id" placeholder="请选择图片数据字段" size="default" class="flex-1">
-                                <el-option v-for="item in options.filter(item => item.type == 'text')" :key="item.field" :label="item.name" :value="item.field" />
-                            </el-select>
-                            <el-popover placement="top-start" :width="200" trigger="hover" content="this is content, this is content, this is content">
-                                <template #reference>
-                                    <icon name="tips" size="24"></icon>
-                                </template>
-                            </el-popover>
-                        </div>
-                    </div>
+                    <el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" :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 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>
                 <el-form-item label="链接">
                     <url-value v-model="form.text_link"></url-value>
@@ -137,6 +130,14 @@ const border_radius_change = (radius: any) => {
     form.value.border_radius = Object.assign(form.value.border_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) => {
diff --git a/src/components/common/product-show-config/index.vue b/src/components/common/product-show-config/index.vue
index 17f2dd1e..d9af2143 100644
--- a/src/components/common/product-show-config/index.vue
+++ b/src/components/common/product-show-config/index.vue
@@ -69,7 +69,7 @@ const base_list = {
         { name: '商品标签', value: '1' },
         { name: '商品售价', value: '2' },
         { name: '商品销量', value: '3' },
-        { name: '商品评分', value: '4' },
+        // { name: '商品评分', value: '4' },
         { name: '商品原价', value: '5' },
         { name: '售价单位', value: '6' },
         { name: '原价单位', value: '7' },
diff --git a/src/components/common/url-value/url-value-dialog.vue b/src/components/common/url-value/url-value-dialog.vue
index c675906a..7527d711 100644
--- a/src/components/common/url-value/url-value-dialog.vue
+++ b/src/components/common/url-value/url-value-dialog.vue
@@ -195,11 +195,13 @@ const custom_link = (data: object) => {
 
 //#region 链接确认回调 -----------------------------------------------start
 // 取消回调
+const emit = defineEmits(['close']);
 const close_event = () => {
     link_select.value = props.type.length == 0 ? 'shop' : props.type[0];
     dialogVisible.value = false;
     link_value.value = [];
     reset_compontent.value = !reset_compontent.value;
+    emit('close');
 };
 // 确认回调
 const confirm_event = () => {
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index af0afb16..3a8e3365 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -48,13 +48,13 @@
                                     </div>
                                     <div :class="['main-content', { 'plug-in-border': item.show_tabs }]" :style="{ 'z-index': item.com_data.bottom_up ? 0 : 1 }">
                                         <template v-if="item.key == 'text'">
-                                            <model-text :key="item.id" :value="item.com_data"></model-text>
+                                            <model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-text>
                                         </template>
                                         <template v-else-if="item.key == 'img'">
-                                            <model-image :key="item.id" :value="item.com_data"></model-image>
+                                            <model-image :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-image>
                                         </template>
                                         <template v-else-if="item.key == 'auxiliary-line'">
-                                            <model-lines :key="item.id" :value="item.com_data"></model-lines>
+                                            <model-lines :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-lines>
                                         </template>
                                     </div>
                                 </Vue3DraggableResizable>
@@ -89,6 +89,7 @@ const app = getCurrentInstance();
 const emits = defineEmits(['rightUpdate']);
 interface Props {
     list: diy_content[];
+    sourceList: object;
 }
 const props = defineProps<Props>();
 //#endregion
@@ -218,7 +219,7 @@ watch(() => center_height.value, () => {
         }));
         draggable_container.value = true;
     });
-},{ immediate: true, deep: true });
+},{ deep: true });
 //#endregion
 //#region 左侧拖拽过来的处理
 let draggedItem = ref<any>({});
diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 0f91856a..afa10e99 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -3,13 +3,13 @@
         <div class="w h re">
             <div v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height)}">
                 <template v-if="item.key == 'text'">
-                    <model-text :key="item.com_data" :value="item.com_data" :is-percentage="true"></model-text>
+                    <model-text :key="item.com_data" :value="item.com_data" :source-list="form.source_list" :is-percentage="true"></model-text>
                 </template>
                 <template v-else-if="item.key == 'img'">
-                    <model-image :key="item.com_data" :value="item.com_data" :is-percentage="true"></model-image>
+                    <model-image :key="item.com_data" :value="item.com_data" :source-list="form.source_list" :is-percentage="true"></model-image>
                 </template>
                 <template v-else-if="item.key == 'auxiliary-line'">
-                    <model-lines :key="item.com_data" :value="item.com_data" :is-percentage="true"></model-lines>
+                    <model-lines :key="item.com_data" :value="item.com_data" :source-list="form.source_list" :is-percentage="true"></model-lines>
                 </template>
             </div>
         </div>
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 2c7eb54a..1a1198ee 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -4,9 +4,16 @@
             <card-container class="common-content-height">
                 <div class="mb-20">数据源</div>
                 <el-form-item label="动态数据">
-                    <el-select v-model="form.data_source" value-key="id" placeholder="请选择数据源" @change="changeDataSource">
+                    <el-select v-model="form.data_source" value-key="id" placeholder="请选择数据源" clearable @change="changeDataSource">
                         <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type" />
                     </el-select>
+                    <div v-if="!isEmpty(form.source_list)" class="flex-row mt-20 gap-20">
+                        <div class="re flex align-c">
+                            <image-empty v-model="form.source_list[img_key]" style="width: 10rem; height: 10rem;"></image-empty>
+                            <div class="plr-15 bg-f abs replace-data size-14" @click="replace_data">替换数据</div>
+                        </div>
+                        <div class="flex-1 size-14 text-line-3">{{ form.source_list.title ||  form.source_list.name }}</div>
+                    </div>
                 </el-form-item>
                 <div class="mb-20">内容设置</div>
                 <el-button class="w" size="large" @click="custom_edit"><icon name="edit" size="12"></icon>自定义编辑</el-button>
@@ -14,7 +21,7 @@
         </el-form>
         <Dialog ref="dialog" @accomplish="accomplish">
             <div class="flex-row h w">
-                <DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" :list="custom_list" @right-update="right_update"></DragIndex>
+                <DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" :source-list="form.source_list" :list="custom_list" @right-update="right_update"></DragIndex>
                 <div class="settings">
                     <template v-if="diy_data.key === 'img'">
                         <model-image-style :key="key" v-model:height="center_height" :options="model_data_source" :value="diy_data"></model-image-style>
@@ -33,15 +40,16 @@
                 </div>
             </div>
         </Dialog>
+        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="dialog_type" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
     </div>
 </template>
 <script setup lang="ts">
 import Dialog from './components/dialog.vue';
 import DragIndex from './components/index.vue';
-import { cloneDeep } from 'lodash';
+import { isEmpty, cloneDeep } from 'lodash';
 import CustomAPI from '@/api/custom';
 import { DataSourceStore } from '@/store';
-const data_source = DataSourceStore();
+const data_source_store = DataSourceStore();
 
 const props = defineProps({
     value: {
@@ -56,8 +64,8 @@ const form = reactive(props.value);
 // 弹出框里的内容
 let custom_list = reactive([]);
 const center_height = ref(0);
-
 const options = ref<source_list[]>([]);
+//#region 初始化数据处理
 interface data_list {
     name: string;
     field: string;
@@ -68,23 +76,44 @@ interface source_list {
     data: data_list[];
     type: string;
 };
-const init = () => {
+const getCustominit = () => {
     CustomAPI.getCustominit().then((res) => {
         const { data_source } = res.data;
         options.value = data_source;
-        data_source.set_data_source(data_source);
+        data_source_store.set_data_source(data_source);
     });
 }
 
 onBeforeMount(() => {
-    if (!data_source.is_data_source_api) {
-        data_source.set_is_data_source_api(true);
-        init();
+    if (!data_source_store.is_data_source_api) {
+        data_source_store.set_is_data_source_api(true);
+        getCustominit();
     } else {
-        options.value = data_source.data_source_list;
+        options.value = data_source_store.data_source_list;
+        // 如果历史的值出现，根据历史选中的值处理一下传递的数据结构
+        processing_data(form.data_source);
     }
 });
-
+// 处理显示的图片和传递到下去的数据结构
+const processing_data = (key: string) => {
+    const list = options.value.filter(item => item.type == key);
+    if (list.length > 0) {
+        model_data_source.value = list[0].data;
+        // 从中取出包含图片的内容
+        const field_list = list[0].data.filter(item => item.type == 'images');
+        // 取出图片的key
+        if (field_list.length > 0) {
+            img_key.value = field_list[0].field;
+        }
+    } else {
+        model_data_source.value = [];
+    }
+    if (!isEmpty(key)) {
+        dialog_type.value = [ key ];
+    }
+};
+//#endregion
+//#region 自定义编辑的内部处理逻辑
 const diy_data = ref<diy>({
     key: '',
     location: {
@@ -104,7 +133,7 @@ const right_update = (item: any) => {
     // 生成随机id
     key.value = Math.random().toString(36).substring(2);
 };
-
+// 自定义编辑的逻辑
 const custom_edit = () => {
     if (!dialog.value) return;
     dialog.value.dialogVisible = true;
@@ -112,7 +141,7 @@ const custom_edit = () => {
     custom_list = cloneDeep(form.custom_list);
     center_height.value = cloneDeep(form.height);
 };
-
+// 点击完成的处理逻辑
 const accomplish = () => {
     if (!draglist.value) {
         return;
@@ -121,15 +150,42 @@ const accomplish = () => {
     }
     form.height = center_height.value;
 };
+//#endregion
+//#region 数据源更新逻辑处理
 const model_data_source = ref<data_list[]>([])
-const changeDataSource = (key: any) => {
-    const list = options.value.filter(item => item.type == key);
-    if (list.length > 0) {
-        model_data_source.value = list[0].data; 
-    } else {
-        model_data_source.value = [];
+const dialog_type = ref<string[]>([]);
+const img_key = ref('');
+// 打开弹出框
+const url_value_dialog_visible = ref(false);
+const changeDataSource = (key: string) => {
+    processing_data(key);
+    form.source_list = {};
+    if (!isEmpty(key)) {
+        url_value_dialog_visible.value = true;
     }
 }
+
+// 弹出框选择的内容
+const url_value_dialog_call_back = (item: any[]) => {
+    if (item.length > 0) {
+        form.source_list = item[0];
+    } else {
+        form.source_list = {};
+    }
+};
+// 弹出框关闭
+const url_value_close = () => {
+    if (isEmpty(form.source_list)) {
+        form.data_source = '';
+    }
+}
+// 替换数据
+const replace_data = () => {
+    if (!isEmpty(dialog_type.value)) {
+        url_value_dialog_visible.value = true;
+    }
+}
+//#endregion
 </script>
 <style lang="scss" scoped>
 .card.mb-8 {
@@ -172,4 +228,10 @@ const changeDataSource = (key: any) => {
         padding: 2.4rem 3rem;
     }
 }
+.replace-data {
+    bottom: 1rem;
+    left: 0.5rem;
+    border-radius: 2rem;
+    border: 1px solid #ccc;
+}
 </style>
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 8465cb5a..a8c5af4a 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -15,11 +15,8 @@
                         <template v-if="!isEmpty(item.new_url)">
                             <image-empty v-model="item.new_url[0]" :class="`flex-img${product_style} flex align-c jc-c`" :style="content_img_radius"></image-empty>
                         </template>
-                        <template v-else-if="!isEmpty(item.images)">
-                            <el-image :src="item.images" :class="`flex-img${product_style} flex align-c jc-c`" fit="contain" class="img"></el-image>
-                        </template>
                         <template v-else>
-                            <image-empty :class="`flex-img${product_style} flex align-c jc-c`" :style="content_img_radius"></image-empty>
+                            <image-empty v-model="item.images" :class="`flex-img${product_style} flex align-c jc-c`" :style="content_img_radius"></image-empty>
                         </template>
                     </template>
                     <div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
@@ -51,8 +48,8 @@
                             <div class="flex-row jc-sb align-e">
                                 <div>
                                     <div v-if="show_content" class="flex-row align-c size-10">
-                                        <div v-if="is_show('3')" :class="['pr-5', { 'br-r-e': is_show('3') && is_show('4') }]" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div>
-                                        <div v-if="is_show('4')" class="pl-5" :style="trends_config('score')">评分0</div>
+                                        <div v-if="is_show('3')" :class="['pr-5', {'br-r-e': is_show('3') && is_show('4')}]" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div>
+                                        <!-- <div v-if="is_show('4')" class="pl-5" :style="trends_config('score')">评分0</div> -->
                                     </div>
                                 </div>
                                 <div v-if="form.is_shop_show">
@@ -399,6 +396,6 @@ const style_container = computed(() => {
 }
 .flex-img5 {
     width: 100%;
-    height: 10.4rem;
+    min-height: 10.4rem;
 }
 </style>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-styles.vue b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
index 85cff34e..47b7f11f 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-styles.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
@@ -34,11 +34,8 @@
                     <el-form-item v-if="['0', '4'].includes(product_style)" label="内容间距">
                         <slider v-model="form.content_spacing" :max="100"></slider>
                     </el-form-item>
-                    <el-form-item v-if="product_style != '5'" label="外间距">
-                        <slider v-model="form.content_outer_down_spacing" :max="100"></slider>
-                    </el-form-item>
-                    <el-form-item v-if="!['0', '2'].includes(product_style)" label="左右间距">
-                        <slider v-model="form.content_outer_about_spacing" :max="100"></slider>
+                    <el-form-item label="商品间距">
+                        <slider v-model="form.content_outer_spacing" :max="100"></slider>
                     </el-form-item>
                     <el-form-item v-if="product_style == '5'" label="内容宽度">
                         <slider v-model="form.content_outer_width" :max="1000"></slider>
diff --git a/src/layout/components/main/default/custom.ts b/src/layout/components/main/default/custom.ts
index f548e984..f60a9dce 100644
--- a/src/layout/components/main/default/custom.ts
+++ b/src/layout/components/main/default/custom.ts
@@ -5,6 +5,7 @@ interface defaultSearch {
     content: {
         height: number;
         data_source: string;
+        source_list: string[];
         custom_list: string[];
     };
     style: {
@@ -14,6 +15,7 @@ interface defaultSearch {
 const defaultSearch: defaultSearch = {
     content: {
         height: 390,
+        source_list: [],
         data_source:'',
         custom_list: []
     },
diff --git a/src/layout/components/main/default/shop-tabs.ts b/src/layout/components/main/default/shop-tabs.ts
index e11561db..c14225ee 100644
--- a/src/layout/components/main/default/shop-tabs.ts
+++ b/src/layout/components/main/default/shop-tabs.ts
@@ -37,8 +37,7 @@ interface DefaultProductList {
         shop_padding: paddingStyle;
         shop_img_radius: radiusStyle;
         shop_radius: radiusStyle;
-        content_outer_down_spacing: number;
-        content_outer_about_spacing: number;
+        content_outer_spacing: number;
         content_outer_width: number;
         content_spacing: number;
         shop_title_typeface: string;
@@ -106,8 +105,7 @@ const defaultProductList: DefaultProductList = {
             radius_bottom_left: 0,
             radius_bottom_right: 0,
         },
-        content_outer_down_spacing: 10, // 内容间的上下间距
-        content_outer_about_spacing: 10, // 内容间的左右间距
+        content_outer_spacing: 10,
         content_spacing: 10,
         content_outer_width: 104,
         shop_title_typeface: 'normal',

From 2ed25dcad5e7ac8f57d867d30a7ea5d60ef2fba4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 22 Aug 2024 15:26:13 +0800
Subject: [PATCH 2/8] =?UTF-8?q?=E5=95=86=E5=93=81=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-shop-list/index.vue | 40 +++++++++++++-----------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index a8c5af4a..fa3f4454 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -23,9 +23,7 @@
                         <div class="flex-col gap-10 top-title">
                             <div v-if="is_show('0')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
                             <div v-if="show_content && is_show('1')" class="flex-row gap-5">
-                                <div class="one1 radius-sm size-9 pl-3 pr-3">{{ '满减活动' }}</div>
-                                <div class="one2 radius-sm size-9 pl-3 pr-3">{{ '包邮' }}</div>
-                                <div class="one3 radius-sm size-9 pl-3 pr-3">{{ '领劵' }}</div>
+                                <div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
                             </div>
                         </div>
                         <div v-if="!['3', '4', '5'].includes(form.product_style)" class="flex-col gap-5 oh">
@@ -37,7 +35,7 @@
                                 </div>
                                 <div v-if="show_content && is_show('5')" class="size-10 flex">
                                     <span class="original-price-left"></span
-                                    ><span class="original-price flex-1 text-line-1"
+                                    ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo }]"
                                         >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                         <template v-if="is_show('7')">
                                             {{ item.show_original_price_unit }}
@@ -48,7 +46,8 @@
                             <div class="flex-row jc-sb align-e">
                                 <div>
                                     <div v-if="show_content" class="flex-row align-c size-10">
-                                        <div v-if="is_show('3')" :class="['pr-5', {'br-r-e': is_show('3') && is_show('4')}]" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div>
+                                        <div v-if="is_show('3')" class="pr-5" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div>
+                                        <!-- <div v-if="is_show('3')" :class="['pr-5', {'br-r-e': is_show('3') && is_show('4')}]" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div> -->
                                         <!-- <div v-if="is_show('4')" class="pl-5" :style="trends_config('score')">评分0</div> -->
                                     </div>
                                 </div>
@@ -122,6 +121,13 @@ const form = computed(() => props.value?.content || {});
 const new_style = computed(() => props.value?.style || {});
 
 // 目前显示假数据，日后通过分类或者选择的商品来显示真实数据
+interface plugins_icon_data {
+    name: string;
+    bg_color: string;
+    br_color: string;
+    color: string;
+    url: string;
+}
 interface product_list {
     title: string;
     images: string;
@@ -133,6 +139,7 @@ interface product_list {
     show_price_symbol: string;
     show_price_unit: string;
     sales_count: string;
+    plugins_view_icon_data: plugins_icon_data[];
 }
 const default_list = {
     title: '华为荣耀畅享平板换屏服务 屏幕换外屏',
@@ -144,6 +151,7 @@ const default_list = {
     sales_count: '1000',
     images: '',
     new_url: [],
+    plugins_view_icon_data: []
 };
 const list = ref<product_list[]>([]);
 
@@ -312,6 +320,14 @@ const style_config = (typeface: string, size: number, color: string | object, ty
 const button_gradient = () => {
     return gradient_handle(new_style.value.shop_button_color, '90deg');
 };
+// icon标志显示样式
+const icon_style = (item: { bg_color: string; color: string; br_color: string; }) => {
+    let style = `background: ${item.bg_color};color: ${item.color};`;
+    if (!isEmpty(item.br_color)) {
+        style += `border: 1px solid ${item.br_color};`
+    }
+    return style;
+}
 // 公共样式
 const style_container = computed(() => {
     if (props.isCommonStyle) {
@@ -350,20 +366,6 @@ const style_container = computed(() => {
     height: v-bind(button_size);
     line-height: v-bind(button_size);
 }
-.one1 {
-    border: 1px solid #ea3323;
-    background: #ea3323;
-    color: #fff;
-}
-.one2 {
-    border: 1px solid #ea3323;
-    color: #ea3323;
-}
-.one3 {
-    border: 1px solid #ffc300;
-    color: #ffc300;
-}
-
 .two-columns {
     width: calc((100% - v-bind(two_columns)) / 2);
 }

From 15ca11c98f1415dce89fb2691312cfc775de7636 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 22 Aug 2024 16:18:27 +0800
Subject: [PATCH 3/8] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/drag-group/index.vue    |  6 +++++-
 src/components/common/tabs-view/index.vue     |  2 +-
 .../components/product-list-show.vue          | 20 ++++---------------
 src/components/model-data-magic/index.vue     |  6 +++++-
 src/components/model-shop-list/index.vue      |  5 +++--
 5 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/components/common/drag-group/index.vue b/src/components/common/drag-group/index.vue
index 7c5b26c8..b0a0e32c 100644
--- a/src/components/common/drag-group/index.vue
+++ b/src/components/common/drag-group/index.vue
@@ -13,7 +13,7 @@
                 <el-input v-model="row.new_title" placeholder="请输入链接" type="textarea" class="flex-1 do-not-trigger" :rows="2"></el-input>
             </template>
             <template v-else>
-                <div class="flex-1 flex-width text-line-2 size-12 self-s">{{ row.new_title }}</div>
+                <div class="flex-1 flex-width text-line-2 size-12 self-s do-not-trigger" @dblclick="double_click(index)">{{ row.new_title }}</div>
             </template>
         </template>
     </drag>
@@ -67,6 +67,10 @@ const edit = (index: number) => {
         edit_index.value = index;
     }
 }
+
+const double_click = (index: number) => {
+    edit_index.value = index;
+}
 </script>
 <style lang="scss" scoped>
 .img {
diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index bfd92b4c..46a7a2c4 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -2,7 +2,7 @@
     <div class="tabs flex-row oh">
         <template v-for="(item, index) in tabs.content.tabs_list" :key="index">
             <div class="item nowrap flex-col jc-c gap-4" :class="tabs_style + (index == 0 ? ' active' : '')">
-                <img class="img" src="@/assets/images/components/model-user-info/avatar.png" />
+                <image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
                 <div class="title" :style="index == 0 ? tabs_style_style.tabs_title_checked : tabs_style_style.tabs_title">{{ item.title }}</div>
                 <div class="desc">{{ item.desc }}</div>
                 <icon name="checked-1" class="icon"></icon>
diff --git a/src/components/model-data-magic/components/product-list-show.vue b/src/components/model-data-magic/components/product-list-show.vue
index bee0bd79..049ca357 100644
--- a/src/components/model-data-magic/components/product-list-show.vue
+++ b/src/components/model-data-magic/components/product-list-show.vue
@@ -6,11 +6,8 @@
                     <template v-if="!isEmpty(item.new_url)">
                         <image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
                     </template>
-                    <template v-else-if="!isEmpty(item.images)">
-                        <el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
-                    </template>
                     <template v-else>
-                        <image-empty :style="contentImgRadius"></image-empty>
+                        <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                     </template>
                     <div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
                         <div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
@@ -29,11 +26,8 @@
                         <template v-if="!isEmpty(item.new_url)">
                             <image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
                         </template>
-                        <template v-else-if="!isEmpty(item.images)">
-                            <el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
-                        </template>
                         <template v-else>
-                            <image-empty :style="contentImgRadius"></image-empty>
+                            <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                         </template>
                         <div v-if="isShow.includes('1')" class="price-suspension text-line-1">
                             {{ item.show_price_symbol }}{{ item.min_price }}
@@ -50,11 +44,8 @@
                     <template v-if="!isEmpty(item.new_url)">
                         <image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
                     </template>
-                    <template v-else-if="!isEmpty(item.images)">
-                        <el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
-                    </template>
                     <template v-else>
-                        <image-empty :style="contentImgRadius"></image-empty>
+                        <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                     </template>
                     <div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10" :style="`${ padding_computer(props.chunkPadding) }`">
                         <div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
@@ -76,11 +67,8 @@
                     <template v-if="!isEmpty(item.new_url)">
                         <image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
                     </template>
-                    <template v-else-if="!isEmpty(item.images)">
-                        <el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
-                    </template>
                     <template v-else>
-                        <image-empty :style="contentImgRadius"></image-empty>
+                        <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                     </template>
                     <div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-20">
                         <div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index f5a9b4aa..1aa6f042 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -35,7 +35,7 @@
             <template v-else>
                 <div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
                     <template v-if="item.data_content.data_type == 'commodity'">
-                        <div class="w h flex-col gap-20" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
+                        <div :class="[spacing_processing(index) ? 'gap-20 w h flex-col' : 'gap-10 w h flex-col']" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
                             <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
                                 <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
                                 <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
@@ -261,6 +261,10 @@ const commodity_list = (list: any[], num: number) => {
         return [];
     }
 }
+// 不属于第9个，并且第9个的第一个和第二个
+const spacing_processing = (index: number) => {
+    return form.value.style_actived !== 8 || (form.value.style_actived === 8 && [0, 1].includes(index))
+}
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
 </script>
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index fa3f4454..9d2b7f5c 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -13,10 +13,10 @@
                 <template v-else>
                     <template v-if="!isEmpty(item)">
                         <template v-if="!isEmpty(item.new_url)">
-                            <image-empty v-model="item.new_url[0]" :class="`flex-img${product_style} flex align-c jc-c`" :style="content_img_radius"></image-empty>
+                            <image-empty v-model="item.new_url[0]" :class="`flex-img${product_style}`" :style="content_img_radius"></image-empty>
                         </template>
                         <template v-else>
-                            <image-empty v-model="item.images" :class="`flex-img${product_style} flex align-c jc-c`" :style="content_img_radius"></image-empty>
+                            <image-empty v-model="item.images" :class="`flex-img${product_style}`" :style="content_img_radius"></image-empty>
                         </template>
                     </template>
                     <div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
@@ -373,6 +373,7 @@ const style_container = computed(() => {
     width: calc((100% - v-bind(three_columns)) / 3);
 }
 .multicolumn-columns {
+    width: v-bind(multicolumn_columns);
     min-width: v-bind(multicolumn_columns);
 }
 .flex-img0 {

From 7af5a48bc511eeb11b816967703089252261d822 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 22 Aug 2024 16:24:25 +0800
Subject: [PATCH 4/8] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-shop-list/index.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 9d2b7f5c..5eb786c9 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -71,11 +71,17 @@
                             <div class="flex-row align-c nowrap">
                                 <div v-if="is_show('2')" 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 class="identifying">{{ item.show_price_unit }}</span>
+                                    ><span :style="trends_config('price')">{{ item.min_price }}</span>
+                                    <span v-if="is_show('6')" class="identifying">{{ item.show_price_unit }}</span>
                                 </div>
                                 <div v-if="show_content && is_show('5')" class="size-10 flex">
-                                    <span class="original-price-left"></span><span class="original-price flex-1 text-line-1">{{ item.show_original_price_symbol }}{{ item.min_original_price }}{{ item.show_original_price_unit }}</span>
+                                    <span class="original-price-left"></span
+                                    ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo }]"
+                                        >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
+                                        <template v-if="is_show('7')">
+                                            {{ item.show_original_price_unit }}
+                                        </template>
+                                    </span>
                                 </div>
                             </div>
                             <div v-if="form.is_shop_show">

From 1186f987590fe959120918a7660ee74b7e1eb758 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 22 Aug 2024 16:30:54 +0800
Subject: [PATCH 5/8] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-shop-list/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 5eb786c9..6f1caff6 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -22,7 +22,7 @@
                     <div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
                         <div class="flex-col gap-10 top-title">
                             <div v-if="is_show('0')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
-                            <div v-if="show_content && is_show('1')" class="flex-row gap-5">
+                            <div v-if="show_content && is_show('1') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5">
                                 <div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
                             </div>
                         </div>

From 076cce46ea613bbd27cb16fdedfac0ac21f64ca3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 22 Aug 2024 16:36:25 +0800
Subject: [PATCH 6/8] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=80=89=E9=A1=B9?=
 =?UTF-8?q?=E5=8D=A1=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/tabs-view/index.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index 46a7a2c4..c50952ce 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -2,7 +2,12 @@
     <div class="tabs flex-row oh">
         <template v-for="(item, index) in tabs.content.tabs_list" :key="index">
             <div class="item nowrap flex-col jc-c gap-4" :class="tabs_style + (index == 0 ? ' active' : '')">
-                <image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
+                <template v-if="!isEmpty(item.img)">
+                    <image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
+                </template>
+                <template v-else>
+                    <image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
+                </template>
                 <div class="title" :style="index == 0 ? tabs_style_style.tabs_title_checked : tabs_style_style.tabs_title">{{ item.title }}</div>
                 <div class="desc">{{ item.desc }}</div>
                 <icon name="checked-1" class="icon"></icon>
@@ -14,6 +19,7 @@
 
 <script lang="ts" setup>
 import { gradient_computer } from '@/utils';
+import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,

From fe828f99c6dec5e2cbd5bde59b022eb9615517cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 22 Aug 2024 16:39:54 +0800
Subject: [PATCH 7/8] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E8=AF=84=E5=88=86=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-shop-list/index.vue                  | 2 +-
 src/components/model-shop-list/model-shop-list-styles.vue | 4 ++--
 src/components/model-shop-tabs/model-shop-tabs-styles.vue | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 6f1caff6..a056e0c7 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -3,7 +3,7 @@
         <div :class="outer_class" :style="onter_style">
             <div v-for="(item, index) in list" :key="index" class="re" :class="layout_type" :style="layout_style">
                 <template v-if="product_style == '6'">
-                    <div :class="['flex-row jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]">
+                    <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('0')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
                         <div v-if="is_show('2')" class="num" :style="`color: ${new_style.shop_price_color}`">
                             <span class="identifying">￥</span><span :style="trends_config('price')">{{ item.min_price }}</span>
diff --git a/src/components/model-shop-list/model-shop-list-styles.vue b/src/components/model-shop-list/model-shop-list-styles.vue
index 15bcbd05..93bdcfc9 100644
--- a/src/components/model-shop-list/model-shop-list-styles.vue
+++ b/src/components/model-shop-list/model-shop-list-styles.vue
@@ -21,12 +21,12 @@
                 <el-form-item label="数量设置">
                     <color-picker v-model="form.shop_sold_number_color" default-color="#000000"></color-picker>
                 </el-form-item>
-                <el-form-item label="评分">
+                <!-- <el-form-item label="评分">
                     <text-size-type v-model:typeface="form.shop_score_typeface" v-model:size="form.shop_score_size"></text-size-type>
                 </el-form-item>
                 <el-form-item label="评分颜色">
                     <color-picker v-model="form.shop_score_color" default-color="#000000"></color-picker>
-                </el-form-item>
+                </el-form-item> -->
                 <el-form-item label="内容圆角">
                     <radius :value="form.shop_radius" @update:value="shop_radius_change"></radius>
                 </el-form-item>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-styles.vue b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
index 47b7f11f..a8f9e9b8 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-styles.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
@@ -59,12 +59,12 @@
                 <el-form-item label="数量设置">
                     <color-picker v-model="form.shop_sold_number_color" default-color="#000000"></color-picker>
                 </el-form-item>
-                <el-form-item label="评分">
+                <!-- <el-form-item label="评分">
                     <text-size-type v-model:typeface="form.shop_score_typeface" v-model:size="form.shop_score_size"></text-size-type>
                 </el-form-item>
                 <el-form-item label="评分颜色">
                     <color-picker v-model="form.shop_score_color" default-color="#000000"></color-picker>
-                </el-form-item>
+                </el-form-item> -->
             </card-container>
             <card-container class="mb-8">
                 <div class="mb-12">购物车按钮</div>

From c1fa0fbb71b5a6217299a0229abeff232b4d7136 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 22 Aug 2024 17:58:36 +0800
Subject: [PATCH 8/8] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E5=9D=97=E7=9A=84=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-shop-list/index.vue              |  8 +++++---
 .../model-shop-list/model-shop-list-styles.vue        | 11 ++++++++---
 .../model-shop-tabs/model-shop-tabs-styles.vue        | 11 ++++++++---
 src/layout/components/main/default/shop-list.ts       |  2 ++
 src/layout/components/main/default/shop-tabs.ts       |  2 ++
 5 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index a056e0c7..a31df204 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -212,7 +212,8 @@ const two_columns = computed(() => content_outer_spacing.value + 'px');
 // 三列风格
 const three_columns = computed(() => content_outer_spacing.value * 2 + 'px');
 // 不换行显示
-const multicolumn_columns = computed(() => new_style.value.content_outer_width + 'px');
+const multicolumn_columns_width = computed(() => new_style.value.content_outer_width + 'px');
+const multicolumn_columns_height = computed(() => new_style.value.content_outer_height + 'px');
 
 // 最外层不同风格下的显示
 const outer_class = computed(() => {
@@ -379,8 +380,9 @@ const style_container = computed(() => {
     width: calc((100% - v-bind(three_columns)) / 3);
 }
 .multicolumn-columns {
-    width: v-bind(multicolumn_columns);
-    min-width: v-bind(multicolumn_columns);
+    width: v-bind(multicolumn_columns_width);
+    min-width: v-bind(multicolumn_columns_width);
+    height: v-bind(multicolumn_columns_height);
 }
 .flex-img0 {
     height: auto;
diff --git a/src/components/model-shop-list/model-shop-list-styles.vue b/src/components/model-shop-list/model-shop-list-styles.vue
index 93bdcfc9..21e312ad 100644
--- a/src/components/model-shop-list/model-shop-list-styles.vue
+++ b/src/components/model-shop-list/model-shop-list-styles.vue
@@ -42,9 +42,14 @@
                 <el-form-item label="商品间距">
                     <slider v-model="form.content_outer_spacing" :max="100"></slider>
                 </el-form-item>
-                <el-form-item v-if="product_style == '5'" label="内容宽度">
-                    <slider v-model="form.content_outer_width" :max="1000"></slider>
-                </el-form-item>
+                <template v-if="product_style == '5'">
+                    <el-form-item label="内容宽度">
+                        <slider v-model="form.content_outer_width" :max="1000"></slider>
+                    </el-form-item>
+                    <el-form-item label="内容高度">
+                        <slider v-model="form.content_outer_height" :max="1000"></slider>
+                    </el-form-item>
+                </template>
             </card-container>
             <card-container class="mb-8">
                 <div class="mb-12">购物车按钮</div>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-styles.vue b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
index a8f9e9b8..2017849b 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-styles.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
@@ -37,9 +37,14 @@
                     <el-form-item label="商品间距">
                         <slider v-model="form.content_outer_spacing" :max="100"></slider>
                     </el-form-item>
-                    <el-form-item v-if="product_style == '5'" label="内容宽度">
-                        <slider v-model="form.content_outer_width" :max="1000"></slider>
-                    </el-form-item>
+                    <template v-if="product_style == '5'">
+                        <el-form-item label="内容宽度">
+                            <slider v-model="form.content_outer_width" :max="1000"></slider>
+                        </el-form-item>
+                        <el-form-item label="内容高度">
+                            <slider v-model="form.content_outer_height" :max="1000"></slider>
+                        </el-form-item>
+                    </template>
                 </template>
                 <el-form-item label="商品名称">
                     <text-size-type v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size"></text-size-type>
diff --git a/src/layout/components/main/default/shop-list.ts b/src/layout/components/main/default/shop-list.ts
index 9749ef7b..6f38782f 100644
--- a/src/layout/components/main/default/shop-list.ts
+++ b/src/layout/components/main/default/shop-list.ts
@@ -23,6 +23,7 @@ interface DefaultProductList {
         shop_radius: radiusStyle;
         content_outer_spacing: number;
         content_outer_width: number;
+        content_outer_height: number;
         content_spacing: number;
         shop_title_typeface: string;
         shop_title_size: number;
@@ -85,6 +86,7 @@ const defaultProductList: DefaultProductList = {
         content_outer_spacing: 10, // 商品间距
         content_spacing: 10,
         content_outer_width: 104,
+        content_outer_height: 189,
         shop_title_typeface: 'normal',
         shop_title_size: 12,    
         shop_title_color: "#000",
diff --git a/src/layout/components/main/default/shop-tabs.ts b/src/layout/components/main/default/shop-tabs.ts
index c14225ee..9fbcd728 100644
--- a/src/layout/components/main/default/shop-tabs.ts
+++ b/src/layout/components/main/default/shop-tabs.ts
@@ -39,6 +39,7 @@ interface DefaultProductList {
         shop_radius: radiusStyle;
         content_outer_spacing: number;
         content_outer_width: number;
+        content_outer_height: number;
         content_spacing: number;
         shop_title_typeface: string;
         shop_title_size: number;
@@ -108,6 +109,7 @@ const defaultProductList: DefaultProductList = {
         content_outer_spacing: 10,
         content_spacing: 10,
         content_outer_width: 104,
+        content_outer_height: 189,
         shop_title_typeface: 'normal',
         shop_title_size: 12,    
         shop_title_color: "#000",