From f9c4f92bc2e361db7a67ccb683b33e33ac268137 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 14 Nov 2024 16:31:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=89=8B=E6=9C=BA=E7=AB=AF?=
 =?UTF-8?q?=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                     | 168 ++++++++++--
 components/diy/modules/custom/model-icon.vue  |  25 +-
 components/diy/modules/custom/model-image.vue |  24 +-
 components/diy/modules/custom/model-text.vue  |  21 +-
 .../diy/modules/data-magic/custom/index.vue   | 245 +++++++++++-------
 .../diy/modules/data-magic/magic-carousel.vue |   2 +-
 6 files changed, 370 insertions(+), 115 deletions(-)

diff --git a/components/diy/custom.vue b/components/diy/custom.vue
index 1069a3b2..74f1f7bc 100644
--- a/components/diy/custom.vue
+++ b/components/diy/custom.vue
@@ -1,23 +1,50 @@
 <template>
-    <view :style="style_container">
-        <view class="custom-container wh-auto ht-auto" :style="style_img_container">
-            <view class="wh-auto pr" :style="'height:' + form.height * scale + 'px;'">
-                <view v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x, div_width), top: get_percentage_count(item.location.y, div_height), width: get_percentage_count(item.com_data.com_width, div_width), height: get_percentage_count(item.com_data.com_height, div_height), 'z-index': custom_list_length > 0 ? custom_list_length - index : 0 }">
-                    <template v-if="item.key == 'text'">
-                        <model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-text>
-                    </template>
-                    <template v-else-if="item.key == 'img'">
-                        <model-image :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-image>
-                    </template>
-                    <template v-else-if="item.key == 'auxiliary-line'">
-                        <model-lines :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content"></model-lines>
-                    </template>
-                    <template v-else-if="item.key == 'icon'">
-                        <model-icon :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-icon>
-                    </template>
-                    <template v-else-if="item.key == 'panel'">
-                        <model-panel :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-panel>
-                    </template>
+    <view v-if="data_source_content_list.length > 0">
+        <view v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_container">
+            <view class="custom-container wh-auto ht-auto" :style="style_img_container">
+                <view class="wh-auto pr" :style="'height:' + form.height * scale + 'px;'">
+                    <view v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x, div_width), top: get_percentage_count(item.location.y, div_height), width: get_percentage_count(item.com_data.com_width, div_width), height: get_percentage_count(item.com_data.com_height, div_height), 'z-index': custom_list_length > 0 ? custom_list_length - index : 0 }">
+                        <template v-if="item.key == 'text'">
+                            <model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-text>
+                        </template>
+                        <template v-else-if="item.key == 'img'">
+                            <model-image :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-image>
+                        </template>
+                        <template v-else-if="item.key == 'auxiliary-line'">
+                            <model-lines :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source"></model-lines>
+                        </template>
+                        <template v-else-if="item.key == 'icon'">
+                            <model-icon :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-icon>
+                        </template>
+                        <template v-else-if="item.key == 'panel'">
+                            <model-panel :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-panel>
+                        </template>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+    <view v-else>
+        <view :style="style_container">
+            <view class="custom-container wh-auto ht-auto" :style="style_img_container">
+                <view class="wh-auto pr" :style="'height:' + form.height * scale + 'px;'">
+                    <view v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x, div_width), top: get_percentage_count(item.location.y, div_height), width: get_percentage_count(item.com_data.com_width, div_width), height: get_percentage_count(item.com_data.com_height, div_height), 'z-index': custom_list_length > 0 ? custom_list_length - index : 0 }">
+                        <template v-if="item.key == 'text'">
+                            <model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-text>
+                        </template>
+                        <template v-else-if="item.key == 'img'">
+                            <model-image :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-image>
+                        </template>
+                        <template v-else-if="item.key == 'auxiliary-line'">
+                            <model-lines :propKey="propKey" :propValue="item.com_data" :propScale="scale"></model-lines>
+                        </template>
+                        <template v-else-if="item.key == 'icon'">
+                            <model-icon :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-icon>
+                        </template>
+                        <template v-else-if="item.key == 'panel'">
+                            <model-panel :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-panel>
+                        </template>
+                    </view>
                 </view>
             </view>
         </view>
@@ -32,6 +59,7 @@
     import modelImage from '@/components/diy/modules/custom/model-image.vue';
     import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
     import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
