You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
322 lines
7.6 KiB
322 lines
7.6 KiB
<template>
|
|
<view class="">
|
|
<navigation>Register</navigation>
|
|
<view class="login-body">
|
|
<view class="input-item flex">
|
|
<view class="login-sigh flex">
|
|
<view class="imgcon">
|
|
<image src="../../static/login/[email protected]" mode=""></image>
|
|
</view>
|
|
<span class="quhao">+{{areacode}}</span>
|
|
</view>
|
|
<input type="text" value="" placeholder="mobile number"
|
|
placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;" v-model="mobile"
|
|
@input="btnControl" />
|
|
</view>
|
|
<view class="input-item flex">
|
|
<view class="login-sigh login-sigh2 flex">
|
|
<view class="imgcon">
|
|
<image src="../../static/login/[email protected]" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<input class="input_pcod" value="" placeholder="Picture Code"
|
|
placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;" v-model="picCode" />
|
|
<view class="login-sigh3 flex">
|
|
<image :src="imgcodeUrl" mode="scaleToFill" class="img1"></image>
|
|
<image src="../../static/login/[email protected]" mode="" class="img2" @click="getPicCode()">
|
|
</image>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="input-item flex">
|
|
<view class="login-sigh login-sigh2 flex">
|
|
<view class="imgcon">
|
|
<image src="../../static/login/[email protected]" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<input value="" placeholder="Verification code"
|
|
placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;"
|
|
v-model="infoCode" />
|
|
<view class="wrap">
|
|
<u-toast ref="uToast"></u-toast>
|
|
<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"
|
|
start-text="OTP" change-text="xs" end-text="OTP"></u-verification-code>
|
|
<u-button @tap="getCode" style="color: #954DE3FF; border-radius: 4px;font-size: 15px;width: 20px; height: 24px;line-height: 40px;">{{tips}}</u-button>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="input-item flex">
|
|
<view class="login-sigh login-sigh2 flex">
|
|
<view class="imgcon">
|
|
<image src="../../static/login/[email protected]" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<input type="password" value="" placeholder="password"
|
|
placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;"
|
|
v-model="password" />
|
|
</view>
|
|
<view class="input-item flex">
|
|
<view class="login-sigh login-sigh2 flex">
|
|
<view class="imgcon">
|
|
<image src="../../static/login/[email protected]" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<input type="password" value="" placeholder="Confirm Password"
|
|
placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;"
|
|
v-model="password2" />
|
|
</view>
|
|
<view class="input-item flex">
|
|
<view class="login-sigh login-sigh2 flex">
|
|
<view class="imgcon">
|
|
<image src="../../static/login/[email protected]" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<input value="" placeholder="Invite code" placeholder-style="color: #BFC2CCFF;font-size:14px;"
|
|
v-model="inviteCode" />
|
|
</view>
|
|
<button class="login-btn" @click="regist()" :class="btnNum==1?'login-btnon':''"
|
|
:disabled="btnNum==1?false:true">
|
|
Register
|
|
</button>
|
|
<view class="login-re" @click="goLogin()">
|
|
Login
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import api from '@/utils/api'
|
|
import utils from '@/utils'
|
|
import md5 from 'js-md5'
|
|
import store from '@/store'
|
|
import cont from "@/components/navigation/navigation.vue"
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
tips: 'OTP',
|
|
|
|
seconds: 10,
|
|
mobile: '',
|
|
mark: 'sms_user_register',
|
|
countryCode: '',
|
|
password: '',
|
|
password2: '',
|
|
inviteCode: '',
|
|
infoCode: '',
|
|
picCode: '',
|
|
imgcodeUrl: '',
|
|
btnNum: 0,
|
|
rawData: '',
|
|
siteInfo: {},
|
|
areacode: ''
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
this.getPicCode();
|
|
this.areacode = uni.getStorageSync('siteInfo').areaCode;
|
|
},
|
|
methods: {
|
|
codeChange(text) {
|
|
this.tips = text;
|
|
},
|
|
getCode() {
|
|
if (this.picCode == '') {
|
|
uni.showToast({
|
|
title: 'The graphic verification code is empty',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
return;
|
|
}
|
|
if (this.mobile == '') {
|
|
uni.showToast({
|
|
title: 'Please input mobile phone number',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
return;
|
|
}
|
|
var a = /^[0-9]{9}$/;
|
|
if (!a.test(this.mobile)) {
|
|
uni.showToast({
|
|
title: 'Wrong format of mobile phone number',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
return;
|
|
}
|
|
if (this.$refs.uCode.canGetCode) {
|
|
// 模拟向后端请求验证码
|
|
uni.showLoading({
|
|
title: 'Getting captcha'
|
|
})
|
|
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
this.$refs.uCode.start();
|
|
}, 2000);
|
|
this.countryCode = uni.getStorageSync('siteInfo').countryCode
|
|
const post = api.sendSmsCode({
|
|
"mobile": this.mobile,
|
|
"mark": this.mark,
|
|
"countryCode": this.countryCode,
|
|
"code": this.picCode
|
|
})
|
|
post.then(res => {
|
|
var that = this;
|
|
uni.showToast({
|
|
title: res.errMsg,
|
|
icon: 'none',
|
|
duration: 2500
|
|
})
|
|
})
|
|
.catch(e => {
|
|
uni.showToast({
|
|
title: e,
|
|
icon: 'none',
|
|
duration: 2500
|
|
})
|
|
})
|
|
} else {
|
|
this.$u.toast('Send after the countdown');
|
|
}
|
|
|
|
},
|
|
|
|
|
|
btnControl() {
|
|
this.btnNum = 1;
|
|
if (this.mobile == '') {
|
|
this.btnNum = 0;
|
|
}
|
|
|
|
},
|
|
goLogin() {
|
|
uni.reLaunch({
|
|
url: '../login/index'
|
|
})
|
|
},
|
|
|
|
getPicCode() {
|
|
this.imgcodeUrl = "/start/api/home/imgCode?uuid=" + this.$u.guid(20);
|
|
console.log();
|
|
console.log(this.imgcodeUrl)
|
|
},
|
|
|
|
regist() {
|
|
if (this.mobile == '') {
|
|
uni.showToast({
|
|
title: 'Please input mobile phone number',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
return;
|
|
}
|
|
var a = /^[0-9]{4,14}$/;
|
|
if (!a.test(this.mobile)) {
|
|
uni.showToast({
|
|
title: 'Wrong format of mobile phone number',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
return;
|
|
}
|
|
var a = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,19}$/;
|
|
if (!a.test(this.password)) {
|
|
uni.showToast({
|
|
title: 'Incorrect password format,a password requires a combination of numbers and letters',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
return;
|
|
}
|
|
if (this.password.length < 6 || this.password.length > 20) {
|
|
uni.showToast({
|
|
title: 'The login password requires 6-20 digits',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
return;
|
|
}
|
|
|
|
if (this.inviteCode == '') {
|
|
uni.showToast({
|
|
title: 'inviteCode Code is empty',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
return;
|
|
}
|
|
if (this.password == '' || this.password2 == '') {
|
|
uni.showToast({
|
|
title: 'Password is empty',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
return;
|
|
}
|
|
|
|
|
|
if (this.password != this.password2) {
|
|
uni.showToast({
|
|
title: 'The two passwords are inconsistent',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
return;
|
|
}
|
|
|
|
uni.showLoading({
|
|
title: 'loading'
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const post = api.register({
|
|
"mobile": this.mobile,
|
|
'password': md5(this.password),
|
|
'inviteCode': this.inviteCode,
|
|
'code': this.infoCode,
|
|
})
|
|
post.then(res => {
|
|
uni.showToast({
|
|
title: res.errMsg,
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
setTimeout(function() {
|
|
uni.reLaunch({
|
|
url: '../login/index'
|
|
})
|
|
}, 1500)
|
|
|
|
})
|
|
.catch(e => {
|
|
uni.showToast({
|
|
title: e,
|
|
icon: 'none',
|
|
duration: 2500
|
|
})
|
|
})
|
|
|
|
|
|
}
|
|
|
|
},
|
|
goLogin() {
|
|
uni.navigateTo({
|
|
url: '../login/index',
|
|
})
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import './index.css';
|
|
</style>
|
|
|