From cfffb723f188166106924b9616755f5571b8c06b 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, 19 Sep 2024 16:46:09 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/custom.vue                     |  78 ++++++++++++++
 components/diy/data-magic.vue                 |  18 ----
 components/diy/diy.vue                        |  14 ++-
 components/diy/modules/custom/model-image.vue |  81 ++++++++++++++
 components/diy/modules/custom/model-lines.vue |  44 ++++++++
 components/diy/modules/custom/model-text.vue  | 101 ++++++++++++++++++
 6 files changed, 316 insertions(+), 20 deletions(-)
 create mode 100644 components/diy/custom.vue
 create mode 100644 components/diy/modules/custom/model-image.vue
 create mode 100644 components/diy/modules/custom/model-lines.vue
 create mode 100644 components/diy/modules/custom/model-text.vue

diff --git a/components/diy/custom.vue b/components/diy/custom.vue
new file mode 100644
index 00000000..d923f0e1
--- /dev/null
+++ b/components/diy/custom.vue
@@ -0,0 +1,78 @@
+<template>
+    <view ref="container" :style="style_container + 'height:'+ form.height * 2 + 'rpx;'">
+        <view class="wh-auto ht-auto pr">
+            <view v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height)}">
+                <template v-if="item.key == 'text'">
+                    <model-text :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" @url_open="url_open"></model-text>
+                </template>
+                <template v-else-if="item.key == 'img'">
+                    <model-image :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" @url_open="url_open"></model-image>
+                </template>
+                <template v-else-if="item.key == 'auxiliary-line'">
+                    <model-lines :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content"></model-lines>
+                </template>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { common_styles_computer, percentage_count } from '@/common/js/common/common.js';
+    const app = getApp();
+    var system = app.globalData.get_system_info(null, null, true);
+    var sys_width = app.globalData.window_width_handle(system.windowWidth);
+    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';
+    
+    export default {
+        components: {
+            modelText,
+            modelLines,
+            modelImage
+        },
+        props: {
+            value: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+            },
+        },
+        data() {
+            return {
+                form: {},
+                new_style: {},
+                style_container: '',
+                custom_height: 0,
+            };
+        },
+        created() {
+            this.setData({
+                form: this.value.content,
+                new_style: this.value.style,
+            });
+            this.init();
+        },
+        methods: {
+            init() {
+                this.setData({
+                    style_container: common_styles_computer(this.new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
+                    div_width: sys_width
+                });
+            },
+            url_open(link) {
+                if (!isEmpty(link)) {
+                    app.globalData.url_open(link);
+                }
+            },
+        },
+    };
+</script>
+
+<style scoped lang="scss">
+.main-content {
+    position: absolute;
+    overflow: hidden;
+}
+</style>
diff --git a/components/diy/data-magic.vue b/components/diy/data-magic.vue
index 5bdb7a07..f4496cdb 100644
--- a/components/diy/data-magic.vue
+++ b/components/diy/data-magic.vue
@@ -317,22 +317,4 @@
 .gap-20 {
     gap: 40rpx;
 }
-// 轮播高度自适应
-:deep(.el-carousel) {
-    height: 100%;
-    .el-carousel__container {
-        height: 100%;
-    }
-}
-
-:deep(.el-image) {
-    height: 100%;
-    width: 100%;
-    .el-image__inner {
-        object-fit: cover;
-    }
-    .image-slot img {
-        width: 6rem;
-    }
-}
 </style>
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index b016abf5..cd4f398b 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -6,6 +6,7 @@
             <componentDiyTabs v-if="is_tabs" :value="tabs_data"></componentDiyTabs>
             <view v-if="is_tabs_type">
                 <view v-for="(item, index) in value.diy_data" :key="index">
+                    {{ item.key }}
                     <!-- 基础组件 -->
                     <componentDiySearch v-if="item.key == 'search'" :value="item.com_data"></componentDiySearch>
                     <componentCarousel v-else-if="item.key == 'carousel'" :value="item.com_data"></componentCarousel>
