fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by shuaiguo
Commit e882ae948c53f92511e4aabffe8265269d4bc35a 2 parents c90d0648 f8890859

Merge branch 'refs/heads/feature/2filter' into develop

Inline Side-by-side
Showing 3 changed files with 65 additions and 32 deletions
<template>
<div class="list-component" v-show="showType" @click="hideClick">
<div class="list-bg">
<div class="list-item" v-if="list.length" v-for="(item, index) in list" :key="index">
<div class="item" @click="(e)=> clickItem(e, item.itemId, item.itemName)">
<span :class="selectParams.id.includes(item.itemId) ? 'active-span' : '' ">{{item.itemName}}</span>
<div v-if="selectParams.id.includes(item.itemId)" class="select-class"></div>
</div>
</div>
<div>
<div class="list-component" v-show="showType" @click="hideClick" @touchmove.prevent>
</div>
<div class="list-bottom">
<div class="bottom-btn clear" @click="(e)=>clear(e)">重置</div>
<div class="bottom-btn submit" @click="(e)=>submit(e)">确定</div>
<div class="list-scroll" v-show="showType">
<div class="list-bg" @touchmove.prevent>
<Scroll class="container">
<div class="list-item" v-if="list.length" v-for="(item, index) in list" :key="index">
<div class="item" @click="(e)=> clickItem(e, item.itemId, item.itemName)" >
<span :class="selectParams.id.includes(item.itemId) ? 'active-span' : '' ">{{item.itemName}}</span>
<div v-if="selectParams.id.includes(item.itemId)" class="select-class"></div>
</div>
</div>
</Scroll>
</div>
<div class="list-bottom">
<div class="bottom-btn clear" @click="(e)=>clear(e)">重置</div>
<div class="bottom-btn submit" @click="(e)=>submit(e)">确定</div>
</div>
</div>
</div>
</template>
<script>
import { Scroll } from 'cube-ui';
export default {
components: {
Scroll,
},
data() {
return {
showType: false,
... ... @@ -78,16 +91,31 @@ export default {
</script>
<style lang="scss" scoped>
.container {
width: 100%;
max-height: 480px;
flex-direction: row;
}
.list-component {
position: absolute;
bottom: 0;
left: 0;
top: 186px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 9;
}
.list-scroll {
position: absolute;
left: 0;
top: 186px;
width: 100%;
z-index: 99;
}
.list-bg {
display: flex;
flex-wrap: wrap;
... ... @@ -100,15 +128,16 @@ export default {
.list-item {
width: 50%;
padding: 0 40px;
height: 80px;
border-style: none;
overflow: hidden;
float: left;
}
.item {
display: flex;
flex-direction: row;
align-items: center;
height: 80px;
span {
font-size: 24px;
... ... @@ -127,7 +156,7 @@ export default {
.select-class {
margin-left: 16px;
width: 24px;
height: 24px;;
height: 24px;
background: url(~statics/image/list/selected@3x.png) no-repeat;
background-size: contain;
}
... ...
... ... @@ -380,8 +380,8 @@ export default {
width: 20px;
height: 4px;
background: #000;
margin-left: 6px;
margin-right: 6px;
margin-left: 10px;
margin-right: 10px;
}
.content-search {
... ...
... ... @@ -19,26 +19,24 @@
<div class="filter-sub">
<div class="filter-sub-tab">
<div class="tab-sub-group-item" :class="filterSelectArr.includes('new') && 'selected-sub-tab'" @click="pressFilterType('new')">全新瑕疵</div>
<div class="tab-sub-group-item" :class="filterSelectArr.includes('2hand') && 'selected-sub-tab'" @click="pressFilterType('2hand')">二手</div>
<div class="tab-sub-group-item" :class="activeClass('new')" @click="pressFilterType('new')">全新瑕疵</div>
<div class="tab-sub-group-item" :class="activeClass('2hand')" @click="pressFilterType('2hand')">二手</div>
<div class="tab-sub-group-item" :class="filterSelectArr.includes('size') && 'selected-sub-tab'" @click="pressFilterType('size')">
<div class="tab-sub-group-item" :class="activeClass('size')" @click="pressFilterType('size')">
<span>{{this.selectedFilterNameParams.size.toString().length ? this.selectedFilterNameParams.size.toString(): '尺码'}}</span>
<div :class="[filterSelectArr.includes('size') ? lastFilterFlag === 'size' ? foldClass : 'white-down-arrow' : 'black-down-arrow']"></div>
<div :class="foldClass('size')"></div>
</div>
<div class="tab-sub-group-item" :class="filterSelectArr.includes('brand') && 'selected-sub-tab'" @click="pressFilterType('brand')">
<div class="tab-sub-group-item" :class="activeClass('brand')" @click="pressFilterType('brand')">
<span>{{this.selectedFilterNameParams.brand.toString().length ? this.selectedFilterNameParams.brand.toString(): '品牌'}}</span>
<div :class="[filterSelectArr.includes('brand') ? lastFilterFlag === 'brand' ? foldClass : 'white-down-arrow' : 'black-down-arrow']"></div>
<div :class="foldClass('brand')"></div>
</div>
<div class="tab-sub-group-item" :class="filterSelectArr.includes('gender') && 'selected-sub-tab'" @click="pressFilterType('gender')">
<div class="tab-sub-group-item" :class="activeClass('gender')" @click="pressFilterType('gender')">
<span>{{this.selectedFilterNameParams.gender.toString().length ? this.selectedFilterNameParams.gender.toString(): '性别'}}</span>
<div :class="[filterSelectArr.includes('gender') ? lastFilterFlag === 'gender' ? foldClass : 'white-down-arrow' : 'black-down-arrow']"></div>
<div :class="foldClass('gender')"></div>
</div>
</div>
</div>
<LayoutScroll ref="scroll" class="list-scroll-bg" v-if="skupList.list.length"
... ... @@ -147,11 +145,17 @@ export default {
this.selectedType === 1 ? this.priceDesc ? 'asc-arrow' : 'desc-arrow' : 'price-arrow'
];
},
foldClass() {
activeClass: (vm) => (name) => {
return [
this.foldStatus ? 'white-up-arrow' : 'white-down-arrow'
vm.filterSelectArr.includes(name) && 'selected-sub-tab'
];
}
},
foldClass: (vm) => (name) => {
let isCurrent = vm.lastFilterFlag === name ? true : false;
return [
vm.filterSelectArr.includes(name) ? isCurrent ? vm.foldStatus ? 'white-up-arrow' : 'white-down-arrow' : 'white-down-arrow' : 'black-down-arrow'
];
},
},
methods: {
...mapActions(['fetchSecondSkupList', 'fetchSecondFilterData']),
... ... @@ -612,8 +616,8 @@ export default {
width: 100%;
height: 86px;
display: flex;
padding-left: 20px;
padding-right: 20px;
padding-left: 24px;
padding-right: 24px;
background: #fff;
}
... ... @@ -626,8 +630,8 @@ export default {
background: #f5f5f5;
font-size: 24px;
color: #000;
border-radius: 4px;
margin-right: 18px;
border-radius: 8px;
margin-right: 15px;
height: 56px;
width: 128px;
display: flex;
... ...