1.修改首页样式

subPages/lottery/lottery.vue

@@ -3,7 +3,7 @@
 		<!-- head -->
 		<image src="../static/head.jpg" mode="widthFix" class="width100"></image>
 		<view class="almost-lottery__wheel">
-			<almost-lottery :lottery-size="lotteryConfig.lotterySize" :action-size="lotteryConfig.actionSize"
+			<AlmostLottery :lottery-size="lotteryConfig.lotterySize" :action-size="lotteryConfig.actionSize"
 				:ring-count="2" :duration="3" :prize-list="prizeList" :prize-index="prizeIndex"
 				@reset-index="prizeIndex = -1" @draw-start="handleDrawStart" @draw-end="handleDrawEnd"
 				@finish="handleDrawFinish" v-if="prizeList.length" />
@@ -16,7 +16,7 @@
 			</view> -->
 			<view class="_notice">
 				<swiper class="_swiper tc" indicator-dots="false" autoplay="true" :interval="interval" circular="true"
-				 display-multiple-items="2" :duration="duration">
+					display-multiple-items="2" :duration="duration">
 					<swiper-item>
 						<view class="swiper-item uni-bg-red"></view>
 					</swiper-item>
@@ -136,8 +136,8 @@
 				goldNum: 20,
 				// 每天免费抽奖次数
 				freeNumDay: 3,
-				interval:3000,
+				interval: 3000,
-				duration:12000,
+				duration: 12000,
 				list: ['1分钟前，无夏购买了会员', '2分钟前，无夏购买了会员', '3分钟前，无夏购买了会员']
 			}
 		},
@@ -162,23 +162,77 @@
 			},
 			// 重新生成
 			handleInitCanvas() {
-			
-
 				this.prizeList = []
 				this.getPrizeList()
 			},
 			// 获取奖品列表
