lanecarford_front/src/views/Workshop/profile.vue

<script setup lang="ts">
	import { ref, reactive, onMounted, inject } from 'vue'
	import HeaderTitle from '@/components/HeaderTitle.vue'
	import FooterNavigation from '@/components/FooterNavigation.vue'
	import router from '@/router'
	import { showConfirmDialog } from 'vant'
	import { useUserInfoStore } from '@/stores'
	import { LogOut } from '@/api/login'
	const userInfoStore = useUserInfoStore()
	const emit = defineEmits(['view-type'])
	const form = reactive({
		name: { edit: false, msg: '', value: userInfoStore.state.userInfo.username },
		email: { edit: false, msg: '', value: userInfoStore.state.userInfo.email },
		password: { show: false, edit: false, msg: '', value: userInfoStore.state.userInfo.password }
	})

	const onEditItem = (item) => {
		if (!form[item]) return
		form[item].edit = true
	}
	const onSaveItem = (item) => {
		if (!form[item]) return
		form[item].edit = false
	}
	const logout = () => {
		showConfirmDialog({
			title: 'Log out',
			message: 'Are you sure you want to log out?',
			confirmButtonText: 'Yes',
			cancelButtonText: 'Cancel'
		})
			.then(() => {
				LogOut().then(() => {
					userInfoStore.logOut()
					router.push({ path: '/welcome' })
				})
			})
			.catch(() => {})
	}
</script>

<template>
	<header-title style-type="2" :is-placeholder="false" />
	<div class="profile">
		<div class="header-bg">
			<svg
				width="1079"
				height="572"
				viewBox="0 0 1079 572"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path
					d="M0 -6H1079V504.057C1079 504.057 751.757 572.269 536.733 571.999C323.838 571.733 0 504.057 0 504.057V-6Z"
					fill="#EBF0F0"
				/>
			</svg>
		</div>
		<div class="profile">
			<!-- <div class="edit"><SvgIcon name="edit" size="37" /></div> -->
		</div>
		<div class="title">Momo Fashion</div>
		<p class="sub">Fashion Design</p>
		<div class="form-item">
			<div class="label">Your Name</div>
			<label class="input">
				<div class="icon"><SvgIcon name="user" size="50" /></div>
				<input
					type="text"
					placeholder="Enter your name"
					v-model="form.name.value"
					:readonly="!form.name.edit"
				/>
				<!-- <div class="icon" v-if="form.name.edit" @click.stop="onSaveItem('name')">
						<SvgIcon name="confirmation" size="37" />
					</div>
					<div class="icon" v-else @click="onEditItem('name')">
						<SvgIcon name="edit" size="37" />
					</div> -->
			</label>
			<p class="error" v-show="form.name.msg">{{ form.name.msg }}</p>
		</div>
		<div class="form-item">
			<div class="label">Your Email</div>
			<label class="input">
				<div class="icon"><SvgIcon name="email" size="50" /></div>
				<input
					type="email"
					placeholder="Enter your email"
					v-model="form.email.value"
					:readonly="!form.email.edit"
					required
				/>
				<!-- <div class="icon" v-if="form.email.edit" @click.stop="onSaveItem('email')">
					<SvgIcon name="confirmation" size="37" />
				</div>
				<div class="icon" v-else @click="onEditItem('email')">
					<SvgIcon name="edit" size="37" />
				</div> -->
			</label>
			<p class="error" v-show="form.email.msg">{{ form.email.msg }}</p>
		</div>
		<div class="form-item">
			<div class="label">Password</div>
			<label class="input">
				<div class="icon" @click="form.password.show = !form.password.show">
					<SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="50" />
				</div>
				<input
					:type="form.password.show ? 'text' : 'password'"
					placeholder="Enter your password"
					v-model="form.password.value"
					:readonly="!form.password.edit"
				/>
				<!-- <div class="icon" v-if="form.password.edit" @click.stop="onSaveItem('password')">
					<SvgIcon name="confirmation" size="37" />
				</div>
				<div class="icon" v-else @click="onEditItem('password')">
					<SvgIcon name="edit" size="37" />
				</div> -->
			</label>
			<p class="error" v-show="form.password.msg">{{ form.password.msg }}</p>
		</div>
		<button class="logout" @click="logout">Log out</button>
	</div>
	<footer-navigation is-placeholder />
</template>

<style scoped lang="less">
	.profile {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		> .header-bg {
			width: 100%;
			min-height: 57rem;
			> svg {
				width: 100%;
				height: auto;
			}
		}
		> .profile {
			margin-top: -23rem;
			width: 28.9rem;
			height: 28.9rem;
			border-radius: 50%;
			background-color: #d9d9d9;
			position: relative;
			> .edit {
				position: absolute;
				right: 1.9rem;
				bottom: 0;
				width: 6.4rem;
				height: 6.4rem;
				border-radius: 50%;
				background-color: #74716d;
				display: flex;
				justify-content: center;
				align-items: center;
				--svg-icon-color: #fff;
			}
		}
		> .title {
			margin-top: 3.7rem;
			font-family: 'satoshiBold';
			font-size: 4.1rem;
			line-height: 120%;
			color: #262422;
		}
		> .sub {
			font-family: satoshiRegular;
			font-size: 2.9rem;
			line-height: 120%;
			margin-top: 1.6rem;
			margin-bottom: 2.4rem;
			color: #ababab;
		}
		> .form-item {
			margin: 4.2rem auto 0;
			width: 68rem;
			> .label {
				margin-bottom: 2.5rem;
				font-family: satoshiBold;
				font-size: 2.9rem;
				line-height: 120%;
				color: #262422;
			}
			> .input {
				width: 100%;
				height: 11.5rem;
				border-radius: 2.5rem;
				border: 0.2rem solid #f1ecec;
				box-sizing: content-box;
				display: flex;
				align-items: center;
				overflow: hidden;
				padding: 0 2.5rem;
				> * {
					margin-right: 2.5rem;
					&:last-child {
						margin-right: 0;
					}
				}
				> .icon {
					// margin: 0 2.5rem;
					--svg-icon-color: #ababab;
				}
				> input {
					width: 0;
					flex: 1;
					height: 100%;
					font-family: satoshiMedium;
					font-size: 2.9rem;
					color: #000;
					border: none;
					&::placeholder {
						color: #ababab;
					}
				}
			}
			> .error {
				margin-top: 1rem;
				font-family: satoshiRegular;
				font-size: 2.5rem;
				line-height: 120%;
				color: #ff0000;
			}
		}
		> .logout {
			margin-top: 7rem;
			width: 68rem;
			height: 11.5rem;
			border-radius: 2.5rem;
			background-color: transparent;
			border: 0.2rem solid #3b3b3b;
			font-family: satoshiBold;
			font-size: 3.32rem;
			line-height: 120%;
			color: #222;
		}
	}
</style>