更改头部标题和底部导航

src/views/Workshop/creation/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 	import { ref, reactive, onMounted, watch, computed } from 'vue'
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import CreationList from '@/views/Workshop/creation/creation-list.vue'
 	import CreationDetails from '@/views/Workshop/creation/creation-details.vue'
 
@@ -20,10 +18,8 @@
 </script>
 
 <template>
-	<header-title style-type="2" />
 	<creation-list v-show="!styleUrl" />
 	<creation-details v-if="styleUrl" />
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">

src/views/Workshop/customize.vue

@@ -91,6 +91,7 @@
 				})
 				.catch((err) => {
 					console.error(err)
+					if(data['customerPhotoId']) router.back()
 					loading.value = false
 				})
 		}
@@ -299,24 +300,21 @@
 		}
 		> .btns {
 			margin-top: 5rem;
-			width: 70%;
+			width: 68%;
 			display: flex;
 			// justify-content: center;
 			justify-content: space-between;
 			> button {
+				padding: 0;
 				box-sizing: content-box;
 				font-family: satoshiRegular;
-				// margin: 0 1.8rem;
 				border: none;
-				// margin: 0 5.2rem 0 auto;
-				// min-width: 18rem;
 				width: 34rem;
-				// padding: 0 3.5rem;
-				height: 6.9rem;
+				height: 7.4rem;
 				border-radius: 1.3rem;
 				background: #000;
 				font-weight: 400;
-				font-size: 3.89rem;
+				font-size: 3.8rem;
 				color: #fff;
 				&:active {
 					opacity: 0.7;

src/views/Workshop/end.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import { ref, onMounted } from 'vue'
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
@@ -14,7 +12,6 @@
 </script>
 
 <template>
-	<header-title />
 	<div class="end">
 		<div class="content">
 			<div class="title">Thank you.</div>
@@ -23,7 +20,6 @@
 			</div>
 		</div>
 	</div>
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">

src/views/Workshop/home.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
-import HeaderTitle from '@/components/HeaderTitle.vue'
-import FooterNavigation from '@/components/FooterNavigation.vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 import { showConfirmDialog } from 'vant'
@@ -48,7 +46,6 @@ defineExpose({})
 // const {  } = toRefs(data);
 </script>
 <template>
-	<header-title style-type="2" />
 	<div class="homeNavPage">
 		<div class="title">
 			Welcome Back,
@@ -74,7 +71,6 @@ defineExpose({})
 			</div>
 		</div>
 	</div>
-	<footer-navigation />
 </template>
 <style lang="less" scoped>
 	.header-title {

src/views/Workshop/index.vue

@@ -1,10 +1,36 @@
 <script setup lang="ts">
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	import { ref } from 'vue'
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import RouteCache from '@/components/RouteCache.vue'
+	import profile from './profile.vue'
 	//const props = defineProps({
 	//})
 	//const emit = defineEmits([
 	//])
+	const profileRef = ref(null)
+	const handleClickProfile = () => {
+		profileRef.value.open()
+	}
 </script>
 <template>
-	<RouteCache />
-</template>
+	<div class="workshop">
+		<header-title @clickProfile="handleClickProfile" />
+		<RouteCache />
+		<footer-navigation />
+	</div>
+	<profile ref="profileRef" />
+</template>
+<style scoped lang="less">
+	.workshop {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .routeCache {
+			flex: 1;
+		}
+	}
+</style>

src/views/Workshop/library.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 	import { ref, reactive, onMounted, inject } from 'vue'
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import MyList from '@/components/MyList.vue'
 	import router from '@/router'
 	import { FormatDate } from '@/utils/tools'
@@ -67,7 +65,6 @@
 </script>
 
 <template>
-	<header-title style-type="2" />
 	<div class="library">
 		<div class="title">Library</div>
 		<div class="list">
@@ -87,7 +84,6 @@
 			</my-list>
 		</div>
 	</div>
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">

src/views/Workshop/profile.vue

@@ -1,19 +1,26 @@
 <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 { useUserInfoStore, useOverallStore } from '@/stores'
 	import { LogOut } from '@/api/login'
 	const userInfoStore = useUserInfoStore()
+	const overallStore = useOverallStore()
 	const emit = defineEmits(['view-type'])
+	const show = ref(false)
+	const isEdit = ref(false)
 	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 }
+		name: { msg: '', value: userInfoStore.state.userInfo.username },
+		email: { msg: '', value: userInfoStore.state.userInfo.email },
+		password: { show: false, msg: '', value: userInfoStore.state.userInfo.password }
 	})
-
+	const open = () => {
+		isEdit.value = false
+		show.value = true
+	}
+	const close = () => {
+		show.value = false
+	}
 	const onEditItem = (item) => {
 		if (!form[item]) return
 		form[item].edit = true
@@ -22,6 +29,19 @@
 		if (!form[item]) return
 		form[item].edit = false
 	}
+	const switchCustomer = () => {
+		console.log('switchCustomer')
+	}
+	const edit = () => {
+		isEdit.value = true
+	}
+	const confirm = () => {
+		overallStore.setLoading(true)
+		setTimeout(() => {
+			overallStore.setLoading(false)
+			isEdit.value = false
+		}, 1000)
+	}
 	const logout = () => {
 		showConfirmDialog({
 			title: 'Log out',
@@ -37,207 +57,205 @@
 			})
 			.catch(() => {})
 	}
+	defineExpose({ open })
 </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>
+	<van-popup class="van-popup" v-model:show="show" position="bottom" round>
 		<div class="profile">
-			<!-- <div class="edit"><SvgIcon name="edit" size="37" /></div> -->
+			<div class="header">
+				<span class="title">Profile</span>
+				<van-icon name="cross" class="close" @click="close" />
+			</div>
+			<div class="box">
+				<div class="form-item">
+					<div class="label">Your Name</div>
+					<label class="input">
+						<div class="icon"><SvgIcon name="user" size="64" /></div>
+						<input
+							type="text"
+							placeholder="Enter your name"
+							v-model="form.name.value"
+							:readonly="!isEdit"
+						/>
+						<!-- <div class="icon" v-if="isEdit" @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="64" /></div>
+						<input
+							type="email"
+							placeholder="Enter your email"
+							v-model="form.email.value"
+							:readonly="!isEdit"
+							required
+						/>
+						<!-- <div class="icon" v-if="isEdit" @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="64" />
+						</div>
+						<input
+							:type="form.password.show ? 'text' : 'password'"
+							placeholder="Enter your password"
+							v-model="form.password.value"
+							:readonly="!isEdit"
+						/>
+						<!-- <div class="icon" v-if="isEdit" @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>
+
+				<template v-if="isEdit">
+					<button class="confirm" @click="confirm">Confirm</button>
+					<p class="tip">Powered by AiDLab for Lane Crawford</p>
+				</template>
+				<template v-else>
+					<button class="switch" @click="switchCustomer">Switch Customer</button>
+					<button class="edit" @click="edit">Edit Profile</button>
+					<button class="logout" @click="logout">Log out</button>
+				</template>
+			</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 />
+	</van-popup>
 </template>
 
 <style scoped lang="less">
+	.van-popup {
+		max-height: 90%;
+		--van-popup-round-radius: 7.8rem;
+	}
 	.profile {
-		width: 100%;
+		margin: 6.5rem 0;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		> .header-bg {
+		> .header {
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			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;
+			padding: 0 7rem;
+			margin-bottom: 8rem;
+			> .title {
 				font-family: satoshiBold;
-				font-size: 2.9rem;
-				line-height: 120%;
-				color: #262422;
+				font-size: 4.6rem;
+				color: #181725;
 			}
-			> .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;
+			> .close {
+				margin-left: auto;
+				font-size: 5rem;
+				color: #a1a1a1;
 			}
 		}
-		> .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;
+		> .box {
+			width: 100%;
+			padding: 0 13rem;
+			> div {
+				width: 100%;
+				margin-top: 5.1rem;
+				&:first-child {
+					margin-top: 0;
+				}
+			}
+			> button {
+				margin-top: 8.5rem;
+				width: 100%;
+				height: 14.5rem;
+				border-radius: 2rem;
+				font-size: 4rem;
+				border: 0.2rem solid #3b3b3b;
+				font-family: satoshiBold;
+			}
+			> .form-item {
+				> .label {
+					margin-bottom: 2.5rem;
+					font-family: satoshiBold;
+					font-size: 2.9rem;
+					line-height: 120%;
+					color: #262422;
+				}
+				> .input {
+					// width: 100%;
+					height: 13.9rem;
+					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: 3.5rem;
+						color: #000;
+						border: none;
+						&::placeholder {
+							color: #ababab;
+						}
+					}
+				}
+				> .error {
+					margin-top: 1rem;
+					font-family: satoshiRegular;
+					font-size: 2.5rem;
+					line-height: 120%;
+					color: #ff0000;
+				}
+			}
+			> .switch {
+				background-color: transparent;
+				color: #222;
+			}
+			> .confirm,
+			> .edit,
+			> .logout {
+				background-color: #000;
+				color: #fff;
+			}
+			> .tip {
+				font-family: satoshiRegular;
+				text-align: center;
+				font-size: 3rem;
+				color: #a1a1a1;
+				margin-top: 17.8rem;
+			}
 		}
 	}
 </style>

src/views/Workshop/recommended.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import { ref, onMounted } from 'vue'
 	import { useRouter } from 'vue-router'
 	import { useGenerateStore } from '@/stores'
@@ -17,7 +15,6 @@
 </script>
 
 <template>
-	<header-title />
 	<!-- 上传照片 -->
 	<div class="upload-face-1">
 		<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
@@ -32,7 +29,6 @@
 			<button class="sandblasted-blurred" @click="clickNext"><span>Next</span></button>
 		</div>
 	</div>
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">

src/views/Workshop/uploadFace1.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import { ref, onMounted, computed } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
 	import { useGenerateStore } from '@/stores'
@@ -36,7 +34,6 @@
 </script>
 
 <template>
-	<header-title />
 	<!-- 上传照片 -->
 	<div class="upload-face-1">
 		<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
@@ -54,7 +51,6 @@
 			<button class="sandblasted-blurred" @click="handleFinish" v-if="!isDemo"><span>Finish</span></button>
 		</div>
 	</div>
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">

src/views/Workshop/uploadFace2.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import { ref, reactive, onMounted, computed } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
 	import { uploadCustomerPhoto } from '@/api/workshop'
@@ -59,7 +57,6 @@
 </script>
 
 <template>
-	<header-title />
 	<!-- 展示照片 -->
 	<div class="upload-face-2">
 		<img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" />
@@ -83,7 +80,6 @@
 			</div>
 		</div>
 	</div>
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">