307 lines
7.3 KiB
Vue
307 lines
7.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view :style="{height: tabHeight + 1 +'px'}">
|
||
<view :class="topFixed?'select-tab-fixed-top':'select-tab'" :style="{height: tabHeight+'px'}">
|
||
<view class="select-tab-item" :style="{width: itemWidth}" v-for="(item,index) in titleList" :key="index" @tap="showMenuClick(index)">
|
||
<text :style="{color:color}">{{item.title}}</text>
|
||
<text class="arrows sl-font" :class="statusList[index].isActive?up:down"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<popup-layer ref="popupRef" :direction="'bottom'" @close="close" :isTransNav="isTransNav" :navHeight="navHeight"
|
||
:tabHeight="tabHeight">
|
||
<sl-filter-view :ref="'slFilterView'" :independence="independence" :themeColor="themeColor" :menuList.sync="menuListTemp"
|
||
ref="slFilterView" @confirm="filterResult"></sl-filter-view>
|
||
</popup-layer>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import popupLayer from '@/components/sl-filter/popup-layer.vue';
|
||
import slFilterView from '@/components/sl-filter/filter-view.vue';
|
||
export default {
|
||
components: {
|
||
popupLayer,
|
||
slFilterView
|
||
},
|
||
props: {
|
||
menuList: {
|
||
type: Array,
|
||
default () {
|
||
return []
|
||
}
|
||
},
|
||
themeColor: {
|
||
type: String,
|
||
default () {
|
||
return '#fe0505'
|
||
}
|
||
},
|
||
color: {
|
||
type: String,
|
||
default () {
|
||
return '#666666'
|
||
}
|
||
},
|
||
independence: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
isTransNav: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
navHeight: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
topFixed: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
itemWidth() {
|
||
return 'calc(100%/2)'
|
||
},
|
||
menuListTemp: {
|
||
get() {
|
||
return this.getMenuListTemp();
|
||
},
|
||
set(newObj) {
|
||
return newObj;
|
||
}
|
||
}
|
||
},
|
||
// #ifndef H5
|
||
onReady: function() {
|
||
let arr = [];
|
||
let titleArr = [];
|
||
let r = {};
|
||
for (let i = 0; i < this.menuList.length; i++) {
|
||
arr.push({
|
||
'isActive': false
|
||
});
|
||
// titleArr.push({
|
||
// 'title': this.menuList[i].title,
|
||
// 'key': this.menuList[i].key
|
||
// })
|
||
|
||
r[this.menuList[i].key] = this.menuList[i].title;
|
||
|
||
if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
|
||
titleArr.push({
|
||
'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
|
||
'key': this.menuList[i].key
|
||
})
|
||
} else {
|
||
titleArr.push({
|
||
'title': this.menuList[i].title,
|
||
'key': this.menuList[i].key
|
||
})
|
||
}
|
||
|
||
}
|
||
this.statusList = arr;
|
||
this.titleList = titleArr;
|
||
this.tempTitleObj = r;
|
||
},
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
created: function() {
|
||
let arr = [];
|
||
let titleArr = [];
|
||
let r = {};
|
||
for (let i = 0; i < this.menuList.length; i++) {
|
||
arr.push({
|
||
'isActive': false
|
||
});
|
||
// titleArr.push({
|
||
// 'title': this.menuList[i].title,
|
||
// 'key': this.menuList[i].key
|
||
// });
|
||
r[this.menuList[i].key] = this.menuList[i].title;
|
||
|
||
if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
|
||
titleArr.push({
|
||
'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
|
||
'key': this.menuList[i].key
|
||
})
|
||
} else {
|
||
titleArr.push({
|
||
'title': this.menuList[i].title,
|
||
'key': this.menuList[i].key
|
||
})
|
||
}
|
||
|
||
}
|
||
this.statusList = arr;
|
||
this.titleList = titleArr;
|
||
this.tempTitleObj = r;
|
||
},
|
||
// #endif
|
||
data() {
|
||
return {
|
||
down: 'sl-down',
|
||
up: 'sl-up',
|
||
tabHeight: 50,
|
||
statusList: [],
|
||
selectedIndex: '',
|
||
titleList: [],
|
||
tempTitleObj: {}
|
||
};
|
||
},
|
||
methods: {
|
||
getMenuListTemp() {
|
||
let arr = this.menuList;
|
||
for (let i = 0; i < arr.length; i++) {
|
||
let item = arr[i];
|
||
for (let j = 0; j < item.detailList.length; j++) {
|
||
let d_item = item.detailList[j];
|
||
if (j == 0) {
|
||
d_item.isSelected = true
|
||
} else {
|
||
d_item.isSelected = false
|
||
}
|
||
}
|
||
}
|
||
return arr;
|
||
},
|
||
// 重置所有选项，包括默认选项，并更新result
|
||
resetAllSelect(callback) {
|
||
this.$refs.slFilterView.resetAllSelect(function(e){
|
||
callback(e);
|
||
});
|
||
},
|
||
// 重置选项为设置的默认值，并更新result
|
||
resetSelectToDefault(callback) {
|
||
this.$refs.slFilterView.resetSelectToDefault(function(e){
|
||
callback(e);
|
||
});
|
||
},
|
||
resetMenuList(val) {
|
||
this.menuList = val;
|
||
this.$emit('update:menuList', val)
|
||
this.$forceUpdate();
|
||
this.$refs.slFilterView.resetMenuList(val)
|
||
},
|
||
showMenuClick(index) {
|
||
this.selectedIndex = index;
|
||
if (this.statusList[index].isActive == true) {
|
||
this.$refs.popupRef.close();
|
||
this.statusList[index].isActive = false
|
||
} else {
|
||
this.menuTabClick(index);
|
||
this.$refs.popupRef.show()
|
||
}
|
||
},
|
||
menuTabClick(index) {
|
||
this.$refs.slFilterView.menuTabClick(index);
|
||
for (let i = 0; i < this.statusList.length; i++) {
|
||
if (index == i) {
|
||
this.statusList[i].isActive = true;
|
||
} else {
|
||
this.statusList[i].isActive = false;
|
||
}
|
||
}
|
||
},
|
||
filterResult(obj) {
|
||
let val = obj.result;
|
||
let titlesObj = obj.titles;
|
||
// 处理选项映射到菜单title
|
||
if (this.independence) {
|
||
if (!this.menuList[this.selectedIndex].isMutiple || this.menuList[this.selectedIndex].isSort) {
|
||
let tempTitle = '';
|
||
for (let i = 0; i < this.menuList[this.selectedIndex].detailList.length; i++) {
|
||
let item = this.menuList[this.selectedIndex].detailList[i];
|
||
if (item.value == val[this.menuList[this.selectedIndex].key]) {
|
||
tempTitle = item.title;
|
||
}
|
||
}
|
||
if (this.menuList[this.selectedIndex].reflexTitle) {
|
||
this.titleList[this.selectedIndex].title = tempTitle;
|
||
}
|
||
}
|
||
} else {
|
||
// if(this.titleList[this.selectedIndex].key.indexOf('oilProductCode') !=-1 && this.titleList[this.selectedIndex].title.indexOf('全部') != -1){
|
||
// this.titleList[this.selectedIndex+1].title = '距离排序'
|
||
// console.log(this.titleList[this.selectedIndex].key,this.titleList[this.selectedIndex].title,'spppppppppppp')
|
||
// }
|
||
for (let key in titlesObj) {
|
||
if (!Array.isArray(titlesObj[key])) {
|
||
this.tempTitleObj[key] = titlesObj[key];
|
||
}
|
||
|
||
}
|
||
for (let key in this.tempTitleObj) {
|
||
for (let i = 0; i < this.titleList.length; i++) {
|
||
if (this.titleList[i].key == key) {
|
||
this.titleList[i].title = this.tempTitleObj[key];
|
||
}
|
||
}
|
||
}
|
||
}
|
||
this.$refs.popupRef.close()
|
||
if (obj.isReset) {
|
||
|
||
} else{
|
||
this.$emit("result", val)
|
||
}
|
||
|
||
|
||
},
|
||
close() {
|
||
for (let i = 0; i < this.statusList.length; i++) {
|
||
this.statusList[i].isActive = false;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import 'iconfont/iconfont.css';
|
||
|
||
.select-tab {
|
||
border-bottom: #F7F7F7 1px solid;
|
||
background-color: #FFFFFF;
|
||
display: flex;
|
||
width: 100%;
|
||
}
|
||
|
||
.select-tab-fixed-top {
|
||
border-bottom: #F7F7F7 1px solid;
|
||
background-color: #FFFFFF;
|
||
display: flex;
|
||
width: 100%;
|
||
position: fixed;
|
||
/* #ifdef H5 */
|
||
top: 44px;
|
||
/* #endif */
|
||
/* #ifndef H5 */
|
||
top: 0;
|
||
/* #endif */
|
||
}
|
||
|
||
.arrows {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.select-tab .select-tab-item,
|
||
.select-tab-fixed-top .select-tab-item {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.select-tab .select-tab-item text,
|
||
.select-tab-fixed-top .select-tab-item text {
|
||
color: #666666;
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
}
|
||
</style>
|