xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-10-03 02:36:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

!50 2022-1-20Leung

Browse Source 
Merge pull request !50 from Admin/sit-Leung
This commit is contained in:
Admin 2022-01-20 03:46:34 +00:00 committed by Gitee
commit d939584d05
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
1 changed files with 404 additions and 404 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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