<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-1" @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="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-1" @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';
|
export default {
|
components: {},
|
setup() {
|
const { loginDialogVisible } = storeToRefs(useLoginStore())
|
const { setUserInfo } = useSessionStore()
|
return { loginDialogVisible, setUserInfo }
|
},
|
data() {
|
return {
|
loginType: 'mobile', // mobile、qrCode
|
form: {
|
name: '',
|
sex: 1,
|
idCard: '',
|
mobile: '13537719675',
|
code: '',
|
agreement: false
|
},
|
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
|
}
|
},
|
computed: {
|
title() {
|
let obj = {
|
register: '注 册',
|
mobile: '手 机 号 登 录',
|
qrCode: '微 信 扫 码 登 录'
|
}
|
return obj[this.loginType]
|
}
|
},
|
created() {
|
|
},
|
unmounted() {
|
this.clearCountdownInterval()
|
},
|
watch: {
|
|
},
|
methods: {
|
async sendCode() {
|
try {
|
await this.$refs.accountForm.validateField('mobile')
|
this.startCountdownInterval()
|
this.$message.success('已发送验证码，请注意查收')
|
} catch (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
|
setTimeout(() => {
|
localStorage.setItem('accessToken', '123456')
|
this.getUserInfo()
|
this.$message.success('登录成功')
|
this.loginDialogVisible = false
|
this.loginLoading = false
|
|
}, 1000)
|
} catch (error) {
|
console.log()
|
}
|
},
|
getUserInfo() {
|
this.setUserInfo({
|
id: '123456',
|
username: '黄婷婷',
|
})
|
},
|
async submitRegister() {
|
try {
|
await this.$refs.registerForm.validate()
|
} catch (error) {
|
console.log()
|
}
|
},
|
changeLoginType(type) {
|
this.loginType = type
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
</style>
|
