<template>
|
<el-dialog
|
v-model="loginDialogVisible"
|
width="500"
|
align-center
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
>
|
<div class="px-4">
|
<el-row justify="center">
|
<el-text class="text-2xl font-bold">{{ title }}</el-text>
|
</el-row>
|
<el-form v-if="loginType == 'mobile'" ref="accountForm" :model="form" :rules="rules" class="pt-6 pb-3">
|
<el-form-item prop="mobile">
|
<el-input v-model="form.mobile" placeholder="请输入手机号" />
|
</el-form-item>
|
<el-form-item prop="code" class="mb-2">
|
<el-input v-model="form.code" placeholder="请输入验证码">
|
<template #append>
|
<el-row style="width: 70px;justify-content: center;">
|
<el-button
|
v-if="countdown == 180"
|
style="color: var(--el-color-primary);"
|
class="cursor-p"
|
:loading="sendCodeLoading"
|
@click="sendCode()"
|
>
|
获取验证码
|
</el-button>
|
<el-text v-else>{{ countdown }}s</el-text>
|
</el-row>
|
</template>
|
</el-input>
|
</el-form-item>
|
<!-- <el-form-item prop="agreement" style="height: 30px;">
|
<el-checkbox v-model="form.agreement" label="同意xxx服务协议" size="large" />
|
</el-form-item> -->
|
|
<el-button
|
class="mt-3"
|
@click="submitLogin()"
|
:loading="loginLoading"
|
type="primary" size="large"
|
style="width: 100%;"
|
>
|
<el-text class="text-lg text-white">登录</el-text>
|
</el-button>
|
</el-form>
|
|
<el-row v-else-if="loginType == 'qrCode'" justify="center" class="mt-7">
|
<el-image style="width: 200px;" :src="$getImageUrl('/qrCode.png')"></el-image>
|
</el-row>
|
|
<el-form v-else-if="loginType == 'register'" ref="registerForm" :model="form" :rules="rules" class="pt-6 pb-3">
|
<el-form-item prop="name" class="mb-2">
|
<el-input v-model="form.name" placeholder="请输入姓名" />
|
</el-form-item>
|
<el-form-item prop="sex" style="height: 20px;">
|
<el-radio-group v-model="form.sex">
|
<el-radio :value="1">男</el-radio>
|
<el-radio :value="0">女</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item prop="idCardType">
|
<el-select v-model="form.idCardType" placeholder="证件类型">
|
<el-option
|
v-for="item in idCardTypeItems"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="idCard" :rules="[$rules.required('请输入证件号码'), form.idCardType == 1 ? $rules.idCard('请输入正确的身份证号'): '' ]">
|
<el-input v-model="form.idCard" placeholder="请输入证件号码" />
|
</el-form-item>
|
<el-form-item prop="mobile">
|
<el-input v-model="form.mobile" placeholder="请输入手机号" />
|
</el-form-item>
|
<el-form-item prop="code" class="mb-2">
|
<el-input v-model="form.code" placeholder="请输入验证码">
|
<template #append>
|
<el-row style="width: 70px;justify-content: center;">
|
<el-button
|
v-if="countdown == 180"
|
style="color: var(--el-color-primary);"
|
class="cursor-p"
|
:loading="sendCodeLoading"
|
@click="sendCode()"
|
>
|
获取验证码
|
</el-button>
|
<el-text v-else>{{ countdown }}s</el-text>
|
</el-row>
|
</template>
|
</el-input>
|
</el-form-item>
|
<!-- <el-form-item prop="agreement" style="height: 30px;">
|
<el-checkbox v-model="form.agreement" label="同意xxx服务协议" size="large" />
|
</el-form-item> -->
|
|
<el-button
|
class="mt-5"
|
:loading="registerLoading"
|
@click="submitRegister()"
|
type="primary" size="large"
|
style="width: 100%;"
|
>
|
<el-text class="text-lg text-white">注册</el-text>
|
</el-button>
|
</el-form>
|
|
<el-row class="mt-7" justify="center">
|
<el-button v-if="loginType!='register'" text type="primary" @click="changeLoginType('register')">注册账号</el-button>
|
<el-divider v-if="loginType!='register'" direction="vertical" class="m-0 mt-1 mx-4" style="height: 24px !important" />
|
<el-button v-if="loginType!='qrCode'" text type="primary" @click="changeLoginType('qrCode')">微信扫码登录</el-button>
|
<el-divider v-if="loginType=='register'" direction="vertical" class="m-0 mt-1 mx-4" style="height: 24px !important" />
|
<el-button v-if="loginType!='mobile'" text type="primary" @click="changeLoginType('mobile')">手机号登录</el-button>
|
</el-row>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { useLoginStore } from '@/stores/login.js'
|
import { useSessionStore } from '@/stores/session.js'
|
import { storeToRefs } from 'pinia';
|
import idCardTypeItems from '@/assets/json/idCardTypeItems.json'
|
import { tokenUtils } from '@/utils/axios.js';
|
export default {
|
components: {},
|
setup() {
|
const { loginDialogVisible } = storeToRefs(useLoginStore())
|
const { setUserInfo } = useSessionStore()
|
return { loginDialogVisible, setUserInfo }
|
},
|
data() {
|
return {
|
loginType: 'mobile', // mobile、qrCode
|
form: {
|
name: '',
|
sex: 1,
|
idCardType: 1,
|
idCard: '',
|
mobile: '',
|
code: '',
|
agreement: false
|
},
|
idCardTypeItems: idCardTypeItems,
|
rules: {
|
name: [ this.$rules.required('请输入姓名') ],
|
mobile: [ this.$rules.required('请输入手机号'), this.$rules.phone() ],
|
code: [ this.$rules.required('请填写验证码'), this.$rules.code() ],
|
agreement: [ this.$rules.checkbox('请阅读并勾选同意协议') ]
|
},
|
countdown: 180,
|
countdownInterval: null,
|
sendCodeLoading: false,
|
loginLoading: false,
|
registerLoading: false
|
}
|
},
|
computed: {
|
title() {
|
let obj = {
|
register: '注 册',
|
mobile: '手 机 号 登 录',
|
qrCode: '微 信 扫 码 登 录'
|
}
|
return obj[this.loginType]
|
}
|
},
|
created() {
|
|
},
|
unmounted() {
|
this.clearCountdownInterval()
|
},
|
watch: {
|
loginDialogVisible: function(val) {
|
if (!val) {
|
this.clearCountdownInterval()
|
}
|
}
|
},
|
methods: {
|
async sendCode() {
|
try {
|
let ref = null
|
let scene = 0
|
if (this.loginType == 'mobile') {
|
ref = this.$refs.accountForm
|
scene = 33
|
} else if (this.loginType == 'register') {
|
ref = this.$refs.registerForm
|
scene = 32
|
}
|
const validate = await ref.validateField('mobile')
|
if (validate) {
|
const data = {
|
captchaVerification: '',
|
mobile: this.form.mobile,
|
scene: scene,
|
}
|
this.sendCodeLoading = true
|
this.$axios.post('/system/auth/send-sms-code', data).then(res => {
|
if (res.data.code == 0) {
|
this.startCountdownInterval()
|
this.$message.success('已发送验证码，请注意查收')
|
} else {
|
this.$message.error(res.data.msg || '获取验证码失败')
|
}
|
}).finally(() => {
|
this.sendCodeLoading = false
|
})
|
}
|
} catch (error) {
|
console.log(error)
|
this.$message.error('请输入手机号码')
|
}
|
},
|
startCountdownInterval() {
|
this.clearCountdownInterval()
|
this.countdown--
|
this.countdownInterval = setInterval(() => {
|
if (this.countdown > 0) {
|
this.countdown--
|
} else {
|
this.countdown = 180
|
this.clearCountdownInterval()
|
}
|
}, 1000)
|
},
|
clearCountdownInterval() {
|
clearInterval(this.countdownInterval)
|
this.countdownInterval = null
|
},
|
async submitLogin() {
|
try {
|
await this.$refs.accountForm.validate()
|
this.loginLoading = true
|
const data = {
|
mobile: this.form.mobile,
|
code: this.form.code
|
}
|
this.$axios.post('/system/kw/examinee/login', data).then(res => {
|
if (res.data.code == 0) {
|
const resData = res.data.data || {}
|
tokenUtils.setTokens(resData.accessToken, resData.refreshToken)
|
this.getUserInfo()
|
this.$message.success('登录成功')
|
this.loginDialogVisible = false
|
} else {
|
this.$message.error(res.data.msg)
|
}
|
}).finally(() => {
|
this.loginLoading = false
|
})
|
} catch (error) {
|
console.log()
|
}
|
},
|
getUserInfo() {
|
this.$axios.get('/system/kw/examinee/profile').then(res => {
|
if (res.data.code == 0) {
|
const resData = res.data.data || {}
|
this.setUserInfo(resData)
|
} else {
|
this.$message.error(res.data.msg)
|
}
|
})
|
},
|
async submitRegister() {
|
try {
|
const validate = await this.$refs.registerForm.validate()
|
if (validate) {
|
const data = { ...this.form }
|
this.$axios.post('/system/kw/examinee/register', data).then(res => {
|
if (res.data.code == 0) {
|
const resData = res.data.data || {}
|
tokenUtils.setTokens(resData.accessToken, resData.refreshToken)
|
this.getUserInfo()
|
this.$message.success('注册成功')
|
this.loginDialogVisible = false
|
} else {
|
this.$message.error(res.data.msg)
|
}
|
})
|
}
|
} catch (error) {
|
console.log(error)
|
this.$message.error('请检查必填字段')
|
}
|
},
|
changeLoginType(type) {
|
this.loginType = type
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
</style>
|
