336 lines
9.1 KiB
Vue
336 lines
9.1 KiB
Vue
<template>
|
|
<view class="normal-login-container">
|
|
<view class="logo-content align-center justify-center flex">
|
|
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
|
|
</image>
|
|
<text class="title" v-if="sysType==1">仲裁系统注册</text>
|
|
<text class="title" v-if="sysType==2">调解系统注册</text>
|
|
</view>
|
|
<view class="login-form-content">
|
|
<view class="input-item flex align-center" style="width: 60%;margin: 0px;">
|
|
<!-- <view class="iconfont icon-user icon"></view> -->
|
|
<input v-model="registerForm.phone" class="input" type="number" placeholder="请输入手机号" maxlength="30" />
|
|
<view class="login-code">
|
|
<button class="login-code-img" type="primary" :disabled="codeDisabled"
|
|
@tap="getCodeNumber(registerForm.phone)">{{codeText}}</button>
|
|
</view>
|
|
</view>
|
|
<view class="input-item flex align-center">
|
|
<!-- <view class="iconfont icon-user icon"></view> -->
|
|
<input v-model="registerForm.verifyCode" class="input" type="number" placeholder="请输入手机验证码"
|
|
maxlength="30" />
|
|
</view>
|
|
<view class="input-item flex align-center">
|
|
<uni-data-select
|
|
style="text-align: left;width: 200px;"
|
|
v-model="registerForm.idType"
|
|
:localdata="certificate"
|
|
@change="certificateValue"
|
|
></uni-data-select>
|
|
</view>
|
|
<view class="input-item flex align-center">
|
|
<uni-data-select
|
|
style="text-align: left;width: 200px;"
|
|
v-model="registerForm.nationality"
|
|
:localdata="nationality"
|
|
></uni-data-select>
|
|
</view>
|
|
<view class="input-item flex align-center">
|
|
<!-- <view class="iconfont icon-user icon"></view> -->
|
|
<input v-model="registerForm.identityNo" class="input" type="text" :placeholder="registerForm.idType==0?'请输入身份证号':'请输入护照'"
|
|
maxlength="30" />
|
|
</view>
|
|
<view class="input-item flex align-center">
|
|
<!-- <view class="iconfont icon-user icon"></view> -->
|
|
<input v-model="registerForm.email" class="input" type="text" placeholder="请输入邮箱" maxlength="30" />
|
|
</view>
|
|
<view class="input-item flex align-center">
|
|
<!-- <view class="iconfont icon-user icon"></view> -->
|
|
<input v-model="registerForm.name" class="input" type="text" placeholder="请输入用户名" maxlength="30" />
|
|
</view>
|
|
<view class="input-item flex align-center">
|
|
<!-- <view class="iconfont icon-user icon"></view> -->
|
|
<input v-model="registerForm.userName" class="input" type="text" placeholder="请输入账号" maxlength="30" />
|
|
</view>
|
|
<view class="input-item flex align-center">
|
|
<!-- <view class="iconfont icon-password icon"></view> -->
|
|
<input v-model="registerForm.passWord" type="password" class="input" placeholder="请输入密码"
|
|
maxlength="20" />
|
|
</view>
|
|
<view class="input-item flex align-center">
|
|
<!-- <view class="iconfont icon-password icon"></view> -->
|
|
<input v-model="registerForm.confirmPassword" type="password" class="input" placeholder="请输入重复密码"
|
|
maxlength="20" />
|
|
</view>
|
|
<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
|
|
<!-- <view class="iconfont icon-code icon"></view> -->
|
|
<input v-model="registerForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
|
|
<view class="login-code">
|
|
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
|
|
</view>
|
|
</view>
|
|
<view class="action-btn">
|
|
<button @click="handleRegister()" class="register-btn cu-btn block bg-blue lg round">注册</button>
|
|
</view>
|
|
</view>
|
|
<view class="xieyi text-center">
|
|
<text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getCodeImg,
|
|
register,
|
|
sendCode,
|
|
wxregister
|
|
} from '@/api/login'
|
|
import constant from '../utils/constant'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
codeUrl: "",
|
|
captchaEnabled: true,
|
|
globalConfig: getApp().globalData.config,
|
|
codeText: "发送验证码",
|
|
codeDisabled: false,
|
|
registerForm: {
|
|
userName: "",
|
|
passWord: "",
|
|
confirmPassword: "",
|
|
code: "",
|
|
uuid: '',
|
|
name: '',
|
|
identityNo: "",
|
|
id: "",
|
|
idType:0,
|
|
nationality:0
|
|
},
|
|
sysType:null,
|
|
certificate: [
|
|
{ value: 0, text: "身份证" },
|
|
{ value: 1, text: "护照" },
|
|
],
|
|
nationality: [
|
|
{ value: 0, text: "国内" },
|
|
{ value: 1, text: "国外" },
|
|
],
|
|
passportVal:{}
|
|
}
|
|
},
|
|
created() {
|
|
this.getCode()
|
|
},
|
|
onLoad(option) {
|
|
this.sysType = uni.getStorageSync('sysType');
|
|
// this.passportVal = option;
|
|
if(option.valus==1){
|
|
this.registerForm.idType =1
|
|
this.registerForm.nationality =1
|
|
}else{
|
|
let {
|
|
params
|
|
} = option
|
|
// this.improvedetail = JSON.parse(improvedetail)
|
|
let paramsObj = JSON.parse(params);
|
|
this.registerForm.name = paramsObj.nickName;
|
|
this.registerForm.identityNo = paramsObj.idCard
|
|
this.registerForm.id = paramsObj.id
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
// 获取手机验证码
|
|
getCodeNumber(data) {
|
|
sendCode({
|
|
phone: data
|
|
}).then(res => {
|
|
uni.showModal({
|
|
title: "系统提示",
|
|
content: res.msg,
|
|
})
|
|
if (res.code != 200) {
|
|
return
|
|
} else {
|
|
let time = 60;
|
|
let timer = setInterval(() => {
|
|
time--;
|
|
this.codeDisabled = true;
|
|
this.codeText = time + 's重试'
|
|
if (time == 0) {
|
|
clearInterval(timer)
|
|
this.codeText = '发送验证码'
|
|
this.codeDisabled = false;
|
|
}
|
|
}, 1000)
|
|
}
|
|
|
|
})
|
|
},
|
|
// 用户登录
|
|
handleUserLogin() {
|
|
this.$tab.navigateTo(`/pages/login`)
|
|
},
|
|
// 获取图形验证码
|
|
getCode() {
|
|
getCodeImg().then(res => {
|
|
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
|
if (this.captchaEnabled) {
|
|
this.codeUrl = 'data:image/gif;base64,' + res.img
|
|
this.registerForm.uuid = res.uuid
|
|
}
|
|
})
|
|
},
|
|
// 注册方法
|
|
async handleRegister() {
|
|
if (this.registerForm.userName === "") {
|
|
this.$modal.msgError("请输入您的账号")
|
|
} else if (this.registerForm.passWord === "") {
|
|
this.$modal.msgError("请输入您的密码")
|
|
} else if (this.registerForm.confirmPassword === "") {
|
|
this.$modal.msgError("请再次输入您的密码")
|
|
} else if (this.registerForm.passWord !== this.registerForm.confirmPassword) {
|
|
this.$modal.msgError("两次输入的密码不一致")
|
|
} else if (this.registerForm.code === "" && this.captchaEnabled) {
|
|
this.$modal.msgError("请输入验证码")
|
|
} else if (this.registerForm.idCard === "") {
|
|
this.$modal.msgError("请输入身份证号码")
|
|
} else if (this.registerForm.phone === "") {
|
|
this.$modal.msgError("请输入手机号")
|
|
} else if (this.registerForm.email === "") {
|
|
this.$modal.msgError("请输入邮箱")
|
|
} else {
|
|
this.$modal.loading("注册中，请耐心等待...")
|
|
this.register()
|
|
}
|
|
},
|
|
// 用户注册
|
|
async register() {
|
|
wxregister(this.registerForm).then(res => {
|
|
this.$modal.closeLoading()
|
|
uni.showModal({
|
|
title: "系统提示",
|
|
content: "恭喜你，您的账号 " + this.registerForm.userName + " 注册成功！",
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
uni.redirectTo({
|
|
url: `/pages/login`
|
|
});
|
|
}
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
if (this.captchaEnabled) {
|
|
this.getCode()
|
|
}
|
|
})
|
|
},
|
|
// 注册成功后，处理函数
|
|
registerSuccess(result) {
|
|
// 设置用户信息
|
|
this.$store.dispatch('GetInfo').then(res => {
|
|
this.$tab.reLaunch('/pages/index')
|
|
})
|
|
},
|
|
certificateValue(e){
|
|
this.registerForm.idType = e
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #ffffff;
|
|
}
|
|
::v-deep .uni-select[data-v-6b64008e]{
|
|
border: none;
|
|
}
|
|
::v-deep .uni-icons[data-v-a2e81f6e]{
|
|
display: none;
|
|
}
|
|
.uni-icons{
|
|
display: none;
|
|
}
|
|
// ::v-deep .uni-select{
|
|
// border: none;
|
|
// width: 200%;
|
|
// }
|
|
.normal-login-container {
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
|
|
.logo-content {
|
|
width: 100%;
|
|
font-size: 21px;
|
|
text-align: center;
|
|
padding-top: 15%;
|
|
|
|
image {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.title {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.login-form-content {
|
|
text-align: center;
|
|
margin: 20px auto;
|
|
margin-top: 15%;
|
|
width: 80%;
|
|
|
|
.input-item {
|
|
margin: 20px auto;
|
|
background-color: #f5f6f7;
|
|
height: 45px;
|
|
border-radius: 20px;
|
|
|
|
.icon {
|
|
font-size: 38rpx;
|
|
margin-left: 10px;
|
|
color: #999;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
}
|
|
|
|
.register-btn {
|
|
margin-top: 40px;
|
|
height: 45px;
|
|
}
|
|
|
|
.xieyi {
|
|
color: #333;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.login-code {
|
|
height: 38px;
|
|
float: right;
|
|
|
|
.login-code-img {
|
|
height: 38px;
|
|
position: absolute;
|
|
margin-left: 10px;
|
|
width: 200rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.mini-btn {
|
|
height: 38px;
|
|
}
|
|
}
|
|
}
|
|
</style> |