111

src/views/SellerDashboard/BrandProfile/brand-info.vue

@@ -1,26 +1,33 @@
 <template>
 	<div class="brand-info">
-		<a-form :model="formData" :rules="formRules" layout="vertical" ref="formRef">
+		<a-form :model="formData" :rules="isEdit ? formRules : {}" layout="vertical" ref="formRef">
+			<div class="form-group">
 				<a-form-item label="Store Name" name="storeName">
 					<a-input
 						v-model:value="formData.storeName"
 						placeholder="Enter the store name"
 						:maxlength="80"
+						:readonly="!isEdit"
 					/>
-				<span class="tip-length">{{ formData.storeName.length }}/80</span>
+					<span v-show="isEdit" class="tip-length"
+						>{{ formData.storeName.length }}/80</span
+					>
 				</a-form-item>
 				<a-form-item label="Owner’s Full Name" name="fullName">
 					<a-input
 						v-model:value="formData.fullName"
 						placeholder="Enter store owner's full name"
+						:readonly="!isEdit"
 					/>
 				</a-form-item>
+			</div>
 			<div class="form-group">
 				<a-form-item label="Email" name="email">
 					<a-input
 						type="email"
 						v-model:value="formData.email"
 						placeholder="Enter email"
+						:readonly="!isEdit"
 					/>
 				</a-form-item>
 				<a-form-item label="Phone Number" name="phoneNumber">
@@ -28,23 +35,18 @@
 						type="tel"
 						v-model:value="formData.phoneNumber"
 						placeholder="Enter phone number"
+						:readonly="!isEdit"
 					/>
 				</a-form-item>
 			</div>
-			<a-form-item label="Store Description" name="description">
+			<div class="form-group">
-				<a-textarea
-					v-model:value="formData.description"
-					placeholder="Briefly describe your design style and store features..."
-					:maxlength="500"
-				/>
-				<span class="tip-length">{{ formData.description.length }}/500</span>
-			</a-form-item>
 				<a-form-item label="Portfoilo/Social Media Links">
 					<a-input
 						placeholder="https://"
 						v-for="(v, i) in formData.links"
 						:key="i"
 						v-model:value="formData.links[i]"
+						:readonly="!isEdit"
 					>
 						<template #prefix>Link {{ i + 1 }}</template>
 					</a-input>
@@ -52,6 +54,7 @@
 						placeholder="https://"
 						v-model:value="newLink"
 						@keyup.enter.prevent="addLink"
+						v-if="isEdit"
 					>
 						<template #prefix>
 							<span @click="addLink" style="cursor: pointer">
@@ -60,23 +63,33 @@
 						</template>
 					</a-input>
 				</a-form-item>
-		</a-form>
+				<a-form-item label="Store Description" name="description">
-
+					<a-textarea
-		<div class="btns">
+						v-model:value="formData.description"
-			<button class="cancel" @click="onCancel">Cancel</button>
+						placeholder="Briefly describe your design style and store features..."
-			<button class="submit" :disabled="!isAgreement" @click="onSubmit">
+						:maxlength="500"
-				Submit Application
+						:readonly="!isEdit"
-			</button>
+					/>
+					<span v-show="isEdit" class="tip-length"
+						>{{ formData.description.length }}/500</span
+					>
+				</a-form-item>
 			</div>
+		</a-form>
 	</div>
 </template>
 
 <script setup>
-	import { ref, reactive } from "vue"
+	import { ref, reactive, watch } from "vue"
 	import { useRoute, useRouter } from "vue-router"
 	const route = useRoute()
 	const router = useRouter()
-	const emit = defineEmits(["submit"])
+	const props = defineProps({
+		isEdit: {
+			type: Boolean,
+			default: false
+		}
+	})
 	const formRules = {
 		storeName: [{ required: true, message: "Enter the store name" }],
 		fullName: [{ required: true, message: "Enter store owner's full name" }],
@@ -84,6 +97,7 @@
 		phoneNumber: [{ required: true, message: "Enter phone number" }],
 		description: [{ required: true, message: "Enter store description" }]
 	}
+
 	const formRef = ref(null)
 	const formData = reactive({
 		storeName: "",
@@ -93,26 +107,26 @@
 		description: "",
 		links: ["", ""]
 	})
-	const isAgreement = ref(false)
 	const newLink = ref("")
 	const addLink = () => {
 		formData.links.push(newLink.value)
 		newLink.value = ""
 	}
