fe / yohoblk-wap · Commits

Go to a project

Authored by 李奇
Commit 2bca614e2cca848a2352e670d363324c93ce0b9d 1 parent 25152541

列表页filter修改

Inline Side-by-side
Showing 3 changed files with 84 additions and 57 deletions
@@ -2,34 +2,51 @@ @@ -2,34 +2,51 @@
2 <div id="ssr"> 2 <div id="ssr">
3 {{#product}} 3 {{#product}}
4 <div class="ssr show-box first-box"> 4 <div class="ssr show-box first-box">
5 - <div class="image-carousel">  
6 - <div class="swipe">  
7 - <div class="swipe-items-wrap">  
8 - {{#each goods_list}}  
9 - {{#if color_image}}  
10 - <div class="swipe-item {{#if @first}}active{{/if}}"> <img width="100%" alt="" src="{{image2 color_image w=750 h=1000 q=80}}/interlace/1"></div>  
11 - {{/if}}  
12 - {{/each}} 5 + <div class="image-swipe">
  6 + <div class="swipe-wrap">
  7 + <div class="swiper-container swiper-container-horizontal">
  8 + <div class="swiper-wrapper">
  9 + {{#each goods_list}}
  10 + {{#if color_image}}
  11 + <div class="swiper-slide" style="width: 300px;" data-swiper-slide-index="0">
  12 + <img width="100%" src="{{image2 color_image w=580 h=770 q=80}}/interlace/1">
  13 + </div>
  14 + {{/if}}
  15 + {{/each}}
  16 + </div>
13 </div> 17 </div>
14 </div> 18 </div>
15 </div> 19 </div>
16 - <div class="title-box">  
17 - <h1 class="line-clamp-2">{{product_name}}</h1> 20 + </div>
  21 + {{#brandInfo}}
  22 + <div class="show-box zero-top-margin">
  23 + <div>
  24 + <ul class="item-action">
  25 + <li><a href="/product/shop/{{brand_domain}}"><i class="brand icon"></i><span class="action-text">
  26 + {{brand_name}}</span></a>
  27 + </li>
  28 + <li><i class="icon icon-focus"></i><span class="action-text">收藏</span></li>
  29 + <li><i class="icon icon-share2"></i><span class="action-text">分享</span></li>
  30 + </ul>
  31 + </div>
  32 + <hr>
  33 + {{#product}}
  34 + <div class="item-price">
  35 + <i class="price highlight">{{formatPrice}}</i>
18 {{#if isDiscount}} 36 {{#if isDiscount}}
19 - <i class="price strike-through">{{format_market_price}}</i> 37 + <i class="price line-through">{{format_market_price}}</i>
20 {{/if}} 38 {{/if}}
21 - <i class="price {{#if isDiscount}}highlight{{/if}}">{{formatPrice}}</i> 39 + <p class="product-name">{{product_name}}</p>
22 </div> 40 </div>
23 - </div>  
24 - {{#brandInfo}}  
25 - <div class="ssr show-box brand">  
26 - <img src="{{image2 brand_ico w=110 h=68 q=80}}">  
27 - <h2>{{brand_name}}</h2>  
28 - <div class="brand-go">  
29 - <span>进入店铺</span>  
30 - <span class="icon icon-right"></span> 41 + {{/product}}
  42 + <div class="service">
  43 + <ul>
  44 + <li><i class="icon icon-real"></i>100%品牌正品</li>
  45 + <li class="return"><i class="icon icon-seven"></i>7天无理由退换货</li>
  46 +
  47 + <li><i class="icon icon-onlineservice"></i>便捷在线客服</li>
  48 + </ul>
31 </div> 49 </div>
32 - <a href="/product/shop/{{brand_domain}}"></a>  
33 </div> 50 </div>
34 {{/brandInfo}} 51 {{/brandInfo}}
35 {{/product}} 52 {{/product}}
@@ -6,9 +6,13 @@ @@ -6,9 +6,13 @@
6 <span class="t-val ellipsis">{{chosenVal}}</span> 6 <span class="t-val ellipsis">{{chosenVal}}</span>
7 </div> 7 </div>
8 <div class="choices" v-show="show"> 8 <div class="choices" v-show="show">
9 - <span v-for="(index, choice) in choices"  
10 - class="ellipsis choice" :class="{active: true}"  
11 - @click="addChoice(index, choice)">{{choice._chosen}}{{choice.name}}</span> 9 + <span v-for="(index, choice) in allChoices"
  10 + class="ellipsis choice"
  11 + @click="addChoice(index, choice)">
  12 + {{name === '品类' ? choice.category_name : choice.name}}
  13 + </span>
  14 + <span v-if="showMore" class="choice more" @click="expandAll(name)">全部{{name
  15 + }}<i class="icon icon-right"></i></span>
12 </div> 16 </div>
13 </div> 17 </div>
14 </template> 18 </template>
@@ -22,42 +26,24 @@ module.exports = { @@ -22,42 +26,24 @@ module.exports = {
22 }, 26 },
23 data(){ 27 data(){
24 return { 28 return {
25 - filterItems: [  
26 - {  
27 - text: '品牌',  
28 - val: ''  
29 - }, {  
30 - text: '品类',  
31 - val: ''  
32 - }, {  
33 - text: '颜色',  
34 - val: ''  
35 - }, {  
36 - text: '尺寸',  
37 - val: ''  
38 - }, {  
39 - text: '价格',  
40 - val: ''  
41 - }, {  
42 - text: '折扣',  
43 - val: ''  
44 - }  
45 - ],  
46 chosenVal: '', 29 chosenVal: '',
47 show: false, 30 show: false,
48 - chosen: [] 31 + chosen: [],
  32 + choiceName: '品牌',
  33 + showMore: false,
  34 + allChoices: []
49 } 35 }
50 }, 36 },
51 computed: { 37 computed: {
52 allChoices(){ 38 allChoices(){
53 - const temp = []; 39 + const len = this.choices.length;
  40 + const isLimited = ['品牌', '品类'].indexOf(this.name) > -1;
54 41
55 - this.choices.forEach(choice => {  
56 - choice._chosen = false;  
57 - temp.push(choice);  
58 - });  
59 -  
60 - return temp; 42 + if (len > 11 && isLimited) {
  43 + this.showMore = true;
  44 + return this.choices.slice(0, 11);
  45 + }
  46 + return this.choices.slice();
61 } 47 }
62 }, 48 },
63 methods: { 49 methods: {
@@ -80,7 +66,14 @@ module.exports = { @@ -80,7 +66,14 @@ module.exports = {
80 index, 66 index,
81 choice 67 choice
82 }); 68 });
83 - console.log(this.choices); 69 + },
  70 + expandAll(name){
  71 + switch (name) {
  72 + case '品牌':
  73 + break;
  74 + case '品类':
  75 + break;
  76 + }
84 } 77 }
85 }, 78 },
86 watch: { 79 watch: {
@@ -158,6 +151,14 @@ module.exports = { @@ -158,6 +151,14 @@ module.exports = {
158 background-size: cover; 151 background-size: cover;
159 } 152 }
160 } 153 }
  154 +
  155 + &.more {
  156 + border: none!important;
  157 +
  158 + .icon-right {
  159 + line-height: 1;
  160 + }
  161 + }
161 } 162 }
162 } 163 }
163 164
@@ -21,6 +21,7 @@ @@ -21,6 +21,7 @@
21 </div> 21 </div>
22 </template> 22 </template>
23 <script> 23 <script>
  24 +const _ = require('lodash');
24 const bus = require('common/vue-bus'); 25 const bus = require('common/vue-bus');
25 26
26 module.exports = { 27 module.exports = {
@@ -55,7 +56,7 @@ module.exports = { @@ -55,7 +56,7 @@ module.exports = {
55 }, { 56 }, {
56 name: '品类', 57 name: '品类',
57 val: '', 58 val: '',
58 - choices: this.filter.group_sort // 多级 59 + choices: []
59 }, { 60 }, {
60 name: '颜色', 61 name: '颜色',
61 val: '', 62 val: '',
@@ -80,8 +81,6 @@ module.exports = { @@ -80,8 +81,6 @@ module.exports = {
80 } 81 }
81 } 82 }
82 }, 83 },
83 - watch: {  
84 - },  
85 computed: { 84 computed: {
86 recClass(){ 85 recClass(){
87 return { 86 return {
@@ -126,6 +125,16 @@ module.exports = { @@ -126,6 +125,16 @@ module.exports = {
126 }, 125 },
127 components: { 126 components: {
128 filterItem: require('./filter-item.vue') 127 filterItem: require('./filter-item.vue')
  128 + },
  129 + created(){
  130 + let temp = [];
  131 + _.each(this.filter.group_sort, item => {
  132 + temp = temp.concat(item.sub);
  133 + });
  134 +
  135 + this.filterItems[1].choices = temp;
  136 +
  137 + console.log(temp)
129 } 138 }
130 }; 139 };
131 </script> 140 </script>