Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite
This commit is contained in:
X1627315083@163.com
@@ -5,8 +5,8 @@
|
||||
tip="Join the Stylish Parade and start selling your design work"
|
||||
/>
|
||||
<div class="content">
|
||||
<sellerReview v-if="isSubmit"></sellerReview>
|
||||
<sellerReview v-else></sellerReview>
|
||||
<seller-review v-if="isSubmit" />
|
||||
<seller-apply v-else @submit="isSubmit = true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -15,9 +15,7 @@
|
||||
import { ref, computed } from "vue"
|
||||
import sellerHeader from "../seller-header.vue"
|
||||
import sellerReview from "./sellerReview.vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
import sellerApply from "./sellerApply.vue"
|
||||
const isSubmit = ref(false)
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
||||
353
src/views/SellerDashboard/BecomeSeller/sellerApply.vue
Normal file
353
src/views/SellerDashboard/BecomeSeller/sellerApply.vue
Normal file
@@ -0,0 +1,353 @@
|
||||
<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"
|
||||
class="my-form"
|
||||
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()
|
||||
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">
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.my-form) {
|
||||
.form-group {
|
||||
display: flex;
|
||||
gap: 1.6rem;
|
||||
.ant-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 1.6rem;
|
||||
position: relative;
|
||||
.tip-length {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1.6rem;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1rem;
|
||||
color: #df2c2c;
|
||||
}
|
||||
.ant-form-item-explain,
|
||||
.ant-form-item-explain-connected {
|
||||
min-height: 0;
|
||||
}
|
||||
.ant-form-item-explain-error {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
.ant-form-item-label {
|
||||
display: flex;
|
||||
padding: 0 0 0.6rem 0;
|
||||
> label {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
|
||||
&.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
display: inline-block;
|
||||
color: #df2c2c;
|
||||
font-size: 1.4rem;
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-control-input {
|
||||
.ant-input-affix-wrapper,
|
||||
textarea,
|
||||
input {
|
||||
border-radius: 1.2rem;
|
||||
border: 0.16rem solid #d1d1d1;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.4rem;
|
||||
color: #000;
|
||||
padding: 1.6rem;
|
||||
&::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.ant-input-affix-wrapper {
|
||||
margin-bottom: 0.6rem;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-input-prefix {
|
||||
width: 5.2rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
color: #000;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
border: none;
|
||||
height: 100%;
|
||||
padding: 0 1.6rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
input {
|
||||
height: 5rem;
|
||||
}
|
||||
textarea {
|
||||
height: 11rem;
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user