xiugai
This commit is contained in:
lixuan
@@ -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>
|
||||
|
||||
@@ -226,6 +226,10 @@
|
||||
}
|
||||
}
|
||||
} 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];
|
||||
@@ -240,7 +244,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.$refs.popupRef.close()
|
||||
if (obj.isReset) {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user