| | |
| | | </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()" 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> |
| | |
| | | |
| | | <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()) |
| | | return { loginDialogVisible } |
| | | const { setUserInfo } = useSessionStore() |
| | | return { loginDialogVisible, setUserInfo } |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | 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, |
| | | registerLoading: false |
| | | } |
| | | }, |
| | | computed: { |
| | | title() { |
| | | let obj = { |
| | | register: '注 册', |
| | | mobile: '手 机 号登 录', |
| | | mobile: '手 机 号 登 录', |
| | | qrCode: '微 信 扫 码 登 录' |
| | | } |
| | | return obj[this.loginType] |
| | |
| | | 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('请输入手机号码') |
| | | } |
| | | }, |
| | |
| | | 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 { |
| | | 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) { |