You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.3 KiB
79 lines
2.3 KiB
<script setup>
|
|
import { getCateList } from '@/api/index.js';
|
|
|
|
import PageBanner from "@/components/PageBanner.vue";
|
|
|
|
import bannerImg from '@/assets/img/pageBanner/p3.jpg';
|
|
|
|
const route = useRoute();
|
|
|
|
const bannerObj = {
|
|
"bImg":bannerImg,
|
|
"pageName":"products",
|
|
"path":"",
|
|
"title":"產品應用"
|
|
}
|
|
|
|
const activeParams = ref({
|
|
"l1":0,
|
|
"l2":0,
|
|
"l3":0,
|
|
});
|
|
|
|
const prodTree = ref([])
|
|
|
|
onMounted(async () => {
|
|
activeParams.value.l1 = route.params.l1;
|
|
activeParams.value.l2 = route.params.l2;
|
|
activeParams.value.l3 = route.params.l3;
|
|
|
|
let res = await useRequest('/index/getCateList');
|
|
if(res.code === 200){
|
|
prodTree.value = res.data;
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="main products">
|
|
<PageBanner :item="bannerObj"/>
|
|
<section class="section leftMenu">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-4 col-xl-3">
|
|
<client-only>
|
|
<ul class="list-group" v-for="(item,index) in prodTree" :key="index">
|
|
<li class="list-group-item" :class="{ active: index == activeParams.l1 }" v-if="item.children.length>0">
|
|
<div class="dropdown" :class="{ collapsed: index != activeParams.l1 }" data-bs-toggle="collapse" :data-bs-target="'#me'+index" aria-expanded="false" :aria-controls="'me'+index">{{item.name}}<i class="fa-solid fa-angle-down"></i></div>
|
|
<div class="dropdown-meun collapse multi-collapse" :class="{ show: index == activeParams.l1 }" :id="'me'+index">
|
|
<NuxtLinkLocale class="dropdown-item"
|
|
:class="{ active: index == activeParams.l1 && i == activeParams.l2 }"
|
|
v-for="(clip,i) in item.children" :key="i"
|
|
:to="'/products/list/' + clip.id">
|
|
{{clip.name}}
|
|
</NuxtLinkLocale>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item" :class="{ active: index == activeParams.l1 }" v-else>{{item.name}}</li>
|
|
</ul>
|
|
</client-only>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-8 col-xl-9">
|
|
<NuxtPage/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style lang="less">
|
|
|
|
</style>
|