From 3420d8dd1be83358075acea4fb62f6b01d0878c8 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:57:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/custom.vue                     | 10 +++++-
 components/diy/diy.vue                        |  5 +--
 components/diy/modules/custom/model-image.vue | 16 +++++-----
 components/diy/modules/custom/model-lines.vue |  4 +--
 components/diy/modules/custom/model-text.vue  |  4 +--
 .../diy/modules/data-magic/magic-carousel.vue | 13 ++++----
 .../modules/data-magic/product-list-show.vue  | 31 ++++++++++---------
 7 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/components/diy/custom.vue b/components/diy/custom.vue
index d923f0e1..baa772e6 100644
--- a/components/diy/custom.vue
+++ b/components/diy/custom.vue
@@ -1,7 +1,7 @@
 <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)}">
+            <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, form.height), 'width': get_percentage_count(item.com_data.com_width, div_width), 'height': get_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>
@@ -47,6 +47,13 @@
                 custom_height: 0,
             };
         },
+        computed: {
+          get_percentage_count() {
+            return (num, container_size) => {
+                return this.percentage_count(num, container_size);
+            }
+          }  
+        },
         created() {
             this.setData({
                 form: this.value.content,
@@ -55,6 +62,7 @@
             this.init();
         },
         methods: {
+            percentage_count,
             init() {
                 this.setData({
                     style_container: common_styles_computer(this.new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index cd4f398b..d66fe945 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -6,7 +6,6 @@
             <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>
@@ -103,12 +102,14 @@
                 is_tabs_type: true,
             };
         },
-
         computed: {
             diy_content_style() {
                 return `padding-bottom:${this.padding_footer_computer}rpx`;
             },
         },
+        mounted() {
+            this.init();
+        },
         methods: {
             init() {
                 // tabs选项卡数据过滤
diff --git a/components/diy/modules/custom/model-image.vue b/components/diy/modules/custom/model-image.vue
index 095d85e9..aa7b37da 100644
--- a/components/diy/modules/custom/model-image.vue
+++ b/components/diy/modules/custom/model-image.vue
@@ -1,12 +1,15 @@
 <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>
+        <image-empty :image-src="img" :style="image_style" error-style="width: 60rpx;height: 60rpx;"></image-empty>
     </view>
 </template>
 <script>
     import { percentage_count, radius_computer, isEmpty } from '@/common/js/common/common.js';
-
+    import imageEmpty from '@/components/diy/modules/image-empty.vue';
     export default {
+        components: {
+            imageEmpty,
+        },
         props: {
             value: {
                 type: Object,
@@ -56,20 +59,17 @@
                 }
             },
             get_image_style() {
-                return `${set_count()};transform: rotate(${this.form.img_rotate}deg); ${radius_computer(this.form.img_radius)};`;
+                return `width: ${percentage_count(this.form.img_width, this.form.com_width)}; height: ${percentage_count(this.form.img_height, this.form.com_height)};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)};`;
+                    style += `border: ${this.form.border_size * 2}rpx ${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)
+                this.$emit('url_open', link);
             },
         },
     };
diff --git a/components/diy/modules/custom/model-lines.vue b/components/diy/modules/custom/model-lines.vue
index 3408f319..0146b1b5 100644
--- a/components/diy/modules/custom/model-lines.vue
+++ b/components/diy/modules/custom/model-lines.vue
@@ -32,9 +32,9 @@
             },
             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};`;
+                    return `margin: 5px 0;border-bottom: ${this.form.line_size * 2}rpx ${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};`;
+                    return `margin: 0 5px;border-right: ${this.form.line_size * 2}rpx ${this.form.line_style} ${this.form.line_color};`;
                 }
             }
         },
diff --git a/components/diy/modules/custom/model-text.vue b/components/diy/modules/custom/model-text.vue
index ab10418e..17bb9389 100644
--- a/components/diy/modules/custom/model-text.vue
+++ b/components/diy/modules/custom/model-text.vue
@@ -61,7 +61,7 @@
                 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)};`;
+                let style = `font-size: ${this.form.text_size * 2}rpx;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)};box-sizing: border-box;`;
                 if (this.form.text_weight == 'italic') {
                     style += `font-style: italic`;
                 } else if (this.form.text_weight == '500') {
@@ -72,7 +72,7 @@
             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};`;
+                    style += `border: ${this.form.border_size * 2}rpx ${this.form.border_style} ${this.form.border_color};`;
                 }
                 // 是富文本并且开启了上下滚动的开关
                 if (this.form.is_rich_text == '1' && this.form.is_up_down == '1') {
diff --git a/components/diy/modules/data-magic/magic-carousel.vue b/components/diy/modules/data-magic/magic-carousel.vue
index 0257ea09..2b588ac0 100644
--- a/components/diy/modules/data-magic/magic-carousel.vue
+++ b/components/diy/modules/data-magic/magic-carousel.vue
@@ -1,9 +1,9 @@
 <template>
-    <swiper circular="true" :autoplay="value.data_style.is_roll == '1'" :interval="value.data_style.interval_time * 1000" :duration="500" :vertical="value.data_style.rotation_direction == 'vertical'" class="swiper" style="height: 100%;" @change="carousel_change">
+    <swiper circular="true" :autoplay="value.data_style.is_roll == '1'" :interval="value.data_style.interval_time * 1000" :duration="500" :vertical="value.data_style.rotation_direction == 'vertical'" class="swiper" style="height: 100%" @change="carousel_change">
         <swiper-item v-for="(item1, index1) in value.data_content.list" :key="index1">
             <template v-if="type === 'img'">
                 <view @tap="url_event(item1.carousel_link.page)">
-                    <image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
+                    <image-empty :image-src="item1.carousel_img[0]" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
                 </view>
             </template>
             <template v-else>
@@ -17,7 +17,7 @@
     const app = getApp();
     import imageEmpty from '@/components/diy/modules/image-empty.vue';
     import productListShow from '@/components/diy/modules/data-magic/product-list-show.vue';
-import { isEmpty } from '../../../../common/js/common/common';
+    import { isEmpty } from '@/common/js/common/common.js';
     export default {
         components: {
             imageEmpty,
@@ -51,9 +51,8 @@ import { isEmpty } from '../../../../common/js/common/common';
                     app.globalData.url_open(link);
                 }
             },
-        }
-    }
+        },
+    };
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style></style>
diff --git a/components/diy/modules/data-magic/product-list-show.vue b/components/diy/modules/data-magic/product-list-show.vue
index 9ee1ceb4..888f30ff 100644
--- a/components/diy/modules/data-magic/product-list-show.vue
+++ b/components/diy/modules/data-magic/product-list-show.vue
@@ -12,7 +12,8 @@
                     <view v-if="!isEmpty(isShow)" class="flex-col wh-auto ht-auto tl gap-10">
                         <view v-if="isShow.includes('title')" class="text-line-2 text-size-md shop-title">{{ item.title }}</view>
                         <view v-if="isShow.includes('price')" class="identifying">
