From e474d681882be917f71e6cd2b0c03974ecad79ad Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Mon, 4 Aug 2025 18:10:22 +0800
Subject: [PATCH] 11

---
 pages/index/index.vue | 267 +++++++++++++++++++++++++++++++-----------
 1 file changed, 201 insertions(+), 66 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 2ce9198..28cd3b1 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -5,6 +5,32 @@
 		</image>
 		<uniNoticeBar showIcon single scrollable text="赠品仅限线下购买设备的用户领取，需人工审核，预计3个工作日内完成！"
 			style="width: 100%;position:fixed;top:10%" background-color="transparent" color="#000" />
+
+
+		<view class="auto-scroll-container" catchtouchmove="return false">
+			<!-- 滚动容器 -->
+			<scroll-view class="scroll-view" scroll-x :scroll-with-animation="false" ref="scrollView"
+				@scroll="onScroll">
+				<!-- 图片列表容器 (复制一份实现无缝滚动) -->
+				<view class="scroll-content" :style="{ transform: `translateX(${translateX}px)` }"
+					catchtouchmove="return false">
+					<view class="image-list" ref="imageList">
+						<view class="image-item" v-for="(item, index) in imageList" :key="index">
+							<image :src="item.url" mode="aspectFill" class="item-image" :alt="item.alt"></image>
+						</view>
+					</view>
+
+					<!-- 复制一份列表用于无缝衔接 -->
+					<view class="image-list copy-list" catchtouchmove="return false">
+						<view class="image-item" v-for="(item, index) in imageList" :key="'copy-' + index">
+							<image :src="item.url" mode="aspectFill" class="item-image" :alt="item.alt"></image>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+
+
 		<view class="center" @click="openReceivePop"
 			style="width: 386rpx; height: 102rpx; background-color: #0877FF; border-radius: 16rpx; position: absolute; bottom: 200rpx;">
 			<text style="font-size: 35rpx; color: white;">设备专属权益兑换</text>
@@ -141,38 +167,86 @@
 </template>
 
 <script>
