From 475970ef9a0b30f344a653dbe44892baea507748 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, 10 Oct 2024 17:53:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B1=9E=E6=80=A7=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=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                     | 17 ++--
 components/diy/data-magic.vue                 | 29 ++++---
 components/diy/img-magic.vue                  | 38 +++++----
 components/diy/modules/custom/model-panel.vue | 77 +++++++++++++++++++
 4 files changed, 131 insertions(+), 30 deletions(-)
 create mode 100644 components/diy/modules/custom/model-panel.vue

diff --git a/components/diy/custom.vue b/components/diy/custom.vue
index 7c101043..40457fa7 100644
--- a/components/diy/custom.vue
+++ b/components/diy/custom.vue
@@ -5,20 +5,19 @@
                 <view v-for="item 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) }">
                     <template v-if="item.key == 'text'">
-                        <model-text :propkey="propkey" :propValue="item.com_data"
-                            :propSourceList="form.data_source_content" @url_event="url_event"></model-text>
+                        <model-text :propkey="propkey" :propValue="item.com_data" :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"
-                            :propSourceList="form.data_source_content" @url_event="url_event"></model-image>
+                        <model-image :propkey="propkey" :propValue="item.com_data" :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"
-                            :propSourceList="form.data_source_content"></model-lines>
+                        <model-lines :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content"></model-lines>
                     </template>
                     <template v-else-if="item.key == 'icon'">
-                        <model-icon :propkey="propkey" :propValue="item.com_data"
-                            :propSourceList="form.data_source_content" @url_event="url_event"></model-icon>
+                        <model-icon :propkey="propkey" :propValue="item.com_data" :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" :propSourceList="form.data_source_content" @url_event="url_event"></model-panel>
                     </template>
                 </view>
             </view>
