Bladeren bron

收货地址领奖

lilei 4 jaren geleden
bovenliggende
commit
9a6a42e1e8
4 gewijzigde bestanden met toevoegingen van 500 en 12 verwijderingen
  1. 19 1
      pages.json
  2. 69 11
      pages/luckDraw/luckDraw.vue
  3. 331 0
      pages/luckDraw/myJp.vue
  4. 81 0
      pages/luckDraw/paySuccess.vue

+ 19 - 1
pages.json

@@ -215,7 +215,25 @@
                 "enablePullDownRefresh": false
             }
             
-        }
+        },
+		{
+		    "path" : "pages/luckDraw/paySuccess",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "支付完成",
+		        "enablePullDownRefresh": false
+		    }
+		    
+		},
+		{
+		    "path" : "pages/luckDraw/myJp",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "我的奖品",
+		        "enablePullDownRefresh": false
+		    }
+		    
+		}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

+ 69 - 11
pages/luckDraw/luckDraw.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="content">
 		<view class="luckwheel">
-			<view class="myjp">
+			<view class="myjp" @click="viewMyJp">
 				<image width="32rpx" height="32rpx" src="../../static/shift.png"></image>
 				<text>我的奖品</text>
 			</view>
@@ -19,7 +19,7 @@
 			/>
 			<view class="synums">
 				抽奖剩余次数:
-				<text>2</text>
+				<text>{{ reTimes }}</text>
 			</view>
 		</view>
 		<!-- 获奖人员滚动列表 -->
@@ -104,13 +104,13 @@
 			<view class="lottery-content win_4" v-if="winTypes == 'win_4'">
 				<view class="lottery-title">
 					<view>请输入支付密码</view>
-					<view>支付<text>10</text><image src="../../static/ledou.png"></image></view>
+					<view class="pay-info">支付<text>10</text><image src="../../static/ledou.png"></image></view>
 					<view>
-						<u-input></u-input>
+						<u-input v-model="payPws" trim type="password" :border="true" :password-icon="true" placeholder="请输入支付密码"></u-input>
 					</view>
 				</view>
-				<view class="lottery-confrim-btn">
-					继续抽奖
+				<view class="lottery-confrim-btn" @click="toPaySubmit">
+					确定支付
 				</view>
 			</view>
 		</u-popup>
@@ -177,8 +177,10 @@ export default {
 					prize: '15乐豆'
 				}
 			], // 已获奖人员
-			showLottery: true, // 是否显示抽奖弹框
-			winTypes: 'win_1', // 抽奖弹框类型
+			showLottery: false, // 是否显示抽奖弹框
+			winTypes: '', // 抽奖弹框类型
+			payPws: '', // 支付密码
+			reTimes: 0, // 剩余次数
 			// canvas 属性配置
 			canvasData: {
 				width: 260,
@@ -267,13 +269,23 @@ export default {
 				}, 2000);
 			});
 		},
+		// 获取配置
+		getPrizeSetting(){
+			this.reTimes = 3
+		},
 		// 本次抽奖开始
 		handleDrawStart() {
 			this.targetName = '';
 			this.targetPrize = null;
-
+			console.log(this.reTimes)
+			// 抽奖次数用完了
+			if(this.reTimes<=0){
+				this.showLottery = true
+				this.winTypes = 'win_1'
+				this.prizeIndex = -1
+				return
+			}
 			let list = [...this.prizeList];
-
 			// 模拟请求
 			let stoTimer = setTimeout(() => {
 				clearTimeout(stoTimer);
@@ -290,6 +302,7 @@ export default {
 				if (this.onStock) {
 					console.log('本次奖品库存 =>', this.prizeList[this.prizeIndex].stock);
 				}
+				this.reTimes = this.reTimes -1
 			}, 200);
 		},
 		// 本次抽奖结束
@@ -342,6 +355,13 @@ export default {
 		toPay(){
 			this.winTypes = 'win_4'
 		},
+		// 支付确定
+		toPaySubmit(){
+			this.showLottery = false
+			uni.navigateTo({
+				url: '/pages/luckDraw/paySuccess'
+			})
+		},
 		// 文字滚动
 		scrollAnimate() {
 		  this.animateUp = true
@@ -362,6 +382,12 @@ export default {
 			  console.log("节点的宽为" + data.height);
 			  this.scrollTextHeight = (data.height + 5) * 6
 			}).exec();
+		},
+		// 我的奖品
+		viewMyJp(){
+			uni.navigateTo({
+				url: '/pages/luckDraw/myJp'
+			})
 		}
 	},
 	onShow() {
@@ -371,7 +397,9 @@ export default {
 	onLoad() {
 		// 模拟请求奖品数据
 		this.getPrizeList();
-		
+		// 查询抽奖设置及规则
+		this.getPrizeSetting();
+		// 计算转盘宽度和高度
 		const res = uni.getSystemInfoSync();
 		this.canvasData.width = res.screenWidth * 0.62
 		this.canvasData.height = res.screenWidth * 0.62
@@ -569,5 +597,35 @@ export default {
 			}
 		}
 	}
+	// 支付乐豆抽奖
+	.win_4{
+		.lottery-title{
+			color: #000000;
+			padding: 120rpx 50rpx 100rpx 50rpx;
+			font-size: 34rpx;
+			flex-direction: column;
+			justify-content: center;
+			
+			> view{
+				display: flex;
+				align-items: center;
+				padding: 12rpx 0;
+			}
+			
+			.pay-info{
+				font-size: 30rpx;
+				color: #666;
+				image{
+					width: 30rpx;
+					height: 30rpx;
+				}
+				text{
+					color: red;
+					font-size: 36rpx;
+					font-weight: bold;
+				}
+			}
+		}
+	}
 }
 </style>

