<template>
|
<div class="login">
|
<el-form ref="form" :model="form">
|
<el-form-item :rules="[$rules.required('请输入手机号') , $rules.phone()]" prop="mobile">
|
<el-input v-model="form.mobile" placeholder="请输入手机号" style="width: 100%" size="large" />
|
</el-form-item>
|
<el-form-item prop="code" :rules="[$rules.required('请输入验证码'), $rules.code()]">
|
<el-input
|
v-model="form.code"
|
placeholder="请输入验证码"
|
style="width: 100%" size="large"
|
>
|
<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>
|
<el-button @click="login()" :loading="loginLoading" type="primary" size="large" class="mt-2" style="width: 100%">登录</el-button>
|
</div>
|
</template>
|
<script>
|
import { tokenUtils } from '@/utils/axios.js';
|
export default {
|
data() {
|
return {
|
form: {
|
mobile: '',
|
code: '',
|
},
|
countdown: 180,
|
sendCodeLoading: false,
|
loginLoading: false,
|
countdownInterval: null
|
}
|
},
|
created() {
|
tokenUtils.clearTokens()
|
},
|
computed: {
|
appId() {
|
return this.$route.query.appId
|
}
|
},
|
mounted() {
|
document.title = this.$route.name
|
},
|
methods: {
|
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 sendCode() {
|
const validate = await this.$refs.form.validateField('mobile')
|
if (validate) {
|
const data = {
|
captchaVerification: '',
|
mobile: this.form.mobile,
|
scene: 21,
|
}
|
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
|
})
|
}
|
},
|
login() {
|
const data = {
|
mobile: this.form.mobile,
|
code: this.form.code,
|
}
|
this.loginLoading = true
|
this.$axios.post('/system/auth/staff/checkin/sms-login', data).then(async res => {
|
if (res.data.code == 0) {
|
const resData = res.data.data
|
tokenUtils.setTokens(resData.accessToken, resData.refreshToken)
|
this.$router.replace({ path: '/h5/verify', query: { appId: this.appId } })
|
} else {
|
this.$message.error(res.data.msg)
|
}
|
}).finally(() => {
|
this.loginLoading = false
|
})
|
},
|
verify() {
|
this.$router.push('/h5/verify')
|
},
|
signup() {
|
this.$router.push('/h5/signup')
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.login {
|
padding: 40px 20px 20px;
|
}
|
</style>
|
