Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
770f56b8 1 parent 13a12822

fix 所有产品左侧3层手风琴，第二层可以跳转到类别

Inline Side-by-side
Showing 1 changed file with 26 additions and 6 deletions
1 <template> 1 <template>
2 <div class="accordion-item"> 2 <div class="accordion-item">
3 - <div v-if="hasChildren" class="accordion-header" @click="toggle" :style="item.style"> 3 + <div v-if="hasChildren" class="accordion-header" @click="toggle(item)" :style="item.style">
4 - {{ item.category_name }} 4 + <span :class="[item.list ? 'category-name' : '']">{{ item.category_name }}</span>
5 - <i v-if="!isOpen" class="el-icon-arrow-right"></i><i v-else class="el-icon-arrow-down"></i> 5 + <span @click.stop="toggle()">
6 + <i v-if="!isOpen" class="el-icon-arrow-right"></i><i v-else class="el-icon-arrow-down"></i>
7 + </span>
6 </div> 8 </div>
7 <div v-else class="list-item" @click="goToDetail(item)"> 9 <div v-else class="list-item" @click="goToDetail(item)">
8 {{ item.category_name }} 10 {{ item.category_name }}
...@@ -36,9 +38,20 @@ export default { ...@@ -36,9 +38,20 @@ export default {
36 } 38 }
37 }, 39 },
38 methods: { 40 methods: {
39 - toggle() { 41 + toggle(v) {
40 - if (this.hasChildren) { 42 + console.warn(v);
41 - this.isOpen = !this.isOpen; 43 + if (v?.list) {
44 + this.$router.push({
45 + path: '/product/index',
46 + query: {
47 + id: v.id,
48 + timestamp: Date.now()
49 + }
50 + });
51 + } else {
52 + if (this.hasChildren) {
53 + this.isOpen = !this.isOpen;
54 + }
42 } 55 }
43 }, 56 },
44 goToDetail (v) { // 跳转产品详情 57 goToDetail (v) { // 跳转产品详情
...@@ -46,6 +59,7 @@ export default { ...@@ -46,6 +59,7 @@ export default {
46 path: '/product/detail', 59 path: '/product/detail',
47 query: { 60 query: {
48 id: v.id, 61 id: v.id,
62 + timestamp: Date.now()
49 } 63 }
50 }); 64 });
51 } 65 }
...@@ -76,6 +90,12 @@ export default { ...@@ -76,6 +90,12 @@ export default {
76 -webkit-transition: border-bottom-color .3s; 90 -webkit-transition: border-bottom-color .3s;
77 transition: border-bottom-color .3s; 91 transition: border-bottom-color .3s;
78 outline: 0; 92 outline: 0;
93 + .category-name {
94 + &:hover {
95 + text-decoration: underline;
96 + cursor: pointer;
97 + }
98 + }
79 } 99 }
80 .list-item { 100 .list-item {
81 font-size: 0.85rem; 101 font-size: 0.85rem;
......