+ 331 - 0
pages/luckDraw/myJp.vue

@@ -0,0 +1,331 @@
+<template>
+	<view class="page-cont">
+		<view class="list">
+			<view>一等奖</view>
+			<view class="names">华为p30</view>
+			<view class="viewsDetail" @click="viewsDetail">查看详情</view>
+		</view>
+		<view class="list">
+			<view>三等奖</view>
+			<view class="names">20乐豆</view>
+			<view class="lingjiang" @click="lingjiang(0)">领奖</view>
+		</view>
+		<view class="list">
+			<view>一等奖</view>
+			<view class="names">华为p30</view>
+			<view class="lingjiang" @click="lingjiang(1)">领奖</view>
+		</view>
+		
+		<!-- 查看详情弹框 -->
+		<u-popup v-model="showViews" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="500rpx" height="650rpx">
+			<view class="lottery-content">
+				<view class="lottery-title">物流信息</view>
+				<view class="lottery-form">
+					<view>
+						<view class="labes">收件人</view>
+						<view>李磊</view>
+					</view>
+					<view>
+						<view class="labes">联系电话</view>
+						<view>1379964646</view>
+					</view>
+					<view>
+						<view class="labes">收货地址</view>
+						<view>陕西省咸阳市某某街某某 某小区某某单元1100号</view>
+					</view>
+					<view>
+						<view class="labes">物流单号</view>
+						<view>
+							<!-- <text>暂未发货,如收货信息有误, 请联系13312345678</text> -->
+							<text>中国邮政(单号:16546464645)</text> <u-button @click="copyWlCode" size="mini">复制</u-button>
+						</view>
+					</view>
+				</view>
+				<view @click="showViews=false" class="lottery-confrim-btn">
+					确定
+				</view>
+			</view>
+		</u-popup>
+		
+		<!-- 乐豆领取详情弹框 -->
+		<u-popup v-model="showLjLd" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="500rpx" height="450rpx">
+			<view class="lottery-content">
+				<view class="lottery-title">欢迎领取</view>
+				<view class="lottery-msg">
+					您的奖励已到账,请在小程序【我的】-【乐豆明细】中查看奖励到账情况!
+				</view>
+				<view @click="showLjLd=false" class="lottery-confrim-btn">
+					我知道了
+				</view>
+			</view>
+		</u-popup>
+		
+		<!-- 收货地址详情弹框 -->
+		<u-popup v-model="showAddr" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="80%">
+			<view class="lottery-content">
+				<view class="lottery-title">收货信息</view>
+				<view class="lottery-u-form">
+					 <u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
+					 	<u-form-item label="收货人" required prop="receiverName">
+					 		<u-input placeholder="请输入收货人姓名" :maxlength="30" v-model="form.receiverName" />
+					 	</u-form-item>
+					 	<u-form-item label="收货电话" required prop="receiverPhone">
+					 		<u-input placeholder="请输入收货电话" :maxlength="11" type="number" v-model="form.receiverPhone" />
+					 	</u-form-item>
+					 	<u-form-item label="省市区" required prop="receiveAreasName">
+					 		<u-input v-model="areaInfo.label" placeholder="请选择省市区" @click="openAddress" type="select" />
+					 		<Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
+					 	</u-form-item>
+					 	<u-form-item label="详细地址" required prop="receiveAddress">
+					 		<u-input type="textarea" :height="150" auto-height placeholder="请输入收货详细地址(最多100个字符)" :maxlength="100" v-model="form.receiveAddress" class="receiveAddress"/>
+					 	</u-form-item>
+					 </u-form>
+				</view>
+				<view @click="wlSubmit" class="lottery-confrim-btn">
+					确定
+				</view>
+			</view>
+		</u-popup>
+		
+	</view>
+</template>
+
+<script>
+import Address from '@/components/address.vue'
+import {findAddressBycustomerNo, saveAddress} from '@/api/receiveAddress.js'
+export default {
+	components: {
+		Address
+	},
+	data() {
+		return {
+			showViews: false, // 查看详情弹框
+			showAddr: false ,// 实物奖品,收货地址弹框
+			showLjLd: false, // 虚拟奖品领奖弹框
+			form: {
+				receiverName: '',
+				receiverPhone: '',
+				receiveAddress: '' // 详细地址
+			},
+			receiveAreas: '', //地址编码
+			areaName: '', //地址
+			areaInfo: {},  //  省市区
+			areaIdArr: [],  //  省市区id数组
+		}
+	},
+	// 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
+	onReady() {
+		this.$refs.uForm.setRules(this.rules);
+	},
+	onLoad(option) {
+		console.log(option,'option')
+	},
+	onUnload() {
+		this.form = {
+			receiverName: '',
+			receiverPhone: '',
+			receiveAddress: '' // 详细地址
+		}
+	},
+	methods: {
+		// 获取用户收货地址
+		getAddress() {
+			 findAddressBycustomerNo({}).then(res => {
+				 console.log(res)
+				 if (res.status == 200&&res.data.length) {
+					 this.form = res.data[0]
+					 if (this.form.receiveAreasName) {
+						 this.areaIdArr = this.form.receiveAreas.split(',')
+						 this.areaInfo.label = this.form.receiveAreasName.replace(/\,/g,'-')
+					 }
+					 this.$u.vuex("vuex_OrderAddress",this.form)
+				 }
+			 })
+		},
+		//  选择省区市
+		areaConfirm(e) {
+			console.log('已选择的省市区', e)
+			this.areaInfo = e
+			this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
+		},
+		openAddress(){
+			//  省市区回显参数为省市区id数组
+			this.$refs.applyAddress.open(this.areaIdArr)
+		},
+		// 去抽奖
+		toLuckDraw() {
+			uni.navigateBack()
+		},
+		// 查看详情
+		viewsDetail(){
+			this.showViews = true
+		},
+		// 领奖
+		lingjiang(type){
+			if(type){
+				this.showAddr = true
+				this.getAddress()
+			}else{
+				this.showLjLd = true
+			}
+		},
+		// 复制单号
+		copyWlCode(){
+			uni.setClipboardData({
+			    data: 'hello',
+			    success: function () {
+			        console.log('success');
+			    }
+			});
+		},
+		// 保存物流信息
+		wlSubmit(){
+			this.$refs.uForm.validate(valid => {
+				if (valid) {
+					console.log('验证通过');
+					if (this.form.receiverName ==='') {
+						uni.showToast({
+							title: '请输入收货人姓名',
+							icon: 'none'
+						})
+						return false
+					}
+					if (this.form.receiverPhone ==='') {
+						uni.showToast({
+							title: '请输入收货电话',
+							icon: 'none'
+						})
+						return false
+					}
+					//  省市区
+					if(this.areaIdArr.length == 0){
+						uni.showToast({icon: 'none',title: '请选择省市区'})
+						return
+					}
+					if (this.form.receiveAddress ==='') {
+						uni.showToast({
+							title: '请输入详细地址',
+							icon: 'none'
+						})
+						return false
+					}
+					let params = {
+						receiverName: this.form.receiverName,
+						receiverPhone: this.form.receiverPhone,
+						receiveAreasName: this.areaInfo.label.replace(/\-/g,','), // 地址名称
+						receiveAreas: this.areaIdArr.join(','), 
+						receiveAddress: this.form.receiveAddress // 详细地址
+					}
+					if(this.form.id) {
+						params.id = this.form.id
+					}
+					saveAddress(params).then(res=>{
+						if(res.status == 200) {
+							uni.showToast({
+								title: res.message,
+								icon: 'none'
+							})
+							this.showAddr = false
+						} 
+					})
+				}
+			});
+		}
+	} 
+}
+</script>
+
+<style lang="less">
+	.page-cont{
+		width: 100%;
+		padding: 20rpx;
+		.list{
+			display: flex;
+			align-items: center;
+			> view{
+				padding: 15rpx;
+				color: #FFFFFF;
+				background-color: #01c9b2;
+				border-right: 1px solid #FFFFFF;
+				border-bottom: 1px solid #FFFFFF;
+				text-align: center;
+			}
+			.names{
+				width: 50%;
+				flex-grow: 1;
+			}
+			.lingjiang{
+				background-color: #ffaa00;
+				color: #FFFFFF;
+				width: 25%;
+			}
+			.viewsDetail{
+				background-color: #008273;
+				color: #FFFFFF;
+				width: 25%;
+			}
+		}
+		
+		.lottery-content{
+			height: 100%;
+			position: relative;
+			background: url(../../static/lottery_winbg1.png) no-repeat center top;
+			background-size: 100% auto;
+			.lottery-confrim-btn{
+				width: 100%;
+				display: flex;
+				justify-content: center;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				font-size: 32rpx;
+				border-top: 1px solid #eee;
+				padding: 30rpx 0;
+				color: #21d5c0;
+			}
+			.lottery-title{
+				padding: 20rpx 30rpx;
+				text-align: center;
+				color: #FFFFFF;
+				font-size: 36rpx;
+				font-weight: bold;
+			}
+			.lottery-form{
+				padding: 80rpx 30rpx 20rpx;
+				> view{
+					display: flex;
+					padding: 10rpx;
+					.labes{
+						width: 150rpx;
+					}
+					>view{
+						&:last-child{
+							flex-grow: 1;
+							width: 80%;
+							color: #666;
+							display: flex;
+							align-items: center;
+							text{
+								word-break: break-all;
+							}
+						}
+					}
+				}
+			}
+			.lottery-msg{
+				padding: 70rpx 60rpx;
+				text-align: center;
+				line-height: 42rpx;
+			}
+			.lottery-u-form{
+				padding: 50rpx 50rpx 150rpx;
+				.receiveAddress{
+					width: 100%;
+					line-height: 1.5em;
+					box-sizing: border-box;
+					font-style: normal;
+				}
+			}
+		}
+	}
+</style>

