From 9a73a20b8261eb117d94f07da9f03686c2977ed7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 9 Dec 2024 14:22:32 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E9=AD=94=E6=96=B9=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/custom.vue                     | 83 +++----------------
 components/diy/data-magic.vue                 |  6 +-
 .../diy/modules/custom/data-rendering.vue     | 25 ++++--
 components/diy/modules/custom/model-icon.vue  |  8 +-
 components/diy/modules/custom/model-image.vue | 14 ++--
 components/diy/modules/custom/model-text.vue  | 16 ++--
 .../diy/modules/data-magic/custom/index.vue   |  6 +-
 .../diy/modules/data-magic/video/index.vue    |  6 +-
 8 files changed, 61 insertions(+), 103 deletions(-)

diff --git a/components/diy/custom.vue b/components/diy/custom.vue
index 0804062e..f8c4ec24 100644
--- a/components/diy/custom.vue
+++ b/components/diy/custom.vue
@@ -5,7 +5,7 @@
                 <view v-for="(item, index) in data_source_content_list" :key="index">
                     <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container">
                         <view class="wh-auto ht-auto" :style="style_chunk_img_container">
-                            <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataRendering>
+                            <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
                         </view>
                     </view>
                 </view>
@@ -16,7 +16,7 @@
                         <view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'">
                             <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container + swiper_width">
                                 <div class="w h" :style="style_chunk_img_container">
-                                    <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataRendering>
+                                    <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
                                 </div>
                             </view>
                         </view>
@@ -88,70 +88,12 @@
                 div_height: 0,
                 custom_list_length: 0,
                 source_list: {
-                    goods: {
-                        // 存放手动输入的id
-                        data_ids: [],
-                        // 手动输入
-                        data_list: [],
-                        // 自动
-                        data_auto_list: [],
-                        // 商品类型
-                        data_type: '0',
-                        // 商品分类
-                        category_ids: [],
-                        // 品牌
-                        brand_ids: [],
-                        // 显示数量
-                        number: 4,
-                        // 排序类型
-                        order_by_type: '0',
-                        // 排序规则
-                        order_by_rule: '0',
-                    },
-                    article: {
-                        // 存放手动输入的id
-                        data_ids: [],
-                        // 手动输入
-                        data_list: [],
-                        // 自动
-                        data_auto_list: [],
-                        data_type: '0',
-                        number: 4,
-                        order_by_type: '0',
-                        order_by_rule: '0',
-                        // 文章封面
-                        is_cover: '0',
-                        // 分类id
-                        category_ids: [],
-                    },
-                    brand: {
-                        // 存放手动输入的id
-                        data_ids: [],
-                        // 手动输入
-                        data_list: [],
-                        // 自动
-                        data_auto_list: [],
-                        // 商品类型
-                        data_type: '0',
-                        // 商品分类
-                        category_ids: [],
-                        // 品牌
-                        brand_ids: [],
-                        // 显示数量
-                        number: 4,
-                        // 排序类型
-                        order_by_type: '0',
-                        // 排序规则
-                        order_by_rule: '0',
-                    }, 
-                    common: {
-                        // 存放手动输入的id
-                        data_ids: [],
-                        // 手动输入
-                        data_list: [],
-                        // 自动
-                        data_auto_list: [],
-                    }
+                    // 存放手动输入的id
+                    data_ids: [],
+                    // 手动输入
+                    data_list: [],
+                    // 自动
+                    data_auto_list: [],
                 },
                 data_source_content_list: [],
                 data_source: '',
@@ -167,6 +109,7 @@
                 indicator_location_style: '',
                 indicator_style: '',
                 slides_per_view: 1,
