111

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>