265 lines
6.7 KiB
Vue
265 lines
6.7 KiB
Vue
<template>
|
|
<div class="seller-apply">
|
|
<div class="session">
|
|
<div class="content mini-scrollbar">
|
|
<div class="title">{{ $t("ApplySeller.formTitle") }}</div>
|
|
<div class="tip">{{ $t("ApplySeller.formTip") }}</div>
|
|
<div class="form">
|
|
<a-form :model="formData" :rules="formRules" layout="vertical" ref="formRef">
|
|
<a-form-item :label="$t('Seller.storeName')" name="storeName">
|
|
<a-input
|
|
v-model:value="formData.storeName"
|
|
:placeholder="$t('Seller.storeNameDesc')"
|
|
:maxlength="80"
|
|
/>
|
|
<span class="tip-length">{{ formData.storeName.length }}/80</span>
|
|
</a-form-item>
|
|
<a-form-item :label="$t('Seller.ownerName')" name="fullName">
|
|
<a-input
|
|
v-model:value="formData.fullName"
|
|
:placeholder="$t('Seller.ownerNameDesc')"
|
|
/>
|
|
</a-form-item>
|
|
<div class="form-group">
|
|
<a-form-item :label="$t('Seller.email')" name="email">
|
|
<a-input
|
|
type="email"
|
|
v-model:value="formData.email"
|
|
:placeholder="$t('Seller.emailDesc')"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item :label="$t('Seller.mobile')" name="mobile">
|
|
<a-input
|
|
type="tel"
|
|
v-model:value="formData.mobile"
|
|
:placeholder="$t('Seller.mobileDesc')"
|
|
/>
|
|
</a-form-item>
|
|
</div>
|
|
<a-form-item :label="$t('Seller.storeDescription')" name="description">
|
|
<a-textarea
|
|
v-model:value="formData.description"
|
|
:placeholder="$t('Seller.storeDescriptionDesc')"
|
|
:maxlength="500"
|
|
/>
|
|
<span class="tip-length">{{ formData.description.length }}/500</span>
|
|
</a-form-item>
|
|
<a-form-item :label="$t('Seller.links')">
|
|
<a-input
|
|
placeholder="https://"
|
|
v-for="(v, i) in formData.links"
|
|
:key="i"
|
|
v-model:value="formData.links[i]"
|
|
>
|
|
<template #prefix>{{
|
|
$t("Seller.link", { index: 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">{{ $t("ApplySeller.termsTitle") }}</div>
|
|
<div class="tip">{{ $t("ApplySeller.termsTip") }}</div>
|
|
<div class="agreement">
|
|
<div class="title">{{ $t("ApplySeller.agreementTitle") }}</div>
|
|
<div class="tip">{{ $t("ApplySeller.agreementTip") }}</div>
|
|
<ul>
|
|
<li v-for="(v, i) in 8" :key="i">
|
|
{{ $t(`ApplySeller.agreementItem${i + 1}`) }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a-checkbox class="agree-agreement" v-model:checked="isAgreement">
|
|
{{ $t("ApplySeller.agreementAgreement") }}
|
|
</a-checkbox>
|
|
</div>
|
|
<div class="btns">
|
|
<button class="cancel" @click="onCancel">{{ $t("Seller.cancel") }}</button>
|
|
<button class="submit" :disabled="!isAgreement" @click="onSubmit">
|
|
{{ $t("ApplySeller.submitApplication") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from "vue"
|
|
import { useI18n } from "vue-i18n"
|
|
const { t } = useI18n()
|
|
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: t("Seller.storeNameDesc") }],
|
|
fullName: [{ required: true, message: t("Seller.ownerNameDesc") }],
|
|
email: [{ required: true, message: t("Seller.emailDesc") }],
|
|
mobile: [{ required: true, message: t("Seller.mobileDesc") }],
|
|
description: [{ required: true, message: t("Seller.storeDescriptionErr") }]
|
|
}
|
|
const formRef = ref(null)
|
|
const formData = reactive({
|
|
storeName: "",
|
|
fullName: "",
|
|
email: "",
|
|
mobile: "",
|
|
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(() => {
|
|
const data = {
|
|
// userId: 0,
|
|
shopName: formData.storeName,
|
|
// avatar: "",
|
|
// brandBanner: "",
|
|
ownerName: formData.fullName,
|
|
email: formData.email,
|
|
mobile: formData.mobile,
|
|
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>
|