From add7c5c5085b6efdc6439692e396caaa0c41aaf2 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, 21 Nov 2024 15:20:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8C=87=E7=A4=BA=E5=99=A8?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/carousel.vue   | 28 ++++------------------------
 components/diy/data-magic.vue | 28 +++++-----------------------
 components/diy/nav-group.vue  |  2 +-
 components/diy/seckill.vue    |  2 +-
 4 files changed, 11 insertions(+), 49 deletions(-)

diff --git a/components/diy/carousel.vue b/components/diy/carousel.vue
index fd1f536b..ab77adc0 100644
--- a/components/diy/carousel.vue
+++ b/components/diy/carousel.vue
@@ -49,7 +49,7 @@
                     </swiper-item>
                 </block>
             </swiper>
-            <view v-if="new_style.is_show == '1'" :class="{ 'dot-center': new_style.indicator_location == 'center', 'dot-right': new_style.indicator_location == 'flex-end' }" class="dot flex-row pa" :style="dot_style">
+            <view v-if="new_style.is_show == '1'" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
                 <template v-if="new_style.indicator_style == 'num'">
                     <view :style="indicator_style" class="dot-item">
                         <text :style="{ color: new_style.actived_color }">{{ actived_index + 1 }}</text>
@@ -66,7 +66,7 @@
 
 <script>
     const app = getApp();
-    import { common_styles_computer, common_img_computer, radius_computer, isEmpty, gradient_computer, padding_computer } from '@/common/js/common/common.js';
+    import { common_styles_computer, common_img_computer, radius_computer, isEmpty, gradient_computer, padding_computer, get_indicator_location_style, get_indicator_style } from '@/common/js/common/common.js';
     import imageEmpty from '@/components/diy/modules/image-empty.vue';
     var system = app.globalData.get_system_info(null, null, true);
     var sys_width = app.globalData.window_width_handle(system.windowWidth);
@@ -173,7 +173,8 @@
                     style_container: this.propIsCommon ? common_styles_computer(common_style) : '', // 公共样式显示
                     style_img_container: this.propIsCommon ? common_img_computer(common_style, this.propIndex) : '', // 公共样式显示
                     img_style: radius_computer(new_style), // 图片的设置
-                    indicator_style: this.get_indicator_style(new_style), // 指示器的样式
+                    indicator_style: get_indicator_style(new_style), // 指示器的样式
+                    indicator_location_style: get_indicator_location_style(new_style),
                     dot_style: `bottom: ${ new_style.indicator_bottom * scale }px;`, // 指示器位置
                     img_fit: fit, // 图片风格 默认为aspectFill
                     video_style: this.get_video_style(new_style), // 视频播放按钮显示逻辑   
@@ -206,27 +207,6 @@
                 //     });
                 // });
             },
