aida_front/src/views/SellerDashboard/BecomeSeller/sellerApply.vue

<template>
	<div class="seller-apply">
		<div class="session">
			<div class="content mini-scrollbar">
				<div class="title">Brand Information</div>
				<div class="tip">Share a few details to set up your seller profile</div>
				<div class="form">
					<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>
			</div>
		</div>
		<div class="session">
			<div class="content">
				<div class="title">Brand Information</div>
				<div class="tip">Share a few details to set up your seller profile</div>
				<div class="agreement">
					<div class="title">AiDA Seller Agreement</div>
					<div class="tip">
						By checking the box below, you agree to comply with the following terms:
					</div>
					<ul>
						<li>Provide accurate and truthful personal and store information</li>
						<li>Only sell original designs or content with proper licensing</li>
						<li>Maintain high quality standards for all products</li>
						<li>Respond to customer inquiries within 48 hours</li>
						<li>Ship orders within promised timeframes</li>
						<li>Comply with AiDA's terms of service and community guidelines</li>
						<li>Pay applicable platform fees and transaction charges</li>
						<li>Handle customer disputes professionally and fairly</li>
					</ul>
				</div>
				<a-checkbox class="agree-agreement" v-model:checked="isAgreement">
					I have read and agree to the Seller Agreement, understanding my responsibilities
					and obligations as a seller on the AiDA platform.
				</a-checkbox>
			</div>
			<div class="btns">
				<button class="cancel" @click="onCancel">Cancel</button>
				<button class="submit" :disabled="!isAgreement" @click="onSubmit">
					Submit Application
				</button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive } from "vue"
	import { useRoute, useRouter } from "vue-router"
	const route = useRoute()
	const router = useRouter()
	import { Https } from "@/tool/https"
	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)
				const data = {
					// userId: 0,
					shopName: formData.storeName,
					// avatar: "",
					// brandBanner: "",
					ownerName: formData.fullName,
					email: formData.email,
					mobile: formData.phoneNumber,
					description: formData.description,
					socialLinks: JSON.stringify(formData.links.filter((v) => v))
				}
				Https.axiosPost(Https.httpUrls.submitSellerApply, data).then((res) => {
					emit("submit")
				})
			})
			.catch(() => {
				console.log("validate failed")
			})
	}
</script>
<style scoped lang="less">
	@import "@/assets/style/ant-from-style.less";
	.seller-apply {
		width: 100%;
		height: 100%;
		overflow: hidden;
		padding: 0 10rem;
		display: flex;
		gap: 6rem;
		> .session {
			flex: 1;
			overflow: hidden;
			> .content {
				max-height: 100%;
				padding: 2.4rem;
				border: 1px solid #b0b0b0;
				border-radius: 2.4rem;
				overflow-y: auto;

				> .title {
					font-size: 2.2rem;
					line-height: 130%;
					color: #000;
					margin-bottom: 0.8rem;
				}
				> .tip {
					font-family: pingfang_regular;
					font-size: 1.4rem;
					line-height: 150%;
					color: #b0b0b0;
				}
				> .form {
					margin-top: 1.6rem;
				}
				> .agreement {
					padding: 1.6rem;
					border-radius: 1.2rem;
					background-color: #f9f9f9;
					margin-bottom: 2.4rem;
					> .title {
						font-size: 1.4rem;
						color: #000;
						margin-bottom: 1rem;
					}
					> ul > li,
					> .tip {
						font-family: pingfang_medium;
						font-size: 1.4rem;
						color: #737373;
					}
					> ul {
						margin-top: 3rem;
						padding-left: 2.5rem;
						> li {
							margin-bottom: 1rem;
							list-style-type: disc;
						}
					}
					&:deep(.agree-agreement) {
						align-items: flex-start;
						span {
							font-family: pingfang_medium;
							font-size: 1.2rem;
						}
						.ant-checkbox-inner,
						.ant-checkbox-input {
							width: 2rem;
							height: 2rem;
						}
						.ant-checkbox-inner {
							border-color: #000 !important;
						}
					}
				}
			}
			> .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>