v2.2.2 2022-10-25

1.实现抽奖页面创建加入界面

2.实现抽奖页面创建后台逻辑

pages/subpages/choujiangzhushou/choujiangzhushou.vue

@@ -3,25 +3,25 @@
 		<!-- 奖品图片 -->
 		<view class="gift-show">
 			<image class="gift-img" :src="picUrl" mode="aspectFill"></image>
-			<button class="btn-switch">换</button>
+			<button class="btn-switch" @tap="changeImage()">换</button>
 		</view>
 		<!-- 奖品名称 -->
 		<view class="item gift-name">
 			<text class="item-tip name-tip">奖品名称</text>
-			<input class="item-input name" type="text" placeholder="请输入名称" />
+			<input class="item-input name" @input="bindAwardName" type="text" placeholder="请输入名称" />
 		</view>
 		<!-- 奖品数量 -->
 		<view class="item gift-count">
 			<text class="item-tip count-tip">奖品数量</text>
 			<view class="item-input">
-				<input class=" count" type="number" maxlength="2" placeholder="数量" />
+				<input class=" count" @input="bindAwardNum" type="number" maxlength="2" placeholder="数量" />
 				<text class="item-tip count-unit">个</text>
 			</view>
 		</view>
 		<!-- 奖品说明 -->
 		<view class="item gift-info">
 			<text class="item-tip info-tip">奖品说明</text>
-			<input class="item-input" type="text" placeholder="请输入奖品说明" />
+			<input class="item-input" @input="bindAwardDetail" type="text" placeholder="请输入奖品说明" />
 		</view>
 		<!-- 开奖方式 -->
 		<view class="item open-type">
@@ -36,9 +36,9 @@
 		<!-- 开奖设置 -->
 		<view class="item open-setting" v-if="typeIndex!=2">
 			<block v-if="typeIndex==0">
-				<text class="item-tip info-tip">开奖时间</text>
+				<text class="item-etip info-tip">开奖时间</text>
 				<view class="uni-list picker-date">
-					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDataChange">
+					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
 						<view class="uni-input">{{date}}</view>
 					</picker>
 				</view>
@@ -52,7 +52,7 @@
 				<!-- 通过人数开奖 -->
 				<text class="item-tip count-tip">开奖人数</text>
 				<view class="item-input">
-					<input class=" count" type="number" maxlength="2" placeholder="数量" />
+					<input class=" count" @input="bindNeedUsers" type="number" maxlength="2" placeholder="数量" />
 					<text class="item-tip count-unit">个</text>
 				</view>
 			</block>
@@ -66,52 +66,35 @@
 			</view>
 		</view>
 		<!-- 发起抽奖 -->
-		<button class="gift-start">发起抽奖</button>
+		<button class="gift-start" @tap="start()">发起抽奖</button>
 		<!-- 分享抽奖 -->
 		<button class="gift-share" v-if="isCreate" open-type="share">分享抽奖</button>
 	</view>
 </template>
 
 <script>
