psy_web_share/paymentPage/phoneSave/index.vue

<template>
	<div>
		<div class='top-page'>
			<view style='text-align: center;padding-top:15px'>
				<image style='width:146rpx' src='/static/images/success_icon.png' mode="widthFix"></image>
			</view>
			<view class='main_scale_njhd'>
				<img class='main_xing_left' src="/static/images/xing_left2.png" />
				<view class='main_scale_font_njhd'>支付成功</view>
				<img class='main_xing_right' src="/static/images/xing_right2.png" />
			</view>
			<!-- <div class="saveP">
				保存您的付费报告到手机
			</div>
			<div class="save-phone-cla">
				请绑定您的手机号
			</div> -->
			<div class='page-connent'>
				<view class="phone_tip">请输入您的手机号码，我们将为您推送专属报告链接</view>
				<div class='verification-phone'>
					<uni-easyinput class="uni-mt-5 verification-phone1" @blur="checkPhone()" trim="all"
						placeholder="请输入手机号" v-model='phone' placeholder-style="font-size:32rpx"></uni-easyinput>
				</div>
				<div class='verification-code'>
					<uni-easyinput class="uni-mt-5 verification-code1" placeholder="请输入验证码" v-model="code"
						placeholder-style="font-size:32rpx">
						<template #right><text
								style="font-size:32rpx; margin-right:20px;background:#F8F6F7;color:#03A2AD;line-height:35px;"
								@click='sendCode()'>{{sendCodeFlag}}</text></template>
					</uni-easyinput>
				</div>
				<div><button class='phone-button' @click='saveAndView()'>保存并查看结果</button></div>
			</div>

		</div>
	</div>
</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: `/scaleTestResults/testResults/index?resultId=${this.resultId}&messageShare=1`
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.top-page {
		width: 90%;
		height: 100vh;
		/* background-image: url(/static/images/top-bg.png); */
		background: linear-gradient(180deg, #D8FFF2 0%, #46E2ED 42%, #BEFFE8 98%);
		padding-left: 5%;
		padding-right: 5%;
	}

	.page-success {
		color: #32d961;
		font-weight: 700;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 40px;
		padding-bottom: 20px;
	}

	.saveP {
		font-size: 18px;
		font-weight: 600;
	}

	.save-phone-cla {
		color: #6e6a6a;
		font-weight: 700;
		margin-top: 10px;
	}

	.verification-code {
		margin-top: 20px;
	}

	.verification-phone {
		/* background-color: #6e6a6a; */
		margin-top: 20px;
	}

	.phone-button {
		margin-top: 80rpx;
		background: linear-gradient(270deg, #069EBC 0%, #00D8E7 100%);
		box-shadow: inset 0rpx 0rpx 0rpx 0rpx rgba(47, 146, 255, 0.1936);
		border-radius: 73rpx 73rpx 73rpx 73rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 92rpx;
	}

	.verification-phone>>>.content-clear-icon {
		color: #57eded !important;
	}

	.verification-code>>>.content-clear-icon {
		color: #57eded !important;
	}

	uni-button:after {
		content: ' ';
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid transparent !important;
		transform: scale(0.5);
		transform-origin: 0 0;
		box-sizing: border-box;
		border-radius: 10px;
	}

	.page-connent {
		background-color: #ffffff;
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 10px;
		padding-right: 10px;
		border-radius: 10px;
		margin-top: 30px;
	}

	.verification-phone1>>>uni-view {
		height: 92rpx;
		background-color: #F8F6F7 !important;
		border: 0px;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.verification-code1>>>uni-view {
		font-size: 32rpx;
		height: 92rpx;
		background-color: #F8F6F7 !important;
		border: 0px;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.verification-code {
		margin-top: 23px;
	}

	.verification-phone {
		/* background-color: #6e6a6a; */
		margin-top: 26px;
	}

	.phone-button {
		margin-top: 40px;
		border-radius: 40px;
		border-color: transparent;
		background-color: #fff82a;
		margin-bottom: 30px;
	}

	.main_scale_njhd {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.main_scale_font_njhd {
		font-size: 52rpx;
		font-family: AlibabaPuHuiTi-Heavy, AlibabaPuHuiTi;
		font-weight: 900;
		color: #069EBC;
		line-height: 30px;
	}

	.main_xing_left {
		height: 60rpx;
		margin-right: 20rpx;
	}

	.main_xing_right {
		height: 60rpx;
		margin-left: 20px;
	}

	.phone_tip {
		font-size: 24rpx;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #656C74;
		line-height: 34rpx;
		text-align: center;
	}

	/deep/ .uni-easyinput__content-input {
		line-height: inherit;
	}

	/deep/ .uni-input-input {
		font-size: 32rpx;
	}
</style>