count-pass-app/pages/login/register.vue

<template>
	<view class="content">
		<view  class="logo">
			<image
				style="height:104rpx;width:104rpx"
				src="/static/logo.png"
				mode="aspectFit"
			/>
		</view>
		<view class="login-title">
			<span>{{$t('login.register')}}</span>
		</view>
		<!-- 账号密码登录 -->
		<view class="inp_box">
			<u-input type="text" :border="false" v-model="registerForm.phone" placeholder="请输入用户名" />
		</view>
		<!-- 账号密码登录 -->
		<view class="inp_box">
			<u-input type="text" :border="false" v-model="registerForm.displayName" placeholder="请输入显示名" />
		</view>
		<!-- 账号密码登录 -->
		<view class="inp_box">
			<u-input type="password" :border="false" v-model="registerForm.password" placeholder="请输入密码" />
		</view>

		<view class="inp_box">
			<u-input type="password" :border="false" v-model="registerForm.password2" placeholder="请输入确认密码" />
		</view>

		<u-button type="primary" shape="circle" @click="phoneLogin">{{$t('login.register')}}</u-button>
	</view>
</template>
<script>
	import {
		getRegTelCode,
		register
	} from '../../api/login'
	export default {
		data() {
			return {
				time: 0,
				timer: '',
				isGetCode: false,

				option: [{
					text: '',
					value: 1,
				}],
				registerForm: {
					phone: "",
					password:"",
					displayName: "",
					verificationCode: "",
					type: "",
					password2:'',
				},
				roleList: [{
						value: 0,
						text: this.$t("login.dealer")
					},
					{
						value: 1,
						text: this.$t("login.driver")
					}
				],
			}
		},
		onLoad(options) {
			this.registerForm.type = '3'
		},
		methods: {
			backLogin() {
				uni.navigateBack({
					delta: 1
				})
			},
			//获取验证码
			getCode() {
				let phone = /^1[3-9]\d{9}$/
				if (!this.registerForm.type) {
					uni.showToast({
						title: this.$t('login.displayNamePlaceholder'),
						icon: "none",
						duration: 2500,
					})
					return;
				}
				if (!this.registerForm.displayName) {
					uni.showToast({
						title: this.$t('login.displayNamePlaceholder'),
						icon: "none",
						duration: 2500,
					})
					return;
				}
				if (!this.registerForm.password) {
					uni.showToast({
						title: this.$t('login.passwordPlaceholder'),
						icon: "none",
						duration: 2500,
					})
					return;
				}
				if (!this.registerForm.phone) {
					uni.showToast({
						title: "请输入用户名",
						icon: "none",
						duration: 2500,
					})
					return;
				}
				// if (!phone.test(this.registerForm.phone)) {
					
				// 	uni.showToast({
				// 		title: this.$t('base.smsCode.phoneErrTip'),
				// 		icon: "none",
				// 		duration: 2500,
				// 	})
				// 	return;
				// }
				getRegTelCode(this.registerForm.phone).then(res => {
					if (res.statusCode === 200) {
						if(res.data && res.data.code==1){
							uni.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2500,
							})
							return;
						}
						this.isGetCode = true
						this.time = 60
						this.timer = setInterval(() => {
							this.time--
							if (this.time == 0) {
								clearInterval(this.timer)
							}
						}, 1000)
					}
				})

			},
			//注册并登录
			phoneLogin() {
				let phone = /^1[3-9]\d{9}$/
				if (this.registerForm.displayName == '') {
					uni.showToast({
						title: this.$t('login.displayNamePlaceholder'),
						icon: "none",
						duration: 2500,
					})
					return;
				}
				if (this.registerForm.password == '') {
					uni.showToast({
						title: this.$t('login.passwordPlaceholder'),
						icon: "none",
						duration: 2500,
					})
					return;
				}
				if (this.registerForm.phone == '') {
					uni.showToast({
						title: "请输入用户名",
						icon: "none",
						duration: 2500,
					})
					return;
				}
				// if (!phone.test(this.registerForm.phone)) {
				// 	uni.showToast({
				// 		title: this.$t('base.smsCode.phoneErrTip'),
				// 		icon: "none",
				// 		duration: 2500,
				// 	})
				// 	return;
				// }
				if (this.registerForm.password!=this.registerForm.password2) {
					uni.showToast({
						title: '两次密码不一样',
						icon: "none",
						duration: 2500,
					})
					return;
				}

				this.registerForm.username=this.registerForm.phone
				uni.showLoading({
					title: '注册中',
					mask: true
				})
				register(this.registerForm).then(res => {
					console.log(res);
					if (res.data == this.registerForm.phone) {
						uni.showToast({
							title: '注册成功，稍等跳转',
							icon: "none",
							mask:true,
							duration: 2000,
						})
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/login/login?username=${this.registerForm.phone}`
							})
						}, 2000)
					}
					uni.hideLoading()
					// this.registerForm.phone=''
					this.registerForm.password=''
					this.registerForm.password2=''
					this.registerForm.displayName=''
				}).finally(()=>{
					uni.hideLoading()
				})

			},
		}
	}
</script>
<style>
/* #ifndef APP-NVUE */
view {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}

page {
	box-sizing: border-box;
	padding: 0rpx 48rpx 80rpx;
	height: 100%;
}
/* #endif*/
</style>
<style lang="scss" scoped>
@import '../../common/css/login.scss';
.bgc{
	position: absolute;
    height: 77%;
    width: 160%;
    bottom: 0;
    left: -30%;
    z-index: -50;
    background-color: #4680F9;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
}

</style>