-            get_indicator_style(new_style) {
-                const { indicator_radius, indicator_style, indicator_size, color } = new_style;
-                let styles = '';
-                if (!isEmpty(indicator_radius)) {
-                    styles += radius_computer(indicator_radius);
-                }
-                // 数字类型的指示器
-                if (indicator_style == 'num') {
-                    styles += `color: ${color || '#DDDDDD'};`;
-                    styles += `font-size: ${indicator_size * 2}rpx;`;
-                } else if (indicator_style == 'elliptic') {
-                    // 宽的指示器，按照宽高1:3 来计算
-                    styles += `background: ${color || '#DDDDDD'};`;
-                    styles += `width: ${indicator_size * 6}rpx; height: ${indicator_size * 2}rpx;`;
-                } else {
-                    // 圆点指示器
-                    styles += `background: ${color || '#DDDDDD'};`;
-                    styles += `width: ${indicator_size * 2}rpx; height: ${indicator_size * 2}rpx;`;
-                }
-                return styles;
-            },
             get_seat_list(form) {
                 if (form.carousel_list.length > 3) {
                     return [];
diff --git a/components/diy/data-magic.vue b/components/diy/data-magic.vue
index 401e9b1c..4ac79272 100644
--- a/components/diy/data-magic.vue
+++ b/components/diy/data-magic.vue
@@ -36,7 +36,7 @@
                                 <template v-else>
                                     <videoIndex :propValue="item.data_content" :propDataStyle="item.data_style"></videoIndex>
                                 </template>
-                                <view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{ 'dot-center': item.data_style.indicator_location == 'center', 'dot-right': item.data_style.indicator_location == 'flex-end' }" class="dot flex-row pa" :style="{ bottom: item.data_style.indicator_bottom * 2 + 'rpx' }">
+                                <view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="['left', 'right'].includes(item.data_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="item.data_style.indicator_location_style">
                                     <template v-if="item.data_style.indicator_style == 'num'">
                                         <view :style="item.data_style.indicator_styles" class="dot-item">
                                             <text class="num-active" :style="{ color: item.data_style.actived_color }">{{ item.actived_index + 1 }}</text
@@ -83,7 +83,7 @@
                             <template v-else>
                                 <videoIndex :propValue="item.data_content" :propDataStyle="item.data_style"></videoIndex>
                             </template>
-                            <view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{ 'dot-center': item.data_style.indicator_location == 'center', 'dot-right': item.data_style.indicator_location == 'flex-end' }" class="dot flex-row pa" :style="{ bottom: item.data_style.indicator_bottom * 2 + 'rpx' }">
+                            <view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="['left', 'right'].includes(item.data_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="item.data_style.indicator_location_style">
                                 <template v-if="item.data_style.indicator_style == 'num'">
                                     <view :style="item.data_style.indicator_styles" class="dot-item">
                                         <text class="num-active" :style="{ color: item.data_style.actived_color }">{{ item.actived_index + 1 }}</text>
@@ -107,7 +107,7 @@
     import magicCarousel from '@/components/diy/modules/data-magic/magic-carousel.vue';
     import customIndex from '@/components/diy/modules/data-magic/custom';
     import videoIndex from '@/components/diy/modules/data-magic/video';
-    import { background_computer, common_styles_computer, common_img_computer, gradient_computer, radius_computer, percentage_count, isEmpty, padding_computer } from '@/common/js/common/common.js';
+    import { background_computer, common_styles_computer, common_img_computer, gradient_computer, radius_computer, percentage_count, isEmpty, padding_computer, get_indicator_location_style, get_indicator_style } 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 {
@@ -208,7 +208,8 @@
                     const data_style = item.data_style;
                     item.actived_index = 0;
                     // 指示器样式
-                    data_style.indicator_styles = this.indicator_style(data_style);
+                    data_style.indicator_styles = get_indicator_style(data_style);
+                    data_style.indicator_location_style = get_indicator_location_style(data_style);
                     data_style.background_style = gradient_computer(data_style);
                     data_style.background_img_style = background_computer(data_style);
                     let fit = '';
@@ -343,25 +344,6 @@
             text_style(typeface, size, color) {
                 return `font-weight:${typeface}; font-size: ${size * 2}rpx; color: ${color};`;
             },
-            // 指示器的样式
-            indicator_style(item) {
-                let styles = '';
-                if (!isEmpty(item.indicator_radius)) {
-                    styles += radius_computer(item.indicator_radius);
-                }
-                const size = item.indicator_size || 5;
-                if (item.indicator_style == 'num') {
-                    styles += `color: ${item.color || '#DDDDDD'};`;
-                    styles += `font-size: ${size * 2}rpx;`;
-                } else if (item.indicator_style == 'elliptic') {
-                    styles += `background: ${item.color || '#DDDDDD'};`;
-                    styles += `width: ${size * 6}rpx; height: ${size * 2}rpx;`;
-                } else {
-                    styles += `background: ${item.color || '#DDDDDD'};`;
-                    styles += `width: ${size * 2}rpx; height: ${size * 2}rpx;`;
-                }
-                return styles;
-            },
             carousel_change(actived_index, index) {
                 if (this.data_magic_list[index]) {
                     this.data_magic_list[index].actived_index = actived_index;
diff --git a/components/diy/nav-group.vue b/components/diy/nav-group.vue
index 8f935d44..3251e186 100644
--- a/components/diy/nav-group.vue
+++ b/components/diy/nav-group.vue
@@ -113,6 +113,7 @@
                     img_style: radius_computer(new_style), // 图片的设置
                     text_style: `font-size: ${new_style.title_size * 2 || 24}rpx; color: ${new_style.title_color || '#000'};`, // 标题的样式
                     indicator_style: get_indicator_style(new_style), // 指示器的样式
+                    indicator_location_style: get_indicator_location_style(new_style), // 指示器位置处理
                     actived_color: new_style.actived_color || '#2A94FF', // 轮播图显示样式
                     slides_per_group: group, // 每个轮播图显示的个数
                     group_width: group_width, // 每个导航所占位置
@@ -121,7 +122,6 @@
                     img_size: 'width:' + (new_style.img_size || 0) * 2 + 'rpx;height:' + (new_style.img_size || 0) * 2 + 'rpx;', // 图片大小
                     nav_style: new_content.nav_style || 'image_with_text', // 是否显示文字和图片
                     nav_content_list: this.get_nav_content_list(new_content, new_style),
-                    indicator_location_style: get_indicator_location_style(new_style),
                 });
                 setTimeout(() => {
                     const query = uni.createSelectorQuery().in(this);
diff --git a/components/diy/seckill.vue b/components/diy/seckill.vue
index ea67056b..90bf9edb 100644
--- a/components/diy/seckill.vue
+++ b/components/diy/seckill.vue
@@ -505,7 +505,7 @@
             style_config(typeface, size, color, type, new_style) {
                 let style = `font-weight:${typeface}; font-size: ${size * 2}rpx;`;
                 if (type == 'gradient') {
-                    style += gradient_handle(new_style.shop_button_color, '180deg') + `color: ${color};`;
+                    style += gradient_handle(new_style.shop_button_color, '180deg');
                 } else if (type == 'title') {
                     style += `line-height: ${size > 0 ? (size + 3) * 2 : 0}rpx;height: ${size > 0 ? (size + 3) * 4 : 0}rpx;color: ${color};`;
                 } else if (type == 'desc') {