Showing
7 changed files
with
71 additions
and
27 deletions
| @@ -19,19 +19,25 @@ | @@ -19,19 +19,25 @@ | ||
| 19 | <div class="right-content"> | 19 | <div class="right-content"> |
| 20 | <Scroll> | 20 | <Scroll> |
| 21 | <div v-for="(itemSub, index) in categorySubList" :key="index"> | 21 | <div v-for="(itemSub, index) in categorySubList" :key="index"> |
| 22 | - <p class="sub-title">————{{itemSub.name}}————</p> | 22 | + <p class="sub-title">——— {{itemSub.name}} ———</p> |
| 23 | <div class="category-sub-root"> | 23 | <div class="category-sub-root"> |
| 24 | - <div class="item-imge-div" | 24 | + <div class="item-div" |
| 25 | v-for="(item, index) in itemSub.sub" | 25 | v-for="(item, index) in itemSub.sub" |
| 26 | :key="index" | 26 | :key="index" |
| 27 | :data-id="item.id" | 27 | :data-id="item.id" |
| 28 | > | 28 | > |
| 29 | - <ImgSize | ||
| 30 | - class="item-imge" | ||
| 31 | - :src="item.image" | ||
| 32 | - :width="60" | ||
| 33 | - :height="60" | ||
| 34 | - /> | 29 | + <div class="item-imge-div" @click="goProductList(item)"> |
| 30 | + <ImgSize | ||
| 31 | + class="item-imge" | ||
| 32 | + :src="item.image" | ||
| 33 | + :width="60" | ||
| 34 | + :height="60" | ||
| 35 | + /> | ||
| 36 | + </div> | ||
| 37 | + <!-- <div v-if="item.isShow" class="item-a-div"> --> | ||
| 38 | + <a v-if="item.isShow" class="item-a-div" :href="item.link"></a> | ||
| 39 | + <!-- </div> --> | ||
| 40 | + | ||
| 35 | </div> | 41 | </div> |
| 36 | </div> | 42 | </div> |
| 37 | </div> | 43 | </div> |
| @@ -75,6 +81,16 @@ export default { | @@ -75,6 +81,16 @@ export default { | ||
| 75 | } | 81 | } |
| 76 | } | 82 | } |
| 77 | }, | 83 | }, |
| 84 | + goProductList(item) { | ||
| 85 | + let key = item.linkType; | ||
| 86 | + let value = item.id; | ||
| 87 | + this.$router.push({ | ||
| 88 | + name: "List", | ||
| 89 | + params: { | ||
| 90 | + key : value | ||
| 91 | + }, | ||
| 92 | + }); | ||
| 93 | + } | ||
| 78 | }, | 94 | }, |
| 79 | computed: { | 95 | computed: { |
| 80 | ...mapState(['categoryParent','categorySubList']), | 96 | ...mapState(['categoryParent','categorySubList']), |
| @@ -128,20 +144,30 @@ export default { | @@ -128,20 +144,30 @@ export default { | ||
| 128 | align-content: flex-start; | 144 | align-content: flex-start; |
| 129 | } | 145 | } |
| 130 | .sub-title{ | 146 | .sub-title{ |
| 131 | - /* background-color: brown; */ | ||
| 132 | font-size: 24px; | 147 | font-size: 24px; |
| 133 | color: #000; | 148 | color: #000; |
| 134 | text-align: center; | 149 | text-align: center; |
| 135 | } | 150 | } |
| 136 | - .item-imge-div { | 151 | + .item-div { |
| 152 | + position: relative; | ||
| 137 | display: flex; | 153 | display: flex; |
| 138 | flex: 0 0 33%; | 154 | flex: 0 0 33%; |
| 139 | height: 150px; | 155 | height: 150px; |
| 140 | align-items: center; | 156 | align-items: center; |
| 141 | justify-content: center; | 157 | justify-content: center; |
| 142 | } | 158 | } |
| 159 | + .item-imge-div { | ||
| 160 | + position:absolute; | ||
| 161 | + z-index: 1; | ||
| 162 | + } | ||
| 143 | .item-imge { | 163 | .item-imge { |
| 144 | object-fit: contain; | 164 | object-fit: contain; |
| 145 | } | 165 | } |
| 166 | + .item-a-div{ | ||
| 167 | + position:absolute; | ||
| 168 | + width: 100%; | ||
| 169 | + height: 100%; | ||
| 170 | + z-index: 99; | ||
| 171 | + } | ||
| 146 | 172 | ||
| 147 | </style> | 173 | </style> |
| @@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
| 2 | <LayoutApp :show-back="true"> | 2 | <LayoutApp :show-back="true"> |
| 3 | <Scroll :scrollEvents="['scroll']" :options="scrollOptions" @scroll="scroll" | 3 | <Scroll :scrollEvents="['scroll']" :options="scrollOptions" @scroll="scroll" |
| 4 | @pulling-up="onPullingUp"> | 4 | @pulling-up="onPullingUp"> |
| 5 | - <ProductList :list="favoriteProductList"></ProductList> | 5 | + <ProductList :list="favoriteProductList.list"></ProductList> |
| 6 | </Scroll> | 6 | </Scroll> |
| 7 | </LayoutApp> | 7 | </LayoutApp> |
| 8 | </template> | 8 | </template> |
| @@ -49,12 +49,9 @@ export default { | @@ -49,12 +49,9 @@ export default { | ||
| 49 | } | 49 | } |
| 50 | } | 50 | } |
| 51 | }, | 51 | }, |
| 52 | + | ||
| 52 | computed: { | 53 | computed: { |
| 53 | ...mapState(['favoriteProductList']), | 54 | ...mapState(['favoriteProductList']), |
| 54 | - // getFa(){ | ||
| 55 | - // let length = this.favoriteProductList.product_list.lenght; | ||
| 56 | - // console.log("length:"+length) | ||
| 57 | - // }, | ||
| 58 | }, | 55 | }, |
| 59 | }; | 56 | }; |
| 60 | </script> | 57 | </script> |
| 1 | <template> | 1 | <template> |
| 2 | - <div class="notice-root"> | 2 | + <div class="notice-root" > |
| 3 | <p class="notice-content">【税率调整】您的商品AIR JORDAN 4 RESET PUSH NONEKJG 2017已经被用户下单，请及时发货</p> | 3 | <p class="notice-content">【税率调整】您的商品AIR JORDAN 4 RESET PUSH NONEKJG 2017已经被用户下单，请及时发货</p> |
| 4 | <div class="time"> | 4 | <div class="time"> |
| 5 | <time> 2018.08.08 17:20</time> | 5 | <time> 2018.08.08 17:20</time> |
| 1 | <template> | 1 | <template> |
| 2 | <div class="notice-root"> | 2 | <div class="notice-root"> |
| 3 | - <p class="notice-content">{{data.name}}</p> | ||
| 4 | - <div class="time"> | ||
| 5 | - <time> {{data.createTime}}</time> | ||
| 6 | - </div> | ||
| 7 | - <div class="item-split-line"/> | 3 | + <a :href="data.url"> |
| 4 | + <p class="notice-content">{{data.name}}</p> | ||
| 5 | + <div class="time"> | ||
| 6 | + <time> {{data.createTime}}</time> | ||
| 7 | + </div> | ||
| 8 | + <div class="item-split-line"/> | ||
| 9 | + </a> | ||
| 8 | </div> | 10 | </div> |
| 9 | </template> | 11 | </template> |
| 10 | 12 |
| @@ -19,16 +19,31 @@ export default function() { | @@ -19,16 +19,31 @@ export default function() { | ||
| 19 | } | 19 | } |
| 20 | state.categoryParent.push(brand); | 20 | state.categoryParent.push(brand); |
| 21 | if (data && data.length) { | 21 | if (data && data.length) { |
| 22 | - data.forEach(val => { | ||
| 23 | - val.isSelect = false; | ||
| 24 | - state.categoryParent.push(val); | ||
| 25 | - }); | 22 | + data.forEach(val => { |
| 23 | + val.isSelect = false; | ||
| 24 | + state.categoryParent.push(val); | ||
| 25 | + }); | ||
| 26 | } | 26 | } |
| 27 | 27 | ||
| 28 | }, | 28 | }, |
| 29 | 29 | ||
| 30 | addCategorySubList(state, {data}) { | 30 | addCategorySubList(state, {data}) { |
| 31 | if(data && data.category){ | 31 | if(data && data.category){ |
| 32 | + let subList = []; | ||
| 33 | + data.category.forEach(val => { | ||
| 34 | + if(val && val.sub){ | ||
| 35 | + val.sub.forEach(item => { | ||
| 36 | + if(item.linkType === 'h5'){ | ||
| 37 | + item.isShow = true; | ||
| 38 | + }else { | ||
| 39 | + item.isShow = false; | ||
| 40 | + } | ||
| 41 | + }) | ||
| 42 | + } | ||
| 43 | + | ||
| 44 | + // console.log(val) | ||
| 45 | + // subList.push(val); | ||
| 46 | + }); | ||
| 32 | state.categorySubList = data.category; | 47 | state.categorySubList = data.category; |
| 33 | } | 48 | } |
| 34 | }, | 49 | }, |
| @@ -45,6 +60,7 @@ export default function() { | @@ -45,6 +60,7 @@ export default function() { | ||
| 45 | type: 1,//表示 品牌 | 60 | type: 1,//表示 品牌 |
| 46 | linkType: '', | 61 | linkType: '', |
| 47 | link: '', | 62 | link: '', |
| 63 | + isShow: false, | ||
| 48 | } | 64 | } |
| 49 | sub.push(subItem); | 65 | sub.push(subItem); |
| 50 | }); | 66 | }); |
| @@ -10,11 +10,15 @@ export default function() { | @@ -10,11 +10,15 @@ export default function() { | ||
| 10 | page: 1, | 10 | page: 1, |
| 11 | pageTotal: 0, | 11 | pageTotal: 0, |
| 12 | recId: '', | 12 | recId: '', |
| 13 | - favoriteProductList: [], | 13 | + favoriteProductList: { |
| 14 | + list:[] | ||
| 15 | + }, | ||
| 14 | }, | 16 | }, |
| 15 | mutations: { | 17 | mutations: { |
| 16 | addList(state, { data }) { | 18 | addList(state, { data }) { |
| 19 | + console.log(data) | ||
| 17 | if(data && data.product_list){ | 20 | if(data && data.product_list){ |
| 21 | + // data.product_list. | ||
| 18 | let list = state.favoriteProductList.list.concat(data.product_list); | 22 | let list = state.favoriteProductList.list.concat(data.product_list); |
| 19 | Vue.set(state.favoriteProductList, "list", list); | 23 | Vue.set(state.favoriteProductList, "list", list); |
| 20 | } | 24 | } |
-
Please register or login to post a comment