660 lines
18 KiB
Vue
660 lines
18 KiB
Vue
<template>
|
||
|
||
<view>
|
||
<view style="padding: 0px 0px;">
|
||
<view class="filter-content" v-for="(item, index) in menuList" :key="index" v-if="menuIndex == index">
|
||
<view v-if="item.isSort">
|
||
<view class="filter-content-list">
|
||
<view v-for="(detailItem,idx) in selectDetailList" :key="idx" :class="detailItem.isSelected?'filter-content-list-item-active':'filter-content-list-item-default'"
|
||
:style="{'color': detailItem.isSelected?themeColor:'#666666'}" @tap="sortTap(idx,selectDetailList,item.key)">
|
||
<text>{{detailItem.title}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length">
|
||
<text>{{item.detailTitle}}</text>
|
||
</view>
|
||
<view class="filter-content-detail">
|
||
<text v-for="(detailItem,idx) in selectDetailList" :key="idx" class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#FFFFFF','color':detailItem.isSelected?'#FFFFFF':'#666666'}"
|
||
@tap="itemTap(idx,selectDetailList,item.isMutiple,item.key,detailItem,index)">
|
||
{{detailItem.title}}
|
||
</text>
|
||
</view>
|
||
<!-- <view class="" v-if="index==1" v-for="(detailItem,idx) in selectDetailList" :key="idx">
|
||
<view class="filter-content-title">
|
||
<text>{{detailItem}}</text>
|
||
</view>
|
||
<view class="filter-content-detail">
|
||
<text v-for="(itemss,idxx) in selectDetailList[detailItem]" class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#FFFFFF','color':detailItem.isSelected?'#FFFFFF':'#666666'}"
|
||
@tap="itemTap(idx,selectDetailList,item.isMutiple,item.key,detailItem)">
|
||
{{itemss.title}}
|
||
</text>
|
||
</view>
|
||
</view> -->
|
||
<view class="filter-content-detail" v-show="pickerShow&&areaCodeList.length">
|
||
<!-- 省市区选择 -->
|
||
<view class="region-box" v-show="index==0">
|
||
<picker-view disabled :value="region" @change="bindChange" ref="showHide">
|
||
<picker-view-column>
|
||
<view class="center" v-for="(items, index) in areaCodeList" :key="index">
|
||
{{ items.areaName }}
|
||
</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view class="center" v-for="(items, index) in areaCodeList[areaIndex[0]].childList" :key="index">
|
||
{{ items.areaName }}
|
||
</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
</view>
|
||
<view class="filter-content-footer">
|
||
<view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;" @tap="resetClick(selectDetailList,item.key,index)">
|
||
<text>重置</text>
|
||
</view>
|
||
<view class="filter-content-footer-item" :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick(selectDetailList,item.key,index)">
|
||
<text>确定</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
themeColor: {
|
||
type: String,
|
||
default () {
|
||
return '#D1372C'
|
||
}
|
||
},
|
||
areaCodeList1: {
|
||
type: Array,
|
||
default () {
|
||
return []
|
||
}
|
||
},
|
||
menuList: {
|
||
type: Array,
|
||
default () {
|
||
return []
|
||
}
|
||
},
|
||
independence: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
region:[],
|
||
selectArr: [],
|
||
result: {},
|
||
pickerShow:false,
|
||
menuIndex: 0,
|
||
areaIndex:[0, 0],
|
||
paixu:1,
|
||
provinceCode:'',
|
||
oilCode:'',
|
||
showHide:true,
|
||
cityCode:'',
|
||
areaCode:'',
|
||
selectDetailList: [],
|
||
independenceObj: {},
|
||
areaCodeList:[],
|
||
selectedKey: '',
|
||
cacheSelectedObj: {},
|
||
defaultSelectedTitleObj: {}
|
||
};
|
||
},
|
||
watch:{
|
||
// areaCodeList(n){
|
||
// if(n.length){
|
||
// this.$forceUpdate()
|
||
// }
|
||
// console.log(n,'====')
|
||
// }
|
||
},
|
||
created() {
|
||
this.areaCodeList = uni.getStorageSync('areaCodeList');
|
||
console.log(this.areaCodeList,'areaCodeList ')
|
||
console.log('%c 子组件参数↓','font-size:30px;color:red')
|
||
},
|
||
mounted() {
|
||
if(this.areaCodeList1.length == 0){
|
||
this.areaCodeList = uni.getStorageSync('areaCodeList')
|
||
}else{
|
||
this.areaCodeList = this.areaCodeList1
|
||
}
|
||
this.areaCodeList.unshift({areaName:'全部'})
|
||
this.$forceUpdate();
|
||
},
|
||
computed: {
|
||
selectedTitleObj() {
|
||
let obj = {}
|
||
for (let i = 0; i < this.menuList.length; i++) {
|
||
let item = this.menuList[i];
|
||
obj[item.key] = item.title;
|
||
}
|
||
return obj;
|
||
},
|
||
defaultSelectedObj() { // 保存初始状态
|
||
return this.getSelectedObj()
|
||
},
|
||
selectedObj: {
|
||
get() {
|
||
return this.getSelectedObj()
|
||
},
|
||
set(newObj) {
|
||
return newObj;
|
||
}
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
//选择值改变事件 省市区级联选择
|
||
bindChange(e,ccc) {
|
||
// 用于对比滑动的是哪一列数据
|
||
const val = e.detail.value
|
||
this.areaIndex = val
|
||
this.region = val
|
||
if(this.areaIndex[0] !== val[0]) {
|
||
// 如果滑动的是第一列数据，让二三列恢复到0
|
||
this.areaIndex = [val[0], 0, 0]
|
||
} else if(this.areaIndex[1] !== val[1]) {
|
||
this.areaIndex[1] = val[1]
|
||
// 滑动的是第二列数据
|
||
this.areaIndex = [val[0], val[1], 0]
|
||
} else {
|
||
this.areaIndex = e.detail.value;
|
||
}
|
||
if(!ccc){
|
||
// 数组push‘全部’
|
||
if(this.areaCodeList[val[0]].childList[0]&&this.areaCodeList[val[0]].childList[0].areaName != '全部'){
|
||
this.areaCodeList[val[0]].childList.unshift({areaName:'全部'})
|
||
}
|
||
this.provinceCode = this.areaCodeList[this.areaIndex[0]].id
|
||
this.cityCode = this.areaCodeList[this.areaIndex[0]].childList[this.areaIndex[1]].id
|
||
}
|
||
// if(this.areaCodeList[val[0]].childList[val[1]].childList[0].areaName != '全部'){
|
||
// this.areaCodeList[val[0]].childList[val[1]].childList.unshift({areaName:'全部'})
|
||
// }
|
||
|
||
// this.areaCode = this.areaCodeList[this.areaIndex[0]].childList[this.areaIndex[1]].childList[this.areaIndex[2]].id
|
||
this.$emit('changeArea',e)
|
||
},
|
||
getSelectedObj() {
|
||
let obj = {}
|
||
for (let i = 0; i < this.menuList.length; i++) {
|
||
let item = this.menuList[i];
|
||
if (!this.independence && item.defaultSelectedIndex != null && item.defaultSelectedIndex.toString().length > 0) { // 处理并列菜单默认值
|
||
|
||
if (item.isMutiple) {
|
||
obj[item.key] = [];
|
||
item.detailList[0].isSelected = false;
|
||
if (!Array.isArray(item.defaultSelectedIndex)) { // 如果默认值不是数组
|
||
item.defaultSelectedIndex = [item.defaultSelectedIndex];
|
||
}
|
||
for (let j = 0; j < item.defaultSelectedIndex.length; j++) { // 将默认选中的值放入selectedObj
|
||
item.detailList[item.defaultSelectedIndex[j]].isSelected = true;
|
||
obj[item.key].push(item.detailList[item.defaultSelectedIndex[j]].value)
|
||
}
|
||
|
||
} else {
|
||
obj[item.key] = item.detailList[item.defaultSelectedIndex].value;
|
||
this.selectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
|
||
this.defaultSelectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
|
||
item.detailList[0].isSelected = false;
|
||
item.detailList[item.defaultSelectedIndex].isSelected = true;
|
||
}
|
||
} else {
|
||
if (item.isMutiple) {
|
||
obj[item.key] = [];
|
||
} else {
|
||
obj[item.key] = '';
|
||
}
|
||
}
|
||
}
|
||
this.result = obj;
|
||
return obj;
|
||
},
|
||
// 重置所有选项，包括默认选项，并更新result
|
||
resetAllSelect(callback) {
|
||
let titles = [];
|
||
for (let i = 0; i < this.menuList.length; i++) {
|
||
this.resetSelected(this.menuList[i].detailList,this.menuList[i].key);
|
||
titles[this.menuList[i].key] = this.menuList[i].title;
|
||
}
|
||
let obj = {
|
||
'result': this.result,
|
||
'titles': titles,
|
||
'isReset': true
|
||
}
|
||
this.$emit("confirm", obj);
|
||
callback(this.result);
|
||
},
|
||
// 重置选项为设置的默认值，并更新result
|
||
resetSelectToDefault(callback) {
|
||
for (let i = 0; i < this.menuList.length; i++) {
|
||
this.selectDetailList = this.menuList[i].detailList;
|
||
|
||
if (this.menuList[i].defaultSelectedIndex) {
|
||
if (Array.isArray(this.menuList[i].defaultSelectedIndex)) { // 把所有默认的为false的点为true
|
||
for (let j = 0; j < this.menuList[i].defaultSelectedIndex.length; j++) {
|
||
if (this.selectDetailList[this.menuList[i].defaultSelectedIndex[j]].isSelected == false) {
|
||
this.itemTap(this.menuList[i].defaultSelectedIndex[j], this.selectDetailList, this.menuList[i].isMutiple, this
|
||
.menuList[i].key)
|
||
}
|
||
}
|
||
} else {
|
||
this.itemTap(this.menuList[i].defaultSelectedIndex, this.selectDetailList, this.menuList[i].isMutiple, this.menuList[
|
||
i].key)
|
||
}
|
||
|
||
// 获取非默认项的下标
|
||
let unDefaultSelectedIndexArr = this.getUnDefaultSelectedIndex(this.menuList[i])
|
||
// 把所有不是默认的为true的点为false
|
||
for (let j = 0; j < unDefaultSelectedIndexArr.length; j++) {
|
||
if (this.selectDetailList[unDefaultSelectedIndexArr[j]].isSelected == true) {
|
||
this.itemTap(unDefaultSelectedIndexArr[j], this.selectDetailList, this.menuList[i].isMutiple, this
|
||
.menuList[i].key)
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
this.selectedObj = this.defaultSelectedObj;
|
||
this.result = this.defaultSelectedObj;
|
||
let obj = {
|
||
'result': this.result,
|
||
'titles': this.defaultSelectedTitleObj,
|
||
'isReset': true
|
||
}
|
||
this.$emit("confirm", obj);
|
||
callback(this.result)
|
||
},
|
||
getUnDefaultSelectedIndex(menuListItem) { // 获取非默认项
|
||
let tempDefault = menuListItem.defaultSelectedIndex;
|
||
if (!Array.isArray(tempDefault)) {
|
||
tempDefault = [tempDefault];
|
||
}
|
||
// 获取所有项的下标 组成新的数组
|
||
let all = [];
|
||
for (let i = 0; i < menuListItem.detailList.length; i++) {
|
||
all.push(i)
|
||
}
|
||
// 将默认选中的数组与所有项的数组的不同值合并为一个新数组
|
||
var unDefaultSelectedIndex = tempDefault.filter(function(v) {
|
||
return !(all.indexOf(v) > -1)
|
||
}).concat(all.filter(function(v) {
|
||
return !(tempDefault.indexOf(v) > -1)
|
||
}));
|
||
return unDefaultSelectedIndex;
|
||
},
|
||
resetMenuList(val) {
|
||
this.menuList = val;
|
||
this.$emit('update:menuList', val)
|
||
},
|
||
menuTabClick(index) {
|
||
this.menuIndex = index;
|
||
this.selectDetailList = this.menuList[index].detailList;
|
||
this.selectedKey = this.menuList[index].key;
|
||
// 如果是独立菜单
|
||
if (this.independence && !this.menuList[index].isSort) {
|
||
if (JSON.stringify(this.independenceObj) == '{}') {
|
||
this.initIndependenceObj(index);
|
||
} else {
|
||
for (let key in this.independenceObj) {
|
||
if (key != this.selectedKey) {
|
||
this.initIndependenceObj(index);
|
||
this.resetSelected(this.menuList[index].detailList, this.selectedKey);
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
if (this.independence && this.menuList[index].isSort) {
|
||
|
||
this.independenceObj = {};
|
||
|
||
|
||
}
|
||
if (this.independence) {
|
||
let idx = this.menuList[index].defaultSelectedIndex;
|
||
if (idx != null && idx.toString().length > 0) { // 处理独立菜单默认值
|
||
if (this.menuList[index].isMutiple) {
|
||
for (let i = 0; i < idx.length; i++) {
|
||
if (this.menuList[index].detailList[idx[i]].isSelected == false) {
|
||
this.itemTap(idx[i], this.menuList[index].detailList, true, this.selectedKey);
|
||
}
|
||
|
||
}
|
||
} else {
|
||
if (this.menuList[index].detailList[idx].isSelected == false) {
|
||
|
||
this.itemTap(idx, this.menuList[index].detailList, false, this.selectedKey);
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
|
||
// #ifdef H5
|
||
this.selectedObj = this.selectedObj;
|
||
this.$forceUpdate();
|
||
// #endif
|
||
},
|
||
initIndependenceObj(index) {
|
||
this.independenceObj = {};
|
||
if (this.menuList[index].isMutiple) {
|
||
this.independenceObj[this.selectedKey] = [];
|
||
} else {
|
||
this.independenceObj[this.selectedKey] = '';
|
||
}
|
||
},
|
||
itemTap(index, list, isMutiple, key,detailItem,indexs) {
|
||
if (isMutiple == true) {
|
||
list[index].isSelected = !list[index].isSelected;
|
||
if (index == 0) {
|
||
this.resetSelected(list, key)
|
||
if (!this.independence) {
|
||
this.selectedTitleObj[key] = list[index].title;
|
||
}
|
||
} else {
|
||
list[0].isSelected = false
|
||
if (list[index].isSelected) {
|
||
if (this.independence) {
|
||
this.independenceObj[this.selectedKey].push(list[index].value);
|
||
} else {
|
||
this.selectedObj[key].push(list[index].value);
|
||
}
|
||
} else {
|
||
list[index].isSelected = false;
|
||
if (this.independence) {
|
||
var idx = this.independenceObj[this.selectedKey].indexOf(list[index].value);
|
||
this.independenceObj[this.selectedKey].splice(idx, 1);
|
||
} else {
|
||
var idx = this.selectedObj[key].indexOf(list[index].value);
|
||
this.selectedObj[key].splice(idx, 1);
|
||
}
|
||
|
||
}
|
||
if (this.independence) {
|
||
this.result = this.independenceObj;
|
||
} else {
|
||
this.result = this.selectedObj;
|
||
}
|
||
|
||
}
|
||
} else {
|
||
if (index == 0) {
|
||
this.resetSelected(list, key)
|
||
if (!this.independence) {
|
||
this.selectedTitleObj[key] = list[index].title;
|
||
}
|
||
} else {
|
||
list[0].isSelected = false
|
||
if (this.independence) {
|
||
this.independenceObj[this.selectedKey] = list[index].value;
|
||
this.result = this.independenceObj;
|
||
} else {
|
||
this.selectedObj[key] = list[index].value;
|
||
this.result = this.selectedObj;
|
||
this.selectedTitleObj[key] = list[index].title;
|
||
}
|
||
|
||
for (let i = 0; i < list.length; i++) {
|
||
if (index == i) {
|
||
list[i].isSelected = true
|
||
} else {
|
||
list[i].isSelected = false
|
||
}
|
||
}
|
||
}
|
||
if(indexs==0){
|
||
if(detailItem.value==10){
|
||
this.detailItems = ''
|
||
this.pickerShow = true
|
||
}else{
|
||
this.detailItems = detailItem.value*1000
|
||
this.provinceCode = ''
|
||
this.cityCode = ''
|
||
this.areaCode = ''
|
||
this.pickerShow = false
|
||
this.region = []
|
||
}
|
||
}else{
|
||
this.pickerShow = false
|
||
}
|
||
if(indexs==1){
|
||
this.oilCode = detailItem.value
|
||
}
|
||
if(indexs==2){
|
||
this.paixu = detailItem.value
|
||
}
|
||
}
|
||
// #ifdef H5
|
||
this.$forceUpdate();
|
||
// #endif
|
||
},
|
||
resetSelected(list, key) {
|
||
if (typeof this.result[key] == 'object') {
|
||
this.result[key] = [];
|
||
this.selectedTitleObj[key] = list[0].title;
|
||
} else {
|
||
this.result[key] = '';
|
||
this.selectedTitleObj[key] = list[0].title;
|
||
}
|
||
for (let i = 0; i < list.length; i++) {
|
||
if (i == 0) {
|
||
list[i].isSelected = true;
|
||
} else {
|
||
list[i].isSelected = false;
|
||
}
|
||
}
|
||
// #ifdef H5
|
||
this.$forceUpdate();
|
||
// #endif
|
||
},
|
||
sortTap(index, list, key) {
|
||
if (this.independence) {
|
||
this.independenceObj[this.selectedKey] = list[index].value;
|
||
this.result = this.independenceObj;
|
||
} else {
|
||
this.selectedObj[key] = list[index].value;
|
||
this.result = this.selectedObj;
|
||
this.selectedTitleObj[key] = list[index].title;
|
||
}
|
||
|
||
for (let i = 0; i < list.length; i++) {
|
||
if (index == i) {
|
||
list[i].isSelected = true;
|
||
} else {
|
||
list[i].isSelected = false;
|
||
}
|
||
}
|
||
let obj = {
|
||
'result': this.result,
|
||
'titles': this.selectedTitleObj,
|
||
'isReset': false
|
||
}
|
||
this.$emit("confirm", obj);
|
||
},
|
||
sureClick(selectDetailList,item,index) {
|
||
if(index == 1&&!this.oilCode){
|
||
this.menuList[2].detailList[0].isSelected = true
|
||
this.menuList[2].detailList[1].isSelected = false
|
||
this.paixu = 1
|
||
this.selectedTitleObj['comprehensiveSort'] = '距离优先'
|
||
}
|
||
if(index == 2&&!this.oilCode&&this.paixu==2){
|
||
uni.showToast({
|
||
title: '请先选择油品再价格排序',
|
||
icon: 'none'
|
||
})
|
||
this.itemTap(0, selectDetailList, false, item,selectDetailList[1],index)
|
||
this.paixu = 1
|
||
return
|
||
}
|
||
if(this.areaIndex[0] == 0){
|
||
this.provinceCode = ''
|
||
this.cityCode = ''
|
||
this.areaCode = ''
|
||
}
|
||
if(this.areaIndex[1] == 0){
|
||
this.cityCode = ''
|
||
this.areaCode = ''
|
||
}
|
||
if(this.areaIndex[2] == 0){
|
||
this.areaCode = ''
|
||
}
|
||
let obj = {
|
||
'result': this.result,
|
||
'titles': this.selectedTitleObj,
|
||
'isReset': false
|
||
}
|
||
obj.result.provinceCode = this.provinceCode
|
||
obj.result.cityCode = this.cityCode
|
||
obj.result.areaCode = this.areaCode
|
||
obj.result.distance = this.provinceCode?'':this.cityCode?'':this.areaCode?'':this.detailItems
|
||
obj.result.comprehensiveSort = this.paixu
|
||
this.$emit("confirm", obj);
|
||
},
|
||
resetClick(list, key,index) {
|
||
this.resetSelected(list, key)
|
||
if(index == 1){
|
||
this.oilCode = ''
|
||
this.paixu = 1
|
||
}
|
||
if(index == 0){
|
||
this.provinceCode = ''
|
||
this.cityCode = ''
|
||
this.areaCode = ''
|
||
this.detailItems = ''
|
||
this.region = []
|
||
this.pickerShow = false
|
||
let aaa = {
|
||
detail:{
|
||
value:[0,0]
|
||
}
|
||
}
|
||
let ccc = 1
|
||
this.bindChange(aaa,ccc)
|
||
}
|
||
if(index == 2){
|
||
this.paixu = 1
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.region-box {
|
||
background-color: #FFFFFF;
|
||
}
|
||
.region-box .center {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.filter-content {
|
||
background-color: #F6F7F8;
|
||
}
|
||
|
||
.filter-content-title {
|
||
border-bottom: #EEEEEE 1px solid;
|
||
padding: 10px 15px;
|
||
font-size: 13px;
|
||
color: #999999;
|
||
}
|
||
|
||
.filter-content-detail {
|
||
padding: 5px 15px;
|
||
}
|
||
|
||
.filter-content-detail-item-active {
|
||
background-color: #D1372C;
|
||
color: #FFFFFF;
|
||
padding: 5px 15px;
|
||
border-radius: 20px;
|
||
margin-right: 10px;
|
||
margin-top: 10px;
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.filter-content-detail-item-default {
|
||
background-color: #FFFFFF;
|
||
color: #666666;
|
||
padding: 5px 15px;
|
||
border-radius: 20px;
|
||
margin-right: 10px;
|
||
margin-top: 10px;
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.filter-content-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 45px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.filter-content-footer-item {
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.filter-content-list {
|
||
|
||
padding: 5px 15px;
|
||
}
|
||
|
||
.filter-content-list-item-default {
|
||
color: #666666;
|
||
width: 100%;
|
||
padding: 10px 0px;
|
||
}
|
||
|
||
.filter-content-list-item-default text {
|
||
width: 90%;
|
||
font-size: 14px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.filter-content-list-item-active {
|
||
color: #D1372C;
|
||
width: 100%;
|
||
padding: 10px 0px;
|
||
}
|
||
|
||
.filter-content-list-item-active text {
|
||
font-size: 14px;
|
||
width: 90%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.filter-content-list-item-active:after {
|
||
content: '✓';
|
||
}
|
||
picker-view {
|
||
width: 100%;
|
||
height: 424upx;
|
||
}
|
||
</style>
|