Merge remote-tracking branch 'origin/sit-Leung' into sit-jiamin-v2

rc-busness/components/addressInput.vue

@@ -10,12 +10,12 @@
 					<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 class="close" @click="pcHideAddress"></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 }}
+						<span>{{ item.name }}</span>
 					</li>
 				</ul>
 			</div>
@@ -37,6 +37,9 @@
 	</div>
 </template>
 <script>
+import {
+  areaData
+} from "~/config/area.js";
 export default {
 	props:["defaultValues"],
 	data(){
@@ -46,20 +49,7 @@ export default {
 			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'
-				}
-			],
+			columns:areaData,
 			curDisplayingColIndex:0,
 			curDisplayingCol:[]
 		}
@@ -84,6 +74,7 @@ export default {
 			//mobile end
 			
 			//PC
+			this.curDisplayingColIndex=0;
 			this.switchTab(this.curDisplayingColIndex);
 			//PC end
 			//Initilizing end
@@ -132,20 +123,48 @@ export default {
 						//Handling City
 						let matchedCity=_self.fitlerValuesInArray(curSelection.province,_self.columns[index].values);
 						picker.setColumnValues(index,matchedCity);
-						curSelection.city=matchedCity[0].id;
+						if(_self.inArray(ele,matchedCity))
+						{
+							curSelection.city=ele.id;
+						}
+						else
+						{
+							console.log('502 : Invalid City Options');
+							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;
+						if(_self.inArray(ele,matchedArea))
+						{
+							curSelection.area=ele.id;
+						}
+						else if(matchedArea.length)
+						{
+							console.log('503 : Invalid Area Options');
+							curSelection.area=matchedArea[0].id;
+						}
 						//Handling Area end
 						break;
 				}
 				
 			});
 		},
+		inArray(needle,haystack){
+			if(!needle || !needle.id)
+				return false;
+			if(!haystack || haystack.length<haystack)
+				return false;
+		    for(var i in haystack){
+		        if(haystack[i].id==needle.id){
+		            return true;
+		        }
+		    }
+		    return false;
+		},
 		validatePickedValues(){
 			let _self=this;
 			let provinceId='';
@@ -197,18 +216,24 @@ export default {
 			let tmpArr = [];
 			this.displayValue='';
 			values.forEach(function(ele,index){
+				if(!ele || !ele.name)
+				{
+					ele={id:'',name:''};
+				}
 				_self.displayValue = _self.displayValue + ele.name + " ";
 				tmpArr.push(ele.id);
 				returnVal.push(ele);
 			});
 			this.returnValueArr=returnVal;
 			this.returnValue=tmpArr.join("|");
+			this.$emit('getmenu',this.returnValueArr);
 			this.hideAddress();
 		},
 		onCancel() {
 			  
 		},
 		fitlerValuesInArray(stringStartWith,dataColArea){
+			stringStartWith=stringStartWith+"-";
 			let result=[];
 			dataColArea.forEach(function(ele){
 				if(ele.id.indexOf(stringStartWith)===0)
@@ -221,6 +246,9 @@ export default {
 		popAddress() {
 			this.show=true;
 		},
+		pcHideAddress() {
+			this.onConfirm(this.returnValueArr);
+		},
 		hideAddress() {
 			this.show=false;
 		},
@@ -229,10 +257,10 @@ export default {
 			if(tabIndex==0){
 				this.curDisplayingCol = this.columns[tabIndex].values;
 			}
+			//Check can switch to next tab
 			let lastValidatedTabIndex=this.validatePickedValues();
 			if(lastValidatedTabIndex<(tabIndex-1))
 			{
-				//TODO show warning here
 				let errorEle=document.querySelector(".ts-area-picker-values");
 				errorEle.classList.add("error");
 				let _self = this;
@@ -246,6 +274,9 @@ export default {
 				}
 				tabIndex=lastValidatedTabIndex+1;
 			}
+			//Check can switch to next tab end
+			
+			//Building column values for current
 			this.curDisplayingColIndex=tabIndex;
 			let filteredData=this.columns[tabIndex].values;
 			if(tabIndex>0 && this.returnValueArr[tabIndex-1]) //pass
@@ -254,15 +285,21 @@ export default {
 				filteredData=this.fitlerValuesInArray(pickedId,this.columns[tabIndex].values);
 			}
 			this.curDisplayingCol=filteredData;
+			if(this.curDisplayingCol && this.curDisplayingCol.length<=0)
+			{
+				this.onConfirm(this.returnValueArr);
+			}
+			//Building column values for current end
 			
-			areaTabLi.forEach(function(ele,index){	
+			//Filling style
+			areaTabLi.forEach(function(ele,index){
 				if(tabIndex==index){
 					ele.classList.add('active');
 				}
 				else
 					ele.classList.remove('active');
 			})
-			
+			//Filling style end
 		}
 	},
 	mounted(){
@@ -277,9 +314,7 @@ export default {
 <style lang="less" scoped>
 	.ts-area-picker-container{display:inline-block;}
 	.ts-area-picker-value-displayer{
-		width:42.5rem;
-		height: 2.81rem;
-		padding-left: 1rem;
+		
 	}
 	.ts-area-picker-tmp-value{
 		border-bottom:1px solid #D7D7D7;
@@ -293,9 +328,9 @@ export default {
 			li{
 				display:inline-block;
 				color:#333333;
-				width:3.125rem;
+				width:8rem;
 				padding: 1.25rem 0;
-				margin-right:4rem;
+				margin-right:.75rem;
 				cursor: pointer;
 				&.active{
 					color:#E2001A;
@@ -316,7 +351,8 @@ export default {
 	}
 	.ts-area-picker-values{
 		width:100%;
-		height:100%;
+		height:78%;
+		overflow:auto;
 		&.error{
 			position:relative;
 			width:100%;
@@ -335,21 +371,25 @@ export default {
 			}
 		}
 		ul{
-			padding:1rem 2.5rem 2rem 2.5rem;
+			padding:1rem .5rem 2rem 2.5rem;
 			margin:0;
 		}
 		li{
 			display:inline-block;
 			margin-top:1rem;
-			margin-right:3.875rem;
+			margin-right:.875rem;
 			color:#333;
+			width:8rem;
 			cursor:pointer;
-			&.nth-child(6n){
+			&:nth-child(4n){
 				margin-right:0;
 			}
 			&.active{
 				color:#E2001A;
-				border-bottom:4px solid #E2001A;
+				span{
+					display:inline-block;
+					border-bottom: 4px solid #E2001A;
+				}
 			}
 		}
 	}
@@ -423,6 +463,9 @@ export default {
 		.ts-area-picker-mobile{
 			display:none;
 		}
+		.ts-area-picker-container,.ts-area-picker-value-displayer{
+			width:40rem;
+		}
 		.ts-area-picker-desktop{
 			display:block;
 			width:100%;
@@ -430,9 +473,6 @@ export default {
 			border:1px solid #808285;
 			overflow:hidden;
 		}
-		.ts-area-picker-values{
-			
-		}
 	}
 	@keyframes flash-error
 	{