From 9f0b2e28bf7737b6a588fc8cd46bece892c550ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 21 Aug 2024 16:28:19 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E5=95=86=E5=93=81=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=B0=81=E8=A3=85=E6=88=90=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/drag/index.vue            | 13 +++-
 src/components/common/drag-group/index.vue    | 76 +++++++++++++++++++
 .../common/url-value/url-value-dialog.vue     |  8 ++
 src/components/model-shop-list/index.vue      | 17 +++--
 .../model-shop-list-content.vue               | 48 ++++++------
 .../model-shop-list-styles.vue                | 36 ++++-----
 .../components/main/default/shop-list.ts      |  2 +-
 src/styles/lib.scss                           |  3 +
 8 files changed, 149 insertions(+), 54 deletions(-)
 create mode 100644 src/components/common/drag-group/index.vue

diff --git a/src/components/base/drag/index.vue b/src/components/base/drag/index.vue
index 89099821..98eb457d 100644
--- a/src/components/base/drag/index.vue
+++ b/src/components/base/drag/index.vue
@@ -4,7 +4,8 @@
             <li v-for="(item, index) in from" :key="item.id" :class="className" class="flex gap-y-16 re" @click="on_click(item, index)">
                 <el-icon class="iconfont icon-drag size-16 cursor-move" />
                 <slot :row="item" :index="index" />
-                <el-icon v-if="type == 'line'" class="iconfont icon-del-o size-16" @click="remove(index)" />
+                <el-icon v-if="isShowEdit" class="iconfont icon-commodity-edit size-16 cr-primary do-not-trigger two-click" @click="edit(index)" />
+                <el-icon v-if="type == 'line'" class="iconfont icon-del-o size-16 do-not-trigger" @click="remove(index)" />
                 <el-icon v-if="type == 'card'" class="iconfont icon-close-o size-16 abs cr-c top-de-5 right-de-5" @click="remove(index)" />
             </li>
         </TransitionGroup>
@@ -13,16 +14,18 @@
 
 <script setup lang="ts">
 import { VueDraggable } from 'vue-draggable-plus';
-const emits = defineEmits(['click', 'remove', 'onSort']);
+const emits = defineEmits(['click', 'remove', 'edit', 'onSort']);
 
 interface Props {
     data: any; // 拖拽列表数据
     type?: string; // card: 卡片区域  line: 一行
     spaceCol?: number; // 上下间距
     iconPosition?: string; // top/bottom/center
+    isShowEdit?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
     type: () => 'line',
+    isShowEdit: false,
     spaceCol: () => 5,
     iconPosition: 'center',
 });
@@ -42,7 +45,6 @@ if (props.type == 'card') {
 }
 
 const from = ref(props.data);
-
 const on_click = (item: any, index: number) => {
     emits('click', item, index);
 };