@@ -33,6 +32,7 @@ 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: {
@@ -40,6 +40,7 @@ export default {
         modelLines,
         modelImage,
         modelIcon,
+        modelPanel
     },
     props: {
         propValue: {
diff --git a/components/diy/data-magic.vue b/components/diy/data-magic.vue
index 48f52a9d..72a59fa3 100644
--- a/components/diy/data-magic.vue
+++ b/components/diy/data-magic.vue
@@ -1,6 +1,6 @@
 <template>
-    <view ref="container" class="img-magic" :style="'height:' + container_size + ';' + style_container">
-        <view class="wh-auto pr" :style="style_img_container">
+    <view class="img-magic" :style="'height:' + container_size + ';' + style_container">
+        <view class="magic-container wh-auto ht-auto pr" :style="style_img_container">
             <view class="pr" :style="'width:calc(100% + ' + outer_spacing + ');height:calc(100% + ' + outer_spacing + ');margin:-' + spacing + ';'">
                 <!-- 风格9 -->
                 <template v-if="form.style_actived == 7">
@@ -72,8 +72,6 @@
     const app = getApp();
     import magicCarousel from '@/components/diy/modules/data-magic/magic-carousel.vue';
     import { background_computer, common_styles_computer, common_img_computer, gradient_computer, radius_computer, percentage_count, isEmpty, padding_computer } 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);
     export default {
         components: {
             magicCarousel,
@@ -104,6 +102,7 @@
                 container_size: 0,
                 style_container: '',
                 style_img_container: '',
+                div_width: 0
             };
         },
         computed: {
@@ -125,7 +124,7 @@
                 this.init();
             },
         },
-        created() {
+        mounted() {
             this.init();
         },
         methods: {
@@ -141,12 +140,25 @@
                     spacing: this.new_style.image_spacing + 'rpx',
                     content_radius: radius_computer(this.new_style.data_radius),
                     content_img_radius: radius_computer(this.new_style.img_radius),
-                    cubeCellWidth: sys_width / density,
-                    container_size: sys_width * 2 + 'rpx',
                     data_magic_list: this.get_data_magic_list(this.form.data_magic_list),
                     style_container: common_styles_computer(this.new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
                     style_img_container: common_img_computer(this.new_style.common_style),
                 });
+                this.$nextTick(() => {
+                    const query = uni.createSelectorQuery().in(this);
+                    query
+                        .select('.magic-container')
+                        .boundingClientRect((res) => {
+                            if ((res || null) != null) {
+                                this.setData({
+                                    div_width: res.width,
+                                    cubeCellWidth: res.width / density,
+                                    container_size: res.width + 'px',
+                                });
+                            }
+                        })
+                        .exec();
+                });
             },
             get_data_magic_list(data) {
                 data.forEach((item) => {
@@ -216,7 +228,7 @@
             },
             // 计算成百分比
             percentage(num) {
-                return percentage_count(num, sys_width);
+                return percentage_count(num, this.div_width);
             },
             // 根据传递的参数，从对象中取值
             trends_config(style, key) {
@@ -260,7 +272,6 @@
 <style lang="scss" scoped>
     // 图片魔方是一个正方形，根据宽度计算高度
     .img-magic {
-        width: 100%;
         overflow: hidden;
     }
     .cube-selected {
diff --git a/components/diy/img-magic.vue b/components/diy/img-magic.vue
index dfdfe75a..07705b62 100644
--- a/components/diy/img-magic.vue
+++ b/components/diy/img-magic.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- 图片魔方 -->
-    <view ref="container" class="img-magic" :style="style_container + 'height:' + container_size">
-        <view :style="style_img_container">
+    <view class="img-magic" :style="style_container + 'height:' + container_size">
+        <view class="magic-container wh-auto ht-auto" :style="style_img_container">
             <view class="pr" :style="outer_style">
                 <!-- 风格3 -->
                 <template v-if="form.style_actived == 2">
@@ -31,9 +31,6 @@
 <script>
     const app = getApp();
     import { common_styles_computer, common_img_computer, radius_computer, percentage_count } 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);
-    // var height = app.globalData.window_height_handle(system);
     export default {
         props: {
             propValue: {
@@ -59,6 +56,7 @@
                 content_img_radius: '',
                 cube_cell: '',
                 container_size: '',
+                div_width: 0,
             };
         },
         watch: {
@@ -75,7 +73,7 @@
                 };
             },
         },
-        created() {
+        mounted() {
             this.init();
         },
         methods: {
@@ -90,15 +88,30 @@
                 const density = 4;
                 this.setData({
                     form: this.propValue.content,
-                    outer_style: `width:${outer_spacing};height:${outer_spacing};margin:${outer_sx}`,
-                    img_spacing: `padding:${spacing}`,
+                    outer_style: `width:${outer_spacing};height:${outer_spacing};margin:${outer_sx};`,
+                    img_spacing: `padding:${spacing};`,
                     img_outer_spacing: new_style.image_spacing * 2 + 'rpx',
                     content_img_radius: radius_computer(new_style),
-                    container_size: sys_width * 2 + 'rpx',
-                    cube_cell: sys_width / density,
-                    style_container: common_styles_computer(new_style.common_style),
+                    style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;',
                     style_img_container: common_img_computer(new_style.common_style),
                 });
+
+                this.$nextTick(() => {
+                    const query = uni.createSelectorQuery().in(this);
+                    query
+                        .select('.magic-container')
+                        .boundingClientRect((res) => {
+                            console.log(res);
+                            if ((res || null) != null) {
+                                this.setData({
+                                    div_width: res.width,
+                                    container_size: res.width + 'px',
+                                    cube_cell: res.width / density,
+                                });
+                            }
+                        })
+                        .exec();
+                });
             },
             getSelectedWidth(item) {
                 return (item.end.x - item.start.x + 1) * this.cube_cell;
@@ -117,7 +130,7 @@
             },
             // 计算成百分比
             percentage(num) {
-                return percentage_count(num, sys_width);
+                return percentage_count(num, this.div_width);
             },
             // 跳转链接
             url_event(e) {
@@ -130,7 +143,6 @@
 <style lang="scss" scoped>
     // 图片魔方是一个正方形，根据宽度计算高度
     .img-magic {
-        width: 100%;
         overflow: hidden;
         box-sizing: border-box;
     }
diff --git a/components/diy/modules/custom/model-panel.vue b/components/diy/modules/custom/model-panel.vue
new file mode 100644
index 00000000..bef8956e
--- /dev/null
+++ b/components/diy/modules/custom/model-panel.vue
@@ -0,0 +1,77 @@
+<template>
+    <view class="wh-auto ht-auto re oh" :style="com_style"></view>
+</template>
+<script>
+    import { radius_computer, padding_computer, isEmpty, gradient_handle } from '@/common/js/common/common.js';
+    
+    export default {
+        props: {
+            propValue: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+                required: true,
+            },
+            propSourceList: {
+                type: [ Object, Array ],
+                default: () => {
+                    return {};
+                },
+            },
+            propkey: {
+                type: String,
+                default: '',
+            }
+        },
+        data() {
+            return {
+                form: {},
+                text_title: '',
+                text_style: '',
+                com_style: '',
+            };
+        },
+        watch: {
+            propkey(val) {
+                this.setData({
+                    form: this.propValue,
+                });
+                this.init();
+            }
+        },
+        created() {
+            this.setData({
+                form: this.propValue,
+            });
+            this.init();
+        },
+        methods: {
+            init() {
+                this.setData({
+                    com_style: this.get_com_style(),
+                });
+            },
+            get_com_style() {
+                let style = `${ gradient_handle(this.form.color_list, this.form.direction) } ${radius_computer(this.form.bg_radius)}; transform: rotate(${this.form.panel_rotate}deg);`;
+                if (this.form.border_show == '1') {
+                    style += `border: ${this.form.border_size * 2}rpx ${this.form.border_style} ${this.form.border_color};`;
+                }
+                return style;
+            },
+        },
+    };  
+</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>