145 lines
3.4 KiB
Vue
145 lines
3.4 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="page">
|
||
<div style="margin-top: 380px;">
|
||
|
||
<van-field v-model="phoneNum" clearable placeholder="请输入手机号">
|
||
<template #label>
|
||
<div style="color: #E5E5E5;">
|
||
手机号
|
||
</div>
|
||
</template>
|
||
</van-field>
|
||
|
||
<van-field style="margin-top: 20px;" v-model="code" clearable placeholder="6位数字验证码">
|
||
<template #label>
|
||
<div style="color: #E5E5E5;">
|
||
验证码
|
||
</div>
|
||
</template>
|
||
<template #button>
|
||
<a @click="getUserCode" v-if="codeCountDown == 60" style="color: #3B78FF;">获取验证码</a>
|
||
<a v-else style="color: #6E6E6E;">重新发送（{{ codeCountDown }}）</a>
|
||
</template>
|
||
</van-field>
|
||
<van-field v-show="false">
|
||
</van-field>
|
||
|
||
</div>
|
||
<van-button v-if="phoneNum && code" @click="goLogin" style="width: 92%;margin-top: 30px;" color="#1936C9">登录</van-button>
|
||
<van-button v-else color="#464646" style="width: 92%;margin-top: 30px;">登录</van-button>
|
||
<div style="margin-top: 20px;color: #959595; font-size: 14px;">
|
||
登录即绑定了该账号
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { login,getCode } from '@/api/login'
|
||
import { showToast } from 'vant';
|
||
const phoneNum = ref('')
|
||
const code = ref('')
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
const codeCountDown = ref(60)
|
||
const getUserCode = async() => {
|
||
if (!phoneNum.value) {
|
||
showToast ('请输入手机号')
|
||
return
|
||
}
|
||
if (!/^1[3-9]\d{9}$/.test(phoneNum.value)) {
|
||
showToast ('请输入正确的手机号')
|
||
return
|
||
}
|
||
try {
|
||
const res = await getCode({
|
||
telNum: phoneNum.value
|
||
})
|
||
if (res.status === 0) {
|
||
showToast ('验证码已发送')
|
||
const timer = setInterval(() => {
|
||
codeCountDown.value--
|
||
if (codeCountDown.value === 0) {
|
||
clearInterval(timer)
|
||
codeCountDown.value = 60
|
||
}
|
||
}, 1000)
|
||
} else {
|
||
showToast (res.msg || '发送失败')
|
||
}
|
||
} catch (error) {
|
||
showToast ('发送失败')
|
||
}
|
||
}
|
||
// 登录
|
||
const goLogin = async() => {
|
||
try {
|
||
const res = await login({
|
||
telNum: phoneNum.value,
|
||
code: code.value
|
||
})
|
||
if (res.status === 0) {
|
||
showToast ('登录成功')
|
||
localStorage.setItem('token', res.data.token)
|
||
localStorage.setItem('accountInfo', JSON.stringify(res.data.accountInfo))
|
||
setTimeout(() => {
|
||
router.push('/home')
|
||
}, 1000)
|
||
} else {
|
||
showToast (res.err || '登录失败')
|
||
}
|
||
} catch (error) {
|
||
showToast ('登录失败')
|
||
}
|
||
}
|
||
onMounted(() => {
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url('@/assets/yybg.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
overflow: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.page {
|
||
min-height: 100%;
|
||
padding: 31px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.van-field {
|
||
background: none;
|
||
}
|
||
|
||
.van-cell-group {
|
||
background: none;
|
||
}
|
||
/deep/ .van-cell__title{
|
||
margin-right: 0;
|
||
}
|
||
|
||
/deep/ .van-field__control {
|
||
color: #898989 !important;
|
||
}
|
||
|
||
/deep/ .van-field__placeholder {
|
||
color: #898989 !important;
|
||
}
|
||
</style> |