caoliancun/zhongPin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
e9f7286b7c23dd6c83dffcb946876a8174babab2
zhongPin/components/sl-filter/filter-view.vue

660 lines
18 KiB
Vue
Raw Normal View History

第一次提交
2023-02-15 09:25:11 +08:00
<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> -->
12
2023-05-08 10:45:07 +08:00
<view class="filter-content-detail" v-show="pickerShow&&areaCodeList.length">
第一次提交
2023-02-15 09:25:11 +08:00
<!-- 省市区选择 -->
12
2023-05-08 10:45:07 +08:00
<view class="region-box" v-show="index==0">
12121212
2023-02-15 21:00:15 +08:00
<picker-view disabled :value="region" @change="bindChange" ref="showHide">
第一次提交
2023-02-15 09:25:11 +08:00
<picker-view-column>
12
2023-05-08 10:45:07 +08:00
<view class="center" v-for="(items, index) in areaCodeList" :key="index">
{{ items.areaName }}
第一次提交
2023-02-15 09:25:11 +08:00
</view>
</picker-view-column>
<picker-view-column>
12
2023-05-08 10:45:07 +08:00
<view class="center" v-for="(items, index) in areaCodeList[areaIndex[0]].childList" :key="index">
{{ items.areaName }}
第一次提交
2023-02-15 09:25:11 +08:00
</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
}
},
12
2023-05-08 10:45:07 +08:00
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,'====')
// }
},
第一次提交
2023-02-15 09:25:11 +08:00
created() {
12
2023-05-08 10:45:07 +08:00
this.areaCodeList = uni.getStorageSync('areaCodeList');
console.log(this.areaCodeList,'areaCodeList ')
第一次提交
2023-02-15 09:25:11 +08:00
console.log('%c 子组件参数↓','font-size:30px;color:red')
},
12121212
2023-02-15 21:00:15 +08:00
mounted() {
if(this.areaCodeList1.length == 0){
this.areaCodeList = uni.getStorageSync('areaCodeList')
}else{
this.areaCodeList = this.areaCodeList1
}
this.areaCodeList.unshift({areaName:'全部'})
this.$forceUpdate();
},
第一次提交
2023-02-15 09:25:11 +08:00
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>
Reference in New Issue Copy Permalink