+import { isEmpty } from '../../common/js/common/common';
     var system = app.globalData.get_system_info(null, null, true);
     var sys_width = app.globalData.window_width_handle(system.windowWidth);
 
@@ -74,6 +102,74 @@
                 div_width: 0,
                 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: [],
+                    }
+                },
+                data_source_content_list: [],
+                data_source: '',
             };
         },
         computed: {
@@ -97,6 +193,38 @@
             init() {
                 const new_form = this.propValue.content;
                 const new_style = this.propValue.style;
+                // 不包含新创建的数组时，将历史数据放到手动添加数组中
+                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'];
+                    }
+                    // 如果老数组中有数据，将数据放到新数组中
+                    if (!isEmpty(data)) {
+                        new_form.data_source_content.data_list = [ data ];
+                    }
+                }
+                // 数据来源的内容
+                let list = [];
+                if (['goods', 'article', 'brand'].includes(new_form.data_source)) {
+                    if (new_form.data_source_content.data_type == '0') {
+                        list = new_form.data_source_content.data_list;
+                    } else {
+                        list = new_form.data_source_content.data_auto_list.map(item => ({
+                            id: Math.random(),
+                            new_cover: [],
+                            new_title: '',
+                            data: item,
+                        }));
+                    }
+                } else {
+                    list = new_form.data_source_content.data_list;
+                }
+                console.log(list);
                 const { margin_left, margin_right, padding_left, padding_right } = new_style.common_style;
                 const width = sys_width - margin_left - margin_right - padding_left - padding_right - this.propOuterContainerPadding;
                 this.setData({
@@ -108,6 +236,8 @@
                     style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
                     style_img_container: common_img_computer(new_style.common_style, this.propIndex),
                     div_height: new_form.height,
+                    data_source_content_list: list,
+                    data_source: !isEmpty(new_form.data_source)? new_form.data_source : '',
                 });
             },
             url_event(e) {
diff --git a/components/diy/modules/custom/model-icon.vue b/components/diy/modules/custom/model-icon.vue
index a10f0d8f..b903d9f7 100644
--- a/components/diy/modules/custom/model-icon.vue
+++ b/components/diy/modules/custom/model-icon.vue
@@ -1,10 +1,11 @@
 <template>
     <view class="img-outer pr oh flex-row align-c wh-auto ht-auto" :style="com_style" :data-value="form.icon_link.page" @tap="url_event">
-        <iconfont :name="'icon-' + form.icon_class" :color="form.icon_color" :size="form.icon_size * scale + 'px'" propContainerDisplay="flex"></iconfont>
+        <iconfont :name="'icon-' + icon_class" :color="form.icon_color" :size="form.icon_size * scale + 'px'" propContainerDisplay="flex"></iconfont>
     </view>
 </template>
 <script>
     import { radius_computer, padding_computer, gradient_handle } from '@/common/js/common/common.js';
+import { isEmpty } from '../../../../common/js/common/common';
     
     export default {
         props: {
@@ -28,6 +29,10 @@
             propScale: {
                 type: Number,
                 default: 1,
+            },
+            propSourceType: {
+                type: String,
+                default: ''
             }
         },
         data() {
@@ -35,6 +40,7 @@
                 form: {},
                 com_style: '',
                 scale: 1,
+                icon_class: '',
             };
         },
         watch: {
@@ -47,10 +53,27 @@
         },
         methods: {
             init() {
+                let icon_class_value = '';
+                if (!isEmpty(this.propValue.icon_class)) {
+                    icon_class_value = this.propValue.icon_class;
+                } else {
+                    if (!isEmpty(this.propSourceList)) {
+                        // 不输入商品， 文章和品牌时，从外层处理数据
+                        let icon = this.propSourceList[this.propValue.data_source_id];
+                        // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
+                        if (['goods', 'article', 'brand'].includes(this.propSourceType) && !isEmpty(this.propSourceList.data)) {
+                            icon = this.propSourceList.data[this.propValue.data_source_id];
+                        }
+                        icon_class_value = icon;
+                    } else {
+                        icon_class_value = '';
+                    }
+                }
                 this.setData({
                     form: this.propValue,
                     scale: this.propScale,
                     com_style: this.get_com_style(this.propValue, this.propScale),
+                    icon_class: icon_class_value,
                 });
             },
             get_com_style(form, scale) {
diff --git a/components/diy/modules/custom/model-image.vue b/components/diy/modules/custom/model-image.vue
index d53975d3..743778bf 100644
--- a/components/diy/modules/custom/model-image.vue
+++ b/components/diy/modules/custom/model-image.vue
@@ -31,6 +31,10 @@
             propScale: {
                 type: Number,
                 default: 1
+            },
+            propSourceType: {
+                type: String,
+                default: ''
             }
         },
         data() {
@@ -39,6 +43,11 @@
                 img: '',
                 image_style: '',
                 border_style: '',
+                keyMap: {
+                    goods: 'images',
+                    article: 'cover',
+                    brand: 'logo'
+                },
             };
         },
         watch: {
@@ -51,6 +60,7 @@
         },
         methods: {
             init() {
+                
                 this.setData({
                     form: this.propValue,
                     img: this.get_img_url(this.propValue),
@@ -63,7 +73,19 @@
                     return form.img[0];
                 } else {
                     if (!isEmpty(this.propSourceList)) {
-                        return this.propSourceList[form.data_source_id];
+                        // 不输入商品， 文章和品牌时，从外层处理数据
+                        let image_url = this.propSourceList[form.data_source_id];
+                        // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
+                        if (['goods', 'article', 'brand'].includes(this.propSourceType) && !isEmpty(this.propSourceList.data)) {
+                            // 判断是否是同一标志
+                            if (form.data_source_id == this.keyMap[this.propSourceType]) {
+                                // 如果是符合条件的标志，先判断新的图片是否存在，存在就取新的图片，否则的话取原来的图片
+                                image_url = !isEmpty(this.propSourceList.new_cover)? this.propSourceList.new_cover[0]?.url || '' : this.propSourceList.data[this.keyMap[this.propSourceType]];
+                            } else {
+                                image_url = this.propSourceList.data[form.data_source_id];
+                            }
+                        }
+                        return image_url;
                     } else {
                         return '';
                     }
diff --git a/components/diy/modules/custom/model-text.vue b/components/diy/modules/custom/model-text.vue
index 5d725e7c..bd9642d7 100644
--- a/components/diy/modules/custom/model-text.vue
+++ b/components/diy/modules/custom/model-text.vue
@@ -35,6 +35,10 @@
             propScale: {
                 type: Number,
                 default: 1
+            },
+            propSourceType: {
+                type: String,
+                default: ''
             }
         },
         data() {
@@ -43,6 +47,11 @@
                 text_title: '',
                 text_style: '',
                 com_style: '',
+                keyMap: {
+                    goods: 'title',
+                    article: 'title',
+                    brand: 'name'
+                }
             };
         },
         watch: {
@@ -66,8 +75,18 @@
                 let text = '';
                 if (!isEmpty(form.text_title)) {
                     text = form.text_title;
-                } else if (!isEmpty(this.propSourceList[form.data_source_id])) {
+                } else {
                     text = this.propSourceList[form.data_source_id];
+                    // 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
+                    if (['goods', 'article', 'brand'].includes(this.propSourceType) && !isEmpty(this.propSourceList.data)) {
+                        // 其他的切换为从data中取数据
+                        if (form.data_source_id == this.keyMap[this.propSourceType]) {
+                            // 如果是符合条件的标志，先判断新的标题是否存在，存在就取新的标题，否则的话取原来的标题
+                            text = !isEmpty(this.propSourceList.new_title) ? this.propSourceList.new_title : this.propSourceList.data[this.keyMap[this.propSourceType]];
+                        } else {
+                            text = this.propSourceList.data[form.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 5603d087..5fca8cff 100644
--- a/components/diy/modules/data-magic/custom/index.vue
+++ b/components/diy/modules/data-magic/custom/index.vue
@@ -1,110 +1,171 @@
 <template>
-    <view class="wh-auto ht-auto oh" :style="style_container">
-        <view class="wh-auto ht-auto pr oh">
-            <view v-for="(item, index) in form.custom_list" :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': custom_list_length > 0 ? custom_list_length - index : 0 }">
-                <template v-if="item.key == 'text'">
-                    <model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-text>
-                </template>
-                <template v-else-if="item.key == 'img'">
-                    <model-image :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-image>
-                </template>
-                <template v-else-if="item.key == 'auxiliary-line'">
-                    <model-lines :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content"></model-lines>
-                </template>
-                <template v-else-if="item.key == 'icon'">
-                    <model-icon :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-icon>
-                </template>
-                <template v-else-if="item.key == 'panel'">
-                    <model-panel :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-panel>
-                </template>
+    <view v-if="data_source_content_list.length > 0">
+        <view v-for="(item1, index1) in data_source_content_list" :key="index1" class="oh" :style="style_container">
+            <view class="custom-container wh-auto ht-auto oh" :style="style_img_container">
+                <view class="wh-auto pr oh" :style="'height:' + form.height * scale + 'px;'">
+                    <view v-for="(item, index) in form.custom_list" :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': custom_list_length > 0 ? custom_list_length - index : 0 }">
+                        <template v-if="item.key == 'text'">
+                            <model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-text>
+                        </template>
+                        <template v-else-if="item.key == 'img'">
+                            <model-image :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-image>
+                        </template>
+                        <template v-else-if="item.key == 'auxiliary-line'">
+                            <model-lines :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source"></model-lines>
+                        </template>
+                        <template v-else-if="item.key == 'icon'">
+                            <model-icon :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-icon>
+                        </template>
+                        <template v-else-if="item.key == 'panel'">
+                            <model-panel :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-panel>
+                        </template>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+    <view v-else>
+        <view class="oh" :style="style_container">
+            <view class="custom-container wh-auto ht-auto oh" :style="style_img_container">
+                <view class="wh-auto pr oh" :style="'height:' + form.height * scale + 'px;'">
+                    <view v-for="(item, index) in form.custom_list" :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': custom_list_length > 0 ? custom_list_length - index : 0 }">
+                        <template v-if="item.key == 'text'">
+                            <model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-text>
+                        </template>
+                        <template v-else-if="item.key == 'img'">
+                            <model-image :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-image>
+                        </template>
+                        <template v-else-if="item.key == 'auxiliary-line'">
+                            <model-lines :propKey="propKey" :propValue="item.com_data" :propScale="scale"></model-lines>
+                        </template>
+                        <template v-else-if="item.key == 'icon'">
+                            <model-icon :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-icon>
+                        </template>
+                        <template v-else-if="item.key == 'panel'">
+                            <model-panel :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-panel>
+                        </template>
+                    </view>
+                </view>
             </view>
         </view>
     </view>
 </template>
 
 <script>
-    import { padding_computer } from '@/common/js/common/common.js';
-    const app = getApp();
-    import modelText from '@/components/diy/modules/custom/model-text.vue';
-    import modelLines from '@/components/diy/modules/custom/model-lines.vue';
-    import modelImage from '@/components/diy/modules/custom/model-image.vue';
-    import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
-    import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
-import { isEmpty } from '../../../../../common/js/common/common';
+import { padding_computer, isEmpty, margin_computer, gradient_computer, radius_computer, background_computer } from '@/common/js/common/common.js';
+const app = getApp();
+import modelText from '@/components/diy/modules/custom/model-text.vue';
+import modelLines from '@/components/diy/modules/custom/model-lines.vue';
+import modelImage from '@/components/diy/modules/custom/model-image.vue';
+import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
+import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
 
-    export default {
-        components: {
-            modelText,
-            modelLines,
-            modelImage,
-            modelIcon,
-            modelPanel,
-        },
-        props: {
-            propValue: {
-                type: Object,
-                default: () => {
-                    return {};
-                },
+export default {
+    components: {
+        modelText,
+        modelLines,
+        modelImage,
+        modelIcon,
+        modelPanel,
+    },
+    props: {
+        propValue: {
+            type: Object,
+            default: () => {
+                return {};
             },
-            propMagicScale: {
-                type: Number,
-                default: 1,
-            },
-            propDataSpacing: {
-                type: Number,
-                default: 0,
-            }
         },
-        data() {
-            return {
-                form: {},
-                new_style: {},
-                scale: 1,
-                style_container: '',
-                div_width: 0,
-                div_height: 0,
-                custom_list_length: 0,
+        propMagicScale: {
+            type: Number,
+            default: 1,
+        },
+        propDataSpacing: {
+            type: Number,
+            default: 0,
+        }
+    },
+    data() {
+        return {
+            form: {},
+            new_style: {},
+            scale: 1,
+            style_container: '',
+            div_width: 0,
+            div_height: 0,
+            custom_list_length: 0,
+            data_source_content_list: [],
+            data_source: '',
+        };
+    },
+    computed: {
+        get_percentage_count() {
+            return (num) => {
+                return num * this.scale + 'px';
             };
         },
-        computed: {
-            get_percentage_count() {
-                return (num) => {
-                    return num * this.scale + 'px';
-                };
-            },
-        },
-        mounted() {
-            this.init();
-        },
-        methods: {
-            init() {
-                if (!isEmpty(this.propValue)) {
-                    const new_form = this.propValue.data_content;
-                    const new_style = this.propValue.data_style;
-                    const { padding_left, padding_right } = new_style.chunk_padding;
-                    const width = new_form.width - padding_left - padding_right - (this.propDataSpacing / 2);
-                    this.setData({
-                        propKey: Math.random(),
-                        form: new_form,
-                        new_style: new_style,
-                        div_width: width,
-                        scale: (width / new_form.width) * this.propMagicScale,
-                        custom_list_length: new_form.custom_list.length - 1,
-                        style_container: padding_computer(new_style.chunk_padding) + 'box-sizing: border-box;', // 用于样式显示
-                    });
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            if (!isEmpty(this.propValue)) {
+                const new_form = this.propValue.data_content;
+                const new_style = this.propValue.data_style;
+                const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }, data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }, data_chunk_margin = { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 } } = new_style;
+                const style_data = {
+                    color_list: data_color_list,
+                    direction: data_direction,
                 }
-            },
-            url_event(e) {
-                app.globalData.url_event(e);
-            },
+                const style_img_data = {
+                    background_img: data_background_img,
+                    background_img_style: data_background_img_style,
+                }
+                const { padding_left, padding_right } = data_chunk_padding;
+                const { margin_left, margin_right } = data_chunk_margin;
+                const width = new_form.width - padding_left - padding_right - margin_left - margin_right - (this.propDataSpacing / 2);
+                // 数据来源的内容
+                let list = [];
+                if (['goods', 'article', 'brand'].includes(new_form.data_source)) {
+                    if (new_form.data_source_content.data_type == '0') {
+                        list = new_form.data_source_content.data_list;
+                    } else {
+                        list = new_form.data_source_content.data_auto_list.map(item => ({
+                            id: Math.random(),
+                            new_cover: [],
+                            new_title: '',
+                            data: item,
+                        }));
+                    }
+                } else {
+                    list = new_form.data_source_content.data_list;
+                }
+                this.setData({
+                    propKey: Math.random(),
+                    form: new_form,
+                    new_style: new_style,
+                    div_width: width,
+                    scale: (width / new_form.width) * this.propMagicScale,
+                    custom_list_length: new_form.custom_list.length - 1,
+                    style_container: gradient_computer(style_data) + radius_computer(data_radius) + margin_computer(data_chunk_margin), // 用于样式显示
+                    style_img_container: padding_computer(data_chunk_padding) + background_computer(style_img_data) + 'box-sizing: border-box;',
+                    data_source_content_list: list,
+                    data_source: !isEmpty(new_form.data_source)? new_form.data_source : '',
+                });
+            }
         },
-    };
+        url_event(e) {
+            app.globalData.url_event(e);
+        },
+    },
+};
 </script>
 
 <style scoped lang="scss">
-    .main-content {
-        position: absolute;
-        overflow: hidden;
-    }
+.main-content {
+    position: absolute;
+    overflow: hidden;
+}
 </style>
diff --git a/components/diy/modules/data-magic/magic-carousel.vue b/components/diy/modules/data-magic/magic-carousel.vue
index 12632645..06311d42 100644
--- a/components/diy/modules/data-magic/magic-carousel.vue
+++ b/components/diy/modules/data-magic/magic-carousel.vue
@@ -1,5 +1,5 @@
 <template>
-    <view class="wh-auto ht-auto oh ssss" :style="style_container">
+    <view class="wh-auto ht-auto oh" :style="style_container">
         <view class="wh-auto ht-auto" :style="style_img_container">
             <swiper circular="true" :autoplay="propValue.data_style.is_roll == '1'" :interval="propValue.data_style.interval_time * 1000" :duration="500" :vertical="propValue.data_style.rotation_direction == 'vertical'" class="swiper" style="height: 100%" @change="carousel_change">
                 <swiper-item v-for="(item1, index1) in propValue.data_content.list" :key="index1">