|
|
|
@ -17,15 +17,49 @@ |
|
|
|
|
</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)"> |
|
|
|
|
@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"> |
|
|
|
|
<!-- 省市区选择 --> |
|
|
|
|
<view class="region-box" v-if="index==0"> |
|
|
|
|
<picker-view disabled :value="region" @change="bindChange" ref="showHide"> |
|
|
|
|
<picker-view-column> |
|
|
|
|
<view class="center" v-for="(item, index) in areaCodeList" :key="index"> |
|
|
|
|
{{ item.areaName }} |
|
|
|
|
</view> |
|
|
|
|
</picker-view-column> |
|
|
|
|
<picker-view-column> |
|
|
|
|
<view class="center" v-for="(item, index) in areaCodeList[areaIndex[0]].childList" :key="index"> |
|
|
|
|
{{ item.areaName }} |
|
|
|
|
</view> |
|
|
|
|
</picker-view-column> |
|
|
|
|
<!-- <picker-view-column v-if="areaCodeList[areaIndex[0]]"> |
|
|
|
|
<view class="center" |
|
|
|
|
v-for="(item, index) in areaCodeList[areaIndex[0]].childList[areaIndex[1]].childList" :key="index"> |
|
|
|
|
{{ item.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)"> |
|
|
|
|
<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"> |
|
|
|
|
<view class="filter-content-footer-item" :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick(selectDetailList,item.key,index)"> |
|
|
|
|
<text>确定</text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
@ -40,11 +74,21 @@ |
|
|
|
|
export default { |
|
|
|
|
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: {} |
|
|
|
@ -57,6 +101,12 @@ |
|
|
|
|
return '#D1372C' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
areaCodeList1: { |
|
|
|
|
type: Array, |
|
|
|
|
default () { |
|
|
|
|
return [] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
menuList: { |
|
|
|
|
type: Array, |
|
|
|
|
default () { |
|
|
|
@ -68,6 +118,17 @@ |
|
|
|
|
default: false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
setTimeout(()=>{ |
|
|
|
|
if(this.areaCodeList1.length == 0){ |
|
|
|
|
this.areaCodeList = uni.getStorageSync('areaCodeList') |
|
|
|
|
}else{ |
|
|
|
|
this.areaCodeList = this.areaCodeList1 |
|
|
|
|
} |
|
|
|
|
this.areaCodeList.unshift({areaName:'全部'}) |
|
|
|
|
},1000) |
|
|
|
|
console.log('%c 子组件参数↓','font-size:30px;color:red') |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
selectedTitleObj() { |
|
|
|
|
let obj = {} |
|
|
|
@ -91,6 +152,37 @@ |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
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++) { |
|
|
|
@ -264,7 +356,7 @@ |
|
|
|
|
this.independenceObj[this.selectedKey] = ''; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
itemTap(index, list, isMutiple, key) { |
|
|
|
|
itemTap(index, list, isMutiple, key,detailItem,indexs) { |
|
|
|
|
if (isMutiple == true) { |
|
|
|
|
list[index].isSelected = !list[index].isSelected; |
|
|
|
|
if (index == 0) { |
|
|
|
@ -323,6 +415,27 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
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(); |
|
|
|
@ -371,22 +484,84 @@ |
|
|
|
|
} |
|
|
|
|
this.$emit("confirm", obj); |
|
|
|
|
}, |
|
|
|
|
sureClick() { |
|
|
|
|
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) { |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
@ -472,4 +647,8 @@ |
|
|
|
|
.filter-content-list-item-active:after { |
|
|
|
|
content: '✓'; |
|
|
|
|
} |
|
|
|
|
picker-view { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 424upx; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|