xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-10-04 19:26:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Address Component

Browse Source
This commit is contained in:
Vion 2022-01-19 23:02:07 +08:00
parent 83d77cfaeb
commit b007eb7b6f
1 changed files with 85 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
rc-busness/components/addressInput.vue
View File

@ -10,10 +10,11 @@
<li @click="switchTab(1)">{{ returnValueArr[1]?returnValueArr[1].name:'请选择' }}</li> <li @click="switchTab(1)">{{ returnValueArr[1]?returnValueArr[1].name:'请选择' }}</li>
<li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li> <li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li>
</ul> </ul>
<div class="close" @click="hideAddress"></div>
</div> </div>
<div class="ts-area-picker-values"> <div class="ts-area-picker-values">
<ul> <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 }} {{ item.name }}
</li> </li>
</ul> </ul>
@ -37,6 +38,7 @@
</template> </template>
<script> <script>
export default { export default {
props:["defaultValues"],
data(){ data(){
return{ return{
displayValue:"", displayValue:"",
@ -70,6 +72,8 @@ export default {
let self=this; 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"}] // 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}]; 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){ this.$children.forEach(function(vueComponent){
if(vueComponent._name=="<VanPicker>") if(vueComponent._name=="<VanPicker>")
{ {
@ -141,11 +145,13 @@ export default {
let _self=this; let _self=this;
let provinceId=''; let provinceId='';
let areaId=undefined; let areaId=undefined;
let validatedIndex=-1;
this.returnValueArr.forEach(function(obj,index){ this.returnValueArr.forEach(function(obj,index){
switch(index){ switch(index){
case 0: case 0:
//Skipping province checking //Skipping province checking
provinceId = obj.id; provinceId = obj.id;
validatedIndex = 0;
break; break;
case 1: case 1:
//Checking City //Checking City
@ -157,6 +163,7 @@ export default {
else else
{ {
areaId = _self.returnValueArr[index].id; areaId = _self.returnValueArr[index].id;
validatedIndex=index;
} }
//Checking City end //Checking City end
break; break;
@ -167,15 +174,18 @@ export default {
console.log('501 : error via checking validatePickedValues'); console.log('501 : error via checking validatePickedValues');
_self.returnValueArr[index]={}; _self.returnValueArr[index]={};
} }
else{
validatedIndex=index;
}
//Checking Area end //Checking Area end
break; break;
default: default:
break; break;
} }
}); });
return validatedIndex;
}, },
onConfirm(values) { onConfirm(values) {
debugger;
//Get columns structure array here : values //Get columns structure array here : values
let _self=this; let _self=this;
let returnVal=[]; let returnVal=[];
@ -210,30 +220,33 @@ export default {
this.show=false; this.show=false;
}, },
switchTab(tabIndex){ switchTab(tabIndex){
let _self=this;
let areaTabLi=document.querySelectorAll(".ts-area-picker-tmp-value li"); let areaTabLi=document.querySelectorAll(".ts-area-picker-tmp-value li");
if(tabIndex==0){ if(tabIndex==0){
this.curDisplayingCol = this.columns[tabIndex].values; this.curDisplayingCol = this.columns[tabIndex].values;
} }
else{ let lastValidatedTabIndex=this.validatePickedValues();
if(this.returnValueArr[tabIndex-1]){} if(lastValidatedTabIndex<(tabIndex-1))
else{ {
tabIndex=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; 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){ areaTabLi.forEach(function(ele,index){
if(tabIndex==index) if(tabIndex==index){
{
ele.classList.add('active'); 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 else
ele.classList.remove('active'); ele.classList.remove('active');
@ -259,6 +272,7 @@ export default {
border-bottom:1px solid #D7D7D7; border-bottom:1px solid #D7D7D7;
padding:0 2.5rem; padding:0 2.5rem;
box-sizing: border-box; box-sizing: border-box;
position:relative;
ul{ ul{
padding:0; padding:0;
margin: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{ .ts-area-picker-values{
width:100%;
height:100%;
ul{ ul{
padding:1rem 2.5rem 2rem 2.5rem; padding:1rem 2.5rem 2rem 2.5rem;
margin:0; margin:0;
@ -291,6 +317,30 @@ export default {
&.nth-child(6n){ &.nth-child(6n){
margin-right:0; 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) @media screen and (max-width:768px)
@ -309,26 +359,8 @@ export default {
border-bottom:1px solid #D8D8D8; border-bottom:1px solid #D8D8D8;
} }
/deep/.van-picker__confirm{ /deep/.van-picker__confirm{
text-indent:-999rem; display:block;
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{ .ts-area-picker-mobile{
display:flex; display:flex;
flex-direction: column; flex-direction: column;
@ -344,6 +376,9 @@ export default {
} }
@media screen and (min-width:769px) @media screen and (min-width:769px)
{ {
/deep/.van-picker__confirm{
display:none;
}
.ts-area-picker-mobile{ .ts-area-picker-mobile{
display:none; display:none;
} }
@ -352,6 +387,19 @@ export default {
width:100%; width:100%;
height:19.25rem; height:19.25rem;
border:1px solid #808285; border:1px solid #808285;
overflow:hidden;
}
.ts-area-picker-values{
}
}
@keyframes flash-error
{
from {
opacity:.6;
}
to {
opacity:.3;
} }
} }
</style> </style>