载体分类筛选功能
mounted() {
uni.showLoading()
//获取分类
this.getResourceType()
this.getResourceData()
},
//获取分类
getResourceType() {
ApiGetResourceType().then(res => {
const {
result = {}
} = res.data
this.filterTypeItemList = result
})
},
遍历显示分类
<view class="title">请选择载体类型</view>
<view class="filter_list">
<view :class="['filter', { filter_activate: index === selectedFilterTypeItemIndex }]"
v-for="(item, index) in filterTypeItemList " :key="index"
@click="handleSelectTypeFilter(item, index)">
{{ item }}
</view>
</view>
绑定点击添加属性事件
handleSelectTypeFilter(filter, index) {
this.selectedFilterTypeItemIndex = index
this.type = filter
},
type和其他参数传给获取数据的接口
getResourceData() {
const params = {
pageSize: this.pageSize,
pageNum: this.pageNum,
kw: this.keyword,
minArea: this.lowerLimit,
maxArea: this.upperLimit,
type: this.type,
}
this.loadStatus = 'loading'
ApiGetResourceList(params).then(res => {
const {
rows = []
} = res.data
rows.forEach(item => {
item.name = brightKeyword(item.name, this.keyword)
item.carrierInfo = brightKeyword(item.carrierInfo, this.keyword)
})
this.resourceList = [...this.resourceList, ...rows]
if (res.data.rows.length < this.pageSize) {
this.loadStatus = 'nomore'
} else {
this.loadStatus = 'loadmore'
this.pageNum = this.pageNum + 1
}
uni.hideLoading()
})
}
最后别忘了点击重置按钮时要把type的值赋空
handleReset() {
this.selectedFilterItemIndex = -1
this.selectedFilterTypeItemIndex = -1
this.type = ''
this.lowerLimit = null
this.upperLimit = null
this.lowerValue = null
this.upperValue = null
},