psy_web_share/newScale/Mbti/paySuccess.vue

<template>
	<view class="pay_success_bg">
		<view class="register_bg">
			<view class="phone_input"><input @blur="checkPhone()" v-model="phone" type="tel" placeholder="请输入手机号">
			</view>
			<view class="password_input"><input v-model="code" type="number" placeholder="请输入验证码">
				<view class="sms" @click='sendCode()'>{{sendCodeFlag}}</view>
			</view>
		</view>

		<view class="send_btn" @click="saveAndView">
			<image src="https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/register_save_bg.png"
				mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				//时间标志
				time: null,
				//倒计时数字
				timeCount: 60,
				//显示倒计时还是发送验证码
				sendCodeFlag: '发送验证码',
				userId: '',
				resultId: ''
			}
		},
		onLoad(options) {
			if (options.userId && options.resultId) {
				this.userId = options.userId;
				this.resultId = options.resultId;
			}
		},
		onUnload() {
			clearInterval(this.time);
			this.phone = '';
			this.code = '';
			this.timeCount = 60;
			this.sendCodeFlag = '发送验证码';
		},
		methods: {
			//对手机号进行校验
			checkPhone() {
				var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (phoneReg.test(this.phone)) {
					return true;
				} else {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'error'
					})
					return false;
				}
			},
			sendCode() {
				if (!this.checkPhone()) {
					return;
				}
				if (this.sendCodeFlag == '重新发送' || this.sendCodeFlag == '发送验证码') {
					this.timeCount = 60;
					clearInterval(this.time)
					//起一个定时器开始倒计时
					this.sendCodeFlag = this.timeCount + 's'
					this.time = setInterval(() => {
						this.timeCount -= 1;
						this.sendCodeFlag = this.timeCount + 's'
						//如果倒计时为0时则停止倒计时
						if (this.timeCount == 0) {
							clearInterval(this.time)
							this.sendCodeFlag = '重新发送'
						}
					}, 1000)
					this.$request.get({
						url: 'user/authCode',
						loadingTip: "加载中...",
						data: {
							phone: this.phone
						},
					}).then((res) => {
						uni.showToast({
							title: '验证码已发送',
							icon: 'success',
						})
					})
				}

			},
			// 绑定手机号并查看报告
			saveAndView() {
				// 校验手机和验证码格式
				if (this.checkPhone() && this.code != '') {
					this.$request.get({
						url: 'user/updateMobile',
						loadingTip: "加载中...",
						data: {
							id: this.userId,
							mobile: this.phone,
							authCode: this.code,
						},
					}).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: '保存成功'
							})
							uni.navigateTo({
								url: `/newScale/Charm/testResult?resultId=${this.resultId}&messageShare=1`
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.pay_success_bg {
		width: 100%;
		min-height: 100vh;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_success_bg.png) no-repeat top;
		background-size: 100% auto;
		overflow: hidden;
	}

	.register_bg {
		width: 750rpx;
		height: 498rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/register_bg.png) no-repeat top;
		background-size: 100% auto;
		margin-top: 348rpx;
		overflow: hidden;
	}

	.register_bg input {
		border: 0;
		outline: none;
		width: 529rpx;
		height: 91rpx;
		padding-left: 100rpx;
	}

	.phone_input input {
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/phone_input_bg.png) no-repeat top;
		background-size: cover;
		margin: 176rpx 0 0 64rpx;
	}


	.password_input {
		margin: 29rpx 0 0 64rpx;
		position: relative;
	}

	.password_input input {
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/password_input_bg.png) no-repeat top;
		background-size: auto 100%;
	}

	::v-deep .uni-input-input::placeholder {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 32rpx;
		color: #999999;
		line-height: 64rpx;
	}

	.sms {
		width: 168rpx;
		background: #FFEDF1;
		border-radius: 36rpx;
		position: absolute;
		top: 9rpx;
		right: 71rpx;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: bold;
		font-size: 24rpx;
		color: #EC3126;
		line-height: 71rpx;
		text-align: center;
	}

	.sms:active {
		border: 1rpx solid #cccccc;
		opacity: 0.8;
		border-radius: 40rpx;
	}

	.send_btn {
		margin: 340rpx auto 0;
		text-align: center;
	}
</style>