118 lines
2.5 KiB
Vue
118 lines
2.5 KiB
Vue
<template>
|
|
<div class="seller-dashboard-index">
|
|
<div class="nav">
|
|
<div
|
|
v-for="v in list"
|
|
:key="v.path"
|
|
:class="{ active: new RegExp(`^${v.path}`).test(activePath) }"
|
|
@click="handleClick(v.path)"
|
|
>
|
|
<div class="icon"><svg-icon :name="v.icon" size="20" /></div>
|
|
<span class="layer">{{ v.layer }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<router-view></router-view>
|
|
<toolTipBox v-model:visible="visible" @close="() => {}" ref="toolTipBoxRef"></toolTipBox>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Https } from "@/tool/https"
|
|
import { ref, computed, onMounted, onUnmounted } from "vue"
|
|
import { useRoute, useRouter } from "vue-router"
|
|
import toolTipBox from "./toolTipBox.vue"
|
|
import myEvent from "@/tool/myEvents.js"
|
|
import { useStore } from "vuex"
|
|
const store = useStore()
|
|
store.dispatch("seller/get_designerInfo")
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const visible = ref(false)
|
|
const list = ref([
|
|
{
|
|
icon: "seller-brandProfile",
|
|
layer: "Brand Profile",
|
|
path: "/home/seller/brandProfile"
|
|
},
|
|
{
|
|
icon: "seller-myListings",
|
|
layer: "My Listings",
|
|
path: "/home/seller/myListings"
|
|
},
|
|
{
|
|
icon: "seller-myOrders",
|
|
layer: "My Orders",
|
|
path: "/home/seller/myOrders"
|
|
},
|
|
{
|
|
icon: "seller-settings",
|
|
layer: "Settings",
|
|
path: "/home/seller/settings"
|
|
}
|
|
])
|
|
const toolTipBoxRef = ref(null)
|
|
const activePath = computed(() => route.path)
|
|
const handleClick = (path) => {
|
|
if (path === activePath.value) return
|
|
router.push(path)
|
|
}
|
|
onMounted(()=>{
|
|
myEvent.add('newListing',(path)=>{
|
|
toolTipBoxRef.value.routerPath = path
|
|
visible.value = true
|
|
})
|
|
})
|
|
onUnmounted(() => {
|
|
myEvent.remove("newListing")
|
|
})
|
|
</script>
|
|
<style scoped lang="less">
|
|
.seller-dashboard-index {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
> .nav {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3.6rem;
|
|
margin-bottom: 4rem;
|
|
> div {
|
|
width: 18rem;
|
|
height: 6rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
> .icon {
|
|
margin-right: 1rem;
|
|
color: #b0b0b0;
|
|
}
|
|
> .layer {
|
|
font-size: 2rem;
|
|
color: #999999;
|
|
}
|
|
&.active {
|
|
> .icon,
|
|
> .layer {
|
|
color: #000;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 0.4rem;
|
|
background-color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|