From 50a54539ae23edeae068ad08a2d6902dfde5e852 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 25 Nov 2024 18:30:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8E=86=E5=8F=B2=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=9A=84=E5=B0=96=E9=94=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/modules/subscript/index.vue |  21 +-
 components/diy/nav-group.vue               | 350 ++++++++++++---------
 2 files changed, 212 insertions(+), 159 deletions(-)

diff --git a/components/diy/modules/subscript/index.vue b/components/diy/modules/subscript/index.vue
index c828aca8..62ba332d 100644
--- a/components/diy/modules/subscript/index.vue
+++ b/components/diy/modules/subscript/index.vue
@@ -52,16 +52,17 @@
                 if (!isEmpty(this.propValue)) {
                     const new_content = this.propValue.content || {};
                     const new_style = this.propType == 'outer' ? this.propValue.style || {} : { subscript_style: this.propValue.style || {} };
-                    
-                    // 视频比例
-                    this.setData({
-                        form: new_content,
-                        new_style: new_style,
-                        corner_marker: this.get_corner_marker(new_style),
-                        text_size: `font-size: ${ new_style.subscript_style.text_or_icon_size * 2 }rpx;color: ${ new_style.subscript_style.text_or_icon_color };`,
-                        corner_img_marker: common_img_computer(new_style.subscript_style),
-                        img_style: `height: ${new_style.subscript_style.img_height * 2}rpx; width: ${new_style.subscript_style.img_width * 2}rpx`,
-                    });
+                    if (!isEmpty(new_style.subscript_style)) {
+                        // 视频比例
+                        this.setData({
+                            form: new_content,
+                            new_style: new_style,
+                            corner_marker: this.get_corner_marker(new_style),
+                            text_size: `font-size: ${ new_style.subscript_style.text_or_icon_size * 2 }rpx;color: ${ new_style.subscript_style.text_or_icon_color };`,
+                            corner_img_marker: common_img_computer(new_style.subscript_style),
+                            img_style: `height: ${new_style.subscript_style.img_height * 2}rpx; width: ${new_style.subscript_style.img_width * 2}rpx`,
+                        });
+                    }
                 }
             },
             get_corner_marker(new_style) {
diff --git a/components/diy/nav-group.vue b/components/diy/nav-group.vue
index 3dfc4a91..07991d52 100644
--- a/components/diy/nav-group.vue
+++ b/components/diy/nav-group.vue
@@ -33,167 +33,219 @@
 </template>
 
 <script>
-    const app = getApp();
-    import { isEmpty, common_styles_computer, common_img_computer, radius_computer, padding_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 {
-        components: {
-            imageEmpty,
-            subscriptIndex,
-        },
-        props: {
-            propValue: {
-                type: Object,
-                default: () => {
-                    return {};
-                },
-            },
-            propKey: {
-                type: [String, Number],
-                default: '',
-            },
-            // 组件渲染的下标
-            propIndex: {
-                type: Number,
-                default: 1000000,
+const app = getApp();
+import { isEmpty, common_styles_computer, common_img_computer, radius_computer, padding_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 {
+    components: {
+        imageEmpty,
+        subscriptIndex,
+    },
+    props: {
+        propValue: {
+            type: Object,
+            default: () => {
+                return {};
             },
         },
-        data() {
-            return {
-                form: {},
-                new_style: {},
-                style_container: '',
-                style_img_container: '',
-                img_style: '',
-                text_style: '',
-                indicator_style: '',
-                new_height: '300rpx',
-                actived_index: 0,
-                group_width: '',
-                nav_content_list: [],
-                nav_title_space: 'row-gap:20rpx', // 导航标题间距
-                space: 'row-gap:20rpx', // 导航间距
-                img_size: '72rpx',
-                slides_per_group: 1,
-                indicator_location_style: '',
-            };
+        propKey: {
+            type: [String, Number],
+            default: '',
         },
-        watch: {
-            propKey(val) {
-                // 初始化
-                this.init();
-            },
+        // 组件渲染的下标
+        propIndex: {
+            type: Number,
+            default: 1000000,
         },
-        mounted() {
+    },
+    data() {
+        return {
+            form: {},
+            new_style: {},
+            style_container: '',
+            style_img_container: '',
+            img_style: '',
+            text_style: '',
+            indicator_style: '',
+            new_height: '300rpx',
+            actived_index: 0,
+            group_width: '',
+            nav_content_list: [],
+            nav_title_space: 'row-gap:20rpx', // 导航标题间距
+            space: 'row-gap:20rpx', // 导航间距
+            img_size: '72rpx',
+            slides_per_group: 1,
+            indicator_location_style: '',
+            subscriptStyle: {
+                seckill_subscript_location: 'top-left',
+                text_or_icon_color: '#fff',
+                text_or_icon_size: 12,
+                img_width: 20,
+                img_height: 20,
+                direction: '90deg',
+                top_or_bottom_spacing: 0,
+                left_or_right_spacing: 0,
+                color_list: [{ color: '#FF7607', color_percentage: undefined }],
+                background_img_style: '2',
+                background_img: [],
+                margin: 0,
+                margin_top: 0,
+                margin_bottom: 0,
+                margin_left: 0,
+                margin_right: 0,
+                radius: 4,
+                radius_top_left: 4,
+                radius_top_right: 4,
+                radius_bottom_left: 4,
+                radius_bottom_right: 4,
+                padding: 0,
+                padding_top: 0,
+                padding_bottom: 0,
+                padding_left: 0,
+                padding_right: 0,
+                box_shadow_color: '',
+                box_shadow_x: 0,
+                box_shadow_y: 0,
+                box_shadow_blur: 0,
+                box_shadow_spread: 0,
+            }
+        };
+    },
+    watch: {
+        propKey(val) {
+            // 初始化
             this.init();
         },
-        methods: {
-            init() {
-                const new_content = this.propValue.content;
-                const new_style = this.propValue.style;
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        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)}%;`;
-                // 判断是否是轮播图
-                if (new_content?.display_style == 'slide') {
-                    if (new_content.row == 1 && new_style.rolling_fashion == 'translation') {
-                        group = new_content.single_line || 4;
-                        group_width = 'width: 100%;';
-                    } else {
-                        group = 1;
-                        group_width = `width: ${100 / (new_content.single_line || 4)}%;`;
-                    }
+            let group = 1;
+            let group_width = `width: ${100 / (new_content.single_line || 4)}%;`;
+            // 判断是否是轮播图
+            if (new_content?.display_style == 'slide') {
+                if (new_content.row == 1 && new_style.rolling_fashion == 'translation') {
+                    group = new_content.single_line || 4;
+                    group_width = 'width: 100%;';
+                } else {
+                    group = 1;
+                    group_width = `width: ${100 / (new_content.single_line || 4)}%;`;
                 }
-                this.setData({
-                    form: new_content,
-                    new_style: new_style,
-                    style_container: common_styles_computer(new_style.common_style), // 用于样式显示
-                    style_img_container: common_img_computer(new_style.common_style, this.propIndex),
-                    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, // 每个导航所占位置
-                    nav_title_space: 'row-gap:' + (new_style.title_space || 0) * 2 + 'rpx', // 导航标题间距
-                    space: 'row-gap:' + (new_style.space || 0) * 2 + 'rpx;' + padding_computer(new_style.data_padding), // 导航间距
-                    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),
-                });
-                setTimeout(() => {
-                    const query = uni.createSelectorQuery().in(this);
-                    // 选择我们想要的元素
-                    query
-                        .select('.banner-img-' + this.propKey)
-                        .boundingClientRect((res) => {
-                            if ((res || null) != null) {
-                                // data包含元素的宽度、高度等信息
-                                this.setData({
-                                    new_height: res.height + 'px',
-                                });
-                            }
-                        })
-                        .exec(); // 执行查询
-                }, 50);
-            },
-            get_nav_content_list(data, new_style) {
-                // 深拷贝一下，确保不会出现问题
-                const list = JSON.parse(JSON.stringify(data.nav_content_list || Array(4)));
-                // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
-                if (list.length > 0 && data.display_style == 'slide') {
-                    // 存储数据显示
-                    let nav_list = [];
-                    if (data.row == 1 && new_style.rolling_fashion == 'translation') {
-                        // 拆分的数量
-                        list.forEach((item) => {
-                            nav_list.push({
-                                split_list: [item],
-                            });
-                        });
-                        return nav_list;
-                    } else {
-                        // 每页显示的数量
-                        const num = (data.single_line || 4) * (data.row || 1);
-                        // 拆分的数量
-                        const split_num = Math.ceil(list.length / num);
-                        for (let i = 0; i < split_num; i++) {
-                            nav_list.push({
-                                split_list: list.slice(i * num, (i + 1) * num),
+            }
+
+            this.setData({
+                form: new_content,
+                new_style: new_style,
+                style_container: common_styles_computer(new_style.common_style), // 用于样式显示
+                style_img_container: common_img_computer(new_style.common_style, this.propIndex),
+                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, // 每个导航所占位置
+                nav_title_space: 'row-gap:' + (new_style.title_space || 0) * 2 + 'rpx', // 导航标题间距
+                space: 'row-gap:' + (new_style.space || 0) * 2 + 'rpx;' + padding_computer(new_style.data_padding), // 导航间距
+                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),
+            });
+            console.log(this.nav_content_list);
+            
+            setTimeout(() => {
+                const query = uni.createSelectorQuery().in(this);
+                // 选择我们想要的元素
+                query
+                    .select('.banner-img-' + this.propKey)
+                    .boundingClientRect((res) => {
+                        if ((res || null) != null) {
+                            // data包含元素的宽度、高度等信息
+                            this.setData({
+                                new_height: res.height + 'px',
                             });
                         }
-                        return nav_list;
-                    }
-                } else {
-                    // 否则的话，就返回全部的信息
-                    return [
-                        {
-                            split_list: list,
-                        },
-                    ];
-                }
-            },
-            slideChange(e) {
-                this.setData({
-                    actived_index: e.detail.current,
-                });
-            },
-            url_open_event(link) {
-                app.globalData.url_event(link);
-            },
+                    })
+                    .exec(); // 执行查询
+            }, 50);
         },
-    };
+        get_nav_content_list(data, new_style) {
+            // 深拷贝一下，确保不会出现问题
+            const list = JSON.parse(JSON.stringify(data.nav_content_list || Array(4))).map(item => ({
+                ...item,
+                // 角标配置
+                subscript: isEmpty(item.subscript) ?
+                    {
+                        content: {
+                            seckill_subscript_show: '0',
+                            subscript_type: 'text',
+                            subscript_img_src: [],
+                            subscript_icon_class: '',
+                            subscript_text: '',
+                        },
+                        style: this.subscriptStyle,
+                    } : item.subscript,
+            }));
+            console.log(list);
+            // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
+            if (list.length > 0 && data.display_style == 'slide') {
+                // 存储数据显示
+                let nav_list = [];
+                if (data.row == 1 && new_style.rolling_fashion == 'translation') {
+                    // 拆分的数量
+                    list.forEach((item) => {
+                        nav_list.push({
+                            split_list: [item],
+                        });
+                    });
+                    return nav_list;
+                } else {
+                    // 每页显示的数量
+                    const num = (data.single_line || 4) * (data.row || 1);
+                    // 拆分的数量
+                    const split_num = Math.ceil(list.length / num);
+                    for (let i = 0; i < split_num; i++) {
+                        nav_list.push({
+                            split_list: list.slice(i * num, (i + 1) * num),
+                        });
+                    }
+                    return nav_list;
+                }
+            } else {
+                // 否则的话，就返回全部的信息
+                return [
+                    {
+                        split_list: list,
+                    },
+                ];
+            }
+        },
+        slideChange(e) {
+            this.setData({
+                actived_index: e.detail.current,
+            });
+        },
+        url_open_event(link) {
+            app.globalData.url_event(link);
+        },
+    },
+};
 </script>
 
 <style scoped lang="scss">
-    .top-img {
-        height: 72rpx;
-        width: 72rpx;
-        border-radius: 8rpx;
-    }
-    .gap-x-10 {
-        row-gap: 20rpx;
-    }
+.top-img {
+    height: 72rpx;
+    width: 72rpx;
+    border-radius: 8rpx;
+}
+
+.gap-x-10 {
+    row-gap: 20rpx;
+}
 </style>