@@ -50,6 +52,9 @@ const on_click = (item: any, index: number) => {
 const remove = (index: number) => {
     emits('remove', index);
 };
+const edit = (index: number) => {
+    emits('edit', index);
+};
 // 拖拽更新之后用户更新数据
 const on_sort = () => {
     emits('onSort', from);
@@ -64,7 +69,7 @@ const on_sort = () => {
 .size-16 {
     font-size: 1.6rem !important;
 }
-.icon-del-o {
+.icon-del-o, .icon-commodity-edit {
     cursor: pointer;
 }
 .cursor-move {
diff --git a/src/components/common/drag-group/index.vue b/src/components/common/drag-group/index.vue
new file mode 100644
index 00000000..7c5b26c8
--- /dev/null
+++ b/src/components/common/drag-group/index.vue
@@ -0,0 +1,76 @@
+<template>
+    <drag :data="drag_list" :space-col="20" :is-show-edit="true" @remove="remove" @on-sort="on_sort" @edit="edit">
+        <template #default="{ row, index }">
+            <upload v-model="row.new_url" :limit="1" size="40" styles="2"></upload>
+            <el-image :src="row.link[imgParams]" fit="contain" class="img">
+                <template #error>
+                    <div class="bg-f5 flex-row jc-c align-c radius h w">
+                        <icon name="error-img" size="16" color="9"></icon>
+                    </div>
+                </template>
+            </el-image>
+            <template v-if="index === edit_index">
+                <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>
+            </template>
+        </template>
+    </drag>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+    list: any[];
+    imgParams: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    imgParams: 'cover',
+    isouterClick: false,
+});
+
+const drag_list = ref(props.list);
+watchEffect(() => {
+    drag_list.value = props.list;
+});
+
+onMounted(() => {
+    // 监听点击事件
+    document.addEventListener('click', outerClick);
+});
+onUnmounted(() => {
+    // 移除监听事件
+    document.removeEventListener('click', outerClick);
+});
+const edit_index = ref(-1);
+// 判断点击的是否是可以点击的区域，其他区域隐藏掉编辑属性
+const outerClick = (e: any) => {
+    if (!e.target.className.includes('do-not-trigger') && !e.target.parentNode.className.includes('do-not-trigger')) {
+        edit_index.value = -1;
+    }
+};
+const emits = defineEmits(['remove', 'onsort']);
+const remove = (index: number) => {
+    if (edit_index.value === index) {
+        edit_index.value = -1;
+    }
+    emits('remove', index);
+}
+const on_sort = (item: any) => {
+    emits('onsort', item);
+}
+const edit = (index: number) => {
+    if (edit_index.value === index) {
+        edit_index.value = -1;
+    } else {
+        edit_index.value = index;
+    }
+}
+</script>
+<style lang="scss" scoped>
+.img {
+    width: 4rem;
+    height: 4rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/url-value/url-value-dialog.vue b/src/components/common/url-value/url-value-dialog.vue
index 90f5227c..fad6ae62 100644
--- a/src/components/common/url-value/url-value-dialog.vue
+++ b/src/components/common/url-value/url-value-dialog.vue
@@ -14,27 +14,35 @@
                 </el-menu>
             </div>
             <div class="right-content flex-1">
+                <!-- 商城链接/插件 -->
                 <template v-if="link_select == 'shop' || link_select == 'plugins'">
                     <link-list :key="link_select" v-model="link_value" :type="link_select" :reset="reset_compontent"></link-list>
                 </template>
+                <!-- 商品分类 -->
                 <template v-else-if="link_select == 'goods-category'">
                     <link-goods-category v-model="link_value" :reset="reset_compontent"></link-goods-category>
                 </template>
+                <!-- 商品搜索 -->
                 <template v-else-if="link_select == 'goods-search'">
                     <link-goods-search :reset="reset_compontent" :status="component_status" @update:link="goods_category_link" @type="goods_category_type_change"></link-goods-search>
                 </template>
+                <!-- 商品页面 -->
                 <template v-else-if="link_select == 'goods'">
                     <link-goods v-model="link_value" :multiple="multiple" :reset="reset_compontent"></link-goods>
                 </template>
+                <!-- 文章页面 -->
                 <template v-else-if="link_select == 'article'">
                     <link-articles v-model="link_value" :multiple="multiple" :reset="reset_compontent"></link-articles>
                 </template>
+                <!-- diy页面/页面设计/自定义页面  -->
                 <template v-else-if="link_select == 'diy' || link_select == 'design' || link_select == 'custom-view'">
                     <link-table :key="link_select" v-model="link_value" :multiple="multiple" :type="link_select" :reset="reset_compontent"></link-table>
                 </template>
+                <!-- 品牌 -->
                 <template v-else-if="link_select == 'brand'">
                     <link-brand v-model="link_value" :multiple="multiple" :reset="reset_compontent"></link-brand>
                 </template>
+                <!-- 自定义链接 -->
                 <template v-else-if="link_select == 'custom-url'">
                     <link-custom :reset="reset_compontent" :status="component_status" @update:link="custom_link"></link-custom>
                 </template>
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 61394698..1a6428e6 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -10,8 +10,8 @@
                 </template>
                 <template v-else>
                     <template v-if="!isEmpty(item)">
-                        <template v-if="!isEmpty(item.new_src)">
-                            <image-empty v-model="item.new_src[0]" :class="`flex-img${product_style} flex align-c jc-c`" :style="content_img_radius"></image-empty>
+                        <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>
@@ -85,7 +85,7 @@
 </template>
 <script setup lang="ts">
 import { common_styles_computer, gradient_handle, padding_computer, radius_computer } from '@/utils';
-import { isEmpty } from 'lodash';
+import { isEmpty, cloneDeep } from 'lodash';
 import ShopAPI from '@/api/shop';
 
 const props = defineProps({
@@ -112,7 +112,7 @@ const { form, new_style } = toRefs(state);
 interface product_list {
     title: string;
     images: string;
-    new_src: string[];
+    new_url: string[];
     min_original_price: string;
     show_original_price_symbol: string;
     show_original_price_unit: string;
@@ -130,7 +130,7 @@ const default_list = {
     show_price_unit: "",
     sales_count: "1000",
     images: '',
-    new_src: []
+    new_url: []
 }
 const list = ref<product_list[]>([]);
 const get_products = () => {
@@ -155,7 +155,11 @@ const get_products = () => {
 watchEffect(() => {
     if (form.value.product_check == '0') {
         if (!isEmpty(form.value.product_list)) {
-            list.value = form.value.product_list;
+            list.value = cloneDeep(form.value.product_list).map((item: any) => ({
+                ...item.link,
+                title: item.new_title,
+                new_url: item.new_url,
+            }));
         } else {
             list.value = Array(4).fill(default_list);
         }
@@ -356,6 +360,7 @@ const style_container = computed(() => {
 }
 .flex-img0 {
     height: auto;
+    max-height: 12rem;
     width: 11rem;
 } 
 .flex-img1 {
diff --git a/src/components/model-shop-list/model-shop-list-content.vue b/src/components/model-shop-list/model-shop-list-content.vue
index 55cb7553..7b08e981 100644
--- a/src/components/model-shop-list/model-shop-list-content.vue
+++ b/src/components/model-shop-list/model-shop-list-content.vue
@@ -10,7 +10,7 @@
                 </el-form-item>
             </card-container>
             <div class="content-height bg-f">
-                <card-container class="card-container-br">
+                <card-container class="card-container-br" @click="card_click">
                     <div class="mb-12">商品设置</div>
                     <el-form-item label="添加商品">
                         <el-radio-group v-model="form.product_check">
@@ -19,21 +19,7 @@
                     </el-form-item>
                     <template v-if="form.product_check === '0'">
                         <div class="nav-list">
-                            <drag :data="form.product_list" :space-col="20" @remove="product_list_remove" @on-sort="product_list_sort">
-                                <template #default="{ row }">
-                                    <upload v-model="row.new_src" :limit="1" size="40" styles="2"></upload>
-                                    <el-image :src="row.url" fit="contain" class="img">
-                                        <template #error>
-                                            <div class="bg-f5 flex-row jc-c align-c radius h w">
-                                                <icon name="error-img" size="16" color="9"></icon>
-                                            </div>
-                                        </template>
-                                    </el-image>
-                                    <div class="flex-1 flex-width">
-                                        <url-value v-model="row.href"></url-value>
-                                    </div>
-                                </template>
-                            </drag>
+                            <dragGroup :list="form.product_list" img-params="images" @onsort="product_list_sort" @remove="product_list_remove"></dragGroup>
                             <el-button class="mt-20 w" @click="add">+添加</el-button>
                         </div>
                     </template>
@@ -67,6 +53,7 @@
                 <product-show-config :value="form"></product-show-config>
             </div>
         </el-form>
+        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
     </div>
 </template>
 <script setup lang="ts">
@@ -138,27 +125,38 @@ onBeforeMount(() => {
     init();
 });
 
-const product_list_remove = (index: number) => {
-    form.value.product_list.splice(index, 1);
-};
 const add = () => {
-    form.value.product_list.push({
-        id: get_math(),
-        src: 'carousel',
-        new_src: [],
-        href: {},
-    });
+    url_value_dialog_visible.value = true;
 };
 // 拖拽更新之后，更新数据
 const product_list_sort = (new_list: any) => {
     form.value.product_list = new_list;
 };
+// 删除显示
+const product_list_remove = (index: number) => {
+    form.value.product_list.splice(index, 1);
+};
+
 const change_style = (val: any): void => {
     form.value.product_style = val;
     if (['3', '4', '5'].includes(val) && ['0', '1'].includes(form.value.shop_type)) {
         form.value.shop_type = '2';
     }
 };
+// 打开弹出框
+const url_value_dialog_visible = ref(false);
+// 弹出框选择的内容
+const url_value_dialog_call_back = (item: any[]) => {
+    item.forEach((item: any) => {
+        form.value.product_list.push({
+            id: get_math(),
+            new_url: [],
+            is_edit: false,
+            new_title: item.title,
+            link: item,
+        });
+    });
+};
 </script>
 <style lang="scss" scoped>
 .content {
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 75acccab..15bcbd05 100644
--- a/src/components/model-shop-list/model-shop-list-styles.vue
+++ b/src/components/model-shop-list/model-shop-list-styles.vue
@@ -3,24 +3,6 @@
         <el-form :model="form" label-width="70">
             <card-container class="mb-8">
                 <div class="mb-12">商品样式</div>
-                <el-form-item label="内容圆角">
-                    <radius :value="form.shop_radius" @update:value="shop_radius_change"></radius>
-                </el-form-item>
-                <el-form-item label="图片圆角">
-                    <radius :value="form.shop_img_radius" @update:value="img_radius_change"></radius>
-                </el-form-item>
-                <el-form-item label="内间距">
-                    <padding :value="form.shop_padding" @update:value="shop_padding_change"></padding>
-                </el-form-item>
-                <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 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>
                 <el-form-item label="商品名称">
                     <text-size-type v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size"></text-size-type>
                 </el-form-item>
@@ -45,6 +27,24 @@
                 <el-form-item label="评分颜色">
                     <color-picker v-model="form.shop_score_color" default-color="#000000"></color-picker>
                 </el-form-item>
+                <el-form-item label="内容圆角">
+                    <radius :value="form.shop_radius" @update:value="shop_radius_change"></radius>
+                </el-form-item>
+                <el-form-item label="图片圆角">
+                    <radius :value="form.shop_img_radius" @update:value="img_radius_change"></radius>
+                </el-form-item>
+                <el-form-item label="内间距">
+                    <padding :value="form.shop_padding" @update:value="shop_padding_change"></padding>
+                </el-form-item>
+                <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 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>
             </card-container>
             <card-container class="mb-8">
                 <div class="mb-12">购物车按钮</div>
diff --git a/src/layout/components/main/default/shop-list.ts b/src/layout/components/main/default/shop-list.ts
index 20be3eb2..4b8090b5 100644
--- a/src/layout/components/main/default/shop-list.ts
+++ b/src/layout/components/main/default/shop-list.ts
@@ -5,7 +5,7 @@ interface DefaultProductList {
         product_check: string;
         goods_category_ids: string[];
         goods_brand_ids: string[];
-        product_list: [];
+        product_list: string[];
         is_price_solo: boolean;
         number: number;
         sort: string;
diff --git a/src/styles/lib.scss b/src/styles/lib.scss
index b942d5e5..a70c5b8e 100644
--- a/src/styles/lib.scss
+++ b/src/styles/lib.scss
@@ -311,5 +311,8 @@ $line: 5;
         -webkit-line-clamp: #{$i};
         line-clamp: #{$i}; // 添加标准属性以增加兼容性
         -webkit-box-orient: vertical;
+        word-break: break-word;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
     }
 }

From f203fec05d5c8702d212c6a90d247978a2acb9e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 21 Aug 2024 16:28:59 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=9E=83=E5=9C=BE?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-shop-list/model-shop-list-content.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/model-shop-list/model-shop-list-content.vue b/src/components/model-shop-list/model-shop-list-content.vue
index 7b08e981..bb961cd4 100644
--- a/src/components/model-shop-list/model-shop-list-content.vue
+++ b/src/components/model-shop-list/model-shop-list-content.vue
@@ -10,7 +10,7 @@
                 </el-form-item>
             </card-container>
             <div class="content-height bg-f">
-                <card-container class="card-container-br" @click="card_click">
+                <card-container class="card-container-br">
                     <div class="mb-12">商品设置</div>
                     <el-form-item label="添加商品">
                         <el-radio-group v-model="form.product_check">
@@ -151,7 +151,6 @@ const url_value_dialog_call_back = (item: any[]) => {
         form.value.product_list.push({
             id: get_math(),
             new_url: [],
-            is_edit: false,
             new_title: item.title,
             link: item,
         });

From ce1ab2c0007cb916571cc66aca846adb46765936 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 21 Aug 2024 18:39:14 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/drag/index.vue            |  3 +-
 .../common/product-show-config/index.vue      |  2 +
 .../components/product-list-show.vue          | 88 +++++++++++++++----
 .../components/tabs-content.vue               | 51 +++++------
 src/components/model-data-magic/index.vue     |  6 +-
 src/components/model-shop-list/index.vue      | 12 ++-
 .../model-shop-list-content.vue               | 31 +++----
 src/components/model-shop-tabs/index.vue      | 17 ++--
 .../model-shop-tabs-content.vue               | 37 ++++----
 .../components/main/default/shop-list.ts      |  2 +
 10 files changed, 152 insertions(+), 97 deletions(-)

diff --git a/src/components/base/drag/index.vue b/src/components/base/drag/index.vue
index 98eb457d..20bb51c1 100644
--- a/src/components/base/drag/index.vue
+++ b/src/components/base/drag/index.vue
@@ -44,7 +44,8 @@ if (props.type == 'card') {
     className.value = 'align-c';
 }
 
-const from = ref(props.data);
+const from = computed(() => props.data);
+
 const on_click = (item: any, index: number) => {
     emits('click', item, index);
 };
diff --git a/src/components/common/product-show-config/index.vue b/src/components/common/product-show-config/index.vue
index d0c81b2a..17f2dd1e 100644
--- a/src/components/common/product-show-config/index.vue
+++ b/src/components/common/product-show-config/index.vue
@@ -71,6 +71,8 @@ const base_list = {
         { name: '商品销量', value: '3' },
         { name: '商品评分', value: '4' },
         { name: '商品原价', value: '5' },
+        { name: '售价单位', value: '6' },
+        { name: '原价单位', value: '7' },
     ],
     shopping_button_list: [
         { name: '购买', value: '0' },
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 cfb86294..bee0bd79 100644
--- a/src/components/model-data-magic/components/product-list-show.vue
+++ b/src/components/model-data-magic/components/product-list-show.vue
@@ -2,29 +2,68 @@
     <template v-if="props.outerflex == 'row'">
         <div class="flex-row gap-10 align-c w h">
             <template v-if="props.flex === 'row'">
-                <div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 half-width h">
-                    <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
+                <div v-for="(item, index) in split_list" :key="index" class="flex-row gap-10 half-width h">
+                    <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>
+                    </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">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
-                        <div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
+                        <div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
+                        <div v-if="isShow.includes('1')" class="identifying">
+                            <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                            <template v-if="isShow.includes('2')">
+                                <span class="num">{{ item.show_price_unit }}</span>
+                            </template>
+                        </div>
                     </div>
                 </div>
             </template>
             <template v-else-if="actived != 7 || props.num !== 1">
-                <div v-for="(item2, index2) in split_list" :key="index2" :class="['flex-col gap-10 h', { 'half-width': props.num !== 1, 'w': props.num == 1 }]">
+                <div v-for="(item, index) in split_list" :key="index" :class="['flex-col gap-10 h', { 'half-width': props.num !== 1, 'w': props.num == 1 }]">
                     <div class="w h re">
-                        <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
-                        <div v-if="isShow.includes('1')" class="price-suspension">¥{{ '51' }}</div>
+                        <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>
+                        </template>
+                        <div v-if="isShow.includes('1')" class="price-suspension text-line-1">
+                            {{ item.show_price_symbol }}{{ item.min_price }}
+                            <template v-if="isShow.includes('2')">
+                                {{ item.show_price_unit }}
+                            </template>
+                        </div>
                     </div>
-                    <div v-if="isShow.includes('0')" class="text-line-1 size-14 tl w" style="overflow: inherit;">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
+                    <div v-if="isShow.includes('0')" class="text-line-1 size-14 tl w" style="overflow: inherit;">{{ item.title }}</div>
                 </div>
             </template>
             <template v-else>
-                <div v-for="(item2, index2) in split_list" :key="index2" class="flex-col w h">
-                    <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
+                <div v-for="(item, index) in split_list" :key="index" class="flex-col w h">
+                    <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>
+                    </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">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
-                        <div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
+                        <div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
+                        <div v-if="isShow.includes('1')" class="identifying">
+                            <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                            <template v-if="isShow.includes('2')">
+                                <span class="num">{{ item.show_price_unit }}</span>
+                            </template>
+                        </div>
                     </div>
                 </div>
             </template>
@@ -33,11 +72,24 @@
     <template v-else>
         <div class="flex-col gap-20 align-c w h">
             <template v-if="props.flex === 'row'">
-                <div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 align-c w h">
-                    <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
-                    <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">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
-                        <div v-if="isShow.includes('1')" class="identifying"><span class="num">￥</span><span>{{'51' }}</span></div>
+                <div v-for="(item, index) in split_list" :key="index" class="flex-row gap-10 align-c w h">
+                    <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>
+                    </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>
+                        <div v-if="isShow.includes('1')" class="identifying">
+                            <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                            <template v-if="isShow.includes('2')">
+                                <span class="num">{{ item.show_price_unit }}</span>
+                            </template>
+                        </div>
                     </div>
                 </div>
             </template>
@@ -84,7 +136,7 @@ watchEffect(() => {
     }
 }
 .identifying {
-    font-size: 2rem;
+    font-size: 1.4rem;
     color: #EA3323;
     .num {
         font-size: 0.9rem;
diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
index 06ce1f80..db8d2e3c 100644
--- a/src/components/model-data-magic/components/tabs-content.vue
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -34,31 +34,19 @@
     </card-container>
     <card-container v-else class="mb-8">
         <div class="mb-12">商品设置</div>
-        <drag :key="form.product_list" :data="form.product_list" :space-col="20" @remove="product_list_remove" @on-sort="product_list_sort">
-            <template #default="{ row }">
-                <upload v-model="row.new_src" :limit="1" size="40" styles="2"></upload>
-                <el-image :src="row.url" fit="contain" class="img">
-                    <template #error>
-                        <div class="bg-f5 flex-row jc-c align-c radius h w">
-                            <icon name="error-img" size="16" color="9"></icon>
-                        </div>
-                    </template>
-                </el-image>
-                <div class="flex-1 flex-width">
-                    <url-value v-model="row.href"></url-value>
-                </div>
-            </template>
-        </drag>
+        <drag-group :list="form.product_list" img-params="images" @onsort="product_list_sort" @remove="product_list_remove"></drag-group>
         <el-button class="mtb-20 w" @click="product_list_add">+添加</el-button>
-        <el-form-item label="展示信息">
+        <el-form-item label="展示信息" label-width="60">
             <el-checkbox-group v-model="form.is_show">
                 <el-checkbox v-for="item in list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
             </el-checkbox-group>
         </el-form-item>
+        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
     </card-container>
 </template>
 <script setup lang="ts">
 import { get_math } from '@/utils';
+import { cloneDeep } from 'lodash';
 
 const props = defineProps({
     value: {
@@ -71,7 +59,7 @@ const props = defineProps({
     }
 });
 
-const list_show_list = [{ name: '商品名称', value: '0' }, { name: '商品售价', value: '1' }]
+const list_show_list = [{ name: '商品名称', value: '0' }, { name: '商品售价', value: '1' }, { name: '售价单位', value: '2' }]
 
 const form = ref(props.value);
 
@@ -87,22 +75,31 @@ const img_remove = (index: number) => {
 const product_list_remove = (index: number) => {
     form.value.product_list.splice(index, 1);
 };
-const product_list_add = () => {
-    form.value.product_list.push({
-        id: get_math(),
-        src: 'carousel',
-        new_src: [],
-        href: {},
-    });
-};
 // 拖拽更新之后，更新数据
 const product_list_sort = (new_list: any) => {
-    form.value.product_list = new_list;
+    form.value.product_list = cloneDeep(new_list);
 }
 
 watchEffect(() => {
     form.value = props.value;
-})
+});
+
+const product_list_add = () => {
+    url_value_dialog_visible.value = true;
+};
+// 打开弹出框
+const url_value_dialog_visible = ref(false);
+// 弹出框选择的内容
+const url_value_dialog_call_back = (item: any[]) => {
+    item.forEach((item: any) => {
+        form.value.product_list.push({
+            id: get_math(),
+            new_url: [],
+            new_title: item.title,
+            link: item,
+        });
+    });
+};
 </script>
 <style lang="scss" scoped>
 .card.mb-8 {
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index eb5989b7..f5a9b4aa 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -244,7 +244,11 @@ const text_style = (typeface: string, size: number, color: string) => {
 const commodity_list = (list: any[], num: number) => {
     if (list.length > 0) {
         // 深拷贝一下，确保不会出现问题
-        const commodity_list = cloneDeep(list);
+        const commodity_list = cloneDeep(list).map((item: any) => ({
+            ...item.link,
+            title: item.new_title,
+            new_url: item.new_url,
+        }));
         // 存储数据显示
         let nav_list = [];
         // 拆分的数量
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 1a6428e6..86fb8f10 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -31,8 +31,14 @@
                         </div>
                         <div v-if="!['3','4','5'].includes(form.product_style)" class="flex-col gap-5 oh">
                             <div :class="[form.is_price_solo ? 'flex-row align-c nowrap': 'flex-col gap-5']">
-                                <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></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></div>
+                                <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 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 }}
+                                    <template v-if="is_show('7')">
+                                        {{ item.show_original_price_unit }}
+                                    </template>
+                                </span></div>
                             </div>
                             <div class="flex-row jc-sb align-e">
                                 <div>
@@ -133,6 +139,7 @@ const default_list = {
     new_url: []
 }
 const list = ref<product_list[]>([]);
+
 const get_products = () => {
     const { goods_category_ids, goods_brand_ids, number, sort, sort_rules } = form.value;
     const params = {
@@ -152,6 +159,7 @@ const get_products = () => {
         }
     });
 };
+
 watchEffect(() => {
     if (form.value.product_check == '0') {
         if (!isEmpty(form.value.product_list)) {
diff --git a/src/components/model-shop-list/model-shop-list-content.vue b/src/components/model-shop-list/model-shop-list-content.vue
index bb961cd4..3fe250f2 100644
--- a/src/components/model-shop-list/model-shop-list-content.vue
+++ b/src/components/model-shop-list/model-shop-list-content.vue
@@ -19,7 +19,7 @@
                     </el-form-item>
                     <template v-if="form.product_check === '0'">
                         <div class="nav-list">
-                            <dragGroup :list="form.product_list" img-params="images" @onsort="product_list_sort" @remove="product_list_remove"></dragGroup>
+                            <drag-group :list="form.product_list" img-params="images" @onsort="product_list_sort" @remove="product_list_remove"></drag-group>
                             <el-button class="mt-20 w" @click="add">+添加</el-button>
                         </div>
                     </template>
@@ -53,7 +53,6 @@
                 <product-show-config :value="form"></product-show-config>
             </div>
         </el-form>
-        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
     </div>
 </template>
 <script setup lang="ts">
@@ -125,37 +124,27 @@ onBeforeMount(() => {
     init();
 });
 
+const product_list_remove = (index: number) => {
+    form.value.product_list.splice(index, 1);
+};
 const add = () => {
-    url_value_dialog_visible.value = true;
+    form.value.product_list.push({
+        id: get_math(),
+        src: 'carousel',
+        new_src: [],
+        href: {},
+    });
 };
 // 拖拽更新之后，更新数据
 const product_list_sort = (new_list: any) => {
     form.value.product_list = new_list;
 };
-// 删除显示
-const product_list_remove = (index: number) => {
-    form.value.product_list.splice(index, 1);
-};
-
 const change_style = (val: any): void => {
     form.value.product_style = val;
     if (['3', '4', '5'].includes(val) && ['0', '1'].includes(form.value.shop_type)) {
         form.value.shop_type = '2';
     }
 };
-// 打开弹出框
-const url_value_dialog_visible = ref(false);
-// 弹出框选择的内容
-const url_value_dialog_call_back = (item: any[]) => {
-    item.forEach((item: any) => {
-        form.value.product_list.push({
-            id: get_math(),
-            new_url: [],
-            new_title: item.title,
-            link: item,
-        });
-    });
-};
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/src/components/model-shop-tabs/index.vue b/src/components/model-shop-tabs/index.vue
index 5d1326d9..9b47eae5 100644
--- a/src/components/model-shop-tabs/index.vue
+++ b/src/components/model-shop-tabs/index.vue
@@ -26,15 +26,16 @@ const state = reactive({
 const { form, new_style } = toRefs(state);
 
 const tabs_list = ref({
-        content: {
-            ...toRefs(form.value),
-            ...toRefs(form.value.tabs_list[0]),
-        },
-        style: {
-            ...toRefs(new_style.value),
-        }
+    content: {
+        ...toRefs(form.value),
+        ...toRefs(form.value.tabs_list[0]),
+    },
+    style: {
+        ...toRefs(new_style.value),
     }
-)
+})
+console.log(tabs_list.value);
+
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
 </script>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-content.vue b/src/components/model-shop-tabs/model-shop-tabs-content.vue
index 947ab6f6..5fd533e8 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -40,19 +40,7 @@
                                     </el-form-item>
                                     <template v-if="row.product_check === '0'">
                                         <div class="nav-list">
-                                            <drag :data="row.product_list" :space-col="20" @remove="product_list_remove($event, index)" @on-sort="product_list_sort($event, index)">
-                                                <template #default="scoped">
-                                                    <upload v-model="scoped.row.new_src" :limit="1" size="40" styles="2"></upload>
-                                                    <el-image :src="scoped.row.url" fit="contain" class="img">
-                                                        <template #error>
-                                                            <div class="bg-f5 flex-row jc-c align-c radius h w">
-                                                                <icon name="error-img" size="16" color="9"></icon>
-                                                            </div>
-                                                        </template>
-                                                    </el-image>
-                                                    <url-value v-model="scoped.row.href"></url-value>
-                                                </template>
-                                            </drag>
+                                            <drag-group :list="row.product_list" img-params="images" @onsort="product_list_sort($event, index)" @remove="product_list_remove($event, index)"></drag-group>
                                             <el-button class="mtb-20 w" @click="product_add(index)">+添加</el-button>
                                         </div>
                                     </template>
@@ -90,6 +78,7 @@
             </card-container>
             <!-- 商品显示的配置信息 -->
             <product-show-config :value="form"></product-show-config>
+            <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
         </el-form>
     </div>
 </template>
@@ -202,14 +191,24 @@ const product_list_remove = (index: number, product_index: number) => {
 const product_list_sort = (item: any, index: number) => {
     form.value.tabs_list[index].product_list = item;
 };
+let click_index = 0;
 const product_add = (index: number) => {
-    form.value.tabs_list[index].product_list.push({
-        id: get_math(),
-        src: 'carousel',
-        new_src: [],
-        href: '',
+    click_index = index;
+    url_value_dialog_visible.value = true;
+};
+
+// 打开弹出框
+const url_value_dialog_visible = ref(false);
+// 弹出框选择的内容
+const url_value_dialog_call_back = (item: any[]) => {
+    item.forEach((item: any) => {
+        form.value.tabs_list[click_index].product_list.push({
+            id: get_math(),
+            new_url: [],
+            new_title: item.title,
+            link: item,
+        });
     });
-    // emit('update:value', form);
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/layout/components/main/default/shop-list.ts b/src/layout/components/main/default/shop-list.ts
index cfa9a6de..9749ef7b 100644
--- a/src/layout/components/main/default/shop-list.ts
+++ b/src/layout/components/main/default/shop-list.ts
@@ -5,6 +5,7 @@ interface DefaultProductList {
         product_check: string;
         goods_category_ids: string[];
         goods_brand_ids: string[];
+        product_show_list: string[];
         product_list: string[];
         is_price_solo: boolean;
         number: number;
@@ -45,6 +46,7 @@ const defaultProductList: DefaultProductList = {
     content: {
         product_style: '0',
         product_check: '0',
+        product_show_list: [],
         product_list: [],
         goods_category_ids: [],
         goods_brand_ids: [],