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
2519
src/assets/css/style.css
Normal file
2519
src/assets/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
3
src/assets/icons/seller/add.svg
Normal file
3
src/assets/icons/seller/add.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.1667 9.16667H10.8333V0.833333C10.8333 0.61232 10.7455 0.400358 10.5893 0.244078C10.433 0.0877974 10.221 0 10 0C9.77899 0 9.56702 0.0877974 9.41074 0.244078C9.25446 0.400358 9.16667 0.61232 9.16667 0.833333V9.16667H0.833333C0.61232 9.16667 0.400358 9.25446 0.244078 9.41074C0.0877974 9.56702 0 9.77899 0 10C0 10.221 0.0877974 10.433 0.244078 10.5893C0.400358 10.7455 0.61232 10.8333 0.833333 10.8333H9.16667V19.1667C9.16667 19.3877 9.25446 19.5996 9.41074 19.7559C9.56702 19.9122 9.77899 20 10 20C10.221 20 10.433 19.9122 10.5893 19.7559C10.7455 19.5996 10.8333 19.3877 10.8333 19.1667V10.8333H19.1667C19.3877 10.8333 19.5996 10.7455 19.7559 10.5893C19.9122 10.433 20 10.221 20 10C20 9.77899 19.9122 9.56702 19.7559 9.41074C19.5996 9.25446 19.3877 9.16667 19.1667 9.16667Z" fill="#B0B0B0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 906 B |
@@ -2386,6 +2386,16 @@ textarea:focus{
|
||||
// background: #ffffff;
|
||||
}
|
||||
}
|
||||
// 迷你滚动条
|
||||
.mini-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.4rem;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.4rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
//蒙层样式
|
||||
.mark_loading{
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
:get-container="() => $refs.upgradePlan"
|
||||
width="35%"
|
||||
height="auto"
|
||||
zIndex="9999999"
|
||||
:zIndex="9999999"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
|
||||
@@ -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