<template>
<div class="login-container flex-center">
<div class="login-logo flex-y-center">
<img class="sub padding-r16" src="@/assets/icons/lan.png">
<svg-icon icon-class="logo" style="font-size:140px;margin-right:15px" />
</div>
<div class="form-box flex-y-center">
<el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" auto-complete="on" label-position="left">
<div class="login-type">
<div class="login-type-text is-active">注册账号</div>
<img class="login-lang" src="@/assets/icons/icon_en1.png">
</div>
<div class="login-input">
<el-form-item prop="phone">
<el-input
v-model="loginForm.phone"
placeholder="请输入手机号码"
>
<template slot="prepend">
<div class="login-input-img flex-y-center">
<i class="iconfont icon-icon_ip" />
<el-dropdown class="area-code" @command="handleCommand">
<span class="area-number">+{{ areaCode }}</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="item in areaList"
:key="item"
:command="item"
>{{ item }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
placeholder="8~16位密码(数字+字母)"
>
<template slot="prepend">
<div class="login-input-img flex-y-center">
<i class="iconfont icon-icon_yanzheng" />
</div>
</template>
</el-input>
</el-form-item>
<el-form-item prop="cfpassword">
<el-input
v-model="loginForm.cfpassword"
type="password"
placeholder="请再次输入您的密码"
>
<template slot="prepend">
<div class="login-input-img flex-y-center">
<i class="iconfont icon-icon_yanzheng" />
</div>
</template>
</el-input>
</el-form-item>
<el-form-item id="code" prop="validCode">
<div class="flex-y-center">
<el-input
v-model="loginForm.validCode"
placeholder="验证码"
style="width: 250px"
>
<template slot="prepend">
<div class="login-input-img flex-y-center">
<i class="iconfont icon-icon_yanzheng" />
</div>
</template>
</el-input>
<NetEaseButton class="login-yan1" :can-click="!showTime" :text="!showTime ? '获取验证码' : `${times}秒后重新发送`" :formVali="smsFormVali" :success="getValidCode" />
</div>
</el-form-item>
</div>
<div class="login-checked">
<el-checkbox v-model="loginForm.checked">注册即代表您已阅读且同意</el-checkbox>
<span @click="dialogVisible = true">《立信签服务协议》</span>
<span @click="dialogVisibleUser = true">《用户隐私政策》</span>
</div>
<el-button :loading="loading" type="primary" class="login-btn" @click.native.prevent="handleRegister">注册</el-button>
<div class="flex-y-center login-reg">
如有账号？
<router-link to="/login">立即登录</router-link>
</div>
</el-form>
</div>
<div class="bottom">
<div class="flex-center">
友情链接：
<a target="_blank" href="https://www.cfca.com.cn/">CFCA中国金融认证中心</a>
</div>
<div class="flex-center padding-t16">Copyright © 2021 CFCA版权所有.</div>
</div>
<LXQService :show="dialogVisible" @close="closeDialog('dialogVisible')" />
<UserPrivacyPolicy :show="dialogVisibleUser" @close="closeDialog('dialogVisibleUser')" />
</div>
</template>
<script>
import { validPhone, validPassword } from '@/utils/validate'
import { systemInfo, checkPhone, sendMsg, register } from '@/api/login'
import { Message } from 'element-ui'
import { getTenantId, setName, getName } from '@/utils/auth'
import { LXQService, UserPrivacyPolicy } from '@/components/Agreement'
import { message } from '@/utils'
import NetEaseButton from '../login/netEaseButton.vue'
export default {
name: 'Login',
components: {
LXQService,
UserPrivacyPolicy,
NetEaseButton
},
data() {
const validatePhone = (rule, value, callback) => {
if (value.trim().length === 0) {
callback(new Error('请输入手机号码'))
} else if (!validPhone(value)) {
callback(new Error('手机号格式不正确'))
} else {
callback()
}
}
const validPwd = (rule, value, callback) => {
if (!validPassword(value)) {
callback(new Error('密码为8~16位数字和字母'))
} else {
callback()
}
}
const validateCode = (rule, value, callback) => {
const str = value.replace(/\s*/g, '')
if (str.length === 0) {
callback(new Error('验证码不能为空'))
} else {
callback()
}
}
const validCFPwd = (rule, value, callback) => {
if (!validPassword(value)) {
callback(new Error('密码为8~16位数字和字母'))
} else if (this.loginForm.password !== value) {
callback('两次输入的密码不一致')
} else {
callback()
}
}
return {
loginForm: {
phone: '',
password: '',
validCode: '',
cfpassword: '',
checked: false
},
times: 60,
showTime: false,
loading: false,
areaList: ['86', '852', '66'],
areaCode: '86',
smsCodeId: 0,
dialogVisible: false,
dialogVisibleUser: false,
rules: {
phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
password: [{ required: true, trigger: 'blur', validator: validPwd }],
validCode: [{ required: true, trigger: 'blur', validator: validateCode }],
cfpassword: [{ required: true, trigger: 'blur', validator: validCFPwd }]
}
}
},
mounted() {
},
methods: {
smsFormVali(){
let result = false
this.$refs.loginForm.validateField(['phone'],(vali) => {
result = !vali
})
return result
},
async getValidCode(validData, suc, err) {
if (this.loginForm.phone === '') {
message('请输入手机号码', 'error')
return
}
if (this.showTime) return
const data = {
areaCode: this.areaCode,
phone: this.loginForm.phone,
tenantId: this.$store.getters.tenantId
}
this.$store.commit('user/SET_CODE', validData.validate)
this.$store.commit('user/SET_KEY', 'netesae_validate')
const res = await sendMsg(data)
console.log(res)
if (res.success) {
suc()
this.smsCodeId = res.data.id
this.showTime = true
this.timer = setInterval(() => {
this.times--
console.log(this.times)
if (this.times === 0) {
console.log('清除定时器')
this.showTime = false
this.times = 60
clearInterval(this.timer)
}
}, 1000)
} else {
clearInterval(this.timer)
this.showTime = false
err()
return
}
},
async handleRegister() {
if (!this.loginForm.checked) {
Message({ message: '请同意注册协议', type: 'error' })
return
}
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
const data = {
areaCode: this.areaCode,
phone: this.loginForm.phone,
tenantId: this.$store.getters.tenantId
}
checkPhone(data).then(res => {
if (res.success) {
data.password = this.loginForm.password
data.smsCodeId = this.smsCodeId
data.validCode = this.loginForm.validCode
register(data).then(regRes => {
console.log('注册返回解雇', regRes)
if (regRes.success) {
clearInterval(this.timer)
Message({ message: '注册成功', type: 'success', duration: 1500 })
setTimeout(() => {
this.$router.replace('/login')
}, 1500)
}
})
}
this.loading = false
}).catch(() => {
this.loading = false
})
} else return
})
},
handleCommand(command) {
this.areaCode = command
},
closeDialog(name) {
this[name] = false
}
}
}
</script>
<style lang="scss" scoped>
.login-container {
width: 100%;
min-height: 750px;
height: 100vh;
position: relative;
background: url(../../assets/icons/bg01.png) no-repeat;
background-size: 100% 100%;
.login-bg {
width: 100%;
height: 100vh;
object-fit: cover;
}
.login-form {
width: 392px;
height: 495px;
overflow: hidden;
padding: 20px 27px;
background-color: white;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.34);
border-radius: 14px;
}
.form-box {
width: 1100px;
height: 525px;
background: url(../../assets/icons/bg02.png) no-repeat;
background-size: 600px;
background-position: -10px 60px;
justify-content: flex-end;
}
.login-type {
color: #333333;
display: flex;
font-size: 15px;
font-weight: 500;
cursor: pointer;
align-items: flex-end;
padding-bottom: 29px;
.login-type-text {
margin-right: 7px;
&.is-active {
font-size: 20px;
}
}
.login-lang {
width: 18px;
height: 18px;
}
}
.login-input {
height: 295px;
}
.el-form-item {
// margin-bottom: 14px;
}
.login-input-img {
width: 62px;
position: relative;
justify-content: center;
.iconfont {
font-size: 20px;
}
&::after {
content: '';
display: block;
width: 1px;
height: 15px;
background-color: #8AB7EA;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
&::before {
content: '';
width: 5px;
height: 50px;
border-radius: 7px 0 0 7px;
background-color: #4A89FB;
position: absolute;
top: -14px;
left: 0;
bottom: 0;
}
.area-code {
position: absolute;
left: 70px;
top: 50%;
transform: translateY(-50%);
}
}
.login-yan, .login-yan1 {
width: 95px;
height: 50px;
border-radius: 7px;
margin-left: 7px;
cursor: pointer;
box-shadow: 0px 1px 6px 0px rgba(7,20,60,0.13);
}
.login-yan1 {
line-height: 50px;
color: white;
text-align: center;
font-size: 14px;
background-color: #4A89FB;
box-shadow: 0px 1px 6px 0px rgba(7,20,60,0.13);
}
}
.login-btn {
width: 100%;
height: 45px;
border: 0;
border-radius: 7px;
background: linear-gradient(90deg, #70B8FF 0%, #4A89FB 100%);
box-shadow: 0px 1px 6px 0px rgba(7,20,60,0.13);
}
.login-reg {
font-size: 10px;
color: #666;
padding-top: 7px;
justify-content: flex-end;
a {
color: #3874EF;
}
}
.area-number {
font-size: 12px;
cursor: pointer;
}
.login-checked {
font-size: 10px;
padding-bottom: 12px;
span {
color: #409EFF;
cursor: pointer;
}
}
::v-deep {
// .el-form-item__error {
// left: auto;
// right: 5px;
// top: 31%;
// }
// #code .el-form-item__error {
// right: 106px;
// }
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #606266;
}
.el-checkbox__label {
font-size: 10px;
}
.el-input {
height: 50px;
border-radius: 7px;
box-shadow: 0px 1px 6px 0px rgba(7,20,60,0.13);
input {
border: 0px;
padding: 12px 5px 12px 15px;
height: 50px;
}
}
.el-form-item:first-child .el-input {
input {
padding-left: 40px;
}
}
.el-input-group__append, .el-input-group__prepend {
background: white;
border: 0;
padding: 0;
img {
width: 21px;
height: 23px;
}
}
}
// .sub {
// width: 300px;
// object-fit: contain;
// position: absolute;
// top: 20px;
// left: 20px;
// }
.login-logo {
position: absolute;
top: 20px;
left: 20px;
height: 50px;
img{
object-fit: contain;
}
.sub {
width: 300px;
margin-left: 16px;
}
}
.bottom {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #333;
a {
color: #3874EF;
}
}
</style>
