mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-04 19:26:41 +08:00
Address Component
This commit is contained in:
Vion
parent
83d77cfaeb
commit
b007eb7b6f
@ -10,10 +10,11 @@
|
||||
<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:(returnValue[curDisplayingColIndex]?returnValue.id==item.id:false) }">
|
||||
<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>
|
||||
@ -37,6 +38,7 @@
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props:["defaultValues"],
|
||||
data(){
|
||||
return{
|
||||
displayValue:"",
|
||||
@ -70,6 +72,8 @@ export default {
|
||||
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>")
|
||||
{
|
||||
@ -141,11 +145,13 @@ export default {
|
||||
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
|
||||
@ -157,6 +163,7 @@ export default {
|
||||
else
|
||||
{
|
||||
areaId = _self.returnValueArr[index].id;
|
||||
validatedIndex=index;
|
||||
}
|
||||
//Checking City end
|
||||
break;
|
||||
@ -167,15 +174,18 @@ export default {
|
||||
console.log('501 : error via checking validatePickedValues');
|
||||
_self.returnValueArr[index]={};
|
||||
}
|
||||
else{
|
||||
validatedIndex=index;
|
||||
}
|
||||
//Checking Area end
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
return validatedIndex;
|
||||
},
|
||||
onConfirm(values) {
|
||||
debugger;
|
||||
//Get columns structure array here : values
|
||||
let _self=this;
|
||||
let returnVal=[];
|
||||
@ -210,30 +220,33 @@ export default {
|
||||
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;
|
||||
}
|
||||
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)
|
||||
{
|
||||
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');
|
||||
@ -259,6 +272,7 @@ export default {
|
||||
border-bottom:1px solid #D7D7D7;
|
||||
padding:0 2.5rem;
|
||||
box-sizing: border-box;
|
||||
position:relative;
|
||||
ul{
|
||||
padding:0;
|
||||
margin:0;
|
||||
@ -276,8 +290,20 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
@ -291,6 +317,30 @@ export default {
|
||||
&.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)
|
||||
@ -309,26 +359,8 @@ export default {
|
||||
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;
|
||||
}
|
||||
display:block;
|
||||
}
|
||||
|
||||
.ts-area-picker-mobile{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
@ -344,6 +376,9 @@ export default {
|
||||
}
|
||||
@media screen and (min-width:769px)
|
||||
{
|
||||
/deep/.van-picker__confirm{
|
||||
display:none;
|
||||
}
|
||||
.ts-area-picker-mobile{
|
||||
display:none;
|
||||
}
|
||||
@ -352,6 +387,19 @@ export default {
|
||||
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