+	const app = getApp();
+
 	export default {
 		data() {
 			const currentDate = this.getDate({
 				format: true
-			})
+			});
 			const currenTime = this.getTime();
 			return {
-				picUrl: 'https://www.lailab.cn/miniprogram/image/other/image_tool_bayinhe.jpg',
+				picUrl: app.globalData.website + '/image/other/image_tool_choujiangzhushou.jpg',
+				sharePicUrl: app.globalData.website + '/image/share/image_tool_choujiangzhushou.jpg',
+				awardName: '',
+				awardNum: 1,
+				awardDetail: '',
 				openType: ['按时间自动开奖', '按人数自动开奖', '发起者手动开奖'],
 				typeIndex: 0,
 				date: currentDate,
 				time: currenTime,
-				isCreate: true,
+				openNeedUsers: 1,
-				giftList: [
+				awardId: '',
-					{
+				isCreate: false,
-						name: '我的抽奖1',
+				giftList: []
-						open: true
-					},
-					{
-						name: '我的抽奖2',
-						open: false
-					},
-					{
-						name: '我的抽奖3',
-						open: true
-					},
-					{
-						name: '我的抽奖4',
-						open: false
-					},
-					{
-						name: '我的抽奖5',
-						open: true
-					},
-					{
-						name: '我的抽奖6',
-						open: false
-					},
-				]
 			}
 		},
 		computed: {
@@ -123,15 +106,96 @@
 			}
 		},
 		methods: {
-			bindOpentypeChange: function(e) {
+			changeImage() {
-				this.typeIndex = e.detail.value;
+				const that = this;
+				wx.chooseImage({
+					count: 1, //默认9
+					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album'], //从相册选择
+					success(res) {
+						that.picUrl = res.tempFilePaths[0];
+					}
+				})
 			},
-			bindDataChange: function(e) {
+			// 获取奖品名称
+			bindAwardName: function(e) {
+				this.awardName = e.detail.value;
+			},
+			// 获取奖品数量
+			bindAwardNum: function(e) {
+				this.awardNum = e.detail.value;
+			},
+			// 获取奖品详情
+			bindAwardDetail: function(e) {
+				this.awardDetail = e.detail.value;
+			},
+			// 绑定抽奖方式
+			bindOpentypeChange: function(e) {
+				this.typeIndex = Number(e.detail.value);
+			},
+			// 绑定日期选择
+			bindDateChange: function(e) {
 				this.date = e.detail.value;
 			},
+			// 绑定时间选择
 			bindTimeChange: function(e) {
 				this.time = e.detail.value;
 			},
+			// 绑定所需用户数量
+			bindNeedUsers: function(e) {
+				this.openNeedUsers = Number(e.detail.value);
+			},
+			// 发起抽奖
+			start() {
+				const that = this;
+				const openDateTime = this.date + ' ' + this.time;
+				const startDateTime = this.getDate() + ' ' + this.getTime();
+				let rst = {
+					openId: app.globalData.openId,
+					awardImage: this.picUrl,
+					awardName: this.awardName,
+					awardNum: this.awardNum,
+					awardDetail: this.awardDetail,
+					openType: this.typeIndex,
+					startDateTime: startDateTime,
+					openDateTime: openDateTime,
+					openNeedUsers: this.openNeedUsers,
+				};
+				uni.showLoading({
+					title: '抽奖创建中...',
+					icon: 'loading'
+				})
+				uni.request({
+					url: app.globalData.website + '/tools/choujiangzhushou/addAwardInfo.php',
+					method: 'POST',
+					data: rst,
+					success(res) {
+						if (res.data.err == 1) {
+							uni.hideLoading();
+							uni.showToast({
+								title: '抽奖创建成功',
+								icon: 'success'
+							})
+							that.awardId = res.data.result[0].id;
+							if (that.awardId != '') {
+								that.isCreate = true;
+							}
+						} else if (res.data.err == 0) {
+							uni.hideLoading();
+							uni.showToast({
+								title: '抽奖创建失败',
+								icon: 'error'
+							})
+						}
+					},
+					fail(res) {
+						uni.showModal({
+							title: '错误',
+							content: res.errMsg
+						})
+					}
+				})
+			},
 			getDate(type) {
 				const date = new Date();
 				let year = date.getFullYear();
@@ -157,10 +221,18 @@
 			}
 		},
 		onShareAppMessage() {
-			return {
+			if (this.isCreate) {
-				title: '参与抽奖',
+				return {
-				path: '/pages/subpages/choujiangzhushou/jiaruchoujiang',
+					title: '参与 ' + this.awardName + 'x' + this.awardNum + ' 抽奖',
-				imageUrl: this.picUrl
+					path: `/pages/subpages/choujiangzhushou/jiaruchoujiang?awardId=${this.awardId}`,
+					imageUrl: (this.picUrl == (app.globalData.website + '/image/other/image_tool_choujiangzhushou.jpg') ?
+						this.sharePicUrl : this.picUrl)
+				}
+			} else {
+				uni.showToast({
+					title: '创建失败',
+					icon: 'error'
+				})
 			}
 		}
 	}
@@ -193,12 +265,14 @@
 
 	/* 更换图片 */
 	.btn-switch {
+		height: 40px;
+		width: 40px;
 		border: 0;
-		border-radius: 20px;
+		border-radius: 10px;
-		height: 50px;
+		line-height: 40px;
-		width: 50px;
+		text-align: center;
-		background-color: pink;
+		background-color: #f6f7f9;
-		color: white;
+		color: black;
 		position: absolute;
 		top: 20px;
 		right: 20px;
@@ -283,10 +357,12 @@
 		font-weight: bold;
 		box-shadow: 0 0 10px orangered;
 	}
+
 	.gift-share {
 		background-color: dodgerblue;
 		box-shadow: 0 0 10px dodgerblue;
 	}
+
 	/* 抽奖历史 */
 	.gift-history {
 		max-height: 150px;
@@ -295,12 +371,14 @@
 		border-radius: 20px;
 		/* padding: 0 10px 0 10px; */
 	}
+
 	.history-tip {
 		display: block;
 		width: 100%;
 		padding: 10px 0;
-		border-bottom:3px solid white ;
+		border-bottom: 3px solid white;
 	}
+
 	.item-history {
 		margin: 0;
 		padding: 0;

pages/subpages/choujiangzhushou/jiaruchoujiang.vue

@@ -2,9 +2,9 @@
 	<view class="container">
 		<!-- 奖品展示 -->
 		<view class="gift-show">
-			<image class="gift-img" :src="picUrl"></image>
+			<image class="gift-img" :src="picUrl" mode="aspectFill"></image>
-			<text class="gift-name">奖品:精美老八x8</text>
+			<text class="gift-name">奖品:{{awardName}}x{{awardNum}}</text>
-			<text class="gift-open">10月23日 11:00 自动开奖</text>
+			<text class="gift-open">{{openType==0?openDateTime + ' ':(openType==1?'满' + openNeedUsers + '人':'')}}自动开奖</text>
 		</view>
 		<!-- 操作视图 -->
 		<view class="action-view">
@@ -26,12 +26,48 @@
 </template>
 
 <script>
+	const app = getApp();
 	export default {
 		data() {
 			return {
-				picUrl: 'https://www.lailab.cn/miniprogram/image/other/image_tool_bayinhe.jpg'
+				picUrl: 'https://www.lailab.cn/miniprogram/image/other/image_tool_bayinhe.jpg',
+				awardName: 'test',
+				awardNum: 100,
+				openType: 0,
+				openDateTime: '2000-01-01 00:00',
 			}
 		},
+		onLoad(option) {
+			// console.log(option);
+			// uni.showModal({
+			// 	title: "欢迎加入",
+			// 	content: "id为"+option.awardId,
+			// })
+			const that = this;
+			uni.request({
+				url: app.globalData.website + '/tools/choujiangzhushou/getAwardInfo.php',
+				method: 'POST',
+				data: {
+					awardId: option.awardId
+				},
+				success(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.openDateTime = rst.openDateTime;
+						that.openType = rst.openType;
+						that.openNeedUsers = rst.openNeedUsers;
+					}else {
+						uni.showToast({
+							title:'加入失败',
+							icon: 'error'
+						})
+					}
+				}
+			})
+		},
 		methods: {
 
 		},
@@ -60,7 +96,7 @@
 	/* 奖品图片展示 */
 	.gift-img {
 		width: 100%;
-		height: 400px;
+		height: 350px;
 	}
 
 	/* 奖品名称 */

readme.md

@@ -25,3 +25,9 @@ v2.2 2022-10-23
 v2.2.1 2022-10-24
 
 1.完善抽奖助手子页面
+
+v2.2.2 2022-10-25
+
+1.实现抽奖页面创建加入界面
+
+2.实现抽奖页面创建后台逻辑