抽奖按钮大小优化，中奖结果滚动显示

components/lottery/index11.vue

@@ -27,7 +27,9 @@
 		style="    position: relative;
 		top: -182rpx;font-weight: bold;
 		color: #FFF;
-		font-size: 46rpx;" >
+		font-size: 46rpx;     width: 100%;
+    height: 80rpx;
+    text-align: center;" >
 				点击抽奖
 			</view>
 		 

pages/temporary/20241111/doubleElevenLottery.vue

@@ -1,23 +1,18 @@
 <template>
 	<view>
-		<u-modal title="恭喜" confirm-text="前往查看" cancel-color="#333333" 
-		 
-		 :show-cancel-button="true"
-		 @confirm="modalConfirm"
-		 cancel-text="关闭"
-		 
-		 :title-style="{color: '#101010',fontSize:'48rpx'}"
-		 confirm-color="#00B962" v-model="show">
+		<u-modal title="恭喜" confirm-text="前往查看" cancel-color="#333333" :show-cancel-button="true"
+			@confirm="modalConfirm" cancel-text="关闭" :title-style="{color: '#101010',fontSize:'48rpx'}"
+			confirm-color="#00B962" v-model="show">
 			<view class="slot-content">
-				<p>恭喜您！获得本次抽奖的幸运大奖</p>
-				<p>奖品：<span style="color:#F08736 ;font-weight: bold;">{{resultObj.name}}</span></p>
+				<p>恭喜您！获得本次抽奖的幸运大奖</p>
+				<p>奖品：<span style="color:#F08736 ;font-weight: bold;">{{resultObj.name}}</span></p>
 				<p></p>
 			</view>
 
 
 		</u-modal>
 
-		<ujp-navbar title="双11活动中奖名单" :zIndex="999999"></ujp-navbar>
+		<ujp-navbar title="双11抽奖转盘" :zIndex="999999" :isBack="false"></ujp-navbar>
 		<view class="top">
 			<img class="cover" src="@/assets/img/topCover.png" alt="" />
 			<img class="img1" src="@/assets/img/doubleEleven3x.png" alt="" />
@@ -33,6 +28,91 @@
 				ref="refLottery" @clickBtn="clickBtn" @playRewardEnd="playRewardEnd" :setWinnerFn="getWinnerFn">
 			</Lottery>
 		</view>
+		<view class="listBox">
+
+			<view class="head">
+				<view class="head2">
+
+					<view class="contentHead">
+
+					</view>
+				</view>
+
+
+			</view>
+
+			<view class="content">
+
+
+				<view class="list">
+					<view class="title">
+						中奖名单
+						<view class="img">
+							<img src="@/assets/img/goldMedal.png" alt="" />
+						</view>
+					</view>
+					<view class="listContent">
+						<view class="name">
+							<view class="title">
+								用户名
+							</view>
+							<view class="title">
+								手机号
+							</view>
+							<view class="title">
+								奖品
+							</view>
+							<!-- <view class="title">
+								时间
+							</view> -->
+						</view>
+						<view class="account container">
+							<scroll-view class="scroll-list" scroll-y :style="{ height: scrollHeight + 'px' }"
+								:scroll-top="scrollTop" scroll-with-animation @scroll="onScroll">
+
+								<view class="value" v-for="(item,i) in winList" :key="i">
+									<view class="item">
+										{{item.name}}
+									</view>
+									<view class="item">
+										{{item.phone}}
+									</view>
+									<!-- <view class="item">
+										{{item.prize}}
+									</view> -->
+									<view class="item item2" :class="{
+										'itemA':item.prize=='充电免单券',
+										'itemB':item.prize=='充电服务费6折月卡',
+										'itemC':item.prize=='服务费免单劵',
+									}" >
+										{{(item.prize)}}
+									</view>
+								</view>
+								<view class="value" style="color: #fff" v-for="(item) in 4" :key="item+'_a'">
+									<view class="item">
+										123
+									</view>
+									<view class="item">
+
+									</view>
+
+									<view class="item item2">
+
+									</view>
+								</view>
+							</scroll-view>
+						</view>
+					</view>
+				</view>
+
+			</view>
+
+		</view>
+
+
+		<view class="hint">
+			活动最终解释权归湖北鹏育优电新能源科技有限公司所有
+		</view>
 
 
 	</view>
