You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
306 lines
7.3 KiB
306 lines
7.3 KiB
<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 '#1890FF' |
|
} |
|
}, |
|
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>
|
|
|