登录注册

src/pages/my-account/login.vue

@@ -0,0 +1,62 @@
+<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">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>