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 @@
<div id="ssr">
{{#product}}
<div class="ssr show-box first-box">
<div class="image-carousel">
<div class="swipe">
<div class="swipe-items-wrap">
{{#each goods_list}}
{{#if color_image}}
<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>
{{/if}}
{{/each}}
<div class="image-swipe">
<div class="swipe-wrap">
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
{{#each goods_list}}
{{#if color_image}}
<div class="swiper-slide" style="width: 300px;" data-swiper-slide-index="0">
<img width="100%" src="{{image2 color_image w=580 h=770 q=80}}/interlace/1">
</div>
{{/if}}
{{/each}}
</div>
</div>
</div>
</div>
<div class="title-box">
<h1 class="line-clamp-2">{{product_name}}</h1>
</div>
{{#brandInfo}}
<div class="show-box zero-top-margin">
<div>
<ul class="item-action">
<li><a href="/product/shop/{{brand_domain}}"><i class="brand icon"></i><span class="action-text">
{{brand_name}}</span></a>
</li>
<li><i class="icon icon-focus"></i><span class="action-text">收藏</span></li>
<li><i class="icon icon-share2"></i><span class="action-text">分享</span></li>
</ul>
</div>
<hr>
{{#product}}
<div class="item-price">
<i class="price highlight">{{formatPrice}}</i>
{{#if isDiscount}}
<i class="price strike-through">{{format_market_price}}</i>
<i class="price line-through">{{format_market_price}}</i>
{{/if}}
<i class="price {{#if isDiscount}}highlight{{/if}}">{{formatPrice}}</i>
<p class="product-name">{{product_name}}</p>
</div>
</div>
{{#brandInfo}}
<div class="ssr show-box brand">
<img src="{{image2 brand_ico w=110 h=68 q=80}}">
<h2>{{brand_name}}</h2>
<div class="brand-go">
<span>进入店铺</span>
<span class="icon icon-right"></span>
{{/product}}
<div class="service">
<ul>
<li><i class="icon icon-real"></i>100%品牌正品</li>
<li class="return"><i class="icon icon-seven"></i>7天无理由退换货</li>
<li><i class="icon icon-onlineservice"></i>便捷在线客服</li>
</ul>
</div>
<a href="/product/shop/{{brand_domain}}"></a>
</div>
{{/brandInfo}}
{{/product}}
... ...
... ... @@ -6,9 +6,13 @@
<span class="t-val ellipsis">{{chosenVal}}</span>
</div>
<div class="choices" v-show="show">
<span v-for="(index, choice) in choices"
class="ellipsis choice" :class="{active: true}"
@click="addChoice(index, choice)">{{choice._chosen}}{{choice.name}}</span>
<span v-for="(index, choice) in allChoices"
class="ellipsis choice"
@click="addChoice(index, choice)">
{{name === '品类' ? choice.category_name : choice.name}}
</span>
<span v-if="showMore" class="choice more" @click="expandAll(name)">全部{{name
}}<i class="icon icon-right"></i></span>
</div>
</div>
</template>
... ... @@ -22,42 +26,24 @@ module.exports = {
},
data(){
return {
filterItems: [
{
text: '品牌',
val: ''
}, {
text: '品类',
val: ''
}, {
text: '颜色',
val: ''
}, {
text: '尺寸',
val: ''
}, {
text: '价格',
val: ''
}, {
text: '折扣',
val: ''
}
],
chosenVal: '',
show: false,
chosen: []
chosen: [],
choiceName: '品牌',
showMore: false,
allChoices: []
}
},
computed: {
allChoices(){
const temp = [];
const len = this.choices.length;
const isLimited = ['品牌', '品类'].indexOf(this.name) > -1;
this.choices.forEach(choice => {
choice._chosen = false;
temp.push(choice);
});
return temp;
if (len > 11 && isLimited) {
this.showMore = true;
return this.choices.slice(0, 11);
}
return this.choices.slice();
}
},
methods: {
... ... @@ -80,7 +66,14 @@ module.exports = {
index,
choice
});
console.log(this.choices);
},
expandAll(name){
switch (name) {
case '品牌':
break;
case '品类':
break;
}
}
},
watch: {
... ... @@ -158,6 +151,14 @@ module.exports = {
background-size: cover;
}
}
&.more {
border: none!important;
.icon-right {
line-height: 1;
}
}
}
}
... ...
... ... @@ -21,6 +21,7 @@
</div>
</template>
<script>
const _ = require('lodash');
const bus = require('common/vue-bus');
module.exports = {
... ... @@ -55,7 +56,7 @@ module.exports = {
}, {
name: '品类',
val: '',
choices: this.filter.group_sort // 多级
choices: []
}, {
name: '颜色',
val: '',
... ... @@ -80,8 +81,6 @@ module.exports = {
}
}
},
watch: {
},
computed: {
recClass(){
return {
... ... @@ -126,6 +125,16 @@ module.exports = {
},
components: {
filterItem: require('./filter-item.vue')
},
created(){
let temp = [];
_.each(this.filter.group_sort, item => {
temp = temp.concat(item.sub);
});
this.filterItems[1].choices = temp;
console.log(temp)
}
};
</script>
... ...