From 6828520f4d835cf6656783bdf6620f6684971a00 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, 3 Apr 2025 17:59:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=94=80=E5=94=AE=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98=E5=92=8C=E6=89=8B?=
 =?UTF-8?q?=E6=9C=BA=E7=AB=AF=E5=85=BC=E5=AE=B9=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                                    |   4 +-
 components/diy/modules/next-notice-bar.vue | 177 +++++++++++++++++++++
 components/diy/modules/tabs-view.vue       |   9 +-
 components/diy/salerecords.vue             |  55 ++++---
 4 files changed, 215 insertions(+), 30 deletions(-)
 create mode 100644 components/diy/modules/next-notice-bar.vue

diff --git a/App.vue b/App.vue
index 47d4c77b..a0059c71 100644
--- a/App.vue
+++ b/App.vue
@@ -7,10 +7,10 @@
             data: {
                 // 基础配置
                 // 数据接口请求地址
-                request_url:'http://shopxo.com/',
+                request_url:'https://new.shopxo.vip/',
 
                 // 静态资源地址（如系统根目录不在public目录下面请在静态地址后面加public目录、如：https://d1.shopxo.vip/public/）
-                static_url:'http://shopxo.com/',
+                static_url:'https://new.shopxo.vip/',
 
                 // 系统类型（默认default、如额外独立小程序、可与程序分身插件实现不同主体小程序及支付独立）
                 system_type: 'default',
diff --git a/components/diy/modules/next-notice-bar.vue b/components/diy/modules/next-notice-bar.vue
new file mode 100644
index 00000000..4de2cfd1
--- /dev/null
+++ b/components/diy/modules/next-notice-bar.vue
@@ -0,0 +1,177 @@
+<template>
+	<view :class="'next-notice-bar-component-' + propKey">
+		<view class="next-notice-bar" v-for="(list, index) in showList" :key="index">
+			<view :class="'next-notice-bar-content-' + propKey" :style="{ transform: (y ? 'translateY' : 'translateX') + '(' + xArr[index] + 'px)', display: y ? 'block' : 'inline-block', 'white-space': y ? 'normal' : 'nowrap'}">
+				<view class="next-notice-bar-list" :style="{ display: y ? 'block' : 'inline-block'}">
+					<view class="next-notice-bar-item" :style="{ display: y ? 'block' : 'inline-block' }" v-for="(new_item, index1) in list" :key="index1">
+						<slot :row="new_item"></slot>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			propList: {
+				// 总数据，一维
+				type: Array,
+				default: () => []
+			},
+			row: {
+				// 行数
+				type: Number,
+				default: 1
+			},
+			speed: {
+				// 速度
+				type: Number,
+				default: 30
+			},
+			delay: {
+				// 延时
+				type: Number,
+				default: 0
+			},
+			y: {
+				// y轴
+				type: Boolean,
+				default: false
+			},
+			propKey: {
+				type: [String, Number],
+                default: '',
+			},
+			initPosition: {
+				// 开始位置，left/right
+				type: String,
+				default: 'left',
+				validator: (value) => {
+					const arr = ['left', 'right', 'top', 'bottom'];
+					const check = arr.includes(value);
+					if (!check) {
+						console.error(`initPosition props  optional parameters : ${arr}. error value: ` + value);
+					}
+					return check;
+				}
+			}
+		},
+		data() {
+			return {
+				componentWidth: 0,
+				contentWidthArr: [],
+				xArr: [],
+			};
+		},
+		computed: {
+			showList() {
+				// 多维数组
+				if (this.y) {
+					this.xArr = [2000];
+					return [this.propList, this.propList];
+				} else {
+					this.xArr = Array.from({
+						length: this.row
+					}).map((_) => 2000);
+					const l = Array.from({
+						length: this.row
+					}).map((_, index) => {
+						const arr = [];
+						this.propList.forEach((item, i) => {
+							if (i % this.row === index) {
+								arr.push(item);
+							}
+						});
+						return arr;
+					});
+					return l;
+				}
+			}
+		},
+		watch: {
+			showList: {
+				deep: true,
+				immediate: true,
+				handler() {
+					this.$nextTick(() => {
+						let tt = setTimeout(() => {
+							clearTimeout(tt);
+							tt = null;
+							let query = uni.createSelectorQuery().in(this);
+							query.select('.next-notice-bar-component-' + this.propKey).boundingClientRect((data) => {
+								this.componentWidth = Math.floor(this.y ? data.height : data.width);
+							});
+							query
+								.selectAll('.next-notice-bar-content-' + this.propKey)
+								.boundingClientRect((data) => {
+									this.contentWidthArr = data.map((item) => Math.floor(this.y ? item.height : item.width));
+
+									this.xArr = this.contentWidthArr.map((_, index) => {
+										return ['left', 'top'].includes(this.initPosition) ? 0 : this.componentWidth;
+									});
+								})
+								.exec();
+							let t = setTimeout(
+								() => {
+									clearTimeout(t);
+									t = null;
+									this.scrollContent();
+								},
+								this.delay < 0 ? 0 : this.delay
+							);
+						}, 1);
+					});
+				}
+			}
+		},
+		methods: {
+			scrollContent() {
+				this.xArr.forEach((num, index) => {
+					let n = num;
+					if (n <= -(this.contentWidthArr[index] / 2)) {
+						n = 0;
+					} else {
+						n = num - 1;
+					}
+
+					this.xArr.splice(index, 1, n);
+				});
+				let t = setTimeout(() => {
+					clearTimeout(t);
+					t = null;
+					this.scrollContent();
+				}, this.speed);
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.next-notice-bar-component {
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+	}
+
+	.next-notice-bar {
+		width: 100%;
+		overflow: hidden;
+	}
+
+	.next-notice-bar-content,
+	.next-notice-bar-list,
+	.next-notice-bar-item {
+		white-space: nowrap;
+		display: inline-block;
+	}
+
+	.next-notice-bar-content {
+		min-width: 200%;
+	}
+
+	.next-notice-bar-list {
+		min-width: 50%;
+	}
+</style>
\ No newline at end of file
diff --git a/components/diy/modules/tabs-view.vue b/components/diy/modules/tabs-view.vue
index 06631b39..36de82c6 100644
--- a/components/diy/modules/tabs-view.vue
+++ b/components/diy/modules/tabs-view.vue
@@ -282,6 +282,7 @@
                     tabs_top_img: `height: ${tabs_top_img_height * 2 }rpx;width: ${tabs_top_img_height * 2 }rpx;box-sizing: border-box;` + radius_computer(tabs_top_img_radius),
                 };
                 const { tabs_size_checked, tabs_size, tabs_icon_size_checked = 0, tabs_icon_size = 0, tabs_img_height = 0, tabs_sign_spacing = 0 } = new_style || {};
+                const new_content_tabs_list = new_content?.tabs_list || [];
                 let default_height = 0;
                 if (new_content.tabs_theme == '2') {
                     default_height = 12; // 选中的时候,风格二的内间距
@@ -291,17 +292,17 @@
                     default_height = 4 + tabs_top_img_height + tabs_sign_spacing;
                 }
                 // 筛选出所有的icon
-                const is_icon = new_content?.tabs_list?.findIndex((item) => item.tabs_type === '1' && !isEmpty(item.tabs_icon)) ?? -1;
+                const is_icon = new_content_tabs_list.findIndex((item) => item.tabs_type === '1' && !isEmpty(item.tabs_icon)) ?? -1;
                 // 如果有icon，则取选中的icon大小和未选中的icon大小取最大值，作为图标的高度
                 let icon_height = 0;
                 if (is_icon > -1) {
                     icon_height = Math.max(tabs_icon_size_checked + default_height, tabs_icon_size);
                 }
                 // 筛选出所有的图片, 没有选择图标的时候默认是图片
-                const is_img = new_content?.tabs_list?.findIndex((item) => item.tabs_type === '1' && isEmpty(item.tabs_icon)) ?? -1;
+                const is_img = new_content_tabs_list.findIndex((item) => item.tabs_type === '1' && isEmpty(item.tabs_icon)) ?? -1;
                 // 选项卡高度 五个值，作为判断依据，因为图片没有未选中的大小设置，所以高度判断的时候只取选中的高度, 其余的icon和标题都分别取选中和未选中的大小对比，取出最大的值，作为选项卡的高度，避免选项卡切换时会出现抖动问题
                 const height = Math.max(tabs_size_checked + default_height, tabs_size, icon_height, is_img > -1 ? (tabs_img_height + default_height) : '');
-                const findIndex = new_content.tabs_list.findIndex(item => item.is_sliding_fixed == '1');
+                const findIndex = new_content_tabs_list.findIndex(item => item.is_sliding_fixed == '1');
                 // 参数设置
                 this.setData({
                     form: new_content,
@@ -407,7 +408,7 @@
                 const query = uni.createSelectorQuery().in(this);
                 query.selectAll(`.scroll-item-` + this.propKey)
                 .boundingClientRect((rect) => {
-                    const tabs_index = this.form.tabs_list.findIndex(item => item.is_sliding_fixed == '1');
+                    const tabs_index = this.form?.tabs_list?.findIndex(item => item.is_sliding_fixed == '1');
                     // 如果第一个悬浮了，就取第二个的left加上 第一个的宽度和left
                     let new_width = tabs_index == 0 && index != 0 ? rect[1].left - rect[0].width - rect[0].left : rect[0].left;
                     // 如果悬浮的不是第一个并且选中的是悬浮的内容
diff --git a/components/diy/salerecords.vue b/components/diy/salerecords.vue
index 5c887d1a..f5269299 100644
--- a/components/diy/salerecords.vue
+++ b/components/diy/salerecords.vue
@@ -1,8 +1,8 @@
 <template>
-    <view class="oh" :style="style_container">
+    <view v-if="!isEmpty(list) || !isEmpty(swiper_new_list)" class="oh" :style="style_container">
         <view :style="style_img_container + 'height:' + swiper_outer_height * 2 + 'rpx;'">
             <template v-if="['translation', 'vertical'].includes(form.rotation_direction)">
-                <swiper circular="true" vertical="true" :autoplay="form.is_roll == '1'" :acceleration="true" :interval="form.rotation_direction == 'vertical' ? swiper_interval_time : interval_time" :duration="form.rotation_direction == 'vertical' ? interval_time : 1000" :easing-function="form.rotation_direction == 'vertical' ? 'linear' : 'default'" :style="'height:' + swiper_height * 2 + 'rpx;'" :display-multiple-items="slides_per_group">
+                <swiper circular="true" vertical="true" :autoplay="form.is_roll == '1'" :interval="form.rotation_direction == 'vertical' ? swiper_interval_time : interval_time" :duration="form.rotation_direction == 'vertical' ? interval_time : 1000" :easing-function="form.rotation_direction == 'vertical' ? 'default' : 'default'" :style="'height:' + swiper_height * 2 + 'rpx;'" :display-multiple-items="slides_per_group">
                     <swiper-item v-for="(item, index) in list" :key="index">
                         <view class="flex-row align-c" :style="'gap:' + new_style.content_spacing * 2 + 'rpx;margin-bottom:' + new_style.content_spacing * 2 + 'rpx;'">
                             <template v-if="!isEmpty(item) && is_show('head')">
@@ -24,7 +24,8 @@
                 <view class="swiper-free-mode swiper-horizontal-free-mode" :style="'height:' + swiper_height * 2 + 'rpx;'">
                     <view v-for="(item, index) in swiper_new_list" :key="index" :style="'margin-bottom:' + (index < swiper_new_list.length - 1 ? new_style.data_spacing * 2 : 0) + 'rpx;'">
                         <template v-if="!isEmpty(item.split_list)">
-                            <swiper circular="true" autoplay="true" :acceleration="true" :interval="swiper_interval_time" :duration="interval_time + (1000 * index)" easing-function="linear" :style="'height:' + new_swiper_height * 2 + 'rpx;'" :data-index="index" :data-value="item.split_list.length" @change="swiper_change">
+                            <!-- #ifndef H5 || MP-BAIDU || APP -->
+                            <swiper circular="true" autoplay="true" :interval="swiper_interval_time" :duration="interval_time + (1000 * index)" easing-function="linear" :style="'height:' + new_swiper_height * 2 + 'rpx;'" :data-index="index" :data-value="item.split_list.length" @change="swiper_change">
                                 <swiper-item v-for="(new_item, new_index) in item.split_list" :key="new_index">
                                     <view :style="swiper_horizontal_container + 'margin-left:' + (new_index == 0 && swiper_margin_left_list[index].is_left ? slides_offset_before : 0) + 'px;'">
                                         <view class="flex-row align-c" :style="swiper_horizontal_img_container">
@@ -39,6 +40,24 @@
                                     </view>
                                 </swiper-item>
                             </swiper>
+                            <!-- #endif -->
+                            <!-- #ifdef H5 || MP-BAIDU || APP -->
+                            <next-notice-bar :key="propKey + '-' + index" :propKey="propKey + '-' + index" :y="false" initPosition="right" :row="1" :speed="(interval_time / 100) + (10 * index)" :propList="item.split_list">
+                                <template #default="{ row }">
+                                    <view :style="swiper_horizontal_container">
+                                        <view class="flex-row align-c" :style="swiper_horizontal_img_container">
+                                            <view v-if="is_show('goods_image') || is_show('goods_title')" class="flex-row align-c" :style="'gap:' + new_style.content_spacing * 2 + 'rpx;'" :data-value="row.goods_url" @tap.stop="url_event">
+                                                <template v-if="is_show('goods_image')">
+                                                    <imageEmpty :propImageSrc="row.images" :propStyle="goods_img_radius" propErrorStyle="width: 20rpx;height: 20rpx;"></imageEmpty>
+                                                </template>
+                                                <view v-if="is_show('goods_title')" class="flex-1 text-line-1" :style="goods_title_style + 'max-width: ' + max_title_width * 2 + 'rpx;white-space: initial;'">{{ row.title }}</view>
+                                            </view>
+                                            <text v-if="is_show('time')" class="nowrap" :style="time_style">{{ row.add_time }}</text>
+                                        </view>
+                                    </view>
+                                </template>
+                            </next-notice-bar>
+                            <!-- #endif -->
                         </template>
                     </view>
                 </view>
@@ -51,11 +70,13 @@
     const app = getApp();
     import { isEmpty, common_styles_computer, common_img_computer, padding_computer, radius_computer, background_computer, gradient_handle } from '@/common/js/common/common.js';
     import imageEmpty from '@/components/diy/modules/image-empty.vue';
+    import nextNoticeBar from '@/components/diy/modules/next-notice-bar.vue';
     var system = app.globalData.get_system_info(null, null, true);
     var sys_width = app.globalData.window_width_handle(system.windowWidth);
     export default {
         components: {
-            imageEmpty
+            imageEmpty,
+            nextNoticeBar
         },
         props: {
             propValue: {
@@ -101,10 +122,7 @@
         watch: {
             propKey(val) {
                 this.init();
-            },
-            propValue(new_value, old_value) {
-                this.init();
-            },
+            }
         },
         created() {
             this.init();
@@ -115,21 +133,10 @@
                 const new_form = this.propValue.content || null;
                 const new_style = this.propValue.style || null;
                 if (new_form != null && new_style != null) {
-                    const default_list = {
-                        user: {
-                            avatar: '',
-                            user_name_view: '测试昵称测试昵称测试昵称测试昵称',
-                        },
-                        title: '测试商品标题测试',
-                        images: '',
-                        add_time: '02-04 23:01:01'
-                    };
                     let new_list = [];
                     if (!isEmpty(new_form.data_auto_list)) {
                         // 筛选商品并且筛选商品数组不为空
                         new_list = new_form.data_auto_list;
-                    } else {
-                        new_list = Array(4).fill(default_list);
                     }
                     // 轮播图高度
                     let swiper_height = 0;
@@ -163,9 +170,9 @@
                         swiper_height = new_swiper_height * new_num + (data_spacing * (new_num - 1));
                     }
                     swiper_outer_height = swiper_height + common_style.padding_top + common_style.padding_bottom;
-                    let swiper_interval_time = (new_form.interval_time * 1000) / 2;
-                    // #ifdef MP-ALIPAY
-                    swiper_interval_time = 0;
+                    let swiper_interval_time = 0;
+                    // #ifdef H5 || MP-BAIDU || APP
+                    swiper_interval_time = (new_form.interval_time * 1000) / 2;
                     // #endif
                     this.setData({
                         form: new_form,
@@ -185,7 +192,7 @@
                         new_swiper_height: new_swiper_height,
                         interval_time: new_form.interval_time * 1000,
                         swiper_interval_time: swiper_interval_time,
-                        slides_offset_before: sys_width - common_style.margin_left + common_style.margin_right - common_style.padding_left - common_style.padding_right - 20,
+                        slides_offset_before: sys_width - common_style.margin_left + common_style.margin_right - common_style.padding_left - common_style.padding_right,
                         swiper_horizontal_container: this.get_swiper_horizontal_container(new_style),
                         swiper_horizontal_img_container: this.get_swiper_horizontal_img_container(new_style),
                         style_container: common_styles_computer(new_style.common_style), // 公共样式
@@ -233,7 +240,7 @@
             // 将偏移量设置为0
             swiper_change(e) {
                 const dataset = e.target.dataset;
-                if (e.target.current >= dataset.value - 1) {
+                if (e.target.current > dataset.value - 2) {
                     const index = dataset.index;
                     const list = this.swiper_margin_left_list;
                     list[index].is_left = false;