• uniapp小程序九宫格抽奖

    定义好奖品下标，计时器开始抽奖，请求接口，出现中奖奖品之后，获取中奖商品对应的奖品下标，再次计时器判断当前移动的小标是否为中奖商品的下标，并且是否转到3圈（防止转1圈就停止），如果时就清除两次计时器。

    当前代码封装为九宫格的组件；

    vue代码： 

    2.  
    3. <script>
    4. 	import { luckDrawInfo } from '@/api/luckDraw.js';
    5. 	import colors from '@/mixins/color';
    6. 	export default {
    7. 		mixins: [colors],
    8. 		data() {
    9. 			return {//https://cdn.dev.scrm.juplus.cn/InQLzDLoAl2S9LyNJUXQ45gpA.png
    10. 				mask: true,
    11. 				wtf:true,
    12. 				luckDrawInfo: {},
    13. 				rule_show:false,
    14. 				result_show:false,
    15. 				prize_show:false,
    16. 				total:0,
    17. 				currentPrize:{},
    18. 				list:[],
    19. 				id: "",
    20. 				awardsList: [],
    21. 				indexArray: [0, 1, 2, 5, 8, 7, 6, 3],
    22. 				num: 0,
    23. 				count: 0,
    24. 				timer: null
    25. 			}
    26. 		},
    27. 		props: {
    28. 			userId: {
    29. 				type: [Number,String]
    30. 			},
    31. 			type:{
    32. 				type: [Number,String]
    33. 			}
    34. 		},
    35. 		//渲染完了
    36. 		mounted() {
    37. 			this.id = this.userId;
    38. 			this.init();
    39. 		},
    40. 		methods: {
    41. 			/**
    42. 			 * 设置奖项
    43. 			 */
    44. 			setAwardsList(data){
    45. 				this.awardsList = [];
    46. 				let arrayBefore = data.length > 0 ? data.slice(0,4) : [];
    47. 				let arrayAfter = data.length > 0 ? data.slice(4) : [];
    48. 				this.awardsList = [...arrayBefore];
    49. 				this.awardsList.push({
    50. 					title: "抽"
    51. 				});
    52. 				this.awardsList = [...this.awardsList,...arrayAfter];
    53. 				this.awardsList.forEach((item,index) => {
    54. 					item.active = index == 4 ? true : false;
    55. 				});
    56. 			},
    57. 			init(){
    58. 				if(this.userInfo){
    59. 					this.getInfo()
    60. 				}else{
    61. 					setTimeout(()=>{
    62. 						this.init()
    63. 					},500)
    64. 				}
    65. 			},
    66. 			getInfo(){
    67. 				luckDrawInfo.getDetail({id:this.id}).then(res => {
    68. 					this.luckDrawInfo=res.data
    69. 					this.total=res.data.my_can_num
    70. 					this.setAwardsList(res.data.lottery_prize);
    71. 					this.action('lottery',this.id,0,2,this.luckDrawInfo.title,'','lottery')
    72. 				})
    73. 			},
    74. 			choiseAddress(){
    75. 				this.currentPrize.is_address==1?uni.navigateTo({
    76. 						url:'/pages/address/address'
    77. 					}):''
    78. 				this.result_show=false
    79. 				// 重置抽奖
    80. 				this.awardsList.forEach((item,index) => {
    81. 					item.active = index == 4 ? true : false;
    82. 				});
    83. 				this.num = 0;
    84. 				this.count = 0;
    85. 				this.timer = null;
    86. 			},
    87. 			choiseAddress1(data){
    88. 				this.currentPrize=data
    89. 				uni.navigateTo({
    90. 					url:'/pages/address/address'
    91. 				})
    92. 				this.prize_show=false
    93. 			},
    94. 			setAddress(id){
    95. 				luckDrawInfo.setAddress({address_id:id,history_id:this.currentPrize.history_id||this.currentPrize.id}).then(res => {
    96. 					uni.showToast({
    97. 						title:"地址设置成功",
    98. 						icon:'none'
    99. 					})
    100. 				})
    101. 			},
    102. 			getResult(){
    103. 				if(!this.wtf){
    104. 					return false
    105. 				}
    106. 				luckDrawInfo.getResult({lottery_id:this.id}).then(res => {
    107. 					this.list=res.data.data
    108. 					this.prize_show=true
    109. 				})
    110. 			},
    111. 			// 点击开始,请求接口抽奖
    112. 			startPlay(index) {
    113. 				if (index != 4) return false;
    114. 				
    115. 				if(this.luckDrawInfo.is_register==1&&!this.userInfo.type){
    116. 					uni.navigateTo({
    117. 						url:'/pages/login/login'
    118. 					})
    119. 					return false
    120. 				}
    121. 				if(this.luckDrawInfo.is_form==1&&this.luckDrawInfo.user_form_count==0){
    122. 					uni.navigateTo({
    123. 						url:'/pages/form/form?id='+this.luckDrawInfo.form_id+'&type_id=' + this.id + '&type=lottery'
    124. 					})
    125. 					return false
    126. 				}
    127. 				if(!this.wtf){
    128. 					return false
    129. 				}
    130. 				
    131. 				// 活动未开始或活动已结束
    132. 				let startTimeMs = new Date(this.luckDrawInfo.start_time).getTime();
    133. 				let endTimeMs = new Date(this.luckDrawInfo.end_time).getTime();
    134. 				let nowTimeMs = new Date().getTime();
    135. 				if (nowTimeMs < startTimeMs) {
    136. 					uni.showToast({
    137. 						icon: "none",
    138. 						title: "活动未开始"
    139. 					})
    140. 					return false;
    141. 				}
    142. 				if (nowTimeMs > endTimeMs) {
    143. 					uni.showToast({
    144. 						icon: "none",
    145. 						title: "活动已结束"
    146. 					})
    147. 					return false;
    148. 				}
    149. 				
    150. 				this.mask = false;
    151. 				this.wtf = false;
    152. 				
    153. 				// 抽奖开始
    154. 				clearInterval(this.timer)
    155. 				this.timer = setInterval(() => {
    156. 					this.awardsList.forEach((item,index) => {
    157. 						item.active = false;
    158. 					});
    159. 					this.awardsList[this.indexArray[this.num]].active = true;
    160. 					this.$set(this.awardsList, [this.indexArray[this.num]], { ...this.awardsList[this.indexArray[this.num]], active: true });
    161. 					this.num++;
    162. 					if (this.num >= this.indexArray.length) {
    163. 						this.num = 0;
    164. 						this.count++;
    165. 					}
    166. 				},100);
    167. 				
    168. 				luckDrawInfo.run({id:this.id}).then(res => {
    169. 					this.currentPrize = res.data;
    170. 					this.total = res.data.row_lottery_new.my_can_num;
    171. 					// 抽奖停止
    172. 					let prizeIndex = this.awardsList.findIndex(item => item.id == this.currentPrize.id);
    173. 					let prizeNumIndex = prizeIndex != -1 ? this.indexArray.findIndex(item => item == prizeIndex) : null;
    174. 					let delayTimer = setInterval(()=>{
    175. 						// 奖品选中
    176. 						if (this.count >= 3 && this.num == prizeNumIndex) {
    177. 							clearInterval(this.timer);
    178. 							clearInterval(delayTimer);
    179. 							this.awardsList.forEach((item,index) => {
    180. 								item.active = index == prizeIndex ? true : false;
    181. 								this.$set(this.awardsList, index, {...this.awardsList[index], active: item.active});
    182. 							});
    183. 							setTimeout(() => {
    184. 								this.result_show = true;
    185. 								this.wtf = true;
    186. 							},600);
    187. 						}
    188. 					},100)
    189. 				}).catch(err => {
    190. 					this.wtf = true;
    191. 				});
    192.  
    193. 			}
    194. 		}
    195. 	}
    196. script>
    197.  
    198. <style scoped lang="scss">
    199. 	@import 'index.scss';
    200. 	/**/
    201. style>

    scss代码：

    1.  
    2. .page{
    3. 	width: 750rpx;
    4. 	min-height: 100vh;
    5. 	height: 1448rpx;
    6. 	position: relative;
    7. }
    8.  
    9. .bg{
    10. 	width: 750rpx;
    11. 	min-height: 100vh;
    12. 	height: 1448rpx;
    13. }
    14.  
    15. .content{
    16. 	width: 750rpx;
    17. 	min-height: 100vh;
    18. 	height: 1448rpx;
    19. 	position: absolute;
    20. 	top: 0;
    21. 	left: 0;
    22. }
    23.  
    24.  
    25. .logo{
    26. 	height: 60rpx;
    27. 	display: flex;
    28. 	justify-content: center;
    29. 	margin-top: 90rpx;
    30. 	
    31. 	image{
    32. 		height: 60rpx;
    33. 	}
    34. }
    35.  
    36. .box{
    37. 	width: 680rpx;
    38. 	margin: 0 auto;
    39. 	margin-top: 330rpx;
    40. 	
    41. 	.awards{
    42. 		width: 525rpx;
    43. 		height: 525rpx;
    44. 		margin: 0 auto;
    45. 		display: flex;
    46. 		flex-wrap: wrap;
    47. 		justify-content: space-between;
    48. 		align-content:space-between;
    49. 		
    50. 		.awardsItem{
    51. 			width: 161rpx;
    52. 			height: 161rpx;
    53. 			background: linear-gradient(132deg, #FFCEA4 0%, #FFE6CB 100%);
    54. 			box-shadow: 0rpx 6rpx 0rpx 0rpx #E98F5D;
    55. 			border-radius: 15rpx;
    56. 			display: flex;
    57. 			flex-direction: column;
    58. 			align-items: center;
    59. 			justify-content: center;
    60. 			cursor: pointer;
    61. 			
    62. 			image{
    63. 				width: 132rpx;
    64. 				height: 132rpx;
    65. 				border-radius: 12rpx;
    66. 			}
    67. 				
    68. 			.play{
    69. 				display: flex;
    70. 				flex-direction: column;
    71. 				align-items: center;
    72. 				justify-content: center;
    73. 				.go{
    74. 					font-size: 68rpx;
    75. 					font-family: PingFangSC-Semibold, PingFang SC;
    76. 					font-weight: 600;
    77. 					color: #A10B14;
    78. 				}
    79. 				
    80. 				.count{
    81. 					font-size: 24rpx;
    82. 					font-family: PingFangSC-Regular, PingFang SC;
    83. 					font-weight: 400;
    84. 					color: #A10B14;
    85. 				}
    86. 			}
    87. 			
    88. 		}
    89. 		.awardsActive{
    90. 			background: linear-gradient(132deg, #FFECBB 0%, #FFB100 100%);
    91. 			box-shadow: 0rpx 6rpx 0rpx 0rpx #E38800, inset 0rpx 2rpx 6rpx 0rpx rgba(255,255,255,0.65), inset 0rpx -2rpx 6rpx 0rpx rgba(255,255,255,0.3);
    92. 		}
    93. 	}
    94. 	
    95. 	.notification{
    96. 		height: 40rpx;
    97. 		margin-top: 226rpx;
    98. 		display: flex;
    99. 		justify-content: center;
    100. 		align-items: center;
    101. 		
    102. 		image{
    103. 			height: 32rpx;
    104. 			margin-right: 16rpx;
    105. 		}
    106. 		text{
    107. 			font-size: 28rpx;
    108. 			font-family: PingFangSC-Regular, PingFang SC;
    109. 			font-weight: 400;
    110. 			color: #FF8D3B;
    111. 		}
    112. 	}
    113. 	
    114. 	.btns{
    115. 		display: flex;
    116. 		align-items: center;
    117. 		justify-content: space-between;
    118. 		margin-top: 38rpx;
    119. 	}
    120. 	
    121. 	.btn{
    122. 		width: 332rpx;
    123. 		height: 110rpx;
    124. 		image{
    125. 			width: 100%;
    126. 			height: 100%;
    127. 		}
    128. 	}
    129. 	
    130. }
    131.  
    132. .win{
    133. 	width: 750rpx;
    134. 	height: 100vh;
    135. 	background: rgba(0, 0, 0, 0.8);
    136. 	position: fixed;
    137. 	top: 0;
    138. 	left: 0;
    139. 	z-index: 2;
    140. 	display: flex;
    141. 	flex-direction: column;
    142. 	align-items: center;
    143. 	justify-content: center;
    144. }
    145.  
    146. .win_box{
    147. 	width: 662rpx;
    148. 	height: 60%;
    149. 	padding: 40rpx;
    150. 	box-sizing: border-box;
    151. 	border-radius: 24rpx;
    152. }
    153.  
    154. .win_box_bg{
    155. 	background: #FFCE2B;
    156. }
    157.  
    158. .bg3{
    159. 	background: #C3E5FE;
    160. }
    161.  
    162. .iconcolseIcon{
    163. 	font-size: 58rpx;
    164. 	margin-top: 98rpx;
    165. }
    166.  
    167. .win_box1{
    168. 	width: 630rpx;
    169. 	height: 922rpx;
    170. 	position: relative;
    171. }
    172.  
    173. .win_bg{
    174. 	width: 630rpx;
    175. 	height: 922rpx;
    176. }
    177.  
    178. .win_content{
    179. 	width: 630rpx;
    180. 	height: 922rpx;
    181. 	position: absolute;
    182. 	left: 0;
    183. 	top: 0;
    184. 	display: flex;
    185. 	flex-direction: column;
    186. 	align-items: center;
    187. }
    188.  
    189. .win_tips{
    190. 	font-size: 48rpx;
    191. 	font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    192. 	font-weight: bold;
    193. 	margin-top: 290rpx;
    194. }
    195.  
    196. .win_title{
    197. 	font-size: 48rpx;
    198. 	font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    199. 	font-weight: bold;
    200. 	color: #FE6631;
    201. 	margin: 170rpx 0;
    202. }
    203.  
    204. .win_btn{
    205. 	width: 280rpx;
    206. 	height: 80rpx;
    207. 	line-height: 80rpx;
    208. 	text-align: center;
    209. 	background: #FFE047;
    210. 	border-radius: 46rpx;
    211. 	font-size: 32rpx;
    212. 	font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    213. 	font-weight: bold;
    214. 	color: #13112C;
    215. }
    216.  
    217. .win_tit{
    218. 	font-size: 48rpx;
    219. 	font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    220. 	font-weight: bold;
    221. 	margin-bottom: 32rpx;
    222. }
    223.  
    224. .win_box2{
    225. 	width: 662rpx;
    226. 	height: 900rpx;
    227. 	background: #FFFFFF;
    228. 	border-radius: 24rpx;
    229. 	display: flex;
    230. 	flex-direction: column;
    231. }
    232.  
    233. .items{
    234. 	width: 662rpx;
    235. 	height: 108rpx;
    236. 	background: #C3E5FE;
    237. 	border-radius: 24rpx 24rpx 0rpx 0rpx;
    238. 	display: flex;
    239. 	align-items: center;
    240. 	flex-shrink:0
    241. }
    242.  
    243. .left,.right{
    244. 	width: 50%;
    245. 	text-align: center;
    246. 	font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    247. 	font-weight: bold;
    248. }
    249.  
    250. .i_title{
    251. 	font-size: 36rpx;
    252. }
    253.  
    254. .list{
    255. 	height: 792rpx;
    256. 	padding-bottom: 20rpx;
    257. 	overflow: hidden;
    258. }
    259.  
    260. .item{
    261. 	width: 662rpx;
    262. 	height: 88rpx;
    263. 	display: flex;
    264. 	align-items: center;
    265. 	justify-content: space-around;
    266. }
    267.  
    268. .item:nth-child(2n){
    269. 	background-color: #F4F4F4;
    270. }
    271.  
    272. .r_btn{
    273. 	width: 160rpx;
    274. 	height: 60rpx;
    275. 	line-height: 60rpx;
    276. 	text-align: center;
    277. 	background: #FFC659;
    278. 	border-radius: 46rpx;
    279. 	font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    280. 	font-weight: bold;
    281. 	font-size: 32rpx;
    282. 	margin:0 auto;
    283. }

    效果:

  • 相关阅读:
    mysql++库connected与ping方法的区别
    FreeRTOS入门教程（任务优先级，Tick）
    融云全球社交泛娱乐洞察，互联网社交换挡期的「社区产品」机遇
    第二篇：Sentinel之SPI机制使用与源码分析
    测试移动电源IC IP5306、IP5407
    java计算机毕业设计ssm基金分析系统的设计与实现
    netty学习 java-io
    Servlet请求转发与重定向
    maven多仓库私库模板配置
    并查集（Union-Find）
  • 原文地址：https://blog.csdn.net/qq_43235503/article/details/134211561