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

<template>
	<view class="content">
		<view  class="logo">
			<image
				style="height:104rpx;width:104rpx"
				src="/static/czzn-img/login/logo.jpg"
				mode="aspectFit"
			/>
			<view class="app-name">{{$t('login.e')}}</view>
		</view>
		<view class="login-title">
			<span>{{$t('login.register')}}</span>
		</view>
		<!-- 公司编号 -->
		<view class="inp_box">
			<input type="text" v-model="registerForm.code" :placeholder="this.$t('login.codePlaceholder')" @blur="getUrl" />
		</view>
		<!-- 名称 -->
		<view class="inp_box">
			<input type="text" v-model="registerForm.displayName" :placeholder="this.$t('login.displayNamePlaceholder')" />
		</view>
		<!-- 手机号 -->
		<view class="inp_box">
			<input type="text" maxlength="11" @input="phoneInput" v-model="registerForm.phone" :placeholder="this.$t('login.phonePlaceholder')" />
		</view>
		<!-- 密码 -->
		<view class="inp_box">
			<input type="text" v-model="registerForm.password" :placeholder="this.$t('login.passwordPlaceholder')" />
		</view>
		<!-- 验证码
		<view class="inp_box">
			<input v-model="registerForm.verificationCode"
				:placeholder="this.$t('login.verifyCodePlaceholder')" />
			<button :class="time!=0?'load-reget':''" @click="getCode" :disabled='time!=0'
				class="get-code-btn">{{isGetCode?$t("login.reGetCode"):$t("login.getCode")}}{{time?`(${time}s)`:''}}</button>
		</view> -->
		<view class="btn-wrap">

			<button @click="phoneLogin" :class="urlFlag ? 'bind-btn' : 'btn-disabled'" :disabled="!urlFlag">{{$t('login.register')}}</button>
		</view>
	</view>
</template>
<script>
	import {
		getRegTelCode,
		register,
		getUrlByCode,
		bindNameCode
	} from '../../api/login'
	export default {
		data() {
			return {
				serverStatus:'',
				agree: [],
				time: 0,
				timer: '',
				isGetCode: false,
				option: [{
					text: '',
					value: 1,
				}],
				registerForm: {
					code:"",
					phone: "",
					password:"",
					displayName: "",
					verificationCode: "",
					type: "",
				},
				urlFlag:false,
				roleList: [{
						value: 0,
						text: this.$t("login.dealer")
					},
					{
						value: 1,
						text: this.$t("login.driver")
					}
				]
			}
		},
		onLoad(options) {
			this.registerForm.type = options.type
			this.serverStatus=uni.getStorageSync('serverStatus');
		},
		methods: {
			//手机号输入
			phoneInput(){
				if(this.registerForm.phone.length >11){
					uni.showToast({
						title: this.$t('base.smsCode.phoneTooLong'),
						icon: 'none'
					})
				}
			},
			//获取请求地址
			getUrl(){
				if (this.registerForm.code == '') {
					uni.showToast({
						title: this.$t('login.codePlaceholder'),
						icon: "none",
						duration: 2500,
					})
				}else{
					getUrlByCode(this.registerForm.code).then(r=>{
						if (r.statusCode === 200 && r.data.code === 0) {
							let data = r.data.data
							uni.setStorageSync('serverAddress', data.requestUrl);
							uni.setStorageSync('serverPrefix', data.methodPrefix);
							this.urlFlag = true
						}else{
							uni.showToast({
								title: r.data.msg,
								icon: "none",
								duration: 2500,
							})
						}
					})
				}
			},
			backLogin() {
				uni.navigateBack({
					delta: 1
				})
			},
			//获取验证码
			getCode() {
				let phone = /^\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: this.$t('login.phonePlaceholder'),
						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 = /^\d{9}$/
				if (this.registerForm.code == '' || !this.urlFlag) {
					uni.showToast({
						title: this.$t('login.codePlaceholder'),
						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: this.$t('login.phonePlaceholder'),
						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.verificationCode == '') {
				// 	uni.showToast({
				// 		title: this.$t('login.verifyCodePlaceholder'),
				// 		icon: "none",
				// 		duration: 2500,
				// 	})
				// 	return;
				// }
				register(this.registerForm).then(res => {
					if (res.statusCode == 200 && res.data.code==0) {
						let data = {
						username: this.registerForm.phone,
						companyCode: this.registerForm.code
					}
					bindNameCode(data).then(res=>{
						if (res.statusCode === 200 && res.data.data.code === 0) {
							uni.showToast({
							title: '注册成功',
							icon: "none",
							duration: 2000,
						})
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/login/login?username=${this.registerForm.phone}`
							})
						}, 2000)
						}else{
							this.canLogin = false
							uni.showToast({
								title: res.data.data.msg,
								icon: "none",
								duration: 2500,
							})
						}
					})
						
					}
				})

			},
		}
	}
</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>