登录注册

src/pages/my-account/register.vue

@@ -0,0 +1,78 @@
+<template>
+	<div class="register">
+		<h2>Register</h2>
+		<form @submit.prevent="handleSubmit">
+			<div class="form-item">
+				<label for="username">Username</label>
+				<input
+					type="username"
+					id="username"
+					name="username"
+					required
+					v-model="fromData.username"
+				/>
+			</div>
+			<div class="form-item">
+				<label for="email">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="subscribe">
+				<input
+					type="checkbox"
+					id="subscribe"
+					name="subscribe"
+					v-model="fromData.subscribe"
+				/>
+				<label for="subscribe"
+					>Subscribe to Code Create product/service news and newsletter</label
+				>
+			</div>
+			<div class="tip">
+				Your personal data will be used to support your experience throughout this website,
+				to manage access to your account, and for other purposes described in our
+				<router-link class="link" to="/my-account/privacy-policy"
+					>Privacy Policy</router-link
+				>
+			</div>
+			<button type="submit">REGISTER</button>
+		</form>
+	</div>
+</template>
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { useUserInfoStore } from '@/stores/userInfo'
+	const userInfoStore = useUserInfoStore()
+	const passShow = ref(false)
+	const remember = ref(false)
+	const fromData = ref({
+		username: '',
+		email: '',
+		password: '',
+		subscribe: false
+	})
+
+	const handleSubmit = () => {
+		console.log(fromData.value, remember.value)
+	}
+</script>
+
+<style scoped lang="less">
+	@import './less/style.less';
+</style>