+ 81 - 0
pages/luckDraw/paySuccess.vue

@@ -0,0 +1,81 @@
+<template>
+	<view class="page-cont">
+		<view class="icon-cont">
+			<u-icon class="icon" name="checkmark" color="#fff" size="80"></u-icon>
+			<view>支付成功</view>
+			<view class="pay-info"><text>10</text><image src="../../static/ledou.png"></image></view>
+		</view>
+		<view class="back-btn">
+			<u-button type="success" @click="toLuckDraw">去抽奖</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			orderId: '' //订单id
+		}
+	},
+	onLoad(option) {
+		console.log(option,'option')
+		this.orderId = option.id
+	},
+	methods: {
+		// 去抽奖
+		toLuckDraw() {
+			uni.navigateBack()
+		}
+	}
+}
+</script>
+
+<style lang="less">
+	page{
+		height: 100%;
+	}
+	.page-cont{
+		width: 100%;
+		height: 100%;
+		background-color: #fff;
+		padding: 40upx;
+		.icon-cont{
+			width: 100%;
+			height: 400upx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			>view{
+				font-size: 30upx;
+				margin-top: 30upx;
+				color: #00aa00;
+			}
+			.pay-info{
+				font-size: 50rpx;
+				color: #666;
+				image{
+					width: 40rpx;
+					height: 40rpx;
+				}
+				text{
+					color: red;
+					font-weight: bold;
+				}
+			}
+		}
+		.icon{
+			width: 120upx;
+			height: 120upx;
+			background-color: #07c160;
+			display: flex;
+			justify-content: center;
+			border-radius: 50%;
+		}
+		.back-btn{
+			margin-top: 40upx;
+			padding: 0 20%;
+		}
+	}
+</style>