-	const onCancel = () => {
+	watch(
-		router.back()
+		() => props.isEdit,
+		(v) => (v ? edit() : cancel())
+	)
+	const edit = () => {}
+	const cancel = () => {}
+	const submit = async () => {
+		const valid = await formRef.value.validate()
+		if (!valid) return Promise.reject(false)
+		console.log(valid)
+		return valid
 	}
-	const onSubmit = () => {
+	defineExpose({
-		formRef.value
+		submit
-			.validate()
-			.then(() => {
-				console.log(formData)
-				emit("submit")
 	})
-			.catch(() => {
-				console.log("validate failed")
-			})
-	}
 </script>
 <style scoped lang="less">
 	@import "@/assets/style/ant-from-style.less";
@@ -121,34 +135,5 @@
 		// height: 100%;
 		// overflow: hidden;
 		// padding: 0 10rem;
-
-		> .btns {
-			margin-top: 3.9rem;
-			display: flex;
-			justify-content: flex-end;
-			gap: 1.6rem;
-			> button {
-				height: 6rem;
-				border-radius: 6rem;
-				padding: 0 4rem;
-				background-color: #000;
-				color: #fff;
-				font-size: 1.6rem;
-				border: none;
-				cursor: pointer;
-				&:active:not(:disabled) {
-					opacity: 0.8;
-				}
-				&:disabled {
-					opacity: 0.5;
-					cursor: not-allowed;
-				}
-			}
-			> .cancel {
-				background-color: #fff;
-				color: #000;
-				border: 0.15rem solid #000;
-			}
-		}
 	}
 </style>

src/views/SellerDashboard/BrandProfile/index.vue

@@ -20,7 +20,22 @@
 				</span>
 			</div>
 		</div>
-		<brand-info />
+		<brand-info :is-edit="isEdit" ref="brandInfoRef" />
+	</div>
+	<div class="and-profile-footer">
+		<template v-if="isEdit">
+			<div class="btns">
+				<button class="cancel" @click="onCancel">Cancel</button>
+				<button class="submit" @click="onSubmit">Save Change</button>
+			</div>
+			<p class="tip">Changes will be reflected on your Stylish Parade brand page.</p>
+		</template>
+		<template v-else>
+			<div class="btns">
+				<button class="edit" @click="onEdit">Edit</button>
+			</div>
+			<p class="tip">&nbsp;</p>
+		</template>
 	</div>
 </template>
 
@@ -29,6 +44,22 @@
 	import BrandInfo from "./brand-info.vue"
 	const banner = ref("http://118.31.39.42:3000/falls/5bd8065cbb396eb5a8ef0a142605139358734e57.png")
 	const avatar = ref("http://118.31.39.42:3000/falls/20251024140128_10355_1.jpg")
+	const isEdit = ref(false)
+	const brandInfoRef = ref(null)
+	const onEdit = () => {
+		isEdit.value = true
+	}
+	const onCancel = () => {
+		isEdit.value = false
+	}
+	const onSubmit = () => {
+		brandInfoRef.value
+			.submit()
+			.then(() => {
+				isEdit.value = false
+			})
+			.catch(() => {})
+	}
 </script>
 <style scoped lang="less">
 	.brand-profile-index {
@@ -109,4 +140,44 @@
 			}
 		}
 	}
+	.and-profile-footer {
+		margin: 0 15rem;
+		> .btns {
+			margin-top: 3rem;
+			display: flex;
+			justify-content: flex-end;
+			padding-right: 1.6rem;
+			gap: 1.3rem;
+			> button {
+				height: 6rem;
+				border-radius: 6rem;
+				padding: 0 4rem;
+				background-color: #000;
+				color: #fff;
+				font-size: 1.6rem;
+				border: none;
+				cursor: pointer;
+				&:active:not(:disabled) {
+					opacity: 0.8;
+				}
+				&:disabled {
+					opacity: 0.5;
+					cursor: not-allowed;
+				}
+			}
+			> .cancel {
+				background-color: #fff;
+				color: #000;
+				border: 0.15rem solid #000;
+			}
+		}
+		> .tip {
+			padding-right: 1.6rem;
+			margin-top: 0.7rem;
+			font-family: pingfang_regular;
+			font-size: 1.4rem;
+			text-align: right;
+			color: #999;
+		}
+	}
 </style>

src/views/SellerDashboard/MyListings/main/content.vue

@@ -115,14 +115,17 @@ const { showDrafts } = toRefs(data);
 </template>
 <style lang="less" scoped>
 	.listings{
-		flex: 1;
+		position: absolute;
-		position: relative;
+		width: 100%;
+		height: 100%;
 		display: flex;
 		gap: 2rem;
 		.listingsBox{
 			background-color: #f9fafa;
 			border-radius: 2rem;
+			flex: 1;
 			position: relative;
+			// overflow: hidden;
 			display: flex;
 			.box{
 				width: 100%;

src/views/SellerDashboard/MyListings/main/index.vue

@@ -73,7 +73,7 @@ const {} = toRefs(data);
 		> .content {
 			margin-top: 2rem;
 			flex: 1;
-			display: flex;
+			position: relative;
 		}
 	}
 </style>