• uni-app 九宫格抽奖活动

    一、效果图

    二、代码 

    1. <template>
    2. 	<view class="container">
    3. 		<view class="container_circle" v-for="(v,i) in  circleList" :key="i"
    4. 		:style="{'top':v.topCircle+'rpx','left':v.leftCircle+'rpx','background-color':(i%2 ==0)?oneCircleColor:twoCircleColor}">view>
    5. 		<view class="container_content">
    6. 			<view class="content_out" v-for="(v,i) in prizeList" :key="i"
    7. 			:style="{'top':v.topAward+'rpx','left':v.leftAward+'rpx',
    8. 			'background':  (i==indexSelect)?prizeCheckColor:prizeDefaultColor,
    9. 			'background-size':' 400%',
    10. 			'animation': 'animatebox 4s linear infinite'
    11. 			}">
    12. 			<image class="award_image" :src="v.imgList">image>
    13. 			view>
    14. 			<view class="content_btn" @tap="handleStart" :style="{'background-color':isRunning?'#55ffff':'#f7f7f7'}">开始view>
    15. 		view>
    16. 		<view class="container_num">剩余抽奖次数{{luckDrawNum}}view>
    17. 	view>
    18. template>
    19.  
    20. <script>
    21. 	export default {
    22. 		data() {
    23. 			return {
    24. 				circleList:[], // 圆圈数组
    25. 				prizeList:[], // 奖品数组
    26. 				oneCircleColor:'#29f5ff', // 圆圈颜色1
    27. 				twoCircleColor:'#aaaaff', // 圆圈颜色2
    28. 				prizeDefaultColor:'#FFF', // 奖品的默认颜色
    29. 				prizeCheckColor:'linear-gradient(72.5deg, #aa0000, #ff0000, #ff00ff, #550000, #ffaaff, #aa0000, #ff0000)', // 奖品的选中颜色
    30. 				indexSelect: 0, //被选中的奖品index
    31. 				isRunning: false, //是否正在抽奖
    32. 				//奖品图片数组
    33. 				imgList:[
    34. 					'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261921_a1b840c267bd26bcf4dc654d52f259e5.png?w=800&h=800',
    35. 					'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bcd64f412dfb5e15695fa96d21ecb23.png?w=800&h=800',
    36. 					'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208111030_e3554c41e0484da99b16bb9e02142e68.png?w=800&h=800',
    37. 					'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1653393310.29013051.png',
    38. 					'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261921_a1b840c267bd26bcf4dc654d52f259e5.png?w=800&h=800',
    39. 					'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/9E253411E26FD16C7215D7E74321FA45.png',
    40. 					'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cc0be95d45d0063b0aa8bb541be22c77.png?w=800&h=800',
    41. 					'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0c4b5e30d14ca8b51dc6fa6917295ff5.png?w=800&h=800'
    42. 				],
    43. 				luckDrawNum:2  ,//剩余抽奖次数
    44. 				repeat:true
    45. 			};
    46. 		},
    47. 		onLoad() {
    48. 			//圆点设置
    49. 			let topCircle = 7.5;
    50. 			let leftCircle = 7.5;
    51. 			let circleList = [];
    52. 			for(let i = 0; i < 24; i++) {
    53. 				if(i == 0) {
    54. 					topCircle = 15;
    55. 					leftCircle = 15;
    56. 				}else if (i < 6) {
    57. 					topCircle = 7.5;
    58. 					leftCircle += 102.5;
    59. 				}else if (i == 6) {
    60. 					topCircle = 15;
    61. 					leftCircle = 620;
    62. 				}else if (i < 12) {
    63. 					topCircle += 94;
    64. 					leftCircle = 620;
    65. 				}else if (i == 12) {
    66. 					topCircle = 565;
    67. 					leftCircle = 620;
    68. 				}else if (i < 18) {
    69. 					topCircle = 570;
    70. 					leftCircle-= 102.5; 
    71. 				}else if (i == 18) {
    72. 					topCircle = 565;
    73. 					leftCircle = 15;
    74. 				}else if (i < 24) {
    75. 					topCircle -= 94;
    76. 					leftCircle = 7.5;
    77. 				}else {
    78. 					return;
    79. 				}
    80. 				circleList.push({ topCircle, leftCircle });
    81. 			}
    82. 			this.circleList = circleList;
    83. 			//圆点闪烁
    84. 			setInterval(()=> {
    85. 			if (this.oneCircleColor == '#29f5ff') {
    86. 					this.oneCircleColor = '#aaaaff';
    87. 					this.twoCircleColor = '#29f5ff';
    88. 				} else {
    89. 					this.oneCircleColor = '#29f5ff';
    90. 					this.twoCircleColor = '#aaaaff';
    91. 				}
    92. 			},500)
    93. 			let prizeList = [];
    94. 			//间距,怎么顺眼怎么设置吧.
    95. 			let topAward = 25;
    96. 			let leftAward = 25;
    97. 			for (let j = 0; j < 8; j++) {
    98. 				if (j == 0) {
    99. 					topAward = 25;
    100. 					leftAward = 25;
    101. 				} else if (j < 3) {
    102. 					topAward = topAward;
    103. 					//166.6666是宽.15是间距.下同
    104. 					leftAward = leftAward + 166.6666 + 15;
    105. 				} else if (j < 5) {
    106. 					leftAward = leftAward;
    107. 					//150是高,15是间距,下同
    108. 					topAward = topAward + 150 + 15;
    109. 				} else if (j < 7) {
    110. 					leftAward = leftAward - 166.6666 - 15;
    111. 					topAward = topAward;
    112. 				} else if (j < 8) {
    113. 					leftAward = leftAward;
    114. 					topAward = topAward - 150 - 15;
    115. 				}
    116. 				let imgList = this.imgList[j];
    117. 				prizeList.push({ topAward, leftAward,imgList});
    118. 			}
    119. 			this.prizeList = prizeList;
    120. 		},
    121. 		methods:{
    122. 			// 点击开始
    123. 			handleStart(){
    124. 				if (this.isRunning) return;
    125. 				if (this.luckDrawNum != 0) {
    126. 					this.luckDrawNum--
    127. 				} else{
    128. 					uni.showModal({
    129. 						title: '提示',
    130. 						content: '分享获取抽奖次数',
    131. 						showCancel: false, 
    132. 						success: (res)=> {
    133. 							if (res.confirm) {
    134. 							}
    135. 						}
    136. 					});
    137. 					this.indexSelect = 0
    138. 					return
    139. 				}
    140. 				this.isRunning = true;
    141. 				let indexSelect = 0;
    142. 				let i = 0;
    143. 				let timer = setInterval(()=> {
    144. 					indexSelect++;
    145. 					i += 30;
    146. 					let randomNum = 1000+Math.ceil(Math.random()*1000)//控制奖品
    147. 					if (i > randomNum) {
    148. 						//去除循环
    149. 						clearInterval(timer);
    150. 						//获奖提示
    151. 						uni.showModal({
    152. 							title: '恭喜您',
    153. 							content: '获得了第' + (this.indexSelect + 1) + '个奖品',
    154. 							showCancel: false, 
    155. 							success: (res)=> {
    156. 								if (res.confirm) {
    157. 									this.isRunning = false;
    158. 								}
    159. 							}
    160. 						});
    161. 					}
    162. 					indexSelect = indexSelect % 8;
    163. 					this.indexSelect = indexSelect;
    164. 				},200 + i)
    165. 			}
    166. 		}
    167. 	}
    168. script>
    169.  
    170. <style lang="scss">
    171. .container {
    172. 	position: relative;
    173. 	height: 600rpx;
    174. 	width: 650rpx;
    175. 	margin: 100rpx auto;
    176. 	border-radius: 40rpx;
    177. 	background: linear-gradient(72.5deg, #e9f78c, #ffffb9, #cc55e5, #ef9bcb, #e5b8d8, #ffb140, #f7ed54);
    178. 	background-size: 400%;
    179. 	animation: animatebox 4s linear infinite;
    180. 	@keyframes animatebox {
    181. 		0% {
    182. 			background-position: 0%;
    183. 		}
    184. 	
    185. 		50% {
    186. 			background-position: 100%;
    187. 		}
    188. 	
    189. 		100% {
    190. 			background-position: 0%;
    191. 		}
    192. 	}
    193. 	
    194. 	
    195. 	.container_circle {
    196. 		position: absolute;
    197. 		display: block;
    198. 		border-radius: 50%;
    199. 		height: 20rpx;
    200. 		width: 20rpx;
    201. 	}
    202. 	.container_content{
    203. 		position: absolute;
    204. 		left: 0;
    205. 		right: 0;
    206. 		top: 0;
    207. 		bottom: 0;
    208. 		width: 580rpx;
    209. 		height: 530rpx;
    210. 		background-color: #b375ff;
    211. 		
    212. 		
    213. 		border-radius: 40rpx;
    214. 		margin: auto;
    215. 		
    216. 		background: linear-gradient(72.5deg, #ef499c, #cc55e5, #ffb140, #f7ed54, #ffb140, #cc55e5, #ef499c);
    217. 		background-size: 400%;
    218. 		animation: animate1 4s linear infinite;
    219. 		@keyframes animate1 {
    220. 			0% {
    221. 				background-position: 0%;
    222. 			}
    223. 		
    224. 			50% {
    225. 				background-position: 100%;
    226. 			}
    227. 		
    228. 			100% {
    229. 				background-position: 0%;
    230. 			}
    231. 		}
    232. 		
    233. 		
    234. 		.content_out{
    235. 			position: absolute;
    236. 			height: 150rpx;
    237. 			width: 166.6666rpx;
    238. 			background-color: #f5f0fc;
    239. 			border-radius: 15rpx;
    240. 			box-shadow: 0 5px 0 #d87fde;
    241. 			.award_image{
    242. 				position: absolute;
    243. 				margin: auto;
    244. 				top: 0;
    245. 				left: 0;
    246. 				bottom: 0;
    247. 				right: 0;
    248. 				height: 140rpx;
    249. 				width: 130rpx;
    250. 			}
    251. 		}
    252. 		.content_btn{
    253. 			position: absolute;
    254. 			top: 50%;
    255. 			left: 50%;
    256. 			transform: translate(-50%,-50%);
    257. 			border-radius: 15rpx;
    258. 			height: 150rpx;
    259. 			width: 166.6666rpx;
    260. 			background-color: #ffe400;
    261. 			box-shadow: 0 5rpx 0 #e7930a;
    262. 			color: #b375ff;
    263. 			text-align: center;
    264. 			font-size: 55rpx;
    265. 			font-weight: bolder;
    266. 			line-height: 150rpx;
    267. 			background: linear-gradient(72.5deg, #f7a0ec, #ffb140, #e58da0, #ef7ecb, #ab9ae5, #ffec8a, #f6f7a6);
    268. 			background-size: 400%;
    269. 			animation: animate 4s linear infinite;
    270. 			@keyframes animate {
    271. 				0% {
    272. 					background-position: 0%;
    273. 				}
    274. 			
    275. 				50% {
    276. 					background-position: 100%;
    277. 				}
    278. 			
    279. 				100% {
    280. 					background-position: 0%;
    281. 				}
    282. 			}
    283. 			
    284. 		}
    285. 	}
    286. 	.container_num{
    287. 		position: absolute;
    288. 		top: -60rpx;
    289. 		left: 50%;
    290. 		transform: translateX(-50%);
    291. 		background-image: -webkit-linear-gradient(left, #083a96, #e63609 25%, #083a96 50%, #e63609 75%, #083a96);
    292. 		-webkit-text-fill-color: transparent;
    293. 		background-clip: text;
    294. 		background-size: 200% 100%;
    295. 		animation: masked-animation 4s infinite linear;
    296. 		@keyframes masked-animation {
    297. 			 0%{ background-position: 0 0;}
    298. 			 100% { background-position: -100% 0;}
    299. 		}
    300. 	}
    301. }
    302. style>

     

  • 相关阅读:
    android 11 供第三方应用使用系统so库
    SpringMVC基础：拦截器
    RxJava(二)-转换操作符
    SBT 综述
    统计信号处理基础 习题解答6-4
    MySQL之数据查询（WHERE）
    【Python小程序】浮点矩阵加减法
    [附源码]计算机毕业设计springboot学生综合数据分析系统
    C++之泛型编程
    Flutter小功能实现-咖啡店
  • 原文地址：https://blog.csdn.net/Tianxiaoxixi/article/details/127422927