63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<template>
|
|
<div class="login">
|
|
<h2>Login</h2>
|
|
<form @submit.prevent="handleSubmit">
|
|
<div class="form-item">
|
|
<label for="email">Username or email address</label>
|
|
<input type="email" id="email" name="email" required v-model="fromData.email" />
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="password">Password</label>
|
|
<div class="input-container">
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
required
|
|
:type="passShow ? 'text' : 'password'"
|
|
v-model="fromData.password"
|
|
/>
|
|
<span
|
|
class="iconfont"
|
|
:class="[passShow ? 'icon-hide' : 'icon-show']"
|
|
@click="passShow = !passShow"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<div class="remember">
|
|
<input type="checkbox" id="remember" name="remember" v-model="remember" />
|
|
<label for="remember">Remember me</label>
|
|
<router-link class="link" to="/my-account/lost-password"
|
|
>Lost your password?</router-link
|
|
>
|
|
</div>
|
|
<button type="submit" custom>LOG IN</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useGlobalStore } from '@/stores/global'
|
|
const globalStore = useGlobalStore()
|
|
import { useUserInfoStore } from '@/stores/userInfo'
|
|
const userInfoStore = useUserInfoStore()
|
|
const passShow = ref(false)
|
|
const remember = ref(false)
|
|
const fromData = ref({
|
|
email: '',
|
|
password: ''
|
|
})
|
|
|
|
const handleSubmit = () => {
|
|
console.log(fromData.value, remember.value)
|
|
globalStore.setLoading(true)
|
|
setTimeout(() => {
|
|
globalStore.setLoading(false)
|
|
userInfoStore.setToken('123456')
|
|
}, 1000)
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import './less/style.less';
|
|
</style>
|