<template>
	<view class="contaner">
		<view class="headerbox">
			<image src="../../static/ReceiveMoney.png" mode="aspectFit"></image>
		</view>
		<view class="LoginBox">
			<view class="phon">
				<input type="number" class="phonNumber" :adjust-position="true" maxlength="11" v-model="phonNumber"
					value="" placeholder="请输入手机号" placeholder-class="placeholder" />
			</view>
			<view class="phon" style="margin-top: 50rpx;">
				<input type="text" class="phonNumber" :adjust-position="true" v-model="studentName" value=""
					placeholder="请输入学生姓名" placeholder-class="placeholder" />
			</view>
			<view class="VerificationCode">
				<input type="number" class="code" value="" :adjust-position="true" maxlength="6"
					v-model="VerificationCode" placeholder="请输入验证码" placeholder-class="placeholder" />
				<view class="sendBtn" @click="getVerificationCode">
					{{timer?second+'s后获取':'获取验证码'}}
				</view>
			</view>
			<view class="ReceiveMoney" @tap="ReceiveMoney">
				领取红包
			</view>
		</view>
		<!-- 温馨提示 -->
		<view class="activity">
			
		</view>
	</view>
</template>

<script>
	export default {
		name: "ReceiveMoney",
		data() {
			return {
				phonNumber: "",
				VerificationCode: "",
				studentName: "",
				timer: null,
				second: 3
			}
		},
		methods: {
			// 获取验证码
			async getVerificationCode() {
				try {
					if (!this.phonNumber) {
						this.$toast("请输入手机号码!");
						return
					}
					if (this.timer) {
						return
					}
					this.$toast.loading({
						duration: 0,
						message: '请稍后...',
						forbidClick: true,
						loadingType: 'spinner',
					});
					this.timer = setInterval(() => {
						this.second--;
						if (!this.second) {
							clearInterval(this.timer);
							// 手动清除 Toast
							this.$toast.clear();
							this.second = 60
							this.timer = null
						}
					}, 1000);
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			// 验证手机号码领取红包
			async ReceiveMoney() {
				try {
					if (!this.phonNumber) {
						this.$toast("请输入手机号码!");
						return
					}
					if (!this.VerificationCode) {
						this.$toast("请输入验证码!");
						return
					}
					this.$toast.loading({
						duration: 3000,
						message: '请稍后...',
						forbidClick: true,
						loadingType: 'spinner',
					});
					await new Promise((res, rej) => {
						setTimeout(() => {
							res()
						}, 3000)
					})
					await this.$dialog.alert({
						title: '系统提示',
						message: '领取成功!',
						theme: 'round-button',
					});
					if (typeof WeixinJSBridge !== 'undefined') {
						WeixinJSBridge.call('closeWindow');
					} else {
						window.opener = null;
						window.close()
					}
				} catch (e) {
					//TODO handle the exception
					console.warn("----", e);
				}
			}

		}
	}
</script>

<style>
	page {
		width: 750pxr;
		height: 100vh;
		background: linear-gradient(0deg, #790003 0%, #BD000B 100%);
		position: relative;
	}

	.headerbox {
		width: 750rpx;
		height: 268rpx;
	}

	.headerbox image {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.LoginBox {
		width: 570rpx;
		height: 450rpx;
		margin: 0 auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 404rpx;
	}

	.placeholder {
		/* width: 310rpx; */
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		/* padding-left: 31rpx; */
	}

	.phonNumber {
		/* width: 570rpx; */
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding-left: 31rpx;
	}

	.VerificationCode {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
	}

	.code {
		width: 350rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding-left: 31rpx;
	}

	.sendBtn {
		width: 170rpx;
		height: 100rpx;
		background: #FFE49C;
		border-radius: 8rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #222222;
	}

	.ReceiveMoney {
		width: 570rpx;
		height: 100rpx;
		background: #FFC948;
		border-radius: 8rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		margin-top: 100rpx;
	}
</style>
