Showing
1 changed file
with
23 additions
and
3 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 | + <span @click.stop="toggle()"> | ||
| 5 | <i v-if="!isOpen" class="el-icon-arrow-right"></i><i v-else class="el-icon-arrow-down"></i> | 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,16 +38,28 @@ export default { | ... | @@ -36,16 +38,28 @@ export default { |
| 36 | } | 38 | } |
| 37 | }, | 39 | }, |
| 38 | methods: { | 40 | methods: { |
| 39 | - toggle() { | 41 | + toggle(v) { |
| 42 | + console.warn(v); | ||
| 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 { | ||
| 40 | if (this.hasChildren) { | 52 | if (this.hasChildren) { |
| 41 | this.isOpen = !this.isOpen; | 53 | this.isOpen = !this.isOpen; |
| 42 | } | 54 | } |
| 55 | + } | ||
| 43 | }, | 56 | }, |
| 44 | goToDetail (v) { // 跳转产品详情 | 57 | goToDetail (v) { // 跳转产品详情 |
| 45 | this.$router.push({ | 58 | this.$router.push({ |
| 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; | ... | ... |
-
Please register or login to post a comment