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] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=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);
+                            }
                         }
                     }
                 }