-                            <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                            <span class="num">{{ item.show_price_symbol }}</span
+                            >{{ item.min_price }}
                             <template v-if="isShow.includes('price_unit')">
                                 <span class="num">{{ item.show_price_unit }}</span>
                             </template>
@@ -36,7 +37,7 @@
                             </template>
                         </view>
                     </view>
-                    <view v-if="isShow.includes('title')" class="text-line-1 text-size-md shop-title tl wh-auto" style="overflow: inherit;">{{ item.title }}</view>
+                    <view v-if="isShow.includes('title')" class="text-line-1 text-size-md shop-title tl wh-auto" style="overflow: inherit">{{ item.title }}</view>
                 </view>
             </template>
             <template v-else>
@@ -50,7 +51,8 @@
                     <view v-if="!isEmpty(isShow)" class="flex-col wh-auto tl gap-10" :style="img_padding_computer">
                         <view v-if="isShow.includes('title')" class="text-line-2 text-size-md shop-title">{{ item.title }}</view>
                         <view v-if="isShow.includes('price')" class="identifying">
-                            <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                            <span class="num">{{ item.show_price_symbol }}</span
+                            >{{ item.min_price }}
                             <template v-if="isShow.includes('price_unit')">
                                 <span class="num">{{ item.show_price_unit }}</span>
                             </template>
@@ -73,7 +75,8 @@
                     <view v-if="!isEmpty(isShow)" class="flex-col wh-auto ht-auto tl gap-20">
                         <view v-if="isShow.includes('title')" class="text-line-2 text-size-md shop-title">{{ item.title }}</view>
                         <view v-if="isShow.includes('price')" class="identifying">
-                            <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                            <span class="num">{{ item.show_price_symbol }}</span
+                            >{{ item.min_price }}
                             <template v-if="isShow.includes('price_unit')">
                                 <span class="num">{{ item.show_price_unit }}</span>
                             </template>
@@ -87,7 +90,7 @@
 
 <script>
     import { isEmpty, padding_computer } from '@/common/js/common/common.js';
-    import imageEmpty from '@/components/diy/modules/image-empty.vue'
+    import imageEmpty from '@/components/diy/modules/image-empty.vue';
     export default {
         components: {
             imageEmpty,
@@ -129,25 +132,25 @@
         computed: {
             img_padding_computer() {
                 if (!isEmpty(this.chunkPadding)) {
-                    return padding_computer(this.chunkPadding) + ';box-sizing: border-box;'
+                    return padding_computer(this.chunkPadding) + ';box-sizing: border-box;';
                 } else {
                     return '';
                 }
-            }
+            },
         },
         methods: {
             isEmpty,
             url_event(link) {
                 this.$emit('url_event', link);
-            }
-        }
-    }
+            },
+        },
+    };
 </script>
 
 <style scoped lang="scss">
     .identifying {
         font-size: 28rpx;
-        color: #EA3323;
+        color: #ea3323;
         .num {
             font-size: 18rpx;
         }
@@ -158,13 +161,13 @@
         background: #fff;
         font-size: 24rpx;
         line-height: 34rpx;
-        color: #EA3323;
+        color: #ea3323;
         text-align: center;
         position: absolute;
         bottom: 8rpx;
         border-radius: 16rpx;
     }
-    .shop-max-height{
+    .shop-max-height {
         max-height: calc(100% / 3);
     }
     .half-width {
@@ -176,4 +179,4 @@
     .gap-20 {
         gap: 40rpx;
     }
-</style>
\ No newline at end of file
+</style>