From cd3a39aeabf0a336b4b53b16915848275c352c0a 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 09:45:33 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E8=BD=AE=E6=92=AD?=
 =?UTF-8?q?=E6=96=B9=E5=90=91=E5=92=8C=E6=8C=87=E7=A4=BA=E5=99=A8=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/css/page.css          |  12 ++--
 common/js/common/common.js   |  32 ++++++++-
 components/diy/custom.vue    | 132 +++++++++++++++++++++++++++++++----
 components/diy/nav-group.vue |  31 +-------
 4 files changed, 159 insertions(+), 48 deletions(-)

diff --git a/common/css/page.css b/common/css/page.css
index b8e9f6c3..b5b67cee 100644
--- a/common/css/page.css
+++ b/common/css/page.css
@@ -1374,22 +1374,22 @@ button[disabled].bg-grey {
 .indicator_up_down_location {
     position: absolute;
     z-index: 1;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding-top: 20rpx;
+    padding-bottom: 20rpx;
     display: flex;
     flex-direction: column;
 }
 .indicator_up_down_location .dot-item {
-    margin: 0.3rem 0;
+    margin: 6rpx 0;
 }
 /* 指示器左右显示 */
 .indicator_about_location {
     position: absolute;
     z-index: 1;
-    padding-right: 10px;
-    padding-left: 10px;
+    padding-right: 20rpx;
+    padding-left: 20rpx;
     display: flex;
 }
 .indicator_about_location .dot-item {
-    margin: 0 0.3rem;
+    margin: 0 6rpx;
 }
\ No newline at end of file
diff --git a/common/js/common/common.js b/common/js/common/common.js
index e1d602f5..568c6730 100644
--- a/common/js/common/common.js
+++ b/common/js/common/common.js
@@ -14,7 +14,7 @@ export function is_obj_empty(obj) {
 }
 
 /**
- * 处理指示器的显示问题
+ * 指示器的样式
  *
  * @param style_object 样式对象
  * @returns 返回对应的值
@@ -44,6 +44,36 @@ export function get_indicator_style(style_object) {
     }
     return styles;
 }
+/**
+ * 指示器的位置处理
+ *
+ * @param style_object 样式对象
+ * @returns 返回对应的值
+ */
+export function get_indicator_location_style(style_object) {
+    const { indicator_new_location,  indicator_location, indicator_bottom } = style_object;
+    let styles = '';
+    if (['left', 'right'].includes(indicator_new_location)) {
+        if (indicator_location == 'flex-start') {
+            styles += `top: 0px;`;
+        } else if (indicator_location == 'center') {
+            styles += `top: 50%; transform: translateY(-50%);`;
+        } else {
+            styles += `bottom: 0px;`;
+        }
+    } else {
+        if (indicator_location == 'flex-start') {
+            styles += `left: 0px;`;
+        } else if (indicator_location == 'center') {
+            styles += `left: 50%; transform: translateX(-50%);`;
+        } else {
+            styles += `right: 0px;`;
+        }
+    }
+    // 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
+    styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
+    return styles;
+};
 
 /**
  * 判断对象数组等是否为空。
diff --git a/components/diy/custom.vue b/components/diy/custom.vue
index da9486fd..920944ca 100644
--- a/components/diy/custom.vue
+++ b/components/diy/custom.vue
@@ -1,22 +1,53 @@
 <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">
-                <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index1" @url_event="url_event"></dataRendering>
+    <view :style="style_container">
+        <view class="w h re" :style="style_img_container">
+            <view v-if="data_source_content_list.length > 0 && form.data_source_direction == '0'">
+                <view v-for="(item, index) in data_source_content_list" :key="index">
+                    <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container">
+                        <view class="custom-container wh-auto ht-auto" :style="style_chunk_img_container">
+                            <dataRendering :propCustomList="form.custom_list" :propSourceList="item2" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index1" @url_event="url_event"></dataRendering>
+                        </view>
+                    </view>
+                    
+                </view>
             </view>
-        </view>
-    </view>
-    <view v-else>
-        <view :style="style_container">
-            <view class="custom-container wh-auto ht-auto" :style="style_img_container">
-                <dataRendering :propCustomList="form.custom_list" :propDataHeight="form.height" :propScale="scale"></dataRendering>
+            <div v-else-if="data_source_content_list.length > 0 && ['1', '2'].includes(form.data_source_direction)" class="oh pr">
+                <swiper class="w flex" circular="true" :vertical="form.data_source_direction != '2'"  :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: swiper_height + 'px' }" @change="slideChange">
+                    <swiper-item v-for="(item, index) in data_source_content_list" :key="index">
+                        <view :class="form.data_source_direction != '2' ? '' : 'flex-row'">
+                            <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container + swiper_width">
+                                <div class="w h" :style="style_chunk_img_container">
+                                    <dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index1" @url_event="url_event"></dataRendering>
+                                </div>
+                            </view>
+                        </view>
+                    </swiper-item>
+                </swiper>
+                <div v-if="new_style.is_show == '1' && data_source_content_list.length > 1" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
+                    <block 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>
+                            <text>/{{ data_source_content_list.length }}</text>
+                        </view>
+                    </block>
+                    <block v-else>
+                        <view v-for="(item, index) in data_source_content_list" :key="index" :style="indicator_style + (actived_index == index ? 'background:' + new_style.actived_color : '')" class="dot-item" />
+                    </block>
+                </div>
+            </div>
+            <view v-else>
+                <view :style="style_chunk_container">
+                    <view class="custom-container wh-auto ht-auto" :style="style_chunk_img_container">
+                        <dataRendering :propCustomList="form.custom_list" :propDataHeight="form.height" :propScale="scale"></dataRendering>
+                    </view>
+                </view>
             </view>
         </view>
     </view>
 </template>
 
 <script>
-    import { common_styles_computer, common_img_computer, percentage_count, isEmpty } from '@/common/js/common/common.js';
+    import { common_styles_computer, common_img_computer, percentage_count, isEmpty, get_indicator_style, get_indicator_location_style } from '@/common/js/common/common.js';
     const app = getApp();
     import dataRendering from '@/components/diy/modules/custom/data-rendering.vue';
     var system = app.globalData.get_system_info(null, null, true);
@@ -125,6 +156,18 @@
                 },
                 data_source_content_list: [],
                 data_source: '',
+                // 数据样式
+                style_chunk_container: '',
+                style_chunk_img_container: '',
+                // 指示器选中的下标
+                actived_index: 0,
+                // 轮播高度
+                swiper_height: 0,
+                swiper_width: 'width: 100%;',
+                // 指示器样式
+                indicator_location_style: '',
+                indicator_style: '',
+                slides_per_group: 1,
             };
         },
         watch: {
@@ -171,9 +214,21 @@
                     }
                 } else {
                     list = new_form.data_source_content.data_list;
-                }
+                }   
+                const new_list = this.get_list(list, new_form, new_style);
                 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;
+                // 判断是平移还是整屏滚动
+                const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.data_style;
+                let swiper_height = 0;
+                // 轮播图高度控制
+                if (new_form.data_source_direction == '2') {
+                    swiper_height = new_form.height * (width / 390) + padding_top + padding_bottom + margin_bottom + margin_top;
+                } else {
+                    swiper_height = (new_form.height * (width / 390) + padding_top + padding_bottom + margin_bottom + margin_top) * new_form.data_source_carousel_col;
+                }
+                // 横向的时候，根据选择的行数和每行显示的个数来区分具体是显示多少个
+                const swiper_width = (new_form.data_source_direction == '2' && new_style.rolling_fashion != 'translation') ? `width: ${ 100 / new_form.data_source_carousel_col }%;`: 'width: 100%;';
                 this.setData({
                     form: new_form,
                     new_style: new_style,
@@ -182,9 +237,60 @@
                     custom_list_length: new_form.custom_list.length - 1,
                     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),
+                    style_chunk_container: common_styles_computer(new_style.data_style) + 'box-sizing: border-box;', // 用于样式显示
+                    style_chunk_img_container: common_img_computer(new_style.data_style),
+                    style_chunk_width: width,
                     div_height: new_form.height,
-                    data_source_content_list: list,
+                    data_source_content_list: new_list,
                     data_source: !isEmpty(new_form.data_source)? new_form.data_source : '',
+                    indicator_style: get_indicator_style(new_style), // 指示器的样式
+                    indicator_location_style: get_indicator_location_style(new_style),
+                    swiper_height: swiper_height,
+                    swiper_width: swiper_width,
+                    slides_per_group: new_style.rolling_fashion == 'translation' ? new_form.data_source_carousel_col : 1,
+                });
+                console.log(this.data_source_content_list);
+            },
+            get_list(list, form, new_style) {
+                // 深拷贝一下，确保不会出现问题
+                const cloneList = JSON.parse(JSON.stringify(list));
+                if (new_style.rolling_fashion != 'translation') {
+                    // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
+                    if (cloneList.length > 0) {
+                        // 每页显示的数量
+                        const num = form.data_source_carousel_col;
+                        // 存储数据显示
+                        let nav_list = [];
+                        // 拆分的数量
+                        const split_num = Math.ceil(cloneList.length / num);
+                        for (let i = 0; i < split_num; i++) {
+                            nav_list.push({
+                                split_list: cloneList.slice(i * num, (i + 1) * num),
+                            });
+                        }
+                        return nav_list;
+                    } else {
+                        // 否则的话，就返回全部的信息
+                        return [
+                            {
+                                split_list: cloneList,
+                            },
+                        ];
+                    }
+                } else {
+                    // 存储数据显示
+                    let nav_list = [];
+                    cloneList.forEach((item) => {
+                        nav_list.push({
+                            split_list: [item],
+                        });
+                    });
+                    return nav_list;
+                }
+            },
+            slideChange(e) {
+                this.setData({
+                    actived_index: e.target.current,
                 });
             },
             url_event(e) {
diff --git a/components/diy/nav-group.vue b/components/diy/nav-group.vue
index ab520d62..1fdf67b4 100644
--- a/components/diy/nav-group.vue
+++ b/components/diy/nav-group.vue
@@ -34,7 +34,7 @@
 
 <script>
     const app = getApp();
-    import { isEmpty, common_styles_computer, common_img_computer, radius_computer, get_indicator_style } from '@/common/js/common/common.js';
+    import { isEmpty, common_styles_computer, common_img_computer, radius_computer, get_indicator_style, get_indicator_location_style } from '@/common/js/common/common.js';
     import imageEmpty from '@/components/diy/modules/image-empty.vue';
     import subscriptIndex from '@/components/diy/modules/subscript/index.vue';
     export default {
@@ -92,7 +92,7 @@
             init() {
                 const new_content = this.propValue.content;
                 const new_style = this.propValue.style;
-                     
+
                 let group = 1;
                 let group_width = `width: ${100 / (new_content.single_line || 4)}%;`;
                 // 判断是否是轮播图
@@ -121,7 +121,7 @@
                     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: this.get_indicator_location_style(new_style),
+                    indicator_location_style: get_indicator_location_style(new_style),
                 });
                 setTimeout(() => {
                     const query = uni.createSelectorQuery().in(this);
@@ -175,31 +175,6 @@
                     ];
                 }
             },
-            // 根据指示器的位置来处理 对齐方式的处理
-            get_indicator_location_style(new_style) {
-                const { indicator_new_location,  indicator_location, indicator_bottom } = new_style;
-                let styles = '';
-                if (['left', 'right'].includes(indicator_new_location)) {
-                    if (indicator_location == 'flex-start') {
-                        styles += `top: 0px;`;
-                    } else if (indicator_location == 'center') {
-                        styles += `top: 50%; transform: translateY(-50%);`;
-                    } else {
-                        styles += `bottom: 0px;`;
-                    }
-                } else {
-                    if (indicator_location == 'flex-start') {
-                        styles += `left: 0px;`;
-                    } else if (indicator_location == 'center') {
-                        styles += `left: 50%; transform: translateX(-50%);`;
-                    } else {
-                        styles += `right: 0px;`;
-                    }
-                }
-                // 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
-                styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
-                return styles;
-            },
             slideChange(e) {
                 this.setData({
                     actived_index: e.target.current,