mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 18:26:38 +08:00
Leung
This commit is contained in:
Admin
Gitee
parent
89f9a8b12b
commit
986d4ab9b3
405
rc-busness/components/addressInput.vue
Normal file
405
rc-busness/components/addressInput.vue
Normal file
@ -0,0 +1,405 @@
|
||||
<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 class="close" @click="hideAddress"></div>
|
||||
</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:(returnValueArr[curDisplayingColIndex]?returnValueArr[curDisplayingColIndex].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 {
|
||||
props:["defaultValues"],
|
||||
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}];
|
||||
if(this.defaultValues)
|
||||
defaultValues=this.defaultValues;
|
||||
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;
|
||||
let validatedIndex=-1;
|
||||
this.returnValueArr.forEach(function(obj,index){
|
||||
switch(index){
|
||||
case 0:
|
||||
//Skipping province checking
|
||||
provinceId = obj.id;
|
||||
validatedIndex = 0;
|
||||
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;
|
||||
validatedIndex=index;
|
||||
}
|
||||
//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]={};
|
||||
}
|
||||
else{
|
||||
validatedIndex=index;
|
||||
}
|
||||
//Checking Area end
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
return validatedIndex;
|
||||
},
|
||||
onConfirm(values) {
|
||||
//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 areaTabLi=document.querySelectorAll(".ts-area-picker-tmp-value li");
|
||||
if(tabIndex==0){
|
||||
this.curDisplayingCol = this.columns[tabIndex].values;
|
||||
}
|
||||
let lastValidatedTabIndex=this.validatePickedValues();
|
||||
if(lastValidatedTabIndex<(tabIndex-1))
|
||||
{
|
||||
//TODO show warning here
|
||||
let errorEle=document.querySelector(".ts-area-picker-values");
|
||||
errorEle.classList.add("error");
|
||||
setTimeout(function(){
|
||||
errorEle.classList.remove("error");
|
||||
},2000);
|
||||
tabIndex=lastValidatedTabIndex+1;
|
||||
}
|
||||
this.curDisplayingColIndex=tabIndex;
|
||||
let filteredData=this.columns[tabIndex].values;
|
||||
if(tabIndex>0 && this.returnValueArr[tabIndex-1]) //pass
|
||||
{
|
||||
let pickedId = this.returnValueArr[tabIndex-1].id;
|
||||
filteredData=this.fitlerValuesInArray(pickedId,this.columns[tabIndex].values);
|
||||
}
|
||||
this.curDisplayingCol=filteredData;
|
||||
|
||||
areaTabLi.forEach(function(ele,index){
|
||||
if(tabIndex==index){
|
||||
ele.classList.add('active');
|
||||
}
|
||||
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;
|
||||
position:relative;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.close{
|
||||
position:absolute;
|
||||
position: absolute;
|
||||
right: 3rem;
|
||||
top: 1.5rem;
|
||||
cursor: pointer;
|
||||
&:before,&:after{
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ts-area-picker-values{
|
||||
width:100%;
|
||||
height:100%;
|
||||
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;
|
||||
}
|
||||
&.active{
|
||||
color:#E2001A;
|
||||
border-bottom:4px solid #E2001A;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.van-picker__confirm,.close{
|
||||
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;
|
||||
}
|
||||
}
|
||||
@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{
|
||||
display:block;
|
||||
}
|
||||
.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)
|
||||
{
|
||||
/deep/.van-picker__confirm{
|
||||
display:none;
|
||||
}
|
||||
.ts-area-picker-mobile{
|
||||
display:none;
|
||||
}
|
||||
.ts-area-picker-desktop{
|
||||
display:block;
|
||||
width:100%;
|
||||
height:19.25rem;
|
||||
border:1px solid #808285;
|
||||
overflow:hidden;
|
||||
}
|
||||
.ts-area-picker-values{
|
||||
|
||||
}
|
||||
}
|
||||
@keyframes flash-error
|
||||
{
|
||||
from {
|
||||
opacity:.6;
|
||||
}
|
||||
to {
|
||||
opacity:.3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user