dou_fire/pages/auth/registered.vue

<template>
	<view class="registered-content">
		<view class="title">你好，欢迎使用抖火法律</view>
		<view class="submit-title">请填信息，请设置8位以上密码并包含大小写</view>
		<view class="from">
			<view class="from-inpus from-input-phoen">
				<label>+86</label>
				<input type="number" v-model="username" placeholder="输入手机号码">
			</view>
			<view class="from-inpus">
				<label>登录密码</label>
				<input type="safe-password" password v-model="password" placeholder="设置登录密码">
			</view>
			<view class="from-inpus">
				<label>确认密码</label>
				<input type="safe-password" password v-model="confirmation" placeholder="请确认登录密码">
			</view>
			<view class="from-inpus from-input-code">
				<label>验证码</label>
				<input type="number" v-model="code" maxlength="4" placeholder="短信验证码">
				<button :disabled="username.length < 11 || getSms" @click="getCode">{{sendCode}}</button>
			</view>
		</view>
		<view class="button">
			<button @click="onRegistered()">注册并登录</button>
		</view>
		<!-- 显示图形验证码 -->
		<u-popup :show="captchaShow" mode="center" :round="10" closeable @close="captchaShow = false, captcha = ''">
			<view class="captcha-lay">
				<view class="captcha-title">图形验证</view>
				<view class="captcha-img">
					<image :src="captchaImg" mode="widthFix" @click="getCode()"></image>
				</view>
				<view class="captcha-input">
					<input type="text" placeholder="请输入验证码" v-model="captcha" maxlength="10">
				</view>
				<button class="captcha-btn" @click="getPhoneCode">验证</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var outTime;
	import { register, captcha, verifyCaptcha } from '@/apis/interfaces/auth.js'
	export default {
		data() {
			return {
				username	: '',
				password	: '',
				confirmation: '',
				code		: '',
				getSms		: false,
				sendCode	: '获取验证码',
				captcha		: '',
				captchaImg	: '',
				captchaKey	: '',
				captchaShow	: false
			};
		},
		methods: {
			// 提交注册信息
			onRegistered(){
				uni.showLoading({
					title: '提交中...',
					mask : true
				})
				register({
					username				: this.username,
					password				: this.password,
					password_confirmation	: this.confirmation,
					code					: this.code
				}).then(res => {
					// 重置验证码与计时器
					this.getSms   = false;
					this.sendCode = '获取验证码';
					clearInterval(outTime);
					// 存储登录凭证
					this.$store.commit('setToken', res.token_type + ' ' + res.access_token);
					try{
						this.$Router.back(2)
					} catch (err){
						this.$Router.replaceAll({name: 'Index'})
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 弹出图形验证码
			getCode(){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				captcha().then(res => {
					let { img, key } = res
					this.captchaImg	 = img
					this.captchaKey	 = key
					this.captchaShow = true
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 获取验证码
			getPhoneCode() {
				uni.showLoading({
					title	: '加载中...',
					mask	:true
				})
				let smsTime = 60;
				verifyCaptcha({
					type		: 'register',
					mobileNo	: this.username,
					captcha		: this.captcha,
					captcha_key	: this.captchaKey
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
					this.captchaShow	= false;
					this.captcha		= '';
					this.getSms   		= true;
					this.sendCode 		= smsTime + 's后重新获取';
					outTime = setInterval(() => {
						if (smsTime <= 1) {
							this.getSms   = false;
							this.sendCode = '重新获取';
							clearInterval(outTime);
							return
						}
						this.sendCode = smsTime + 's后重新获取';
						smsTime -= 1;
					}, 1000);
				}).catch((err) => {
					uni.showToast({
						title: err.message,
						icon: "none",
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	// 图形验证码
	.captcha-lay{
		padding: 30rpx;
		width: 70vw;
		box-sizing: border-box;
		.captcha-title{
			text-align: center;
			font-size: 35rpx;
			font-weight: bold;
			line-height: 90rpx;
		}
		.captcha-img{
			text-align: center;
			padding-bottom: 30rpx;
			image{
				width: 300rpx;
			}
		}
		.captcha-input{
			input{
				height: 100rpx;
				border:solid 1rpx #ddd;
				text-align: center;
				line-height: 98rpx;
				font-size: 34rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-radius: $radius-lg;
				background: transparent;
			}
		}
		.captcha-btn{
			margin-top: 30rpx;
			background: $main-color;
			color: white;
			font-weight: normal;
			font-size: 34rpx;
			border-radius: $radius-lg;
			height: 90rpx;
			line-height: 90rpx;
			&::after{
				border: none;
			}
		}
	}
	// 注册
	.registered-content{
		padding: 50rpx;
		.title{
			padding-top: 3vh;
			padding-bottom: 10rpx;
			font-weight: bold;
			font-size: 44rpx;
		}
		.submit-title{
			font-size: 30rpx;
			color: gray;
			line-height: 40rpx;
		}
		// 注册单
		.from{
			margin-top: 80rpx;
		}
		.from-inpus{
			@extend .border-solid;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			justify-content: space-between;
			label{
				width: 170rpx;
				line-height: 100rpx;
				font-size: 32rpx;
			}
			input{
				width: calc(100% - 200rpx);
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
			}
		}
		.from-input-phoen{
			label{
				line-height: 60rpx;
				height: 60rpx;
				border-right: solid 1rpx $border-color;
			}
		}
		.from-input-code{
			button{
				font-size: 32rpx;
				width: 230rpx;
				padding: 0;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 0;
				margin: 0;
				border: none;
				background: transparent;
				color: $main-color;
				&::after{
					display: none;
				}
				&[disabled]{
					opacity: .5;
				}
			}
			input{
				width: calc(100% - 460rpx);
			}
		}
		// 按钮
		.button{
			padding-top: 50rpx;
			button{
				background: $main-color;
				border-radius: $radius-lg;
				height: 100rpx;
				line-height: 100rpx;
				color: white;
				font-size: 38rpx;
				&::after{
					display: none;
				}
				&[disabled]{
					opacity: .5;
				}
			}
		}
	}
</style>