-import uniNoticeBar from '@/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue'
-import {
-	processImage
-} from '@/common/utils'
-export default {
-	components: {
-		uniNoticeBar
-	},
-	onLoad() {
-		this.getConfig();
-		var userId = uni.getStorageSync("user_id");
-		if (!userId || userId == 0) {
-			this.login();
-		}
-		this.userId = userId;
-	},
-	data() {
-		return {
-			bg: "",
-			userId: 0,
-			imagePath: '',
-			name: "",
-			phone: "",
-			base64: "",
-			workUnit: "",
-			address: "",
-			createTime: "",
-			number: "",
-			model: "",
-			recordList: []
-		}
-	},
+	import uniNoticeBar from '@/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue'
+	import {
+		processImage
+	} from '@/common/utils'
+	export default {
+		components: {
+			uniNoticeBar
+		},
+		onLoad() {
+			this.getConfig();
+			var userId = uni.getStorageSync("user_id");
+			if (!userId || userId == 0) {
+				this.login();
+			}
+			this.userId = userId;
+		},
+		data() {
+			return {
+				bg: "",
+				userId: 0,
+				imagePath: '',
+				name: "",
+				phone: "",
+				base64: "",
+				workUnit: "",
+				address: "",
+				createTime: "",
+				number: "",
+				model: "",
+				recordList: [],
+				// 图片数据
+				imageList: [{
+						url: 'https://picsum.photos/300/200?random=1',
+						alt: '图片1'
+					},
+					{
+						url: 'https://picsum.photos/300/200?random=2',
+						alt: '图片2'
+					},
+					{
+						url: 'https://picsum.photos/300/200?random=3',
+						alt: '图片3'
+					},
+					{
+						url: 'https://picsum.photos/300/200?random=4',
+						alt: '图片4'
+					},
+					{
+						url: 'https://picsum.photos/300/200?random=5',
+						alt: '图片5'
+					},
+					{
+						url: 'https://picsum.photos/300/200?random=6',
+						alt: '图片6'
+					}
+				],
+				scrollTimer: null, // 滚动定时器
+				scrollSpeed: 1, // 滚动速度 (px/帧)
+				translateX: 0, // 位移量
+				listWidth: 0, // 列表宽度
+				isScrolling: false // 是否正在滚动
+			}
+		},
+
+		onReady() {
+			// 获取列表宽度
+			this.$nextTick(() => {
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.image-list').boundingClientRect(data => {
+					this.listWidth = data.width;
+					// 开始自动滚动
+					this.startAutoScroll();
+				}).exec();
+			});
+		},
+
+		onUnload() {
+			// 页面卸载时清除定时器
+			this.stopAutoScroll();
+		},
 
 	methods: {
 		request(url, method, data) {
@@ -453,47 +527,72 @@ export default {
 			this.base64 = '';
 		},
 
-		previewImage() {
-			if (this.imagePath) {
-				uni.previewImage({
-					current: this.imagePath,
-					urls: [this.imagePath],
-					success: function (res) {
-						console.log('预览图片成功');
-					},
-					fail: function (err) {
-						console.error('预览图片失败:', err);
-						uni.showToast({
-							title: '预览失败',
-							icon: 'none'
-						});
+			previewImage() {
+				if (this.imagePath) {
+					uni.previewImage({
+						current: this.imagePath,
+						urls: [this.imagePath],
+						success: function(res) {
+							console.log('预览图片成功');
+						},
+						fail: function(err) {
+							console.error('预览图片失败:', err);
+							uni.showToast({
+								title: '预览失败',
+								icon: 'none'
+							});
+						}
+					});
+				}
+			},
+
+
+			// 开始自动滚动
+			startAutoScroll() {
+				this.stopAutoScroll(); // 先清除已有定时器
+
+				// 每16ms滚动一次 (约60帧/秒)
+				this.scrollTimer = setInterval(() => {
+					this.translateX -= this.scrollSpeed;
+
+					// 当滚动距离达到一个列表宽度时，重置位置实现无缝滚动
+					if (Math.abs(this.translateX) >= this.listWidth) {
+						this.translateX = 0;
 					}
-				});
-			}
-		},
-		async getBannerList() {
-			const res = await this.request('getBannerList', 'GET', {});
-			console.log(res);
-			if (res.code == 200) {
-				this.bannerList = res.data;
+
+					this.isScrolling = true;
+				}, 16);
+			},
+
+			// 停止自动滚动
+			stopAutoScroll() {
+				if (this.scrollTimer) {
+					clearInterval(this.scrollTimer);
+					this.scrollTimer = null;
+					this.isScrolling = false;
+				}
+			},
+
+			// 监听滚动事件 (用于鼠标悬停暂停)
+			onScroll() {
+				// 可以在这里处理手动滚动后的逻辑
 			}
 
-		}
 
 	}
 }
 </script>
 
-<style>
-.content {
-	width: 100%;
-	height: 100vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-}
+<style scoped>
+	.content {
+		width: 100%;
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+	}
 
 .line {
 	width: 90%;
@@ -501,5 +600,41 @@ export default {
 	margin-top: 20rpx;
 	border-bottom: 0.86px solid #e3e3e3;
 
-}
+	}
+
+	.auto-scroll-container {
+		width: 100%;
+		overflow: hidden;
+		/* 隐藏滚动条 */
+		padding: 20rpx 0;
+	}
+
+	.scroll-view {
+		width: 100%;
+		white-space: nowrap;
+		/* 防止换行 */
+	}
+
+	.scroll-content {
+		display: flex;
+	}
+
+	.image-list {
+		display: flex;
+		flex-direction: row;
+	}
+
+	.image-item {
+		width: 240rpx;
+		height: 200rpx;
+		margin-right: 20rpx;
+		border-radius: 8rpx;
+		overflow: hidden;
+	}
+
+	.item-image {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
 </style>
\ No newline at end of file