v2.2.3 2022-10-26

1.实现根据人数自动开奖的功能

pages.json

@@ -92,8 +92,8 @@
 		}, {
 			"path": "pages/subpages/choujiangzhushou/jiaruchoujiang",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "参与抽奖",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": true
 			}
 
 		}

pages/mine/mine.vue

@@ -245,6 +245,11 @@
 						1.添加抽奖助手界面<br />
 					<b>v2.2.1 2022-10-24</b><br />
 						1.完善抽奖助手子页面<br />
+					<b>v2.2.2 2022-10-25</b><br />
+						1.实现抽奖页面创建加入界面<br />
+						2.实现抽奖页面创建后台逻辑<br />
+					<b>v2.2.3 2022-10-26</b><br />
+						1.实现根据人数自动开奖的功能<br />
 				`;
 				uni.navigateTo({
 					url: `/pages/utils/showText/showText?nodes=${log}`

pages/subpages/choujiangzhushou/choujiangzhushou.vue

@@ -85,13 +85,13 @@
 				picUrl: app.globalData.website + '/image/other/image_tool_choujiangzhushou.jpg',
 				sharePicUrl: app.globalData.website + '/image/share/image_tool_choujiangzhushou.jpg',
 				awardName: '',
-				awardNum: 1,
+				awardNum: 0,
 				awardDetail: '',
 				openType: ['按时间自动开奖', '按人数自动开奖', '发起者手动开奖'],
 				typeIndex: 0,
 				date: currentDate,
 				time: currenTime,
-				openNeedUsers: 1,
+				openNeedUsers: 0,
 				awardId: '',
 				isCreate: false,
 				giftList: []
@@ -148,10 +148,32 @@
 			// 发起抽奖
 			start() {
 				const that = this;
+				if(that.awardName=='') {
+					that.toast('奖品名称','error');
+					return;
+				}
+				if(that.awardNum == 0) {
+					that.toast('奖品数量','error');
+					return;
+				}
+				if(that.awardDetail == '') {
+					that.toast('奖品说明','error');
+					return;
+				}
+				if((that.typeIndex == 1)&&(that.openNeedUsers == 0)) {
+					that.toast('抽奖人数','error');
+					return;
+				}
+				if((that.typeIndex == 1)&&(that.awardNum >= that.openNeedUsers)) {
+					that.toast('奖品太多','error');
+					return; 
+				}
 				const openDateTime = this.date + ' ' + this.time;
 				const startDateTime = this.getDate() + ' ' + this.getTime();
 				let rst = {
-					openId: app.globalData.openId,
+					ownerId: app.globalData.openId,
+					ownerImage: app.globalData.userInfo.avatarUrl,
+					ownerNickName: app.globalData.userInfo.nickName,
 					awardImage: this.picUrl,
 					awardName: this.awardName,
 					awardNum: this.awardNum,
@@ -170,6 +192,7 @@
 					method: 'POST',
 					data: rst,
 					success(res) {
+							console.log(res);
 						if (res.data.err == 1) {
 							uni.hideLoading();
 							uni.showToast({
@@ -218,6 +241,12 @@
 				hour = hour > 9 ? hour : '0' + hour;
 				minute = minute > 9 ? minute : '0' + minute;
 				return `${hour}:${minute}`;
+			},
+			toast(title, icon) {
+				uni.showToast({
+					title: title,
+					icon: icon
+				})
 			}
 		},
 		onShareAppMessage() {
@@ -310,7 +339,7 @@
 	.count {
 		width: 68%;
 		text-align: right;
-		padding-right: 0;
+		padding-right: 10px;
 		flex: 10;
 		float: inline-start;
 	}
@@ -329,6 +358,7 @@
 	/* 开奖方式选择器 */
 	.type-picker {
 		flex: 3;
+		/* background-color: red; */
 	}
 
 	/* 显示开奖方式 */
@@ -341,9 +371,28 @@
 	/* 时间选择器 */
 	.picker-date,
 	.picker-time {
+		display: block;
+		width: auto;
+		justify-content: space-between;
+		float:right;
+		/* background-color: red; */
 		margin-right: 10px;
 	}
 	
+	.picker-date {
+		flex: 7;
+		text-align: right;
+	}
+	.picker-time {
+		flex: 1;
+	}
+	
+	/* 开奖时间 */
+	.item-etip {
+		padding: 10px;
+		flex: 3;
+	}
+
 	/* 发起抽奖 */
 	/* 分享抽奖 */
 	.gift-start,

pages/subpages/choujiangzhushou/jiaruchoujiang.vue

@@ -3,23 +3,19 @@
 		<!-- 奖品展示 -->
 		<view class="gift-show">
 			<image class="gift-img" :src="picUrl" mode="aspectFill"></image>
-			<text class="gift-name">奖品:{{awardName}}x{{awardNum}}</text>
+			<text class="gift-name">奖品: {{awardName}} x {{awardNum}}份</text>
-			<text class="gift-open">{{openType==0?openDateTime + ' ':(openType==1?'满' + openNeedUsers + '人':'')}}自动开奖</text>
+			<text
+				class="gift-open">{{openType==0?openDateTime + ' ':(openType==1?'满' + openNeedUsers + '人':'')}}自动开奖</text>
+			<text v-if="awardDetail!=''" class="gift-detail-tip">奖品详情</text>
+			<text v-if="awardDetail!=''" class='gift-detail'>{{awardDetail}}</text>
 		</view>
 		<!-- 操作视图 -->
 		<view class="action-view">
-			<button class="gift-add">参与抽奖</button>
+			<button :class="isOpened?'gift-add-disable':'gift-add'" @tap="isJoin?load():join()" :disabled="!isClick">{{isJoin?(isOpened?(isLockyClover?'您已中奖':'您未中奖'):'等待开奖'):'参与抽奖'}}</button>
-			<text class="gift-person">已有100人参与</text>
+			<text class="gift-person">已有 {{joinCount}} 人参与</text>
 			<view class="handimgs">
-				<image class="handimg" :src="picUrl" mode="aspectFill"></image>
+				<image class="handimg" mode="aspectFill" v-for="(item,index) in joinList" :key="index"
-				<image class="handimg" :src="picUrl" mode="aspectFill"></image>
+					:src="item.userImg"></image>
-				<image class="handimg" :src="picUrl" mode="aspectFill"></image>
-				<image class="handimg" :src="picUrl" mode="aspectFill"></image>
-				<image class="handimg" :src="picUrl" mode="aspectFill"></image>
-				<image class="handimg" :src="picUrl" mode="aspectFill"></image>
-				<image class="handimg" :src="picUrl" mode="aspectFill"></image>
-				<image class="handimg" :src="picUrl" mode="aspectFill"></image>
-				<image class="handimg" :src="picUrl" mode="aspectFill"></image>
 			</view>
 		</view>
 	</view>
@@ -30,46 +26,227 @@
 	export default {
 		data() {
 			return {
-				picUrl: 'https://www.lailab.cn/miniprogram/image/other/image_tool_bayinhe.jpg',
+				awardId: 0,
-				awardName: 'test',
+				picUrl: 'https://www.lailab.cn/miniprogram/image/share/image_tool_choujiangzhushou.jpg',
-				awardNum: 100,
+				awardName: '',
+				awardNum: 0,
+				awardDetail: '',
 				openType: 0,
 				openDateTime: '2000-01-01 00:00',
+				userId: 0,
+				joinList: [],
+				joinCount: 0,
+				isOpened: false,
+				isJoin: false,
+				isClick: false,
+				isLockyClover: false
 			}
 		},
 		onLoad(option) {
-			// console.log(option);
-			// uni.showModal({
-			// 	title: "欢迎加入",
-			// 	content: "id为"+option.awardId,
-			// })
 			const that = this;
+			that.awardId = option.awardId;
+			that.refresh();
+		},
+		methods: {
+			join() {
+				const that = this;
+				uni.showLoading({
+					title: '正在加入',
+					icon: 'loading'
+				});
+				uni.request({
+					url: app.globalData
+						.website +
+						"/tools/choujiangzhushou/userJoin.php",
+					method: 'POST',
+					data: {
+						awardId: that.awardId,
+						userId: that.userId
+					},
+					success(res1) {
+						console.log('5.用户加入', res1);
+						uni.hideLoading();
+						if (res1.data.err == 0) {
+							uni.showToast({
+								title: '加入失败',
+								icon: 'error',
+							});
+						} else if (res1.data.err == 1) {
+							uni.showToast({
+								title: '加入成功',
+								icon: 'success'
+							})
+							that.isJoin = true;
+						} else if (res1.data.err == 2) {
+							that.isClick = false;
+							uni.showLoading({
+								title: '正在开奖中',
+								icon: 'loading'
+							});
+							// 是否中奖
+							that.checkLuckyClover();
+						} else if (res1.data.err == 3) {
+							that.isClick = false;
+							uni.showToast({
+								title: "开奖失败",
+								icon: 'error'
+							})
+						} else {
+							uni.showModal({
+								title: '提示',
+								content: res1.data.msg
+							})
+						}
+						that.refresh();
+					}
+				});
+			},
+			load() {
+				var msg = '条件';
+				if (this.openType == 0) {
+					msg += this.openDateTime + ' ';
+				} else if (this.openType == 1) {
+					msg += '满' + this.openNeedUsers + '人';
+				}
+				msg += '开奖未满足,请等待开奖!';
+				uni.showModal({
+					title: '等待开奖',
+					content: msg,
+				})
+			},
+			refresh() {
+				const that = this;
+				that.joinList = [];
+				that.isJoin = false;
+				that.isClick = false;
+				// 请求奖品信息
 				uni.request({
 					url: app.globalData.website + '/tools/choujiangzhushou/getAwardInfo.php',
 					method: 'POST',
 					data: {
-					awardId: option.awardId
+						awardId: that.awardId
 					},
 					success(res) {
-					if(res.data.result.length > 0){
+						console.log("1.通过奖品ID获取奖品信息", res);
+						if (res.data.result.length > 0) {
 							const rst = res.data.result[0];
 							that.picUrl = rst.awardImage;
 							that.awardName = rst.awardName;
 							that.awardNum = rst.awardNum;
+							that.awardDetail = rst.awardDetail;
 							that.openDateTime = rst.openDateTime;
 							that.openType = rst.openType;
 							that.openNeedUsers = rst.openNeedUsers;
-					}else {
+							that.isOpened = rst.isOpened==1;
+						} else {
 							uni.showToast({
-							title:'加入失败',
+								title: '加载失败',
 								icon: 'error'
 							})
 						}
+						if (that.isOpened) {
+							that.isClick = false;
+						}
+					}
+				});
+				uni.request({
+					url: app.globalData.website + "/api/getUserInfo.php",
+					method: 'POST',
+					data: {
+						openId: app.globalData.openId
+					},
+					success(res) {
+						console.log('2.通过openId获取用户Id', res);
+						if (res.data.result) {
+							that.userId = res.data.result[0].id;
+						} else {
+							uni.hideLoading();
+							console.log(res);
+							uni.showToast({
+								title: '加载成功',
+								icon: 'success'
+							})
+						}
+						// 若开奖,查看是否中奖品，放这里因为这里产生userId
+						if(that.isOpened) {
+							// 检测是否中奖
+							that.checkLuckyClover();
+						}
+					}
+				});
+				// 通过奖品ID查询各种信息
+				uni.request({
+					url: app.globalData.website + '/tools/choujiangzhushou/userJoinInfo.php',
+					method: 'POST',
+					data: {
+						awardId: that.awardId
+					},
+					success(res) {
+						console.log('3.通过奖品Id获取参与用户ID', res);
+						const users = res.data.result;
+						that.joinCount = Number(users.length);
+						for (var i = 0; i < users.length; i++) {
+							const user = users[i];
+							uni.request({
+								url: app.globalData.website + '/api/getUserInfoById.php',
+								method: 'POST',
+								data: {
+									id: user.userId
+								},
+								success(res1) {
+									console.log('4.通过userId获取用户信息(图像)', res1);
+									for (var i = 0; i < res1.data.result.length; i++) {
+										that.joinList.push({
+											userImg: res1.data.result[0].avatarUrl
+										});
+									}
+								}
+							});
+							if (user.userId == that.userId) {
+								that.isJoin = true;
+							}
+						}
+						setTimeout(function() {
+							if(!that.isOpened){
+								that.isClick = true;
+							}
+						}, 1000);
+					},
+					fail(res) {
+						console.log('访问失败', res);
+					}
+				});
+				// 若开奖停用按钮
+				if (that.isLockyClover) {
+					that.isClick = false;
+				}
+			},
+			checkLuckyClover() {
+				const that = this;
+				uni.request({
+					url: app.globalData.website + '/tools/choujiangzhushou/isluckyClover.php',
+					method: 'POST',
+					data: {
+						awardId: that.awardId,
+						userId: that.userId
+					},
+					success(res) {
+						console.log('6.查看是否中奖', res);
+						uni.hideLoading();
+						if (res.data.result) {
+							that.isLockyClover = res.data.result[0].luckyClover == 1;
+						}
 					}
 				})
+			}
 		},
-		methods: {
+		onPullDownRefresh() {
-
+			this.refresh();
+			setTimeout(function() {
+				uni.hideNavigationBarLoading();
+				//完成停止加载图标
+				uni.stopPullDownRefresh();
+			}, 1000);
 		},
 		onShareAppMessage() {
 			return {
@@ -90,7 +267,8 @@
 	.gift-show {
 		height: auto;
 		width: 100%;
-		background-color: #f6f7f9;
+		background-color: #ffffff;
+		padding: 10px 0;
 	}
 
 	/* 奖品图片展示 */
@@ -102,20 +280,45 @@
 	/* 奖品名称 */
 	.gift-name {
 		display: block;
-		font-size: 23px;
+		font-size: 18px;
-		line-height: 40px;
+		line-height: 30px;
-		padding-left: 10px;
+		padding-left: 20px;
+		color: #262626;
 	}
 
 	/* 奖品开奖信息 */
 	.gift-open {
 		display: block;
-		font-size: 18px;
+		font-size: 12px;
-		line-height: 25px;
+		line-height: 15px;
-		padding-left: 10px;
+		padding-left: 20px;
+		margin: 5px 0 10px 0;
 		color: gray;
 	}
 
+	/* 奖品详情文字 */
+	.gift-detail-tip {
+		display: inline-block;
+		width: 100%;
+		/* background-color: green; */
+		border-top: 10px solid #f6f7f9;
+		font-size: 15px;
+		color: #262626;
+		line-height: 30px;
+		padding-left: 20px;
+	}
+
+	/* 奖品详细信息 */
+	.gift-detail {
+		width: 100%;
+		display: inline-block;
+		padding: 2px 20px 20px 20px;
+		font-size: 17px;
+		color: #262626;
+		border-top: 2px solid #f6f7f9;
+		border-bottom: 10px solid #f6f7f9;
+	}
+
 	/* 操作视图 */
 	.action-view {
 		height: auto;
@@ -126,7 +329,7 @@
 	/* 参与抽奖 */
 	.gift-add {
 		height: 45px;
-		margin-top: 20px;
+		margin-top: 10px;
 		background-color: orangered;
 		color: white;
 		border: 0;
@@ -135,6 +338,17 @@
 		box-shadow: 0 0 10px orangered;
 	}
 	
+	/* 参与抽奖-不启用 */
+	.gift-add-disable {
+		height: 45px;
+		margin-top: 10px;
+		color: white;
+		border: 0;
+		border-radius: 20px;
+		font-weight: bold;
+		box-shadow: 0;
+	}
+	
 	/* 参与人数 */
 	.gift-person {
 		line-height: 30px;
@@ -145,7 +359,6 @@
 	.handimgs {
 		height: auto;
 		width: 100%;
-		/* background-color: red; */
 		text-align: center;
 		overflow: scroll;
 	}
@@ -156,6 +369,6 @@
 		width: 50px;
 		margin: 2px;
 		border-radius: 50%;
-		background-color: green;
+		background-color: #F6F7F9;
 	}
 </style>

readme.md

@@ -31,3 +31,7 @@ v2.2.2 2022-10-25
 1.实现抽奖页面创建加入界面
 
 2.实现抽奖页面创建后台逻辑
+
+v2.2.3 2022-10-26
+
+1.实现根据人数自动开奖的功能