aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

111

Browse Source
This commit is contained in:
李志鹏
2026-04-08 15:19:21 +08:00
parent fe93b375c4
commit dbb9d5f3bc
12 changed files with 271 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/HomeMain.vue
View File

@@ -375,11 +375,11 @@
</div>
<div class="select_item" @click="onBecomeSeller">
<span class="icon"><svg-icon name="seller-sellerIndex" /></span>
<span class="select_item_des">Become a Seller</span>
<span class="select_item_des">{{ $t('Header.BecomeSeller') }}</span>
</div>
<div class="select_item" @click="onSellerDashboard">
<span class="icon"><svg-icon name="seller-sellerIndex" /></span>
<span class="select_item_des">Seller Dashboard</span>
<span class="select_item_des">{{ $t('Header.SellerDashboard') }}</span>
<a-badge :dot="true"></a-badge>
</div>
<router-link

37
src/views/SellerDashboard/BecomeSeller/index.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<div class="become-seller">
<seller-header
title="Apply to Become a Seller"
tip="Join the Stylish Parade and start selling your design work"
/>
<div class="content">
<sellerReview v-if="isSubmit"></sellerReview>
<sellerReview v-else></sellerReview>
</div>
</div>
</template>
<script setup>
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()
const isSubmit = ref(false)
</script>
<style scoped lang="less">
.become-seller {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
> .content {
margin-top: 4rem;
flex: 1;
overflow: hidden;
}
}
</style>

126
src/views/SellerDashboard/BecomeSeller/sellerReview.vue Normal file
View File

@@ -0,0 +1,126 @@
<template>
<div class="seller-review">
<img class="success" src="@/assets/images/seller/success-1.png" />
<div class="title">Application Submitted</div>
<div class="tip">
Our team will review your application and get back to you within 1–3 business days.
You'll receive a notification in your email once a decision has been made.
</div>
<div class="step-list">
<div v-for="v in list" :key="v.title" class="step-item">
<img v-show="!v.active" src="@/assets/images/seller/success-0.png" />
<img v-show="v.active" src="@/assets/images/seller/success-1.png" />
<div class="content">
<div class="title">{{ v.title }}</div>
<div class="tip">{{ v.tip }}</div>
</div>
</div>
</div>
<button class="home-btn" @click="onBackToHome">Back to Homepage</button>
</div>
</template>
<script setup>
import { ref, computed } from "vue"
import { useRoute, useRouter } from "vue-router"
const route = useRoute()
const router = useRouter()
const list = ref([
{
title: "Step 1: Submit Application",
tip: "Fill out the seller information form and agree to our terms",
active: true
},
{
title: "Step 2: Review & Verification",
tip: "Our team will review your application (typically 1-3 business days)",
active: false
},
{
title: "Step 3: Start Selling",
tip: "Once approved, access your seller dashboard and start listing products ",
active: false
}
])
const onBackToHome = () => {
router.push({ name: "home" })
}
</script>
<style scoped lang="less">
.seller-review {
margin: 0 auto;
width: 60rem;
height: 90%;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2.4rem;
> .success {
width: 10rem;
height: 10rem;
padding: 1.2rem;
}
> .title {
font-size: 2.2rem;
line-height: 130%;
text-align: center;
color: #000;
}
> .tip {
font-family: pingfang_medium;
font-size: 1.8rem;
line-height: 170%;
text-align: center;
color: #585858;
}
> .step-list {
margin: 2.6rem 0;
width: 100%;
padding: 1.6rem;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
gap: 1.4rem;
border-radius: 1.2rem;
> .step-item {
display: flex;
> img {
width: 2rem;
height: 2rem;
margin: 0.2rem;
margin-right: 1.2rem;
}
> .content {
flex: 1;
font-size: 1.4rem;
> .title {
font-style: Bold;
color: #000;
line-height: 150%;
}
> .tip {
font-family: "pingfang_medium";
line-height: 170%;
color: #737373;
}
}
}
}
> .home-btn {
width: 31rem;
height: 6rem;
border-radius: 4rem;
font-size: 1.6rem;
color: #fff;
background-color: #000;
border: none;
cursor: pointer;
outline: none;
&:active {
opacity: 0.8;
}
}
}
</style>

22
src/views/SellerDashboard/becomeSeller.vue
View File

@@ -1,22 +0,0 @@
<template>
<div class="become-seller"></div>
</template>
<script setup>
import { ref, computed } from "vue"
import { useRoute, useRouter } from "vue-router"
const route = useRoute()
const router = useRouter()
const activePath = computed(() => route.path)
</script>
<style scoped lang="less">
.become-seller {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
</style>

95
src/views/SellerDashboard/seller-header.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<div class="seller-header">
<div class="back" @click="() => router.back()">
<svg-icon name="seller-back" size="24" />
</div>
<div class="content">
<span class="title" v-show="title">{{ title }}</span>
<span class="tip" v-show="tip">{{ tip }}</span>
<div class="breadcrumbs" v-show="breadcrumbs.length > 0">
<template v-for="(v, i) in breadcrumbs" :key="i">
<span
class="title"
:class="{
last: i === breadcrumbs.length - 1
}"
@click="() => router.push({ name: v.name })"
>{{ v.title }}</span
>
<span class="icon" v-show="i < breadcrumbs.length - 1">
<svg-icon name="seller-arrow_right_solid" size="10" />
</span>
</template>
</div>
</div>
<div class="right">
<slot name="right"></slot>
</div>
</div>
</template>
<script setup>
import { ref, computed } from "vue"
import { useRoute, useRouter } from "vue-router"
const props = defineProps({
title: {
type: String,
default: ""
},
tip: {
type: String,
default: ""
},
breadcrumbs: {
type: Array, // { title: string, name: string }
default: () => []
}
})
const route = useRoute()
const router = useRouter()
</script>
<style scoped lang="less">
.seller-header {
width: 100%;
display: flex;
align-items: center;
gap: 2.4rem;
> .back {
width: 5rem;
height: 5rem;
border-radius: 1.2rem;
border: 1px solid #d7d7d7;
cursor: pointer;
}
> .content {
flex: 1;
display: flex;
flex-direction: column;
> .title {
line-height: 130%;
font-size: 2.4rem;
color: #000;
}
> .tip {
font-family: "pingfang_medium";
font-size: 1.4rem;
line-height: 150%;
color: #888;
}
> .breadcrumbs {
display: flex;
align-items: center;
gap: 1rem;
> .title {
font-family: "pingfang_regular";
color: #999;
font-size: 1.4rem;
cursor: pointer;
&:not(.last) {
text-decoration: underline;
}
}
}
}
}
</style>