-			async getPrizeList() {
+			getPrizeList() {
 				uni.showLoading({
 					title: '奖品准备中...'
 				})
 				// 等待接口返回的数据进一步处理
-				let res = await this.requestApiGetPrizeList()
+				// let res = await this.requestApiGetPrizeList()
-				if (res.ok) {
+				// if (res.ok) {
-					uni.hideLoading()
+					// uni.hideLoading()
-					let data = res.data
+					// let data = res.data
-					if (data.length) {
+					// if (data.length) {
-						this.prizeList = data
+						this.prizeList = [{
+									prizeId: 1,
+									prizeName: '0.1元现金',
+									prizeStock: 10,
+									prizeWeight: 200,
+									prizeImage: '/static/img/order3.png'
+								},
+								{
+									prizeId: 2,
+									prizeName: '10元现金',
+									prizeStock: 0,
+									prizeWeight: 50,
+									prizeImage: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/56f085e0-bcfe-11ea-b244-a9f5e5565f30.png'
+								},
+								{
+									prizeId: 3,
+									prizeName: '5元话费',
+									prizeStock: 1,
+									prizeWeight: 80,
+									prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
+								},
+								{
+									prizeId: 4,
+									prizeName: '50元现金',
+									prizeStock: 0,
+									prizeWeight: 10,
+									prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAB2klEQVRIia3Wv09TURjG8U+u2kQZcNENh2ok0cnJ0R+L0RB2g/EvwITEwRgnV0Zx0fAHYBh0khBD4sBAmAgDiwQNg4qwmSBDAYf7Fi+n97al9UlObnvO836f3tO355b2GsAYZrCBPRzGdSPmx8J3YtXwDDsB7TR2wl/rNmAYK13C07ES9W11E9s9BjTHdnBKVf8PAcWgehpwCssF0w/5FzqLgw7AA7zDQ/wqzC8H90jjSeFMYW0Yr8PzALfjOh7z1wve2YTzpLlQw2ay+KZ1N7vS24SziVqGexhKzB07pEJXk/dDwTetdZ9HewwZLWFNw2oyudZjQFNrCW8109pqS32GpPX1TOu586fPkLR+IEMjmbzYZ0ha34Atx/fwW58hXxPeFixo7Yg7PQbcKmEtZFgsMb/C4AkDBuUnQKpFuFZI3cZuvP6C+8g6wDP572O95C4Og49/W/YJl/G5YPqO9yV3dh4f8LMCfhjcI93Afix8xAX5SVx2YBY10yagEdxjmiwY7uISXuIFrlSEPG0TMllWcAbzYViXd0rzeXC6ImSiImA+eKU6h7mCeV/eCBMnCJkLzpHSztnFCJ7L//ZkOFv1iRLtRd1IcLpSHVP4jccVnkexPqXkmd7UX15b7tiz29ReAAAAAElFTkSuQmCC'
+								},
+								{
+									prizeId: 5,
+									prizeName: '1卷抽纸',
+									prizeStock: 3,
+									prizeWeight: 3000,
+									prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
+								},
+								{
+									prizeId: 6,
+									prizeName: '0.2元现金',
+									prizeStock: 8,
+									prizeWeight: 120,
+									prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
+								},
+								{
+									prizeId: 7,
+									prizeName: '谢谢参与',
+									prizeStock: 100,
+									prizeWeight: 10000,
+									prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
+								},
+								{
+									prizeId: 8,
+									prizeName: '100金币',
+									prizeStock: 100,
+									prizeWeight: 3000,
+									prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
+								}
+							]
 
 						// 如果开启了前端控制概率
 						// 得出权重的最大值并生成权重数组
@@ -189,15 +243,15 @@
 							prizeWeightArrSort.sort((a, b) => b - a)
 							this.prizeWeightMax = prizeWeightArrSort[0]
 						}
-					}
+					// }
-				} else {
+				// } else {
-					uni.hideLoading()
+				// 	uni.hideLoading()
-					uni.showToast({
+				// 	uni.showToast({
-						title: '获取奖品失败',
+				// 		title: '获取奖品失败',
-						mask: true,
+				// 		mask: true,
-						icon: 'none'
+				// 		icon: 'none'
-					})
+				// 	})
-				}
+				// }
 			},
 			// 模拟请求 获取奖品列表 接口，
 			// 注意这里返回的是一个 Promise
