| | |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="agreement" style="height: 30px;"> |
| | | <!-- <el-form-item prop="agreement" style="height: 30px;"> |
| | | <el-checkbox v-model="form.agreement" label="同意xxx服务协议" size="large" /> |
| | | </el-form-item> |
| | | </el-form-item> --> |
| | | |
| | | <el-button class="mt-1" @click="submitLogin()" :loading="loginLoading" type="primary" size="large" style="width: 100%;"> |
| | | <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-radio :value="0">女</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item prop="idCard"> |
| | | <el-input v-model="form.idCard" placeholder="请输入身份证号" /> |
| | | <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="请输入手机号" /> |
| | |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="agreement" style="height: 30px;"> |
| | | <!-- <el-form-item prop="agreement" style="height: 30px;"> |
| | | <el-checkbox v-model="form.agreement" label="同意xxx服务协议" size="large" /> |
| | | </el-form-item> |
| | | </el-form-item> --> |
| | | |
| | | <el-button class="mt-1" @click="submitRegister()" type="primary" size="large" style="width: 100%;"> |
| | | <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-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> |
| | |
| | | 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() { |
| | |
| | | form: { |
| | | name: '', |
| | | sex: 1, |
| | | idCardType: 1, |
| | | idCard: '', |
| | | mobile: '13537719675', |
| | | mobile: '', |
| | | code: '', |
| | | agreement: false |
| | | }, |
| | | idCardTypeItems: idCardTypeItems, |
| | | rules: { |
| | | name: [ this.$rules.required('请输入姓名') ], |
| | | idCard: [ 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 |
| | | loginLoading: false, |
| | | registerLoading: false |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | this.clearCountdownInterval() |
| | | }, |
| | | watch: { |
| | | |
| | | loginDialogVisible: function(val) { |
| | | if (!val) { |
| | | this.clearCountdownInterval() |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | async sendCode() { |
| | | try { |
| | | await this.$refs.accountForm.validateField('mobile') |
| | | this.startCountdownInterval() |
| | | this.$message.success('已发送验证码,请注意查收') |
| | | 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('请输入手机号码') |
| | | } |
| | | }, |
| | |
| | | try { |
| | | await this.$refs.accountForm.validate() |
| | | this.loginLoading = true |
| | | setTimeout(() => { |
| | | localStorage.setItem('accessToken', '123456') |
| | | this.getUserInfo() |
| | | this.$message.success('登录成功') |
| | | this.loginDialogVisible = false |
| | | 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 |
| | | |
| | | }, 1000) |
| | | }) |
| | | } catch (error) { |
| | | console.log() |
| | | } |
| | | }, |
| | | getUserInfo() { |
| | | this.setUserInfo({ |
| | | id: '123456', |
| | | username: '黄婷婷', |
| | | 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 { |
| | | await this.$refs.registerForm.validate() |
| | | 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() |
| | | console.log(error) |
| | | this.$message.error('请检查必填字段') |
| | | } |
| | | }, |
| | | changeLoginType(type) { |