282 lines
6.9 KiB
Vue
282 lines
6.9 KiB
Vue
<template>
|
||
<div>
|
||
<h2>登录</h2>
|
||
<p class="register" @click="$emit('setState',true)">
|
||
您还没有账号？点击创建
|
||
</p>
|
||
<el-form ref="forms" :rules="registerRules" :model="form" label-width="0px">
|
||
<el-form-item style="margin-bottom: 0px" class="app-form-center" label="手机号码" label-width="80px">
|
||
<el-input
|
||
v-model="form.phone"
|
||
placeholder=""
|
||
type="text"
|
||
size="large"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="验证码" style="margin-bottom: 0px" class="app-form-center" label-width="80px" >
|
||
<div class="verify">
|
||
<div>
|
||
<el-input v-model="form.code" placeholder="" size="large" />
|
||
</div>
|
||
<div>
|
||
<p class="sendCode" v-if="!isSend.state" @click="sendRequest">获取验证码</p>
|
||
<p v-if="isSend.state">{{ isSend.num }}秒后继续获取验证码</p>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
<div class="" style="width:100%">
|
||
<!-- <el-button type="primary" @click="onSubmit">登录</el-button> -->
|
||
<div v-show="!islogin">
|
||
<el-checkbox v-model="form.agreement" />
|
||
我已阅读并同意“铜壶协议和隐私条款”
|
||
</div>
|
||
<div class="form-center">
|
||
<div v-if="islogin" class="submit-btn" @click="onSubmit">
|
||
注册
|
||
</div>
|
||
<div v-else class="submit-btn" @click="onSubmit">
|
||
登录
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-left">
|
||
<SvgIcon name="vx" height="36px" width="36px" />
|
||
</div>
|
||
<div class="Short-flex">
|
||
<span @click="$emit('setMssages',false)">账号和密码注册</span>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import {reactive, defineComponent, toRefs, onBeforeMount, ref, onUnmounted, unref} from 'vue'
|
||
import verify from './verify.png'
|
||
import {types} from "sass";
|
||
import {register, sendCode} from "@/api/work";
|
||
import {ElForm, ElMessage} from "element-plus";
|
||
import {registerUserApi} from "@/api/user";
|
||
let time:number = -9999
|
||
export default defineComponent({
|
||
props:{
|
||
islogin:{
|
||
type:Boolean,
|
||
default:()=>false
|
||
}
|
||
},
|
||
setup() {
|
||
const registerRuleFormRef = ref<InstanceType<typeof ElForm>>()
|
||
const lastSend = ref<number>()
|
||
const formSubmit: any = reactive({
|
||
form: {
|
||
phone: '',
|
||
verify: verify,
|
||
code: '',
|
||
agreement: false
|
||
}
|
||
})
|
||
// 注册验证
|
||
const registerRules = reactive({
|
||
phone: [
|
||
{
|
||
required: true,
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (!value) {
|
||
return callback(new Error('手机号不能为空'))
|
||
}
|
||
callback()
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
code: [
|
||
{
|
||
// required: true,
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (!value||value.length<4) {
|
||
return callback(new Error('验证码不能为空'))
|
||
}
|
||
callback()
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
agreement: [
|
||
{
|
||
// required: true,
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (value !== true) {
|
||
return callback(new Error('请先勾选协议'))
|
||
}
|
||
callback()
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
})
|
||
const isSend: any = reactive({
|
||
isSend: {
|
||
state: false,
|
||
num: 60
|
||
}
|
||
})
|
||
const onSubmit = () => {
|
||
const formWrap = unref<any>(registerRuleFormRef)
|
||
if (!formWrap) return
|
||
formWrap.validate((valid: boolean) => {
|
||
console.log(valid)
|
||
if (valid) {
|
||
// register({}).then(res=>{
|
||
//
|
||
// }))
|
||
console.log(11111111)
|
||
}
|
||
})
|
||
|
||
}
|
||
onBeforeMount(()=>{
|
||
const date:number = new Date().getTime()/1000
|
||
const storage:string = localStorage.getItem("lastSend")||""
|
||
lastSend.value = isNaN(parseInt(storage))?0:parseInt(storage)
|
||
isSend.isSend.num = lastSend.value-date
|
||
if(time>0){
|
||
clearInterval(time)
|
||
}
|
||
time = setInterval(() => {
|
||
isSend.isSend.num -= 1
|
||
if (isSend.isSend.num <= 0) {
|
||
isSend.isSend.state = false
|
||
}
|
||
}, 1000)
|
||
// lastSend.value = isNaN(parseInt(storage))?0:parseInt(storage)
|
||
})
|
||
onUnmounted(()=>{
|
||
clearInterval(time)
|
||
})
|
||
// 发送验证码
|
||
const sendRequest = () => {
|
||
// 手机号校验
|
||
if(formSubmit.form.phone.length<13){
|
||
ElMessage({
|
||
showClose: true,
|
||
message: '手机号不能为空',
|
||
type: 'error',
|
||
duration:3000
|
||
})
|
||
return;
|
||
}
|
||
sendCode({
|
||
phone:formSubmit.form.phone
|
||
}).then(res=>{
|
||
isSend.isSend.state = true
|
||
const date:number = new Date().getTime()/1000
|
||
clearInterval(time)
|
||
isSend.isSend.num = 60
|
||
time = setInterval(() => {
|
||
isSend.isSend.num -= 1
|
||
if (isSend.isSend.num <= 0) {
|
||
isSend.isSend.state = false
|
||
}
|
||
}, 1000)
|
||
// 下次验证码发送时间
|
||
localStorage.setItem('lastSend', String(Math.floor(date+60)))
|
||
ElMessage({
|
||
showClose: true,
|
||
message: '短信成功发送,请注意查收',
|
||
type: 'success',
|
||
duration:3000
|
||
})
|
||
})
|
||
}
|
||
return {
|
||
...toRefs(formSubmit),
|
||
...toRefs(isSend),
|
||
registerRules,
|
||
onSubmit,
|
||
sendRequest
|
||
}
|
||
},
|
||
mounted() {
|
||
clearInterval(time)
|
||
},
|
||
onBeforeUnmount() {
|
||
clearInterval(time)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.forms-sumit {
|
||
width: 360px;
|
||
transition: all 1s;
|
||
}
|
||
.submit-btn {
|
||
outline: none;
|
||
margin: 0 auto;
|
||
padding: 12px 30px;
|
||
line-height: 1;
|
||
font-size: 16px;
|
||
border-radius: 60px;
|
||
color: #fff;
|
||
background-color: var(--system-primary-color);
|
||
border: none;
|
||
&:hover {
|
||
background-color: var(--system-primary-text-color);
|
||
}
|
||
}
|
||
.form-center {
|
||
text-align: center;
|
||
}
|
||
.verify {
|
||
width: 100%;
|
||
text-align: left;
|
||
// display: flex;
|
||
> div {
|
||
display: inline-block;
|
||
}
|
||
> div:first-child {
|
||
width: 80px;
|
||
}
|
||
> div:nth-child(2) {
|
||
margin-left: 10px;
|
||
vertical-align: middle;
|
||
}
|
||
> div:nth-child(3) {
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
img {
|
||
width: 100%;
|
||
display: block;
|
||
transition: transform 0.9s ease-in-out;
|
||
|
||
}
|
||
.Short-flex {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
> span {
|
||
color: #19abdb;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.el-form-item{
|
||
align-items: center;
|
||
}
|
||
.register {
|
||
text-align: center;
|
||
color: #19abdb;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
.sendCode{
|
||
text-align: center;
|
||
color: #19abdb;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
</style>
|