mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 18:26:38 +08:00
357 lines
8.9 KiB
Vue
357 lines
8.9 KiB
Vue
<template>
|
|
<div class="ts-area-picker-container">
|
|
<input class="ts-area-picker-value-displayer" placeholder="请选择收货地址" @focus="initAddress" v-model="displayValue"></input>
|
|
<input type="hidden" :value="returnValue">
|
|
|
|
<div class="ts-area-picker-desktop" v-if="show">
|
|
<div class="ts-area-picker-tmp-value">
|
|
<ul>
|
|
<li class="active" @click="switchTab(0)">{{ returnValueArr[0]?returnValueArr[0].name:'请选择' }}</li>
|
|
<li @click="switchTab(1)">{{ returnValueArr[1]?returnValueArr[1].name:'请选择' }}</li>
|
|
<li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ts-area-picker-values">
|
|
<ul>
|
|
<li v-for="(item, index) in curDisplayingCol" :key="item.id" @click="pickValue(item.id,item.name)" v-bind:class="{ active:(returnValue[curDisplayingColIndex]?returnValue.id==item.id:false) }">
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ts-area-picker-mobile ts-mask" v-if="show">
|
|
<div class="ts-mask-bg"></div>
|
|
<van-picker
|
|
show-toolbar
|
|
title="选择地区"
|
|
:columns="columns"
|
|
value-key="name"
|
|
@confirm="onConfirm"
|
|
@cancel="onCancel"
|
|
@change="onChange"
|
|
class="ts-area-picker-mobile-component"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return{
|
|
displayValue:"",
|
|
returnValue:"",
|
|
returnValueArr:[],
|
|
show:false,
|
|
columns:[
|
|
{
|
|
values:[{id:"001",name:"省份1"},{id:"002",name:"省份2"}],
|
|
className:'col1'
|
|
},
|
|
{
|
|
values:[{id:"001-001",name:"省份1-城市1"},{id:"001-002",name:"省份1-城市2"},{id:"002-001",name:"省份2-城市1"},{id:"002-002",name:"省份2-城市2"}],
|
|
className:'col2'
|
|
},
|
|
{
|
|
values:[{id:"001-001-001",name:"省份1-城市1-区1"},{id:"001-002-002",name:"省份1-城市2-区2"},{id:"002-001-001",name:"省份2-城市1-区1"},{id:"002-002-002",name:"省份2-城市2-区2"}],
|
|
className:'col3'
|
|
}
|
|
],
|
|
curDisplayingColIndex:0,
|
|
curDisplayingCol:[]
|
|
}
|
|
},
|
|
methods:{
|
|
initAddress(){
|
|
this.show=true;
|
|
//Initilizing
|
|
|
|
//mobile
|
|
let self=this;
|
|
// defaultValues : array[{id:"_ID_IN_columns_of_province",name:"_NAME_IN_columns"},{id:"_ID_IN_columns_of_city",name:"_NAME_IN_columns"},{id:"_ID_IN_columns_of_area",name:"_NAME_IN_columns"}]
|
|
let defaultValues = [{id:this.columns[0].values[0].id, name:this.columns[0].values[0].name},{id:this.columns[1].values[0].id, name:this.columns[1].values[0].name},{id:this.columns[2].values[0].id, name:this.columns[2].values[0].name}];
|
|
this.$children.forEach(function(vueComponent){
|
|
if(vueComponent._name=="<VanPicker>")
|
|
{
|
|
self.onChange(vueComponent,defaultValues); //Important
|
|
}
|
|
});
|
|
//mobile end
|
|
|
|
//PC
|
|
this.switchTab(this.curDisplayingColIndex);
|
|
//PC end
|
|
//Initilizing end
|
|
},
|
|
pickValue(pickId,pickName){
|
|
let areaObj={id:pickId,name:pickName};
|
|
this.returnValueArr[this.curDisplayingColIndex]=areaObj;
|
|
this.validatePickedValues();
|
|
|
|
//Submit to value displaying
|
|
let tmpDisplayValueEle = document.querySelectorAll(".ts-area-picker-tmp-value li");
|
|
tmpDisplayValueEle[this.curDisplayingColIndex].innerText=this.returnValueArr[this.curDisplayingColIndex].name;
|
|
//Submit to value displaying end
|
|
|
|
//Moving to next tab
|
|
this.curDisplayingColIndex++;
|
|
if(this.curDisplayingColIndex>2 || this.curDisplayingColIndex<0)
|
|
this.curDisplayingColIndex = 0;
|
|
if(this.returnValueArr.length>=3)
|
|
{
|
|
this.onConfirm(this.returnValueArr);
|
|
}
|
|
else
|
|
this.switchTab(this.curDisplayingColIndex);
|
|
//Moving to next tab end
|
|
},
|
|
// For van picker
|
|
onChange(picker,values) { //values = [{id:this.columns[0].id, name:this.columns[0].name},{id:this.columns[1].id, name:this.columns[1].name},{id:this.columns[3].id, name:this.columns[3].name}];
|
|
//Support single choice only , index = 0 province, index = 1 city, index = 2 area
|
|
let curSelection={'province':'','city':'','area':''};
|
|
if(!values)
|
|
return;
|
|
let _self=this;
|
|
values.forEach(function(ele,index){
|
|
switch(index){
|
|
case 0:
|
|
//Handling Province
|
|
curSelection.province=ele.id;
|
|
//Handling Province end
|
|
break;
|
|
case 1:
|
|
//Handling City
|
|
let matchedCity=_self.fitlerValuesInArray(curSelection.province,_self.columns[index].values);
|
|
picker.setColumnValues(index,matchedCity);
|
|
curSelection.city=matchedCity[0].id;
|
|
//Handling City end
|
|
break;
|
|
default:
|
|
//Handling Area
|
|
let matchedArea=_self.fitlerValuesInArray(curSelection.city,_self.columns[index].values);
|
|
picker.setColumnValues(index,matchedArea);
|
|
curSelection.area=matchedArea[0].id;
|
|
//Handling Area end
|
|
break;
|
|
}
|
|
|
|
});
|
|
},
|
|
validatePickedValues(){
|
|
let _self=this;
|
|
let provinceId='';
|
|
let areaId=undefined;
|
|
this.returnValueArr.forEach(function(obj,index){
|
|
switch(index){
|
|
case 0:
|
|
//Skipping province checking
|
|
provinceId = obj.id;
|
|
break;
|
|
case 1:
|
|
//Checking City
|
|
if(obj.id.indexOf(provinceId)<0)
|
|
{
|
|
console.log('500 : error via checking validatePickedValues');
|
|
_self.returnValueArr[index]={};
|
|
}
|
|
else
|
|
{
|
|
areaId = _self.returnValueArr[index].id;
|
|
}
|
|
//Checking City end
|
|
break;
|
|
case 2:
|
|
//Checking Area
|
|
if(areaId && obj.id.indexOf(areaId)<0)
|
|
{
|
|
console.log('501 : error via checking validatePickedValues');
|
|
_self.returnValueArr[index]={};
|
|
}
|
|
//Checking Area end
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
},
|
|
onConfirm(values) {
|
|
debugger;
|
|
//Get columns structure array here : values
|
|
let _self=this;
|
|
let returnVal=[];
|
|
let tmpArr = [];
|
|
this.displayValue='';
|
|
values.forEach(function(ele,index){
|
|
_self.displayValue = _self.displayValue + ele.name + " ";
|
|
tmpArr.push(ele.id);
|
|
returnVal.push(ele);
|
|
});
|
|
this.returnValueArr=returnVal;
|
|
this.returnValue=tmpArr.join("|");
|
|
this.hideAddress();
|
|
},
|
|
onCancel() {
|
|
|
|
},
|
|
fitlerValuesInArray(stringStartWith,dataColArea){
|
|
let result=[];
|
|
dataColArea.forEach(function(ele){
|
|
if(ele.id.indexOf(stringStartWith)===0)
|
|
{
|
|
result.push(ele);
|
|
}
|
|
});
|
|
return result;
|
|
},
|
|
popAddress() {
|
|
this.show=true;
|
|
},
|
|
hideAddress() {
|
|
this.show=false;
|
|
},
|
|
switchTab(tabIndex){
|
|
let _self=this;
|
|
let areaTabLi=document.querySelectorAll(".ts-area-picker-tmp-value li");
|
|
if(tabIndex==0){
|
|
this.curDisplayingCol = this.columns[tabIndex].values;
|
|
}
|
|
else{
|
|
if(this.returnValueArr[tabIndex-1]){}
|
|
else{
|
|
tabIndex=tabIndex-1;
|
|
}
|
|
}
|
|
|
|
this.curDisplayingColIndex=tabIndex;
|
|
areaTabLi.forEach(function(ele,index){
|
|
if(tabIndex==index)
|
|
{
|
|
ele.classList.add('active');
|
|
let filteredData=_self.columns[tabIndex].values;
|
|
if(_self.curDisplayingColIndex>0) //pass
|
|
{
|
|
let pickedId = _self.returnValueArr[_self.curDisplayingColIndex-1].id;
|
|
filteredData=_self.fitlerValuesInArray(pickedId,_self.columns[tabIndex].values);
|
|
}
|
|
_self.curDisplayingCol=filteredData;
|
|
}
|
|
else
|
|
ele.classList.remove('active');
|
|
})
|
|
|
|
}
|
|
},
|
|
mounted(){
|
|
|
|
},
|
|
components:{
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.ts-area-picker-container{display:inline-block;}
|
|
.ts-area-picker-value-displayer{
|
|
width:40rem;
|
|
}
|
|
.ts-area-picker-tmp-value{
|
|
border-bottom:1px solid #D7D7D7;
|
|
padding:0 2.5rem;
|
|
box-sizing: border-box;
|
|
ul{
|
|
padding:0;
|
|
margin:0;
|
|
display: flex;
|
|
li{
|
|
display:inline-block;
|
|
color:#333333;
|
|
width:3.125rem;
|
|
padding: 1.25rem 0;
|
|
margin-right:4rem;
|
|
cursor: pointer;
|
|
&.active{
|
|
color:#E2001A;
|
|
border-bottom:4px solid #E2001A;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ts-area-picker-values{
|
|
ul{
|
|
padding:1rem 2.5rem 2rem 2.5rem;
|
|
margin:0;
|
|
}
|
|
li{
|
|
display:inline-block;
|
|
margin-top:1rem;
|
|
margin-right:3.875rem;
|
|
color:#333;
|
|
cursor:pointer;
|
|
&.nth-child(6n){
|
|
margin-right:0;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width:768px)
|
|
{
|
|
/deep/.van-picker__cancel
|
|
{
|
|
display:none;
|
|
}
|
|
/deep/.van-picker__title{
|
|
font-size:1.375rem;
|
|
color:#E1001A;
|
|
}
|
|
/deep/.van-picker__toolbar{
|
|
padding:1.5rem 1.25rem;
|
|
box-sizing: border-box;
|
|
border-bottom:1px solid #D8D8D8;
|
|
}
|
|
/deep/.van-picker__confirm{
|
|
text-indent:-999rem;
|
|
position:relative;
|
|
&:after{
|
|
transform: rotate(45deg);
|
|
}
|
|
&:before{
|
|
transform: rotate(-45deg);
|
|
}
|
|
&:before,
|
|
&:after {
|
|
position: absolute;
|
|
content: ' ';
|
|
background-color: #E1001A;
|
|
left: 1.25rem;
|
|
bottom:-0.875rem;
|
|
width: 1px;
|
|
height: 1.375rem;
|
|
}
|
|
}
|
|
|
|
.ts-area-picker-mobile{
|
|
display:flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
.ts-area-picker-mobile-component{
|
|
height:40vh;
|
|
width:100%;
|
|
}
|
|
}
|
|
.ts-area-picker-desktop{
|
|
display:none;
|
|
}
|
|
}
|
|
@media screen and (min-width:769px)
|
|
{
|
|
.ts-area-picker-mobile{
|
|
display:none;
|
|
}
|
|
.ts-area-picker-desktop{
|
|
display:block;
|
|
width:100%;
|
|
height:19.25rem;
|
|
border:1px solid #808285;
|
|
}
|
|
}
|
|
</style> |