WeChatAppH5/pages/game/award-information.vue

<template>
	<view>
		<nav-bar title="填写领奖信息" goBack />
		<!-- <navbar :config="config" backColor="#999999"></navbar> -->
		<view class="info-page">
			<view class="info-item">
				<view class="info-title">
					领奖人名称:
				</view>
				<view class="info-value">
					<input v-model="formData.receivePrizePersonName" class="info-value-input" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="info-item" v-if="prizeType === 4">
				<view class="info-title">
					收获地址:
				</view>
				<view class="province" @click.stop="areaShow = true">
					<view :class="['province-item zw-one-row',formData.receiveProvinceName ? '' : 'input-placeholder']">
						{{formData.receiveProvinceName || '请选择'}}
						<text class="province-item-icon iconfont_yige">&#xe65f;</text>
					</view>
					<view :class="['province-item zw-one-row',formData.receiveCityName ? '' : 'input-placeholder']">
						{{formData.receiveCityName || '请选择'}}
						<text class="province-item-icon iconfont_yige">&#xe65f;</text>
					</view>
					<view :class="['province-item zw-one-row',formData.receiveAreaName ? '' : 'input-placeholder']">
						{{formData.receiveAreaName || '请选择'}}
						<text class="province-item-icon iconfont_yige">&#xe65f;</text>
					</view>
				</view>
				<view class="info-value">
					<input v-model="formData.receiveAddress" class="info-value-input" placeholder="请输入详细地址" />
				</view>
			</view>
			<view class="info-item">
				<view class="info-title">
					领奖人手机号码:
				</view>
				<view class="info-value">
					<input v-model="formData.receivePrizePersonMobile" type="tel" class="info-value-input"
						placeholder="请输入电话号码" />
				</view>
				<view class="info-value">
					<input type="tel" v-model="formData.captcha" class="info-value-input" placeholder="请输入验证码" />
					<text class="info-value-code" @click.stop="getCode()">{{codeText}}</text>
				</view>
			</view>
			<view class="submit-btn-box">
				<view class="submit-btn" @click.stop="onSubmit()">
					确认提交
				</view>
			</view>

			<u-select v-model="areaShow" mode="mutil-column-auto" :list="newProvinceDataList"
				@confirm="areaConfirm"></u-select>
		</view>
	</view>
</template>