@@ -48,22 +128,29 @@
 		},
 		data() {
 			return {
+				ckKey: false,
 				resultObj: {
-					id: 2,
-					name: '服务费免单卷',
-					nameText: ['服务费免单卷'],
-					url:"/pages/user/coupon/myCoupon",
-					img: '1',
+					id: 2,
+					name: '服务费免单卷',
+					nameText: ['服务费免单卷'],
+					url: "/pages/user/coupon/myCoupon",
+					img: '1',
 					color: "#f7e2c3",
 				},
 				show: false,
 				useNum: 0,
+				scrollHeight: 310, // 滚动区域高度
+				scrollTop: 0, // 初始滚动位置
+				scrollSpeed: 1, // 滚动速度，值越大滚动越快
+				intervalId: null, // 定时器ID
+
 				lotteryIndex: -1,
+				winList: [],
 				dataLottery: [{
 						id: 1,
 						name: '充电免单卷(含电费)',
 						nameText: ['充电免单卷', '(含电费)'],
-						url:"/pages/user/coupon/myCoupon",
+						url: "/pages/user/coupon/myCoupon",
 						img: '1',
 
 						color: "#fbf0df"
@@ -72,7 +159,7 @@
 						id: 2,
 						name: '服务费免单卷',
 						nameText: ['服务费免单卷'],
-						url:"/pages/user/coupon/myCoupon",
+						url: "/pages/user/coupon/myCoupon",
 						img: '1',
 						color: "#f7e2c3",
 
@@ -82,7 +169,7 @@
 						id: 3,
 						name: '充电服务费6折月卡',
 						nameText: ['充电服务费6折', '月卡'],
-						url:"/pages/cardBag/cardBag",
+						url: "/pages/cardBag/cardBag",
 						img: '1',
 						color: "#fbf0df"
 					},
@@ -101,26 +188,56 @@
 		},
 		onLoad() {
 			this.getInfo()
+			// 页面加载时计算滚动区域高度，并启动自动滚动
+			// this.scrollHeight = uni.getSystemInfoSync().windowHeight - 100; // 根据实际屏幕高度调整
+
 		},
-		methods: {
-			modalConfirm(){
-				uni.navigateTo({
-					url:this.resultObj.url
-				})
+
+		methods: {
+
+			onScroll(event) {
+				// 可以监听滚动事件做一些其他处理
+				//console.log("当前滚动位置:", event.detail.scrollTop);
+			},
+			startAutoScroll() {
+				// 设置定时器，让列表自动滚动
+				this.intervalId = setInterval(() => {
+					// 更新 scrollTop，实现自动滚动
+					this.scrollTop += this.scrollSpeed;
+
+					// 如果滚动到底部，重置 scrollTop 重新开始
+
+					if (this.scrollTop >= this.scrollHeight) {
+						this.scrollTop = 0;
+					}
+				}, 50); // 每20毫秒更新一次，调整这个时间来控制滚动速度
+			},
+			stopAutoScroll() {
+				// 清除定时器，停止滚动
+				if (this.intervalId) {
+					clearInterval(this.intervalId);
+				}
+			},
+			modalConfirm() {
+				uni.navigateTo({
+					url: this.resultObj.url
+				})
 			},
 			playRewardEnd() {
 				if (this.resultObj.id != 100) {
 					this.show = true;
 				}
 			},
-			clickBtn() {
-				if(this.$refs.refLottery.isLottery||this.show){
-					uni.showToast({
-						title: "摇奖中...",
-						icon: "none"
-					})
-					return 
+
+			clickBtn() {
+				if ((this.$refs.refLottery.isLottery || this.show) || !this.ckKey) {
+					uni.showToast({
+						title: "摇奖中...",
+						icon: "none"
+					})
+					return
 				}
+				this.ckKey = false
 				uni.showLoading({
 					title: "加载中",
 					mask: true,
@@ -129,8 +246,7 @@
 
 				}).then((res) => {
 					uni.hideLoading();
-					//this.useNum=res.data.useNum
-
+					
 					var lotteryIndex = this.dataLottery.findIndex(item => {
 						item.weight = 0
 						//console.log(res.data.serviceDiscountRatio,item.num,res.data.serviceDiscountRatio==item.num)
@@ -148,6 +264,7 @@
 					this.getInfo()
 				}).catch(error => {
 					//this.showNt = false;
+					this.ckKey = true
 					uni.showToast({
 						title: error,
 						icon: "none"
@@ -162,9 +279,13 @@
 				API.activityDetails({
 
 				}).then((res) => {
+					this.ckKey = true
 					uni.hideLoading();
 					this.useNum = res.data.useNum
-
+					this.winList = res.data.winList
+					if (this.winList.length > 10 && this.intervalId == null) {
+						this.startAutoScroll();
+					}
 				}).catch(error => {
 					//this.showNt = false;
 					uni.showToast({
@@ -251,19 +372,181 @@
 		.lottery {
 			margin-top: -500rpx;
 		}
-	}
-	
-	.slot-content {
-			font-size: 36rpx;
-			
-			padding: 30rpx;
-			margin-top: 40rpx;
-			p{
-				margin-bottom: 16rpx;
-				line-height: 40rpx;
-				text{
-					color: #00B962;
-				}
-			}
+	}
+
+	.slot-content {
+		font-size: 36rpx;
+
+		padding: 30rpx;
+		margin-top: 40rpx;
+
+		p {
+			margin-bottom: 16rpx;
+			line-height: 40rpx;
+
+			text {
+				color: #00B962;
+			}
 		}
+	}
+
+
+	.listBox {
+		position: relative;
+		margin-top: -60rpx;
+
+		.head {
+			width: 100%;
+			height: 144rpx;
+			border-radius: 16px 16px 0px 0px;
+			background: linear-gradient(180deg, rgba(239, 121, 66, 1) 0%, rgba(221, 48, 50, 1) 100%);
+			// border: 1px solid rgba(252, 163, 131, 1);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+		}
+
+		.head2 {
+			position: relative;
+			width: 702rpx;
+			height: 56rpx;
+			border-radius: 8px;
+			background-color: rgba(145, 17, 18, 1);
+			text-align: center;
+			border: 6px solid rgba(206, 38, 37, 1);
+
+		}
+
+		.contentHead {
+			width: 678rpx;
+			height: 36rpx;
+			background: linear-gradient(180deg, rgba(187, 58, 60, 1) 0%, rgba(255, 255, 255, 1) 100%);
+		}
+
+		.content {
+			width: 678rpx;
+			border-radius: 0px 0px 12px 12px;
+			background-color: rgba(255, 255, 255, 1);
+			padding: 24rpx 0;
+			margin: -54rpx auto 0;
+			z-index: 999;
+			position: relative;
+
+
+			.list {
+				border-radius: 8px 50px 8px 8px;
+				background: linear-gradient(88.8deg, rgba(226, 54, 53, 1) 1.5%, rgba(247, 143, 30, 1) 99.88%);
+				margin: 24rpx;
+				padding: 8rpx;
+
+				.title {
+					color: rgba(255, 255, 255, 1);
+					font-size: 36rpx;
+					text-align: center;
+					font-weight: bold;
+					position: relative;
+					padding-top: 18rpx;
+
+					.img {
+						width: 144rpx;
+						height: 144rpx;
+						position: absolute;
+						top: -16rpx;
+						left: 0;
+
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+
+				.listContent {
+					margin-top: 26rpx;
+					padding: 16rpx 0;
+					border-radius: 8rpx;
+					background-color: #fff;
+
+					.name,
+					.value {
+						display: flex;
+						align-items: center;
+						justify-content: space-around;
+						text-align: center;
+					}
+
+					.name,
+					.account {
+
+						.title {
+							color: rgba(119, 119, 119, 1);
+							font-size: 24rpx;
+							margin-top: 24rpx;
+						}
+
+						.value {
+							color: rgba(51, 51, 51, 1);
+
+							.item {
+								width: 240rpx;
+								overflow: hidden;
+								line-height: 64rpx;
+							}
+
+							.item2 {
+								width: 340rpx;
+								white-space: pre;
+							}
+							.itemA {
+								color: #ff9900;
+							}
+							.itemB {
+								color: #00b962;
+							}
+							.itemC {
+								
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.hint {
+		color: rgba(96, 2, 3, 1);
+
+		font-size: 24rpx;
+
+		text-align: center;
+		margin-top: 20px;
+	}
+
+
+	.container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		//padding: 20px;
+	}
+
+	.scroll-list {
+		// width: 80%;
+		//  border: 1px solid #ccc;
+		border-radius: 8px;
+		padding: 10px;
+		overflow: hidden;
+	}
+
+	.list-item {
+		padding: 10px;
+		text-align: center;
+		font-size: 16px;
+		border-bottom: 1px solid #f0f0f0;
+	}
+
+	.list-item:last-child {
+		border-bottom: none;
+	}
 </style>