111

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

@@ -0,0 +1,154 @@
+<template>
+	<div class="brand-info">
+		<a-form :model="formData" :rules="formRules" layout="vertical" ref="formRef">
+			<a-form-item label="Store Name" name="storeName">
+				<a-input
+					v-model:value="formData.storeName"
+					placeholder="Enter the store name"
+					:maxlength="80"
+				/>
+				<span 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"
+				/>
+			</a-form-item>
+			<div class="form-group">
+				<a-form-item label="Email" name="email">
+					<a-input
+						type="email"
+						v-model:value="formData.email"
+						placeholder="Enter email"
+					/>
+				</a-form-item>
+				<a-form-item label="Phone Number" name="phoneNumber">
+					<a-input
+						type="tel"
+						v-model:value="formData.phoneNumber"
+						placeholder="Enter phone number"
+					/>
+				</a-form-item>
+			</div>
+			<a-form-item label="Store Description" name="description">
+				<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]"
+				>
+					<template #prefix>Link {{ i + 1 }}</template>
+				</a-input>
+				<a-input
+					placeholder="https://"
+					v-model:value="newLink"
+					@keyup.enter.prevent="addLink"
+				>
+					<template #prefix>
+						<span @click="addLink" style="cursor: pointer">
+							<svg-icon name="seller-add" size="20" />
+						</span>
+					</template>
+				</a-input>
+			</a-form-item>
+		</a-form>
+
+		<div class="btns">
+			<button class="cancel" @click="onCancel">Cancel</button>
+			<button class="submit" :disabled="!isAgreement" @click="onSubmit">
+				Submit Application
+			</button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { ref, reactive } from "vue"
+	import { useRoute, useRouter } from "vue-router"
+	const route = useRoute()
+	const router = useRouter()
+	const emit = defineEmits(["submit"])
+	const formRules = {
+		storeName: [{ required: true, message: "Enter the store name" }],
+		fullName: [{ required: true, message: "Enter store owner's full name" }],
+		email: [{ required: true, message: "Enter email" }],
+		phoneNumber: [{ required: true, message: "Enter phone number" }],
+		description: [{ required: true, message: "Enter store description" }]
+	}
+	const formRef = ref(null)
+	const formData = reactive({
+		storeName: "",
+		fullName: "",
+		email: "",
+		phoneNumber: "",
+		description: "",
+		links: ["", ""]
+	})
+	const isAgreement = ref(false)
+	const newLink = ref("")
+	const addLink = () => {
+		formData.links.push(newLink.value)
+		newLink.value = ""
+	}
+	const onCancel = () => {
+		router.back()
+	}
+	const onSubmit = () => {
+		formRef.value
+			.validate()
+			.then(() => {
+				console.log(formData)
+				emit("submit")
+			})
+			.catch(() => {
+				console.log("validate failed")
+			})
+	}
+</script>
+<style scoped lang="less">
+	@import "@/assets/style/ant-from-style.less";
+	.brand-info {
+		// width: 100%;
+		// 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>