@@ -276,113 +330,12 @@
 			// 本次抽奖开始
 			handleDrawStart() {
 				console.log('触发抽奖按钮')
-				if (this.prizeing) return
+				this.tryLotteryDraw()
-				this.prizeing = true
-
-				// 还有免费数次或者剩余金币足够抽一次
-				if (this.freeNum > 0 || this.goldCoin >= this.goldNum) {
-
-					// 更新免费次数或金币余额
-					if (this.freeNum > 0) {
-						this.freeNum--
-					} else if (this.goldCoin >= this.goldNum) {
-						this.goldCoin -= this.goldNum
-					}
-
-					this.tryLotteryDraw()
-				} else {
-					this.prizeing = false
-					uni.showModal({
-						title: '金币不足',
-						content: '是否前往赚取金币？',
-						success: (res) => {
-							// 这里需要根据业务需求处理，一般情况下会引导用户前往赚取金币的页面
-							console.log('金币不足', res)
-						}
-					})
-				}
 			},
 			// 尝试发起抽奖
 			tryLotteryDraw() {
 				console.log('旋转开始，获取中奖下标......')
-				// 判断是否由前端控制概率
+				this.remoteGetPrizeIndex()
-				if (this.onFrontend) {
-					this.localGetPrizeIndex()
-				} else {
-					this.remoteGetPrizeIndex()
-				}
-			},
-			// 本地获取中奖下标
-			localGetPrizeIndex() {
-				console.warn('###当前处于前端控制中奖概率，安全起见，强烈建议由后端控制###')
-				// 前端控制概率的情况下，需要拿到最接近随机权重且大于随机权重的值
-				// 后端控制概率的情况下，通常会直接返回 prizeId
-				if (!this.prizeWeightMax) {
-					console.warn('###当前已开启前端控制中奖概率，但是奖品数据列表中的 prizeWeight 参数似乎配置不正确###')
-					return
-				}
-				console.log('当前权重最大值为 =>', this.prizeWeightMax)
-
-				// 注意这里使用了 Math.ceil，如果某个权重的值为 0，则始终无法中奖
-				let randomWeight = Math.ceil(Math.random() * this.prizeWeightMax)
-				console.log('本次权重随机数 =>', randomWeight)
-
-				// 生成大于等于随机权重的数组
-				let tempMaxArrs = []
-				this.prizeList.forEach((item) => {
-					if (item.prizeWeight >= randomWeight) {
-						tempMaxArrs.push(item.prizeWeight)
-					}
-				})
-				console.log('tempMaxArrs', tempMaxArrs)
-
-				// 如果大于随机权重的数组有值，先对这个数组排序然后取值
-				// 反之新建一个临时的包含所有权重的已排序数组，然后取值
-				let tempMaxArrsLen = tempMaxArrs.length
-				if (tempMaxArrsLen) {
-					tempMaxArrs.sort((a, b) => a - b)
-					// 取值时，如果存在多个值，分两种情况
-					if (tempMaxArrsLen > 1) {
-						// 检查是否存在重复的值
-						let sameCount = 0
-						for (let i = 0; i < tempMaxArrs.length; i++) {
-							if (tempMaxArrs[i] === tempMaxArrs[0]) {
-								sameCount++
-							}
-						}
-
-						// 值不相等的情况下取最接近的值，也就是第1个值
-						if (sameCount === 1) {
-							this.prizeIndex = this.prizeWeightArr.indexOf(tempMaxArrs[0])
-						} else {
-							// 存在值相等时，随机取值，当然这里你可以自己决定是否随机取值
-							let sameWeight = tempMaxArrs[0]
-							let sameWeightArr = []
-							let sameWeightItem = {}
-							this.prizeWeightArr.forEach((item, index) => {
-								if (item === sameWeight) {
-									sameWeightArr.push({
-										prizeWeight: item,
-										index
-									})
-								}
-							})
-							console.log('sameWeightArr', sameWeightArr)
-							sameWeightItem = sameWeightArr[Math.floor(Math.random() * sameWeightArr.length)]
-							console.log('sameWeightItem', sameWeightItem)
-							this.prizeIndex = sameWeightItem.index
-						}
-					} else {
-						this.prizeIndex = this.prizeWeightArr.indexOf(tempMaxArrs[0])
-					}
-				}
-
-				console.log('本次抽中奖品 =>', this.prizeList[this.prizeIndex].prizeName)
-
-				// 如果奖品设有库存
-				if (this.onStock) {
-					console.log('本次奖品库存 =>', this.prizeList[this.prizeIndex].prizeStock)
-				}
 			},
 			// 远程请求接口获取中奖下标
 			// 大哥，这里只是模拟，别告诉我你不会对接自己的接口
@@ -392,12 +345,9 @@
 				let stoTimer = setTimeout(() => {
 					clearTimeout(stoTimer)
 					stoTimer = null
-
 					let list = [...this.prizeList]
-
 					// 这里随机产生的 prizeId 是模拟后端返回的 prizeId
-					let prizeId = Math.floor(Math.random() * list.length + 1)
+					let prizeId = Math.floor(Math.random() * list.length + 1);
-
 					// 拿到后端返回的 prizeId 后，开始循环比对得出那个中奖的数据
 					for (let i = 0; i < list.length; i++) {
 						let item = list[i]
@@ -463,7 +413,6 @@
 </script>
 
 <style lang="scss" scoped>
-	
 	._notice {
 		position: fixed;
 		left: 0;
@@ -486,6 +435,7 @@
 	._swiper {
 		line-height: 44upx;
 	}
+
 	.almost-lottery {
 		flex: 1;
 		background-color: #FF893F;