<script>
	import {
		setSupplement
	} from "@/api/Lottery.js"

	import {
		smsCode
	} from "@/api/government.js"
	export default {
		data() {
			return {
				areaShow: false,
				activityJoinRecordId: null,
				prizeType: null, // 0谢谢参与，1积分，2优惠券，3线下虚拟商品，4线下实物商品
				newProvinceDataList: [],

				provinceValue: {
					area_name: '',
					area_code: ''
				},

				codeText: "获取验证码",
				codeInterval: null,

				formData: {
					receivePrizePersonMobile: '',
					captcha: '',
					receivePrizePersonName: '',
					receiveProvinceName: '',
					receiveProvinceCode: '',
					receiveCityName: '',
					receiveCityCode: '',
					receiveAreaName: '',
					receiveAreaCode: '',
					receiveAddress: '',
				},
				submitLoading: false
			}
		},
		onLoad(opt) {
			this.activityJoinRecordId = opt.activityJoinRecordId || null;
			this.prizeType = Number(opt.prizeType) || null;
			// this.prizeType = 4;
			this.getAreaList2()
		},
		methods: {
			getCode() {
				if (this.codeText === '获取验证码') {
					if (!this.formData.receivePrizePersonMobile.match(this.$mConfig.telRegex)) {
						this.$mUtil.toast('请输入正确手机号');
						return false;
					}

					try {
						clearInterval(this.codeInterval);
						this.codeInterval = null;
					} catch (e) {
						//TODO handle the exception
					};
					let codeNum = 60;
					this.codeInterval = setInterval(() => {
						codeNum -= 1
						this.codeText = `${codeNum}s`;
						if (codeNum <= 0) {
							clearInterval(this.codeInterval);
							this.codeInterval = null;
							this.codeText = "获取验证码"
						}
					}, 1000);
					console.log('请求验证码接口')

					smsCode({
						mobile: this.formData.receivePrizePersonMobile
					}).then(res => {
						this.$u.toast('验证码已发送');
					}).finally(e => {
						uni.hideLoading();
					})
				}
			},

			// 获取省市区
			getAreaList2() {
				let that = this;
				let req = this.$http.get('/cnarea/tree-lbs', {});
				req.then(res => {
					let provincesList = res.tree.children;
					let multiIndex = [0, 0, 0];
					this.newProvinceDataList = provincesList
				})
				return req;
			},
			// 获取地区
			areaConfirm(e) {
				console.log('areaConfirm = ', e)
				if (e.length > 0) {
					this.formData.receiveProvinceName = e[0].label;
					this.formData.receiveProvinceCode = e[0].value;
					this.formData.receiveCityName = e[1].label;
					this.formData.receiveCityCode = e[1].value;
					this.formData.receiveAreaName = e[2].label;
					this.formData.receiveAreaCode = e[2].value;
				}
			},

			onSubmit() {
				const params = {}
				try {
					if (!this.formData.receivePrizePersonName) {
						throw new Error('请输入领奖人名称')
					}
					params.receivePrizePersonName = this.formData.receivePrizePersonName;
					if (this.prizeType === 4) {
						if (!this.formData.receiveProvinceName) {
							throw new Error('请选择省')
						}
						if (!this.formData.receiveCityName) {
							throw new Error('请选择市')
						}
						if (!this.formData.receiveAreaName) {
							throw new Error('请选择区')
						}
						if (!this.formData.receiveAddress) {
							throw new Error('请填写详细地址')
						}
						params.receiveProvinceName = this.formData.receiveProvinceName;
						params.receiveProvinceCode = this.formData.receiveProvinceCode;
						params.receiveCityName = this.formData.receiveCityName;
						params.receiveCityCode = this.formData.receiveCityCode;
						params.receiveAreaName = this.formData.receiveAreaName;
						params.receiveAreaCode = this.formData.receiveAreaCode;
						params.receiveAddress = this.formData.receiveAddress;
					}
					if (!this.formData.receivePrizePersonMobile.match(this.$mConfig.telRegex)) {
						throw new Error('请输入正确手机号')
					}
					params.receivePrizePersonMobile = this.formData.receivePrizePersonMobile;
					if (!this.formData.captcha || this.formData.captcha.length !== 4) {
						throw new Error('请输入验证码')
					}
					params.captcha = this.formData.captcha;
					params.activityJoinRecordId = this.activityJoinRecordId;
					this.submitLoading = true
					setSupplement(params).then(res => {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						try {
							const app = getCurrentPages()
							const PrevPage = app[app.length - 2]
							if (PrevPage && PrevPage.route === "pages/game/winning-list") {
								PrevPage.getMyWinningVal()
							}
						} catch (e) {
							//TODO handle the exception
						}
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}).finally(() => {
						this.submitLoading = false
					})
				} catch (e) {
					//TODO handle the exception
					console.log(e.message)
					uni.showToast({
						title: e.message,
						icon: 'none'
					})
				}




			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-page {
		padding: 0 60rpx;

		.info-item {
			.info-title {
				width: 100%;
				height: 75rpx;
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				font-size: 28rpx;
				// font-weight: 300;
				text-align: left;
				color: #1a1a1a;
			}

			.province {
				padding-top: 20rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;

				border-bottom: 1rpx solid #D9D9D9;

				.province-item {
					width: 32%;
					height: 70rpx;
					// border: 1rpx solid #ccc;
					border-radius: 10rpx;
					// display: flex;
					position: relative;
					// background-color: red;
					padding: 0 24rpx 0 10rpx;
					line-height: 70rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Light;
					color: #666666;

					.province-item-icon {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%) rotate(90deg);
					}

				}
			}

			.info-value {
				height: 87rpx;
				border-bottom: 1rpx solid #D9D9D9;
				display: flex;
				align-items: center;

				.info-value-input {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Light;
					color: #666666;
					// background-color: red;
				}



				.info-value-code {
					width: 175rpx;
					height: 54rpx;
					background: linear-gradient(90deg, #3db8d2 2%, #46c8d5 97%);
					border-radius: 27rpx;
					text-align: center;
					line-height: 54rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}

	}


	.submit-btn-box {
		width: 100%;
		height: 148rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 1;

		.submit-btn {
			width: 690rpx;
			height: 80rpx;
			background: linear-gradient(92deg, #3cb7d2 2%, #44c5d5 98%);
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			margin: 34rpx auto;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
		}
	}

	/deep/ .input-placeholder {

		font-size: 28rpx;
		color: #cccccc !important;
	}
</style>