xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-10-05 03:36:39 +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(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>