增加新功能

pages/turntable/turntable.vue

@@ -17,9 +17,29 @@
 						</view>
 					</view>
 					<!-- <view><q-turntable ref="turntable" @start="turntableStart" @success="turntableSuccess"></q-turntable></view> -->
+					<!-- 抽奖次数 -->
+					<view class="draws_warp">
+						<view class="draws_item_warp" @click="drawsFun(1)">抽1次</view>
+						<view class="draws_item_warp" @click="drawsFun(10)">抽10次</view>
+						<view class="draws_item_warp" @click="drawsFun(100)">抽100次</view>
+						<view class="draws_item_warp" @click="drawsFun(365)">抽356次</view>
+					</view>
 				</view>
-				
 			</view>
+			<!-- 活动规则 -->
+			<view class="rule">
+				<view class="rule_title">
+					<view class="title">活动规则</view>
+				</view>
+				<view class="rule_content">内容XXXXXXXXXXXXXXXXXXXXXXXX</view>
+			</view>
+		</view>
+		<!-- 中奖记录 -->
+		<view class="winning_record">
+			<view style="margin-top: 10rpx;">
+				<up-image src="/static/turntable/record.png" width="14" height="14" bgColor="#f1f6ff00" @click="jumpWinningRecord"></up-image>
+			</view>
+			<view style="margin-left: 10rpx;">中奖记录</view>
 		</view>
 	</view>
 </template>
@@ -29,8 +49,7 @@
 		data() {
 			return {
 				deg: 0,
-				singleAngle: '',
-				// 每片扇形的角度
+				singleAngle: '',// 每片扇形的角度
 				isStart: false,
 				areaNumber:6,
 				speed:16,
@@ -118,12 +137,6 @@
 					this.deg = deg;
 				}, 1000 / 60);
 			},
-			// 用户点击开始抽奖
-			// turntableStart() {
-			//   let index = Math.floor(Math.random() * 6 + 1) //前端随机数，这里应该后台返回中奖结果
-			//   this.award = index
-			//   this.$refs.turntable.begin(this.award);
-			// },
 			
 			// 抽奖完成后操作
 			turntableSuccess() {
@@ -134,6 +147,19 @@
 			    icon: 'none'
 			  });
 			},
+			/**
+			 *  开始多次抽奖
+			 */
+			drawsFun(count){
+				console.log("开始多次抽奖。。count",count);
+				this.start();
+			},
+			/**
+			 *  跳转到中奖记录
+			 */
+			jumpWinningRecord(){
+				
+			}
 		}
 	}
 </script>
@@ -141,6 +167,7 @@
 <style lang="scss">
 	.turntable_warp{
 		height: 100vh;
+		position: relative;
 	}
 	.turntable_header_warp{
 		height: 1200rpx;
@@ -172,14 +199,63 @@
 				background-position: center; /* 将图片居中显示 */
 				width: 100%;
 				height: 820rpx;
+				position: relative;
+			}
+			.draws_warp{
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				padding: 0 84rpx;
+				position: absolute;
+				top: 576rpx;
+				width: calc(100% - 168rpx);
+				.draws_item_warp{
+					width:40%;
+					text-align: center;
+					background: #FE2F32;
+					border-radius: 16rpx;
+					border: 2px solid #FFC8C8;
+					margin-bottom: 20rpx;
+					color: #ffffff;
+					padding: 20rpx 0rpx;
+				}
 			}
 		}
+		
+		.rule{
+			background: #FFFFFF;
+			border-radius: 50rpx 50rpx 0rpx 0rpx;
+			min-height:500rpx;
+			padding: 30rpx;
+			.rule_title{
+				display: flex;
+				justify-content: center;
+				margin-bottom: 30rpx;
+				.title{
+					background: #FF2524;
+					border-radius: 30rpx 0rpx 40rpx 0rpx;
+					color:#FFFFFF;
+					padding: 10rpx 0;
+					width: 280rpx;
+					text-align: center;
+					font-size: 40rpx;
+				}
+			}
+			.rule_content{
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #999999;
+				line-height: 38rpx;
+			}
+		}
+	
 	}
 	.turntable_wp {
 		width: 610rpx;
 		height: 610rpx;
 		position: relative;
 		margin: 0 auto;
+		top: -176rpx;
 	}
 	.turntable_wp image {
 		display: block;
@@ -194,4 +270,19 @@
 		left: 50%;
 		margin: -125rpx 0 0 -112rpx;
 	}
+	
+	.winning_record{
+		position: absolute;
+		right: 0rpx;
+		top: 200rpx;
+		background: rgba(92, 0, 1, 0.5);
+		border-radius: 30rpx 0rpx 0rpx 30rpx;
+		display: flex;
+		align-items: center;
+		color: #FFFFFF;
+		padding: 10rpx 20rpx;
+		font-weight: 500;
+		font-size: 25rpx;
+		color: #FBFAFA;
+	}
 </style>