From 7cb680e3afe10fd12c53fe6119de89d3d8d84d19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com> Date: Fri, 18 Oct 2024 18:18:08 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/diy/auxiliary-line.vue | 2 ++ components/diy/carousel.vue | 20 +++++++++++++------- components/diy/diy.vue | 6 +++++- components/diy/float-window.vue | 13 ++++++++----- components/diy/nav-group.vue | 3 +++ 5 files changed, 31 insertions(+), 13 deletions(-) diff --git a/components/diy/auxiliary-line.vue b/components/diy/auxiliary-line.vue index aa1e698f..0703ccc4 100644 --- a/components/diy/auxiliary-line.vue +++ b/components/diy/auxiliary-line.vue @@ -40,7 +40,9 @@ init() { const new_content = this.propValue.content || {}; const new_style = this.propValue.style || {}; + // 边框设置 let border_content = `border-bottom-style: ${new_content?.styles || 'solid'};`; + // 边框颜色设置 let border_style = `border-bottom-width: ${new_style.line_width * 2 || 2}rpx; border-bottom-color: ${new_style.line_color || 'rgba(204, 204, 204, 1)'};`; this.setData({ style: border_content + border_style, diff --git a/components/diy/carousel.vue b/components/diy/carousel.vue index ed928e4b..94e2aae2 100644 --- a/components/diy/carousel.vue +++ b/components/diy/carousel.vue @@ -126,12 +126,13 @@ init() { const new_form = this.propValue.content; const new_style = this.propValue.style; + // 获取当前手机的宽度 const { windowWidth } = uni.getSystemInfoSync(); // 将90%的宽度分成16份 const block = (windowWidth * 0.9) / 16; const { common_style, actived_color } = new_style; - // scaleToFill 对应 cover aspectFit 对应 contain center 对应 none + // scaleToFill 对应 fill aspectFit 对应 contain aspectFill 对应 cover let fit = ''; if (new_form.img_fit == 'contain') { fit = 'aspectFit'; @@ -146,17 +147,18 @@ new_style: this.propValue.style, seat_list: this.get_seat_list(new_form), new_list: new_form.carousel_list.concat(this.get_seat_list(new_form)), - popup_width: block * 16 * 2 + 'rpx', - popup_height: block * 9 * 2 + 'rpx', - style_container: this.propIsCommon ? common_styles_computer(common_style) : '', // 用于样式显示 - style_img_container: this.propIsCommon ? common_img_computer(common_style) : '', // 用于样式显示 + popup_width: block * 16 * 2 + 'rpx', // 视频的宽度，依照16:9比例来算 + popup_height: block * 9 * 2 + 'rpx', // 视频的高度 + style_container: this.propIsCommon ? common_styles_computer(common_style) : '', // 公共样式显示 + style_img_container: this.propIsCommon ? common_img_computer(common_style) : '', // 公共样式显示 img_style: radius_computer(new_style), // 图片的设置 indicator_style: this.get_indicator_style(new_style), // 指示器的样式 dot_style: `bottom: ${ (new_style.indicator_bottom + common_style.margin_bottom + common_style.padding_bottom) * (sys_width / 390) * 2 }rpx;`, // 指示器位置 - img_fit: fit, + img_fit: fit, // 图片风格 video_style: this.get_video_style(new_style), // 视频播放按钮显示逻辑 - swiper_height: new_form.height * (sys_width / 390) * 2 + 'rpx', + swiper_height: new_form.height * (sys_width / 390) * 2 + 'rpx', // 轮播图高度 }); + // 风格二显示逻辑 if (new_form.carousel_type == 'card') { this.$nextTick(() => { this.setData({ @@ -166,6 +168,7 @@ }); }); } else if (new_form.carousel_type != 'inherit') { + // 风格三，四显示逻辑 this.$nextTick(() => { this.setData({ nextMargin: '100rpx', @@ -188,13 +191,16 @@ 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;`; } diff --git a/components/diy/diy.vue b/components/diy/diy.vue index 4c7959ec..3ae0d2ab 100644 --- a/components/diy/diy.vue +++ b/components/diy/diy.vue @@ -299,7 +299,11 @@ // is_search_alone_row: true, // data_alone_row_space: 20, }); - + var client_value = app.globalData.application_client_type(); + var client_brand = app.globalData.application_client_brand(); + if (client_value == 'h5' || client_brand == 'devtools') { + + } // 缓存数据 uni.setStorageSync(this.cache_key + this.tabs_home_id, this.propValue.diy_data); }, diff --git a/components/diy/float-window.vue b/components/diy/float-window.vue index bd6e713c..e957231b 100644 --- a/components/diy/float-window.vue +++ b/components/diy/float-window.vue @@ -60,22 +60,24 @@ }, methods: { init() { + // 获取内容 let form = this.propValue.content || {}; + // 获取图片 let img_url = (form.button_img || null) != null ? (form.button_img[0] || null) : null; if (img_url != null) { img_url = img_url.url || null; } - this.setData({ - form: form, - style: this.propValue.style, - img_url: img_url, - }); const { float_style, float_style_color, display_location, offset_number_percentage } = this.propValue.style; + // 获取当前手机的宽度和高度 const { windowWidth, windowHeight } = uni.getSystemInfoSync(); + // 计算出距离左边的距离 let x = display_location == 'left' ? 10 : windowWidth - 60; // 计算出距离顶部的距离 const y = Math.ceil(windowHeight * (1 - Number(offset_number_percentage)) - 20); this.setData({ + form: form, + style: this.propValue.style, + img_url: img_url, content_style: float_style == 'shadow' ? `box-shadow: 0 0 40rpx ${float_style_color};border-radius: 50%;` : `background-color: ${float_style_color};border-radius: 50%;`, x: x, y: y @@ -83,6 +85,7 @@ }, url_open() { const { button_jump, button_link } = this.form; + // 如果是指定链接，并且链接不为空的情况下跳转 if (button_jump == 'link' && !isEmpty(button_link)) { app.globalData.url_open(button_link.page); } diff --git a/components/diy/nav-group.vue b/components/diy/nav-group.vue index bd8a0139..1af52e18 100644 --- a/components/diy/nav-group.vue +++ b/components/diy/nav-group.vue @@ -145,13 +145,16 @@ 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;`; }