+                show_data: { data_key: 'id', data_name: 'name' },
                 old_data_style: {
                     color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
                     direction: '180deg',
@@ -208,12 +151,7 @@
                 if (!Object.keys(new_form.data_source_content).includes('data_auto_list') && !Object.keys(new_form.data_source_content).includes('data_list')) {
                     //深拷贝一下，保留历史数据
                     const data = JSON.parse(JSON.stringify(new_form.data_source_content));
-                    // 判断是否有符合条件的数据源，如何没有的话取公共数据源
-                    if (!isEmpty(this.source_list[new_form.data_source])) {
-                        new_form.data_source_content = this.source_list[new_form.data_source];
-                    } else {
-                        new_form.data_source_content = this.source_list['common'];
-                    }
+                    new_form.data_source_content = this.source_list;
                     // 如果老数组中有数据，将数据放到新数组中
                     if (!isEmpty(data)) {
                         new_form.data_source_content.data_list = [ data ];
@@ -272,6 +210,7 @@
                     swiper_height: swiper_height,
                     swiper_width: swiper_width,
                     slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : new_form.data_source_carousel_col ) : 1,
+                    show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' }
                 });
             },
             get_list(list, form, new_style) {
diff --git a/components/diy/data-magic.vue b/components/diy/data-magic.vue
index 53f9d3f1..ea6d221d 100644
--- a/components/diy/data-magic.vue
+++ b/components/diy/data-magic.vue
@@ -238,7 +238,7 @@
 
                     if (data_content.data_type == 'goods') {
                         data_content.list = this.commodity_list(data_content.goods_list, data_content.goods_num, data_content, data_style);
-                    } else if (data_content.data_type == 'custom' && ['1', '2'].includes(data_content.data_source_direction)) {
+                    } else if (data_content.data_type == 'custom' && ['vertical-scroll', 'horizontal'].includes(data_content.data_source_direction)) {
                         // 是自定义并且是轮播状态的时候，添加数据
                         const list = this.data_source_content_list(data_content);
                         const carousel_col = data_content?.data_source_carousel_col || 1;
@@ -252,8 +252,8 @@
             },
             // 数据来源的内容
             data_source_content_list(data_content){
-                if (['goods', 'article', 'brand'].includes(data_content.data_source)) {
-                    if (data_content.data_source_content.data_type == '0') {
+                if (data_content.is_custom_data == '1') {
+                    if (Number(data_content.data_source_content.data_type) === 0) {
                         return data_content.data_source_content.data_list;
                     } else {
                         return data_content.data_source_content.data_auto_list.map((item) => ({
diff --git a/components/diy/modules/custom/data-rendering.vue b/components/diy/modules/custom/data-rendering.vue
index baa07600..8b75f3df 100644
--- a/components/diy/modules/custom/data-rendering.vue
+++ b/components/diy/modules/custom/data-rendering.vue
@@ -2,19 +2,19 @@
     <view class="wh-auto pr" :style="'height:' + propDataHeight * propScale + 'px;'">
         <view v-for="(item, index) in propCustomList" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
             <template v-if="item.key == 'text'">
-                <model-text :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType" :data-index="propDataIndex" @url_event="url_event"></model-text>
+                <model-text :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propTitleParams="propShowData.data_name" :data-index="propDataIndex" @url_event="url_event"></model-text>
             </template>
             <template v-else-if="item.key == 'img'">
-                <model-image :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType" :data-index="propDataIndex" @url_event="url_event"></model-image>
+                <model-image :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propImgParams="propShowData.data_logo" :data-index="propDataIndex" @url_event="url_event"></model-image>
             </template>
             <template v-else-if="item.key == 'auxiliary-line'">
-                <model-lines :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType"></model-lines>
+                <model-lines :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom"></model-lines>
             </template>
             <template v-else-if="item.key == 'icon'">
-                <model-icon :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType" :data-index="propDataIndex" @url_event="url_event"></model-icon>
+                <model-icon :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :data-index="propDataIndex" @url_event="url_event"></model-icon>
             </template>
             <template v-else-if="item.key == 'panel'">
-                <model-panel :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType" :data-index="propDataIndex" @url_event="url_event"></model-panel>
+                <model-panel :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :data-index="propDataIndex" @url_event="url_event"></model-panel>
             </template>
         </view>
     </view>
@@ -48,10 +48,6 @@ export default {
                 return {};
             }
         },
-        propSourceType: {
-            type: String,
-            default: ''
-        },
         propDataHeight: {
             type: Number,
             default: 0,
@@ -68,6 +64,17 @@ export default {
             type: Number,
             default: 1,
         },
+        propIsCustom: {
+            type: Boolean,
+            default: false,
+        },
+        propShowData: {
+            type: Object,
+            default: () => ({
+                data_key: 'id',
+                data_name: 'name'
+            }),
+        },
     },
     data() {
         return {};
diff --git a/components/diy/modules/custom/model-icon.vue b/components/diy/modules/custom/model-icon.vue
index 721a4b3e..04f403ee 100644
--- a/components/diy/modules/custom/model-icon.vue
+++ b/components/diy/modules/custom/model-icon.vue
@@ -29,9 +29,9 @@
                 type: Number,
                 default: 1,
             },
-            propSourceType: {
-                type: String,
-                default: ''
+            propIsCustom: {
+                type: Boolean,
+                default: false
             }
         },
         data() {
@@ -61,7 +61,7 @@
                         // 不输入商品， 文章和品牌时，从外层处理数据
                         let icon = this.propSourceList[this.propValue.data_source_id];
                         // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-                        if (['goods', 'article', 'brand'].includes(this.propSourceType) && !isEmpty(this.propSourceList.data)) {
+                        if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
                             icon = this.propSourceList.data[this.propValue.data_source_id];
                         }
                         icon_class_value = icon;
diff --git a/components/diy/modules/custom/model-image.vue b/components/diy/modules/custom/model-image.vue
index c286152d..c96015a8 100644
--- a/components/diy/modules/custom/model-image.vue
+++ b/components/diy/modules/custom/model-image.vue
@@ -32,10 +32,14 @@
                 type: Number,
                 default: 1
             },
-            propSourceType: {
+            propIsCustom: {
+                type: Boolean,
+                default: false
+            },
+            propImgParams: {
                 type: String,
                 default: ''
-            }
+            },
         },
         data() {
             return {
@@ -85,11 +89,11 @@
                         // 不输入商品， 文章和品牌时，从外层处理数据
                         let image_url = this.propSourceList[form.data_source_id];
                         // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-                        if (['goods', 'article', 'brand'].includes(this.propSourceType) && !isEmpty(this.propSourceList.data)) {
+                        if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
                             // 判断是否是同一标志
-                            if (form.data_source_id == this.keyMap[this.propSourceType]) {
+                            if (form.data_source_id == this.propImgParams) {
                                 // 如果是符合条件的标志，先判断新的图片是否存在，存在就取新的图片，否则的话取原来的图片
-                                image_url = !isEmpty(this.propSourceList.new_cover)? this.propSourceList.new_cover[0]?.url || '' : this.propSourceList.data[this.keyMap[this.propSourceType]];
+                                image_url = !isEmpty(this.propSourceList.new_cover)? this.propSourceList.new_cover[0]?.url || '' : this.propSourceList.data[this.propImgParams];
                             } else {
                                 image_url = this.propSourceList.data[form.data_source_id];
                             }
diff --git a/components/diy/modules/custom/model-text.vue b/components/diy/modules/custom/model-text.vue
index 9a3a141c..1af7db10 100644
--- a/components/diy/modules/custom/model-text.vue
+++ b/components/diy/modules/custom/model-text.vue
@@ -36,10 +36,14 @@
                 type: Number,
                 default: 1
             },
-            propSourceType: {
+            propIsCustom: {
+                type: Boolean,
+                default: false
+            },
+            propTitleParams: {
                 type: String,
-                default: ''
-            }
+                default: 'name'
+            },
         },
         data() {
             return {
@@ -88,11 +92,11 @@
                 } else {
                     text = this.propSourceList[form.data_source_id];
                     // 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
-                    if (['goods', 'article', 'brand'].includes(this.propSourceType) && !isEmpty(this.propSourceList.data)) {
+                    if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
                         // 其他的切换为从data中取数据
-                        if (form.data_source_id == this.keyMap[this.propSourceType]) {
+                        if (form.data_source_id == this.propTitleParams) {
                             // 如果是符合条件的标志，先判断新的标题是否存在，存在就取新的标题，否则的话取原来的标题
-                            text = !isEmpty(this.propSourceList.new_title) ? this.propSourceList.new_title : this.propSourceList.data[this.keyMap[this.propSourceType]];
+                            text = !isEmpty(this.propSourceList.new_title) ? this.propSourceList.new_title : this.propSourceList.data[this.propTitleParams];
                         } else {
                             text = this.propSourceList.data[form.data_source_id];
                         }
diff --git a/components/diy/modules/data-magic/custom/index.vue b/components/diy/modules/data-magic/custom/index.vue
index 59bf2dda..a4aba2b7 100644
--- a/components/diy/modules/data-magic/custom/index.vue
+++ b/components/diy/modules/data-magic/custom/index.vue
@@ -3,7 +3,7 @@
         <view v-for="(item, index) in data_source_content_list" :key="index">
             <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container">
                 <view class="custom-container wh-auto ht-auto" :style="style_img_container">
-                    <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataRendering>
+                    <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
                 </view>
             </view>
             
@@ -15,7 +15,7 @@
                 <view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'">
                     <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container + swiper_width">
                         <div class="w h" :style="style_img_container">
-                            <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataRendering>
+                            <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
                         </div>
                     </view>
                 </view>
@@ -77,6 +77,7 @@ export default {
             // 轮播高度
             swiper_height: 0,
             swiper_width: 'width: 100%;',
+            show_data: { data_key: 'id', data_name: 'name' },
         };
     },
     computed: {
@@ -151,6 +152,7 @@ export default {
                     slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : new_form.data_source_carousel_col) : 1,
                     swiper_height: swiper_height,
                     swiper_width: swiper_width,
+                    show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' }
                 });
             }
         },
diff --git a/components/diy/modules/data-magic/video/index.vue b/components/diy/modules/data-magic/video/index.vue
index e4987613..f345f363 100644
--- a/components/diy/modules/data-magic/video/index.vue
+++ b/components/diy/modules/data-magic/video/index.vue
@@ -2,7 +2,7 @@
     <!-- 视频 -->
     <view class="wh-auto ht-auto" :style="style_container">
         <view class="video pr wh-auto ht-auto">
-            <video :src="video" class="wh-auto ht-auto" :poster="video_img" objectFit="cover" style="object-fit: cover"></video>
+            <video :src="video" class="wh-auto ht-auto" :poster="video_img" objectFit="cover" :style="'object-fit: cover;' + video_style"></video>
         </view>
     </view>
 </template>
@@ -25,6 +25,7 @@
                 style_container: '',
                 video_img: '',
                 video: '',
+                video_style: '',
             };
         },
         created() {
@@ -38,7 +39,8 @@
                 this.setData({
                     video_img: new_content.video_img.length > 0 ? new_content.video_img[0].url : '',
                     video: new_content.video.length > 0 ? new_content.video[0].url : '',
-                    style_container: padding_computer(this.propDataStyle.chunk_padding) + radius_computer(this.propDataStyle.img_radius) + 'box-sizing: border-box;',
+                    style_container: padding_computer(this.propDataStyle.chunk_padding)  + 'box-sizing: border-box;',
+                    video_style: radius_computer(this.propDataStyle.img_radius),
                 });
             }
         },

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

---
 common/js/common/common.js                    | 22 ++++++++++
 components/diy/modules/custom/model-icon.vue  | 28 ++++++++----
 components/diy/modules/custom/model-image.vue | 44 +++++++++++++------
 components/diy/modules/custom/model-text.vue  | 44 ++++++++++++++-----
 4 files changed, 105 insertions(+), 33 deletions(-)

diff --git a/common/js/common/common.js b/common/js/common/common.js
index 568c6730..5dcf8068 100644
--- a/common/js/common/common.js
+++ b/common/js/common/common.js
@@ -13,6 +13,28 @@ export function is_obj_empty(obj) {
     return Object.keys(obj).length === 0;
 }
 
+/**
+ * 获取嵌套对象的属性值
+ * 
+ * 该函数旨在通过指定的属性路径获取嵌套对象中的属性值它接受一个对象和一个属性路径字符串作为参数，
+ * 并返回对应路径的属性值如果输入的路径无效或对象中不存在该路径，则返回空字符串
+ * 
+ * @param {Object} obj - 要从中获取属性的嵌套对象
+ * @param {string} path - 属性路径，使用点号分隔的字符串表示
+ * @returns {string} - 返回指定路径的属性值，如果路径无效则返回空字符串
+ */
+export function get_nested_property(obj, path) {
+    // 检查路径参数是否为字符串且非空，若不满足条件则返回空字符串
+    if (typeof path !== 'string' || !path) return '';
+    
+    // 将属性路径字符串拆分为属性键数组
+    const keys = path.split('.');
+    
+    // 使用reduce方法遍历属性键数组，逐层访问对象属性
+    // 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
+    return keys.reduce((o, key) => (o && o[key] ? o[key] : ''), obj) || '';
+}
+
 /**
  * 指示器的样式
  *
diff --git a/components/diy/modules/custom/model-icon.vue b/components/diy/modules/custom/model-icon.vue
index 04f403ee..ffb76f16 100644
--- a/components/diy/modules/custom/model-icon.vue
+++ b/components/diy/modules/custom/model-icon.vue
@@ -4,7 +4,7 @@
     </view>
 </template>
 <script>
-    import { radius_computer, padding_computer, gradient_handle, isEmpty } from '@/common/js/common/common.js';
+    import { radius_computer, padding_computer, gradient_handle, isEmpty, get_nested_property } from '@/common/js/common/common.js';
     
     export default {
         props: {
@@ -58,11 +58,23 @@
                     icon_class_value = this.propValue.icon_class;
                 } else {
                     if (!isEmpty(this.propSourceList)) {
-                        // 不输入商品， 文章和品牌时，从外层处理数据
-                        let icon = this.propSourceList[this.propValue.data_source_id];
-                        // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-                        if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
-                            icon = this.propSourceList.data[this.propValue.data_source_id];
+                        let icon = '';
+                        // 获取数据源ID
+                        const data_source_id = this.propValue.data_source_id;
+                        if (!data_source_id.includes('.')) {
+                            // 不输入商品， 文章和品牌时，从外层处理数据
+                            icon = this.propSourceList[data_source_id];
+                            // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
+                            if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
+                                icon = this.propSourceList.data[data_source_id];
+                            }
+                        } else {
+                            // 不输入商品， 文章和品牌时，从外层处理数据
+                            icon = get_nested_property(this.propSourceList, data_source_id);
+                            // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
+                            if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
+                                icon = get_nested_property(this.propSourceList.data, data_source_id);
+                            }
                         }
                         icon_class_value = icon;
                     } else {
@@ -73,9 +85,9 @@
                 if (!isEmpty(this.propValue.icon_link)) {
                     url = this.propValue.icon_link?.page || '';
                 } else if (!isEmpty(this.propSourceList.data)) {
-                    url = this.propSourceList.data[this.propValue?.data_source_link] || '';
+                    url = get_nested_property(this.propSourceList.data, this.propValue?.data_source_link);
                 } else {
-                    url = this.propSourceList[this.propValue?.data_source_link] || '';
+                    url = get_nested_property(this.propSourceList, this.propValue?.data_source_link);
                 }
                 this.setData({
                     form: this.propValue,
diff --git a/components/diy/modules/custom/model-image.vue b/components/diy/modules/custom/model-image.vue
index c96015a8..f45f7fe7 100644
--- a/components/diy/modules/custom/model-image.vue
+++ b/components/diy/modules/custom/model-image.vue
@@ -4,7 +4,7 @@
     </view>
 </template>
 <script>
-    import { percentage_count, radius_computer, isEmpty } from '@/common/js/common/common.js';
+    import { percentage_count, radius_computer, isEmpty, get_nested_property } from '@/common/js/common/common.js';
     import imageEmpty from '@/components/diy/modules/image-empty.vue';
     export default {
         components: {
@@ -69,9 +69,9 @@
                 if (!isEmpty(this.propValue.link)) {
                     url = this.propValue.link?.page || '';
                 } else if (!isEmpty(this.propSourceList.data)) {
-                    url = this.propSourceList.data[this.propValue?.data_source_link] || '';
+                    url = get_nested_property(this.propSourceList.data, this.propValue?.data_source_link || '');
                 } else {
-                    url = this.propSourceList[this.propValue?.data_source_link] || '';
+                    url = get_nested_property(this.propSourceList, this.propValue?.data_source_link || '');
                 }
                 this.setData({
                     form: this.propValue,
@@ -86,16 +86,34 @@
                     return form.img[0];
                 } else {
                     if (!isEmpty(this.propSourceList)) {
-                        // 不输入商品， 文章和品牌时，从外层处理数据
-                        let image_url = this.propSourceList[form.data_source_id];
-                        // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-                        if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
-                            // 判断是否是同一标志
-                            if (form.data_source_id == this.propImgParams) {
-                                // 如果是符合条件的标志，先判断新的图片是否存在，存在就取新的图片，否则的话取原来的图片
-                                image_url = !isEmpty(this.propSourceList.new_cover)? this.propSourceList.new_cover[0]?.url || '' : this.propSourceList.data[this.propImgParams];
-                            } else {
-                                image_url = this.propSourceList.data[form.data_source_id];
+                        let image_url = '';
+                        // 获取数据源ID
+                        const data_source_id = form.data_source_id;
+                        if (!data_source_id.includes('.')) {
+                            // 不输入商品， 文章和品牌时，从外层处理数据
+                            image_url = this.propSourceList[data_source_id];
+                            // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
+                            if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
+                                // 判断是否是同一标志
+                                if (data_source_id == this.propImgParams) {
+                                    // 如果是符合条件的标志，先判断新的图片是否存在，存在就取新的图片，否则的话取原来的图片
+                                    image_url = !isEmpty(this.propSourceList.new_cover)? this.propSourceList.new_cover[0]?.url || '' : this.propSourceList.data[data_source_id];
+                                } else {
+                                    image_url = this.propSourceList.data[data_source_id];
+                                }
+                            }
+                        } else {
+                            // 不输入商品， 文章和品牌时，从外层处理数据
+                            image_url = get_nested_property(this.propSourceList, data_source_id);
+                            // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
+                            if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
+                                // 判断是否是同一标志
+                                if (data_source_id == this.propImgParams) {
+                                    // 如果是符合条件的标志，先判断新的图片是否存在，存在就取新的图片，否则的话取原来的图片
+                                    image_url = !isEmpty(this.propSourceList.new_cover)? this.propSourceList.new_cover[0]?.url || '' : get_nested_property(this.propSourceList.data, data_source_id);
+                                } else {
+                                    image_url = get_nested_property(this.propSourceList.data, data_source_id);
+                                }
                             }
                         }
                         return image_url;
diff --git a/components/diy/modules/custom/model-text.vue b/components/diy/modules/custom/model-text.vue
index 1af7db10..91fb4f03 100644
--- a/components/diy/modules/custom/model-text.vue
+++ b/components/diy/modules/custom/model-text.vue
@@ -11,7 +11,7 @@
     </view>
 </template>
 <script>
-    import { radius_computer, padding_computer, isEmpty, gradient_handle } from '@/common/js/common/common.js';
+    import { radius_computer, padding_computer, isEmpty, gradient_handle, get_nested_property } from '@/common/js/common/common.js';
     
     export default {
         props: {
@@ -70,12 +70,13 @@
         methods: {
             init() {
                 let url = '';
+                const data_source_link = this.propValue?.data_source_link;
                 if (!isEmpty(this.propValue.text_link)) {
                     url = this.propValue.text_link?.page || '';
                 } else if (!isEmpty(this.propSourceList.data)) {
-                    url = this.propSourceList.data[this.propValue?.data_source_link] || '';
+                    url = get_nested_property(this.propSourceList.data, data_source_link);
                 } else {
-                    url = this.propSourceList[this.propValue?.data_source_link] || '';
+                    url = get_nested_property(this.propSourceList, data_source_link);
                 }
                 this.setData({
                     form: this.propValue,
@@ -90,15 +91,34 @@
                 if (!isEmpty(form.text_title)) {
                     text = form.text_title;
                 } else {
-                    text = this.propSourceList[form.data_source_id];
-                    // 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
-                    if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
-                        // 其他的切换为从data中取数据
-                        if (form.data_source_id == this.propTitleParams) {
-                            // 如果是符合条件的标志，先判断新的标题是否存在，存在就取新的标题，否则的话取原来的标题
-                            text = !isEmpty(this.propSourceList.new_title) ? this.propSourceList.new_title : this.propSourceList.data[this.propTitleParams];
-                        } else {
-                            text = this.propSourceList.data[form.data_source_id];
+                    let image_url = '';
+                    // 获取数据源ID
+                    const data_source_id = form.data_source_id;
+                    if (!data_source_id.includes('.')) {
+                        text = this.propSourceList[data_source_id];
+                        // 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
+                        if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
+                            // 其他的切换为从data中取数据
+                            if (data_source_id == this.propTitleParams) {
+                                // 如果是符合条件的标志，先判断新的标题是否存在，存在就取新的标题，否则的话取原来的标题
+                                text = !isEmpty(this.propSourceList.new_title) ? this.propSourceList.new_title : this.propSourceList.data[data_source_id];
+                            } else {
+                                text = this.propSourceList.data[data_source_id];
+                            }
+                        }
+                    } else {
+                        // 多层级数据
+                        const keys = data_source_id.split('.');
+                        text = get_nested_property(this.propSourceList, data_source_id);
+                        // 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
+                        if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
+                            // 其他的切换为从data中取数据
+                            if (data_source_id == this.propTitleParams) {
+                                // 如果是符合条件的标志，先判断新的标题是否存在，存在就取新的标题，否则的话取原来的标题
+                                text = !isEmpty(this.propSourceList.new_title) ? this.propSourceList.new_title : get_nested_property(this.propSourceList.data, data_source_id);
+                            } else {
+                                text = get_nested_property(this.propSourceList.data, data_source_id);
+                            }
                         }
                     }
                 }

From 7850e2dbb977cace7570e4f9da851917aea5f9e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 10 Dec 2024 16:33:13 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/js/common/common.js                    | 44 +++++++++++
 components/diy/custom.vue                     |  6 +-
 components/diy/data-magic.vue                 | 22 +++---
 .../diy/modules/custom/data-rendering.vue     | 14 ++--
 components/diy/modules/custom/model-icon.vue  | 60 ++++++++------
 components/diy/modules/custom/model-image.vue | 79 ++++++++++---------
 components/diy/modules/custom/model-panel.vue | 10 ++-
 components/diy/modules/custom/model-text.vue  | 71 ++++++++++-------
 .../diy/modules/data-magic/custom/index.vue   | 17 +++-
 .../diy/modules/data-magic/magic-carousel.vue | 14 +++-
 .../modules/data-magic/product-list-show.vue  | 12 ++-
 .../diy/modules/data-magic/video/index.vue    | 10 +++
 12 files changed, 238 insertions(+), 121 deletions(-)

diff --git a/common/js/common/common.js b/common/js/common/common.js
index 5dcf8068..d59e391b 100644
--- a/common/js/common/common.js
+++ b/common/js/common/common.js
@@ -35,6 +35,50 @@ export function get_nested_property(obj, path) {
     return keys.reduce((o, key) => (o && o[key] ? o[key] : ''), obj) || '';
 }
 
+/**
+ * 根据数据源链接ID和属性源列表生成自定义链接
+ * 
+ * @param {string} data_source_link_id - 数据源链接ID，可以是单个ID或多个ID以分号分隔
+ * @param {object} propSourceList - 包含数据源的属性列表
+ * @param {object} source_link_option - 链接生成的可选配置，包括首尾添加的字符串和连接符
+ * @returns {string} 生成的自定义链接URL
+ */
+export function get_custom_link(data_source_link_id, propSourceList, source_link_option) {
+    let url = '';
+    if (!data_source_link_id) {
+        return '';
+    }
+    // 判断数据源链接ID是否包含分号，包含则表示有多个ID
+    if (data_source_link_id.includes(';')) {
+        // 分割数据源链接ID，处理多个ID
+        const ids = data_source_link_id.split(';');
+        let source_url = '';
+        // 遍历每个ID，获取对应的属性值并拼接成URL
+        ids.forEach((item, index) => {
+            // 判断数据源列表是否为空
+            if (!isEmpty(propSourceList.data)) {
+                // 从数据源列表的data属性中获取嵌套属性值，并使用指定的连接符连接
+                source_url += get_nested_property(propSourceList.data, item) + (index != ids.length -1 ? (source_link_option?.join || '') : '');
+            } else {
+                // 直接从数据源列表中获取嵌套属性值，并使用指定的连接符连接
+                source_url += get_nested_property(propSourceList, item) + (index != ids.length -1 ? (source_link_option?.join || '') : '');
+            }
+        });
+        url = source_url;
+    } else {
+        // 处理单个ID的情况
+        if (!isEmpty(propSourceList.data)) {
+            // 从数据源列表的data属性中获取嵌套属性值作为URL
+            url = get_nested_property(propSourceList.data, data_source_link_id);
+        } else {
+            // 直接从数据源列表中获取嵌套属性值作为URL
+            url = get_nested_property(propSourceList, data_source_link_id);
+        }
+    }
+    // 返回最终的URL，添加首尾的可选字符串
+    return (source_link_option?.first || '') + url + (source_link_option?.last || '');
+}
+
 /**
  * 指示器的样式
  *
diff --git a/components/diy/custom.vue b/components/diy/custom.vue
index f8c4ec24..cb97fe99 100644
--- a/components/diy/custom.vue
+++ b/components/diy/custom.vue
@@ -5,7 +5,7 @@
                 <view v-for="(item, index) in data_source_content_list" :key="index">
                     <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container">
                         <view class="wh-auto ht-auto" :style="style_chunk_img_container">
-                            <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
+                            <dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
                         </view>
                     </view>
                 </view>
@@ -16,7 +16,7 @@
                         <view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'">
                             <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container + swiper_width">
                                 <div class="w h" :style="style_chunk_img_container">
-                                    <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
+                                    <dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
                                 </div>
                             </view>
                         </view>
@@ -37,7 +37,7 @@
             <template v-else>
                 <view :style="style_chunk_container">
                     <view class="wh-auto ht-auto" :style="style_chunk_img_container">
-                        <dataRendering :propCustomList="form.custom_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
+                        <dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
                     </view>
                 </view>
             </template>
diff --git a/components/diy/data-magic.vue b/components/diy/data-magic.vue
index ea6d221d..0ebf1f19 100644
--- a/components/diy/data-magic.vue
+++ b/components/diy/data-magic.vue
@@ -21,20 +21,20 @@
                                             <view class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
                                         </view>
                                         <view class="w h">
-                                            <magic-carousel :propValue="item" :propGoodStyle="item.data_style" :propActived="form.style_actived" propType="product" :propDataIndex="index" @onCarouselChange="carousel_change"></magic-carousel>
+                                            <magic-carousel :propKey="propKey + index" :propValue="item" :propGoodStyle="item.data_style" :propActived="form.style_actived" propType="product" :propDataIndex="index" @onCarouselChange="carousel_change"></magic-carousel>
                                         </view>
                                     </view>
                                 </template>
                                 <template v-else-if="item.data_content.data_type == 'images'">
                                     <div class="w h" :style="item.data_style.chunk_padding_data">
-                                        <magic-carousel :propValue="item" propType="img" :propActived="form.style_actived" :propDataIndex="index" @onCarouselChange="carousel_change"></magic-carousel>
+                                        <magic-carousel :propKey="propKey + index" :propValue="item" propType="img" :propActived="form.style_actived" :propDataIndex="index" @onCarouselChange="carousel_change"></magic-carousel>
                                     </div>
                                 </template>
                                 <template v-else-if="item.data_content.data_type == 'custom'">
-                                    <customIndex :propValue="item" :propMagicScale="magic_scale" :propDataSpacing="new_style.image_spacing" :propDataIndex="index" @onCarouselChange="carousel_change"></customIndex>
+                                    <customIndex :propKey="propKey + index" :propValue="item" :propMagicScale="magic_scale" :propDataSpacing="new_style.image_spacing" :propDataIndex="index" @onCarouselChange="carousel_change"></customIndex>
                                 </template>
                                 <template v-else>
-                                    <videoIndex :propValue="item.data_content" :propDataStyle="item.data_style"></videoIndex>
+                                    <videoIndex :propKey="propKey + index" :propValue="item.data_content" :propDataStyle="item.data_style"></videoIndex>
                                 </template>
                                 <view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="['left', 'right'].includes(item.data_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="item.data_style.indicator_location_style">
                                     <template v-if="item.data_style.indicator_style == 'num'">
@@ -68,20 +68,20 @@
                                         <view class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
                                     </view>
                                     <view class="w h">
-                                        <magic-carousel :propValue="item" :propGoodStyle="item.data_style" propType="product" :propActived="form.style_actived" :propDataIndex="index"  @onCarouselChange="carousel_change"></magic-carousel>
+                                        <magic-carousel :propKey="propKey + index" :propValue="item" :propGoodStyle="item.data_style" propType="product" :propActived="form.style_actived" :propDataIndex="index"  @onCarouselChange="carousel_change"></magic-carousel>
                                     </view>
                                 </view>
                             </template>
                             <template v-else-if="item.data_content.data_type == 'images'">
                                 <div class="w h" :style="item.data_style.chunk_padding_data">
-                                    <magic-carousel :propValue="item" propType="img" :propActived="form.style_actived" :propDataIndex="index"  @onCarouselChange="carousel_change"></magic-carousel>
+                                    <magic-carousel :propKey="propKey + index" :propValue="item" propType="img" :propActived="form.style_actived" :propDataIndex="index"  @onCarouselChange="carousel_change"></magic-carousel>
                                 </div>
                             </template>
                             <template v-else-if="item.data_content.data_type == 'custom'">
-                                <customIndex :propValue="item" :propMagicScale="magic_scale" :propDataSpacing="new_style.image_spacing" :propDataIndex="index" @onCarouselChange="carousel_change"></customIndex>
+                                <customIndex :propKey="propKey + index" :propValue="item" :propMagicScale="magic_scale" :propDataSpacing="new_style.image_spacing" :propDataIndex="index" @onCarouselChange="carousel_change"></customIndex>
                             </template>
                             <template v-else>
-                                <videoIndex :propValue="item.data_content" :propDataStyle="item.data_style"></videoIndex>
+                                <videoIndex :propKey="propKey + index" :propValue="item.data_content" :propDataStyle="item.data_style"></videoIndex>
                             </template>
                             <view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="['left', 'right'].includes(item.data_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="item.data_style.indicator_location_style">
                                 <template v-if="item.data_style.indicator_style == 'num'">
@@ -105,8 +105,8 @@
 <script>
     const app = getApp();
     import magicCarousel from '@/components/diy/modules/data-magic/magic-carousel.vue';
-    import customIndex from '@/components/diy/modules/data-magic/custom';
-    import videoIndex from '@/components/diy/modules/data-magic/video';
+    import customIndex from '@/components/diy/modules/data-magic/custom/index.vue';
+    import videoIndex from '@/components/diy/modules/data-magic/video/index.vue';
     import { background_computer, common_styles_computer, common_img_computer, gradient_computer, radius_computer, percentage_count, isEmpty, padding_computer, get_indicator_location_style, get_indicator_style } from '@/common/js/common/common.js';
     var system = app.globalData.get_system_info(null, null, true);
     var sys_width = app.globalData.window_width_handle(system.windowWidth);
@@ -122,7 +122,7 @@
                 default: () => ({}),
             },
             propKey: {
-                type: [String,Number],
+                type: [String, Number],
                 default: '',
             },
             // 组件渲染的下标
diff --git a/components/diy/modules/custom/data-rendering.vue b/components/diy/modules/custom/data-rendering.vue
index 8b75f3df..5c4649a6 100644
--- a/components/diy/modules/custom/data-rendering.vue
+++ b/components/diy/modules/custom/data-rendering.vue
@@ -2,19 +2,19 @@
     <view class="wh-auto pr" :style="'height:' + propDataHeight * propScale + 'px;'">
         <view v-for="(item, index) in propCustomList" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
             <template v-if="item.key == 'text'">
-                <model-text :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propTitleParams="propShowData.data_name" :data-index="propDataIndex" @url_event="url_event"></model-text>
+                <model-text :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propTitleParams="propShowData.data_name" :data-index="propDataIndex" @url_event="url_event"></model-text>
             </template>
             <template v-else-if="item.key == 'img'">
-                <model-image :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propImgParams="propShowData.data_logo" :data-index="propDataIndex" @url_event="url_event"></model-image>
+                <model-image :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propImgParams="propShowData.data_logo" :data-index="propDataIndex" @url_event="url_event"></model-image>
             </template>
             <template v-else-if="item.key == 'auxiliary-line'">
-                <model-lines :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom"></model-lines>
+                <model-lines :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom"></model-lines>
             </template>
             <template v-else-if="item.key == 'icon'">
-                <model-icon :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :data-index="propDataIndex" @url_event="url_event"></model-icon>
+                <model-icon :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :data-index="propDataIndex" @url_event="url_event"></model-icon>
             </template>
             <template v-else-if="item.key == 'panel'">
-                <model-panel :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :data-index="propDataIndex" @url_event="url_event"></model-panel>
+                <model-panel :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :data-index="propDataIndex" @url_event="url_event"></model-panel>
             </template>
         </view>
     </view>
@@ -75,6 +75,10 @@ export default {
                 data_name: 'name'
             }),
         },
+        propKey: {
+            type: [String, Number],
+            default: '',
+        },
     },
     data() {
         return {};
diff --git a/components/diy/modules/custom/model-icon.vue b/components/diy/modules/custom/model-icon.vue
index ffb76f16..ce766dd1 100644
--- a/components/diy/modules/custom/model-icon.vue
+++ b/components/diy/modules/custom/model-icon.vue
@@ -4,7 +4,7 @@
     </view>
 </template>
 <script>
-    import { radius_computer, padding_computer, gradient_handle, isEmpty, get_nested_property } from '@/common/js/common/common.js';
+    import { radius_computer, padding_computer, gradient_handle, isEmpty, get_nested_property, get_custom_link } from '@/common/js/common/common.js';
     
     export default {
         props: {
@@ -60,43 +60,55 @@
                     if (!isEmpty(this.propSourceList)) {
                         let icon = '';
                         // 获取数据源ID
-                        const data_source_id = this.propValue.data_source_id;
-                        if (!data_source_id.includes('.')) {
-                            // 不输入商品， 文章和品牌时，从外层处理数据
-                            icon = this.propSourceList[data_source_id];
-                            // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-                            if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
-                                icon = this.propSourceList.data[data_source_id];
-                            }
+                        const data_source_id = !isEmpty(this.propValue?.data_source_field?.id || '') ? this.propValue?.data_source_field?.id : this.propValue.data_source_id;
+                        // 数据源内容
+                        const option = this.propValue?.data_source_field?.option || {};
+                        if (data_source_id.includes(';')) {
+                            const ids = data_source_id.split(';');
+                            let url = '';
+                            ids.forEach((item, index) => {
+                                url += this.data_handling(item) + (index != ids.length - 1 ? (option?.join || '') : '');
+                            });
+                            icon = url;
                         } else {
                             // 不输入商品， 文章和品牌时，从外层处理数据
-                            icon = get_nested_property(this.propSourceList, data_source_id);
-                            // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-                            if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
-                                icon = get_nested_property(this.propSourceList.data, data_source_id);
-                            }
+                            icon = this.data_handling(data_source_id);
                         }
-                        icon_class_value = icon;
+                        icon_class_value = (option?.first || '') + icon + (option?.last || '');
                     } else {
                         icon_class_value = '';
                     }
                 }
-                let url = '';
-                if (!isEmpty(this.propValue.icon_link)) {
-                    url = this.propValue.icon_link?.page || '';
-                } else if (!isEmpty(this.propSourceList.data)) {
-                    url = get_nested_property(this.propSourceList.data, this.propValue?.data_source_link);
-                } else {
-                    url = get_nested_property(this.propSourceList, this.propValue?.data_source_link);
-                }
                 this.setData({
                     form: this.propValue,
                     scale: this.propScale,
                     com_style: this.get_com_style(this.propValue, this.propScale),
                     icon_class: icon_class_value,
-                    icon_url: url,
+                    icon_url: this.get_icon_link(),
                 });
             },
+            get_icon_link() {
+                let url = '';
+                if (!isEmpty(this.propValue.icon_link)) {
+                    url = this.propValue.icon_link?.page || '';
+                } else {
+                    // 获取数据源ID
+                    const data_source_link_id = !isEmpty(this.propValue?.data_source_link_field?.id || '') ? this.propValue?.data_source_link_field?.id : this.propValue.data_source_link;
+                    // 数据源内容
+                    const source_link_option = this.propValue?.data_source_link_field?.option || {};
+                    url = get_custom_link(data_source_link_id, this.propSourceList, source_link_option)
+                }
+                return url;
+            },
+            data_handling(data_source_id) {
+                // 不输入商品， 文章和品牌时，从外层处理数据
+                let icon = get_nested_property(this.propSourceList, data_source_id);
+                // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
+                if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
+                    icon = get_nested_property(this.propSourceList.data, data_source_id);
+                }
+                return icon;
+            },
             get_com_style(form, scale) {
                 let style = `${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius, scale, true) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding, scale, true) };`;
                 if (form.border_show == '1') {
diff --git a/components/diy/modules/custom/model-image.vue b/components/diy/modules/custom/model-image.vue
index f45f7fe7..2623e81c 100644
--- a/components/diy/modules/custom/model-image.vue
+++ b/components/diy/modules/custom/model-image.vue
@@ -4,7 +4,7 @@
     </view>
 </template>
 <script>
-    import { percentage_count, radius_computer, isEmpty, get_nested_property } from '@/common/js/common/common.js';
+    import { percentage_count, radius_computer, isEmpty, get_nested_property, get_custom_link } from '@/common/js/common/common.js';
     import imageEmpty from '@/components/diy/modules/image-empty.vue';
     export default {
         components: {
@@ -65,22 +65,27 @@
         },
         methods: {
             init() {
-                let url = '';
-                if (!isEmpty(this.propValue.link)) {
-                    url = this.propValue.link?.page || '';
-                } else if (!isEmpty(this.propSourceList.data)) {
-                    url = get_nested_property(this.propSourceList.data, this.propValue?.data_source_link || '');
-                } else {
-                    url = get_nested_property(this.propSourceList, this.propValue?.data_source_link || '');
-                }
                 this.setData({
                     form: this.propValue,
                     img: this.get_img_url(this.propValue),
                     image_style: this.get_image_style(this.propValue, this.propScale),
                     border_style: this.get_border_style(this.propValue, this.propScale),
-                    img_url: url,
+                    img_url: this.get_img_link(),
                 });
             },
+            get_img_link() {
+                let url = '';
+                if (!isEmpty(this.propValue.link)) {
+                    url = this.propValue.link?.page || '';
+                } else {
+                    // 获取数据源ID
+                    const data_source_link_id = !isEmpty(this.propValue?.data_source_link_field?.id || '') ? this.propValue?.data_source_link_field?.id : this.propValue.data_source_link;
+                    // 数据源内容
+                    const source_link_option = this.propValue?.data_source_link_field?.option || {};
+                    url = get_custom_link(data_source_link_id, this.propSourceList, source_link_option)
+                }
+                return url;
+            },
             get_img_url(form) {
                 if (!isEmpty(form.img[0])) {
                     return form.img[0];
@@ -88,40 +93,40 @@
                     if (!isEmpty(this.propSourceList)) {
                         let image_url = '';
                         // 获取数据源ID
-                        const data_source_id = form.data_source_id;
-                        if (!data_source_id.includes('.')) {
-                            // 不输入商品， 文章和品牌时，从外层处理数据
-                            image_url = this.propSourceList[data_source_id];
-                            // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-                            if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
-                                // 判断是否是同一标志
-                                if (data_source_id == this.propImgParams) {
-                                    // 如果是符合条件的标志，先判断新的图片是否存在，存在就取新的图片，否则的话取原来的图片
-                                    image_url = !isEmpty(this.propSourceList.new_cover)? this.propSourceList.new_cover[0]?.url || '' : this.propSourceList.data[data_source_id];
-                                } else {
-                                    image_url = this.propSourceList.data[data_source_id];
-                                }
-                            }
+                        const data_source_id = !isEmpty(form?.data_source_field?.id || '') ? form?.data_source_field?.id : form.data_source_id;
+                        // 数据源内容
+                        const option = form?.data_source_field?.option || {};
+                        if (data_source_id.includes(';')) {
+                            const ids = data_source_id.split(';');
+                            let url = '';
+                            ids.forEach((item, index) => {
+                                url += this.data_handling(item) + (index != ids.length - 1 ? (option?.join || '') : '');
+                            });
+                            image_url = url;
                         } else {
-                            // 不输入商品， 文章和品牌时，从外层处理数据
-                            image_url = get_nested_property(this.propSourceList, data_source_id);
-                            // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-                            if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
-                                // 判断是否是同一标志
-                                if (data_source_id == this.propImgParams) {
-                                    // 如果是符合条件的标志，先判断新的图片是否存在，存在就取新的图片，否则的话取原来的图片
-                                    image_url = !isEmpty(this.propSourceList.new_cover)? this.propSourceList.new_cover[0]?.url || '' : get_nested_property(this.propSourceList.data, data_source_id);
-                                } else {
-                                    image_url = get_nested_property(this.propSourceList.data, data_source_id);
-                                }
-                            }
+                            image_url = this.data_handling(data_source_id);
                         }
-                        return image_url;
+                        return (option?.first || '') + image_url + (option?.last || '');
                     } else {
                         return '';
                     }
                 }
             },
+            data_handling(data_source_id) {
+                // 不输入商品， 文章和品牌时，从外层处理数据
+                let image_url = get_nested_property(this.propSourceList, data_source_id);
+                // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
+                if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
+                    // 判断是否是同一标志
+                    if (data_source_id == this.propImgParams) {
+                        // 如果是符合条件的标志，先判断新的图片是否存在，存在就取新的图片，否则的话取原来的图片
+                        image_url = !isEmpty(this.propSourceList.new_cover)? this.propSourceList.new_cover[0]?.url || '' : get_nested_property(this.propSourceList.data, data_source_id);
+                    } else {
+                        image_url = get_nested_property(this.propSourceList.data, data_source_id);
+                    }
+                }
+                return image_url;
+            },
             get_image_style(form, scale) {
                 return `width: ${percentage_count(form.img_width, form.com_width)}; height: ${percentage_count(form.img_height, form.com_height)};transform: rotate(${form.img_rotate}deg); ${radius_computer(form.img_radius, scale, true)};`;
             },
diff --git a/components/diy/modules/custom/model-panel.vue b/components/diy/modules/custom/model-panel.vue
index b9077326..11566d5e 100644
--- a/components/diy/modules/custom/model-panel.vue
+++ b/components/diy/modules/custom/model-panel.vue
@@ -4,7 +4,7 @@
     </view>
 </template>
 <script>
-    import { radius_computer, background_computer, gradient_handle, isEmpty } from '@/common/js/common/common.js';
+    import { radius_computer, background_computer, gradient_handle, isEmpty, get_custom_link } from '@/common/js/common/common.js';
     
     export default {
         props: {
@@ -52,10 +52,12 @@
                 let url = '';
                 if (!isEmpty(this.propValue.link)) {
                     url = this.propValue.link?.page || '';
-                } else if (!isEmpty(this.propSourceList.data)) {
-                    url = this.propSourceList.data[this.propValue?.data_source_link] || '';
                 } else {
-                    url = this.propSourceList[this.propValue?.data_source_link] || '';
+                    // 获取数据源ID
+                    const data_source_link_id = !isEmpty(this.propValue?.data_source_link_field?.id || '') ? this.propValue?.data_source_link_field?.id : this.propValue.data_source_link;
+                    // 数据源内容
+                    const source_link_option = this.propValue?.data_source_link_field?.option || {};
+                    url = get_custom_link(data_source_link_id, this.propSourceList, source_link_option);
                 }
                 this.setData({
                     form: this.propValue,
diff --git a/components/diy/modules/custom/model-text.vue b/components/diy/modules/custom/model-text.vue
index 91fb4f03..e0b28e09 100644
--- a/components/diy/modules/custom/model-text.vue
+++ b/components/diy/modules/custom/model-text.vue
@@ -11,7 +11,7 @@
     </view>
 </template>
 <script>
-    import { radius_computer, padding_computer, isEmpty, gradient_handle, get_nested_property } from '@/common/js/common/common.js';
+    import { radius_computer, padding_computer, isEmpty, gradient_handle, get_nested_property, get_custom_link } from '@/common/js/common/common.js';
     
     export default {
         props: {
@@ -70,13 +70,15 @@
         methods: {
             init() {
                 let url = '';
-                const data_source_link = this.propValue?.data_source_link;
                 if (!isEmpty(this.propValue.text_link)) {
                     url = this.propValue.text_link?.page || '';
-                } else if (!isEmpty(this.propSourceList.data)) {
-                    url = get_nested_property(this.propSourceList.data, data_source_link);
                 } else {
-                    url = get_nested_property(this.propSourceList, data_source_link);
+                    // 获取数据源ID
+                    const data_source_link_id = !isEmpty(this.propValue?.data_source_link_field?.id || '') ? this.propValue?.data_source_link_field?.id : this.propValue.data_source_link;
+                    // 数据源内容
+                    const source_link_option = this.propValue?.data_source_link_field?.option || {};
+                    // 调用方法处理数据显示
+                    url = get_custom_link(data_source_link_id, this.propSourceList, source_link_option);
                 }
                 this.setData({
                     form: this.propValue,
@@ -91,35 +93,44 @@
                 if (!isEmpty(form.text_title)) {
                     text = form.text_title;
                 } else {
-                    let image_url = '';
+                    let text_title = '';
                     // 获取数据源ID
-                    const data_source_id = form.data_source_id;
-                    if (!data_source_id.includes('.')) {
-                        text = this.propSourceList[data_source_id];
-                        // 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
-                        if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
-                            // 其他的切换为从data中取数据
-                            if (data_source_id == this.propTitleParams) {
-                                // 如果是符合条件的标志，先判断新的标题是否存在，存在就取新的标题，否则的话取原来的标题
-                                text = !isEmpty(this.propSourceList.new_title) ? this.propSourceList.new_title : this.propSourceList.data[data_source_id];
+                    const data_source_id = !isEmpty(form?.data_source_field?.id || '') ? form?.data_source_field?.id : [ form.data_source_id ];
+                    // 数据源内容
+                    const option = form?.data_source_field?.option || [];
+                    // 多选判断
+                    if (data_source_id.length > 0) {
+                        // 遍历取出所有的值
+                        data_source_id.forEach(source_id => {
+                            const sourceList = option.filter((item) => item.field == source_id);
+                            // 根据数据源ID是否包含点号来区分处理方式
+                            if (source_id.includes(';')) {
+                                const ids = source_id.split(';');
+                                let source_text = '';
+                                ids.forEach((item, index) => {
+                                    source_text += this.data_handling(item) + (index != ids.length - 1 ? (sourceList?.join || '') : '');
+                                });
+                                text_title += (sourceList?.first || '') + source_text + (sourceList?.last || '');
                             } else {
-                                text = this.propSourceList.data[data_source_id];
+                                text_title += (sourceList?.first || '') + this.data_handling(source_id) + (sourceList?.last || '');
                             }
-                        }
+                        });
+                    }
+                    // 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
+                    text = text_title;
+                }
+                return text;
+            },
+            data_handling(data_source_id) {
+                let text = get_nested_property(this.propSourceList, data_source_id);
+                // 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
+                if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
+                    // 其他的切换为从data中取数据
+                    if (data_source_id == this.propTitleParams) {
+                        // 如果是符合条件的标志，先判断新的标题是否存在，存在就取新的标题，否则的话取原来的标题
+                        text = !isEmpty(this.propSourceList.new_title) ? this.propSourceList.new_title : get_nested_property(this.propSourceList.data, data_source_id);
                     } else {
-                        // 多层级数据
-                        const keys = data_source_id.split('.');
-                        text = get_nested_property(this.propSourceList, data_source_id);
-                        // 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
-                        if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
-                            // 其他的切换为从data中取数据
-                            if (data_source_id == this.propTitleParams) {
-                                // 如果是符合条件的标志，先判断新的标题是否存在，存在就取新的标题，否则的话取原来的标题
-                                text = !isEmpty(this.propSourceList.new_title) ? this.propSourceList.new_title : get_nested_property(this.propSourceList.data, data_source_id);
-                            } else {
-                                text = get_nested_property(this.propSourceList.data, data_source_id);
-                            }
-                        }
+                        text = get_nested_property(this.propSourceList.data, data_source_id);
                     }
                 }
                 return text;
diff --git a/components/diy/modules/data-magic/custom/index.vue b/components/diy/modules/data-magic/custom/index.vue
index a4aba2b7..c67e1844 100644
--- a/components/diy/modules/data-magic/custom/index.vue
+++ b/components/diy/modules/data-magic/custom/index.vue
@@ -3,7 +3,7 @@
         <view v-for="(item, index) in data_source_content_list" :key="index">
             <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container">
                 <view class="custom-container wh-auto ht-auto" :style="style_img_container">
-                    <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
+                    <dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
                 </view>
             </view>
             
@@ -15,7 +15,7 @@
                 <view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'">
                     <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container + swiper_width">
                         <div class="w h" :style="style_img_container">
-                            <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
+                            <dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
                         </div>
                     </view>
                 </view>
@@ -25,7 +25,7 @@
     <view v-else>
         <view :style="style_container">
             <view class="custom-container wh-auto ht-auto" :style="style_img_container">
-                <dataRendering :propCustomList="form.custom_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
+                <dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
             </view>
         </view>
     </view>
@@ -41,6 +41,10 @@ export default {
         dataRendering
     },
     props: {
+        propKey: {
+            type: String,
+            default: '',
+        },
         propValue: {
             type: Object,
             default: () => {
@@ -80,6 +84,12 @@ export default {
             show_data: { data_key: 'id', data_name: 'name' },
         };
     },
+    watch: {
+        propKey(val) {
+            // 初始化
+            this.init();
+        },
+    },
     computed: {
         get_percentage_count() {
             return (num) => {
@@ -139,7 +149,6 @@ export default {
                 // 横向的时候，根据选择的行数和每行显示的个数来区分具体是显示多少个
                 const swiper_width = (new_form.data_source_direction == 'horizontal' && new_style.rolling_fashion != 'translation') ? `width: ${ 100 / new_form.data_source_carousel_col }%;`: 'width: 100%;';
                 this.setData({
-                    propKey: Math.random(),
                     form: new_form,
                     new_style: new_style,
                     div_width: width,
diff --git a/components/diy/modules/data-magic/magic-carousel.vue b/components/diy/modules/data-magic/magic-carousel.vue
index 042f66e3..585abe15 100644
--- a/components/diy/modules/data-magic/magic-carousel.vue
+++ b/components/diy/modules/data-magic/magic-carousel.vue
@@ -10,7 +10,7 @@
                     </template>
                     <template v-else>
                         <view class="ht-auto" :style="shop_spacing">
-                            <product-list-show :propOuterflex="propValue.data_content.goods_outerflex" :propFlex="propValue.data_content.goods_flex" :propNum="show_num" :propActived="propActived" :propIsShow="propValue.data_content.is_show" :propChunkPadding="propValue.data_style.chunk_padding" :propValue="item1.split_list" :propGoodStyle="propGoodStyle" :propContentImgRadius="propValue.data_style.get_img_radius" @url_event="url_event"></product-list-show>
+                            <product-list-show :propKey="propKey" :propOuterflex="propValue.data_content.goods_outerflex" :propFlex="propValue.data_content.goods_flex" :propNum="show_num" :propActived="propActived" :propIsShow="propValue.data_content.is_show" :propChunkPadding="propValue.data_style.chunk_padding" :propValue="item1.split_list" :propGoodStyle="propGoodStyle" :propContentImgRadius="propValue.data_style.get_img_radius" @url_event="url_event"></product-list-show>
                         </view>
                     </template>
                 </swiper-item>
@@ -53,7 +53,11 @@
             propDataIndex: {
                 type: Number,
                 default: () => 0,
-            }
+            },
+            propKey: {
+                type: [String, Number],
+                default: '',
+            },
         },
         data() {
             return {
@@ -65,6 +69,12 @@
                 next_margin: '0rpx',
             };
         },
+        watch: {
+            propKey(val) {
+                // 初始化
+                this.init();
+            },
+        },
         mounted() {
             this.init();
         },
diff --git a/components/diy/modules/data-magic/product-list-show.vue b/components/diy/modules/data-magic/product-list-show.vue
index dc408b99..57685f03 100644
--- a/components/diy/modules/data-magic/product-list-show.vue
+++ b/components/diy/modules/data-magic/product-list-show.vue
@@ -129,7 +129,11 @@
             propGoodStyle: {
                 type: Object,
                 default: () => {},
-            }
+            },
+            propKey: {
+                type: [String, Number],
+                default: '',
+            },
         },
         data() {
             return {
@@ -142,6 +146,12 @@
                 old_margin: { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 },
             };
         },
+        watch: {
+            propKey(val) {
+                // 初始化
+                this.init();
+            },
+        },
         mounted() {
             this.init();
         },
diff --git a/components/diy/modules/data-magic/video/index.vue b/components/diy/modules/data-magic/video/index.vue
index f345f363..fdb234cd 100644
--- a/components/diy/modules/data-magic/video/index.vue
+++ b/components/diy/modules/data-magic/video/index.vue
@@ -11,6 +11,10 @@
     import { padding_computer, radius_computer } from '@/common/js/common/common.js';
     export default {
         props: {
+            propKey: {
+                type: [String, Number],
+                default: '',
+            },
             propValue: {
                 type: Object,
                 default: () => ({}),
@@ -28,6 +32,12 @@
                 video_style: '',
             };
         },
+        watch: {
+            propKey(val) {
+                // 初始化
+                this.init();
+            },
+        },
         created() {
             this.init();
         },