@@ -18,6 +19,7 @@
                     <componentGoodsTabs v-else-if="item.key == 'goods-tabs'" :value="item.com_data"></componentGoodsTabs>
                     <componentGoodsList v-else-if="item.key == 'goods-list'" :value="item.com_data"></componentGoodsList>
                     <componentDataMagic v-if="item.key == 'data-magic'" :value="item.com_data"></componentDataMagic>
+                    <componentCustom v-if="item.key == 'custom'" :value="item.com_data"></componentCustom>
                     <componentDiyImgMagic v-else-if="item.key == 'img-magic'" :value="item.com_data"></componentDiyImgMagic>
                     <componentDiyHotZone v-else-if="item.key == 'hot-zone'" :value="item.com_data"></componentDiyHotZone>
                     <!-- 插件 -->
@@ -57,7 +59,8 @@
     import componentNavGroup from '@/components/diy/nav-group.vue';
     import componentGoodsList from '@/components/diy/goods-list.vue';
     import componentGoodsTabs from '@/components/diy/goods-tabs.vue';
-    import componentDataMagic from '@/components/diy/data-magic.vue'
+    import componentDataMagic from '@/components/diy/data-magic.vue';
+    import componentCustom from '@/components/diy/custom.vue'
     export default {
         name: 'diy',
         props: {
@@ -85,12 +88,19 @@
             componentNavGroup,
             componentGoodsList,
             componentGoodsTabs,
-            componentDataMagic
+            componentDataMagic,
+            componentCustom
         },
         data() {
             return {
                 // 底部菜单导航高度计算
                 padding_footer_computer: 140,
+                // 是否有选项卡
+                is_tabs: false,
+                // 选项卡数据
+                tabs_data: {},
+                // 是否是模块数据或者是九宫格商品分类样式数据， 默认模块数据
+                is_tabs_type: true,
             };
         },
 
diff --git a/components/diy/modules/custom/model-image.vue b/components/diy/modules/custom/model-image.vue
new file mode 100644
index 00000000..095d85e9
--- /dev/null
+++ b/components/diy/modules/custom/model-image.vue
@@ -0,0 +1,81 @@
+<template>
+    <view class="img-outer pr wh-auto ht-auto" :style="border_style" @tap="url_open(form.link)">
+        <image-empty v-model="img" :style="image_style"></image-empty>
+    </view>
+</template>
+<script>
+    import { percentage_count, radius_computer, isEmpty } from '@/common/js/common/common.js';
+
+    export default {
+        props: {
+            value: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+                required: true,
+            },
+            sourceList: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+            },
+        },
+        data() {
+            return {
+                form: {},
+                img: '',
+                image_style: '',
+                border_style: '',
+            };
+        },
+        created() {
+            this.setData({
+                form: this.value,
+            });
+            this.init();
+        },
+        methods: {
+            init() {
+                this.setData({
+                    img: this.get_img_url(),
+                    image_style: this.get_image_style(),
+                    border_style: this.get_border_style(),
+                });
+            },
+            get_img_url() {
+                if (!isEmpty(this.form.img[0])) {
+                    return this.form.img[0];
+                } else {
+                    if (!isEmpty(this.sourceList)) {
+                        return this.sourceList[this.form.data_source_id];
+                    } else {
+                        return '';
+                    }
+                }
+            },
+            get_image_style() {
+                return `${set_count()};transform: rotate(${this.form.img_rotate}deg); ${radius_computer(this.form.img_radius)};`;
+            },
+            get_border_style() {
+                let style = ``;
+                if (this.form.border_show == '1') {
+                    style += `border: ${this.form.border_size}px ${this.form.border_style} ${this.form.border_color}; ${radius_computer(this.form.border_radius)};`;
+                }
+                return style;
+            },
+            set_count() {
+                return `width: ${percentage_count(this.form.img_width, this.form.com_width)}; height: ${percentage_count(this.form.img_height, this.form.com_height)};`;
+            },
+            url_open(link) {
+                this.$emit('url_open', link)
+            },
+        },
+    };
+</script>
+<style lang="scss" scoped>
+    .img-outer {
+        overflow: hidden;
+    }
+</style>
diff --git a/components/diy/modules/custom/model-lines.vue b/components/diy/modules/custom/model-lines.vue
new file mode 100644
index 00000000..3408f319
--- /dev/null
+++ b/components/diy/modules/custom/model-lines.vue
@@ -0,0 +1,44 @@
+<template>
+    <view :style="border_style"></view>
+</template>
+<script>
+    export default {
+        props: {
+            value: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+                required: true,
+            }
+        },
+        data() {
+            return {
+                form: {},
+                border_style: '',
+            };
+        },
+        created() {
+            this.setData({
+                form: this.value,
+            });
+            this.init();
+        },
+        methods: {
+            init() {
+                this.setData({
+                    border_style: this.get_border_style(),
+                });
+            },
+            get_border_style() {
+                if (this.form.line_settings === 'horizontal') {
+                    return `margin: 5px 0;border-bottom: ${this.form.line_size}px ${this.form.line_style} ${this.form.line_color};`;
+                } else {
+                    return `margin: 0 5px;border-right: ${this.form.line_size}px ${this.form.line_style} ${this.form.line_color};`;
+                }
+            }
+        },
+    };
+</script>
+<style lang="scss" scoped>
+</style>
diff --git a/components/diy/modules/custom/model-text.vue b/components/diy/modules/custom/model-text.vue
new file mode 100644
index 00000000..ab10418e
--- /dev/null
+++ b/components/diy/modules/custom/model-text.vue
@@ -0,0 +1,101 @@
+<template>
+    <view class="img-outer re oh" :style="com_style" @tap="url_open(form.text_link)">
+        <view :style="text_style" class="break">
+            <template v-if="form.is_rich_text == '1'">
+                <view class="rich-text-content" :innerHTML="text_title"></view>
+            </template>
+            <template v-else>
+                {{ text_title }}
+            </template>
+        </view>
+    </view>
+</template>
+<script>
+    import { radius_computer, padding_computer, isEmpty } from '@/common/js/common/common.js';
+    
+    export default {
+        props: {
+            value: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+                required: true,
+            },
+            sourceList: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+            }
+        },
+        data() {
+            return {
+                form: {},
+                text_title: '',
+                text_style: '',
+                com_style: '',
+            };
+        },
+        created() {
+            this.setData({
+                form: this.value,
+            });
+            this.init();
+        },
+        methods: {
+            init() {
+                this.setData({
+                    text_title: this.get_text_title(),
+                    text_style: this.get_text_style(),
+                    com_style: this.get_com_style(),
+                });
+            },
+            get_text_title() {
+                let text = '';
+                if (!isEmpty(this.form.text_title)) {
+                    text = this.form.text_title;
+                } else if (!isEmpty(this.sourceList[this.form.data_source_id])) {
+                    text = this.sourceList[this.form.data_source_id];
+                }
+                return text;
+            },
+            get_text_style() {
+                let style = `font-size: ${this.form.text_size}px;color: ${this.form.text_color}; text-align: ${this.form.text_location}; transform: rotate(${this.form.text_rotate}deg);text-decoration: ${this.form.text_option};${padding_computer(this.form.text_padding)};`;
+                if (this.form.text_weight == 'italic') {
+                    style += `font-style: italic`;
+                } else if (this.form.text_weight == '500') {
+                    style += `font-weight: 500`;
+                }
+                return style;
+            },
+            get_com_style() {
+                let style = `background-color: ${this.form.com_bg}; ${radius_computer(this.form.bg_radius)}`;
+                if (this.form.border_show == '1') {
+                    style += `border: ${this.form.border_size}px ${this.form.border_style} ${this.form.border_color};`;
+                }
+                // 是富文本并且开启了上下滚动的开关
+                if (this.form.is_rich_text == '1' && this.form.is_up_down == '1') {
+                    style += `overflow-y: auto;`;
+                }
+                return style;
+            },
+            url_open(link) {
+                this.$emit('url_open', link)
+            },
+        },
+    };  
+</script>
+<style lang="scss" scoped>
+    .break {
+        word-wrap: break-word;
+        word-break: break-all;
+    }
+    .rich-text-content {
+        white-space: normal;
+        word-break: break-all;
+        * {
+            max-width: 100%;
+        }
+    }
+</style>