vue-insagent-app/pages/set/logoutVerificationCode.vue

<template>
	<view class="page">
		<!-- 头部吸顶区域 -->
		<u-sticky z-index="999" h5-nav-height="0">
			<view class="navbar dis a-c j-s ">
				<u-icon name="arrow-left" color="#333" size="40" @tap="back"></u-icon>
			</view>
		</u-sticky>
		<view class="content dis a-c f-c">
			<text class="title">请输入验证码</text>
			<text class="phone mt-1">验证码已发送至：+86 {{phone}}</text>
			<view class="code dis a-c j-s ">
				<u-input v-model="info.value" type="text" placeholder="请输入短信验证码" />
				<view class="verificationCode" @tap="getCheckNum" :class="codetime?'verificationCode1':''">
					{{!codetime?'获取验证码':codetime+' S'+'后重新获取'}}
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn dis a-c j-c " @click="confirmLogout">
				确定注销
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				info: {
					userId: "",
					value: "",
				},
				phone: "",
				codetime: 0, //验证码获取倒计时
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onShow() {

		},
		onLoad(options) {
			if (options) {
				this.info.userId = options.userId;
				this.phone = options.phone;
			}
		},
		methods: {
			...mapMutations(['emptyUserInfo']),
			async confirmLogout() {
				let res = await this.$http.get('/user/userLogout?userId=' + this.userInfo
					.sysUser.id + '&valiCode=2080')
				if (res.code == 200) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					this.emptyUserInfo();
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/login/login"
						})
						return true;
					}, 500);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			},
			// 获取验证码
			async getCheckNum() {
				uni.hideKeyboard();
				if (this.codetime > 0) return;
				// 验证手机号合法性
				if (!this.phone) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
				}
				if (!this.$base.phoneRegular.test(this.phone)) {
					return uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					});
				}
				// 请求服务器，发送验证码
				let res = await this.$http.get('/sendMsg', {
					phone: this.phone,
					type: "2"
				});
				// 请求失败处理
				if (res.code != 200) {
					return uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				} else {
					uni.showToast({
						title: "发送成功",
						icon: "none"
					});
				}
				// 发送成功，开启倒计时
				this.codetime = 60;
				let timer = setInterval(() => {
					this.codetime--;
					if (this.codetime < 1) {
						clearInterval(timer);
						this.codetime = 0;
					}
				}, 1000);
			},
			back() {
				uni.navigateBack(-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8FAFE;
	}

	.navbar {
		padding: 58px 15px 8px;
		box-sizing: border-box;
		position: relative;
		z-index: 9999;
		background-color: #F8FAFE;

		text {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}
	}

	.content {
		padding: 0 30rpx;
		box-sizing: border-box;

		.title {
			font-size: 42rpx;
			color: #333;
			font-weight: bold;
			margin-top: 75rpx;
		}

		.phone {
			font-size: 30rpx;
			color: #666;
		}

		.code {
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(218, 227, 244, 0.2);
			border-radius: 13rpx 13rpx 13rpx 13rpx;
			margin-top: 58rpx;

			.verificationCode {
				font-size: 30rpx;
				color: #0052FF;
			}

			.verificationCode1 {
				font-size: 30rpx;
				color: #B2B2B2;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 25rpx 33rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(218, 227, 244, 0.2);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.btn {
			width: 100%;
			padding: 15rpx;
			box-sizing: border-box;
			font-size: 33rpx;
			color: #fff;
			background: linear-gradient(90deg, #499DFF 0%, #0052FF 100%);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
</style>