69 lines
2.3 KiB
Vue
69 lines
2.3 KiB
Vue
<template>
|
||
<view class="filtrateBox">
|
||
<view class="item" @click="handleTab(index)" v-for="(item, index) in itemData" :key="index" :class="isActive === index||(item==='超时任务'&&users.filterOverTime) ? 'onHover' : ''">
|
||
<text>{{ item }}</text>
|
||
<icon class="up" :class="isActive === index && isSelect ? 'hover' : ''" v-if="index !== 2"></icon>
|
||
<icon class="down" :class="isActive === index && !isSelect ? 'hover' : ''" v-if="index !== 2"></icon>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { useStore } from 'vuex';
|
||
// 获取父组件数据
|
||
const props = defineProps({
|
||
tabBars: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
});
|
||
// ------定义变量------
|
||
const store = useStore(); //设置、获取储存的数据
|
||
const users = store.state.user;
|
||
const emit = defineEmits()
|
||
const itemData = ref(['距离', '时间', '超时任务']);
|
||
let isActive = ref(-1); //当前触发tab样式
|
||
let isSelect = ref(); //排序箭头的样式 true:升,false:降
|
||
// ------定义方法------
|
||
|
||
// tab切换
|
||
const handleTab = index => {
|
||
isActive.value = index; //当前tab值
|
||
isSelect.value = !isSelect.value; //当前tab 上下箭头选中样式
|
||
store.commit('user/setIsFiltrate',true)
|
||
store.commit('user/setIstabChange',true)
|
||
store.commit('user/setFilterOverTime',false);
|
||
// 距离排序,给后端传的距离排序值 1升序，2降序
|
||
if (index === 0) {
|
||
let val = null
|
||
if (isSelect.value) {
|
||
val = 1;
|
||
} else {
|
||
val = 2;
|
||
}
|
||
|
||
store.commit('user/setOrderDistance',val) //储存，方便父组件使用
|
||
store.commit('user/setFilterOverTime',null) //储存，清除时间排序值
|
||
store.commit('user/setOrderTime',null) //储存，清除超时值
|
||
} else if (index === 1){
|
||
//时间排序,给后端传的时间排序值 1升序，2降序
|
||
let val = null
|
||
if (isSelect.value) {
|
||
val = 1;
|
||
} else {
|
||
val = 2;
|
||
}
|
||
store.commit('user/setOrderTime',val) //储存，方便父组件使用
|
||
store.commit('user/setOrderDistance',null) //储存，清除距离排序值
|
||
store.commit('user/setFilterOverTime',null) //储存，清除超时值
|
||
}else{
|
||
store.commit('user/setFilterOverTime',true) //储存，方便父组件使用
|
||
store.commit('user/setOrderTime',null) //储存，清除时间排序值
|
||
store.commit('user/setOrderDistance',null) //储存，清除距离排序值
|
||
}
|
||
|
||
emit('getList')
|
||
};
|
||
</script>
|