Browse Source

电费充值中,选择充电校区、栋号、楼层、房间号后,如果选错,再去选择时,可以实现自动填充。增加用户体验!

程志平 5 years ago
parent
commit
a2e015f44c
2 changed files with 147 additions and 136 deletions
  1. 131 84
      pages/select/select.vue
  2. 16 52
      static/test.js

+ 131 - 84
pages/select/select.vue

@@ -91,52 +91,77 @@
 
 		onLoad(options) {
 			// console.log(options)
-			var str = options.roomSelect.split("-");
-			// console.log(str[0])
-			// var arr = new Array();
-			// var i = 0;
-			// while (i < str.length) {
-			// 	var s = "";
-			// 	while (str.charCodeAt(i) < 256) {
-			// 		s = s + str.charAt(i);
-			// 		i++;
-			// 	}
-			// 	arr.push(s);
-			// 	var s = "";
-			// 	while (str.charCodeAt(i) > 256) {
-			// 		s = s + str.charAt(i);
-			// 		i++;
-			// 	}
-			// 	arr.push(s);
-			// }
+			var str = options.roomSelect;
+			var arr = new Array();
+			var i = 0;
+			while (i < str.length) {
+				var tmp = str.charCodeAt(i)
+				var s = "";
+				while (str.charCodeAt(i) < 256) {
+					s = s + str.charAt(i);
+					i++;
+				}
+				arr.push(s);
+				s = "";
+				while (str.charCodeAt(i) > 256) {
+					s = s + str.charAt(i);
+					i++;
+				}
+				arr.push(s);
+			}
 			// for (i = 0; i < arr.length; i++) {
-			// 	console.log(arr[i]);
+			// 	console.log(arr[i], i);
 			// }
-			
-			
-			this.arr1 = [str[0]]
-			this.arr2 = [str[1]]
-			this.arr3 = [str[2]]
-			this.arr4 = [str[3]]
+
+			this.nschool = this.allData.data.length
 
 			// 自动填充
+			if (arr.length > 0) {
+				if (arr[1] != null && arr[1].length > 0) {
+					this.arr1 = [arr[1]]
+				}
+				let len = arr[2].length
+				if (arr[2] != null && len > 0) {
+					this.arr2 = [arr[2].substring(0, len - 3) + '栋']
+					this.arr3 = [arr[2].substring(len - 3, len - 2) + '层']
+					this.arr4 = [arr[2]]
+				}
 
-			this.nschool = this.allData.data.length
+				this.add_class1 = 1
+				this.add_class2 = 1
+				this.add_class3 = 1
+				this.add_class4 = 1
+
+				this.dis_num2 = 0
+				this.dis_num3 = 0
+				this.dis_num4 = 0
+				this.dis_num5 = 0
+
+				this.sel1(this.arr1)
+				this.sel2(this.arr2)
+				this.sel3(this.arr3)
+				this.sel4(this.arr4)
+			}
 		},
 
 		methods: {
 			changeSelect1(e) {
-				// console.log(e);
-				this.index1 = e.detail.value;
-				//清空选择器
-				if (this.array2) {
-					this.array2 = []
-				}
+				this.sel1(e.detail.value)
+			},
+			// 根据参数的值选中
+			sel1(index) {
+				// console.log(index)
+				this.arr1 = this.array1;
 
 				//获取选择器1的值
 				for (var i = 0; i < this.nschool; i++) {
 					// this.array1.push(this.allData.data[i].school)
 					// console.log(this.allData.data[i].school)
+					if (typeof(index) == 'string') {
+						this.index1 = index;
+					} else if (this.allData.data[i].school == index[0]) {
+						this.index1 = i
+					}
 					//判断是否为空,不为空则继续
 					if (!this.allData.data[i].builds) {
 						continue
@@ -146,15 +171,24 @@
 					if (i == this.index1) {
 						//得到选择器二中值的个数
 						this.nbuilds = this.allData.data[i].builds.length
-						// console.log(this.nbuilds)
+						this.array2 = []
 						//将数据加入选择器二中
 						for (var j = 0; j < this.nbuilds; j++) {
 							this.array2.push(this.allData.data[i].builds[j].building)
 						}
 					}
-				}
 
-				this.arr1 = this.array1;
+					if (typeof(index) == 'string') {
+						this.arr2 = ['请选择楼栋']
+						this.arr3 = ['请选择楼层']
+						this.arr4 = ['请选择房间']
+						this.index2 = 0
+						this.index3 = 0
+						this.index4 = 0
+						
+						this.room = ''
+					}
+				}
 				// this.room = this.room.concat(this.array1[this.index1]);
 				this.add_class1 = 1;
 				this.dis_num2 = 0;
@@ -162,113 +196,119 @@
 				// console.log(this.room)
 			},
 			changeSelect2(e) {
-				// console.log(e);
-				this.index2 = e.detail.value;
-				if (this.array3) {
-					this.array3 = []
-				}
+				this.sel2(e.detail.value)
+			},
+			sel2(index) {
+				// console.log(index);
+				this.arr2 = this.array2;
 
 				for (var i = 0; i < this.nbuilds; i++) {
 					// this.array1.push(this.allData.data[i].school)
 					// console.log(this.allData.data[i].school)
+					if (typeof(index) == 'string') {
+						this.index2 = index;
+					} else if (this.allData.data[this.index1].builds[i].building == index[0]) {
+						this.index2 = i
+					}
+
 					if (!this.allData.data[this.index1].builds[i].floors) {
 						continue
 					}
 
 					if (i == this.index2) {
 						this.floors = this.allData.data[this.index1].builds[i].floors.length
+						this.array3 = []
 						// console.log(this.floors)
 						for (var j = 0; j < this.floors; j++) {
 							this.array3.push(this.allData.data[this.index1].builds[i].floors[j].floor)
 						}
 					}
+
+					if (typeof(index) == 'string') {
+						this.arr3 = ['请选择楼层']
+						this.arr4 = ['请选择房间']
+						this.index3 = 0
+						this.index4 = 0
+						
+						this.room = ''
+					}
 				}
 
-				this.arr2 = this.array2;
 				// this.room = this.room.concat(this.array2[this.index2]);
 				this.add_class2 = 1;
 				this.dis_num3 = 0;
 				// console.log(this.room)
 			},
 			changeSelect3(e) {
-				// console.log(e);
-				this.index3 = e.detail.value;
-
-				if (this.array4) {
-
-					this.array4 = []
-
-				}
+				this.sel3(e.detail.value)
+			},
+			sel3(index) {
+				this.arr3 = this.array3;
 
 				for (var i = 0; i < this.floors; i++) {
-
 					// this.array1.push(this.allData.data[i].school)
-
 					// console.log(this.allData.data[i].school)
+					if (typeof(index) == 'string') {
+						this.index3 = index;
+					} else if (this.allData.data[this.index1].builds[this.index2].floors[i].floor == index[0]) {
+						this.index3 = i
+					}
 
 					if (!this.allData.data[this.index1].builds[this.index2].floors[i].rooms) {
-
 						continue
-
 					}
 
 					if (i == this.index3) {
-
 						this.rooms = this.allData.data[this.index1].builds[this.index2].floors[i].rooms.length
-
+						this.array4 = []
 						// console.log(this.rooms)
-
 						for (var j = 0; j < this.rooms; j++) {
-
 							this.array4.push(this.allData.data[this.index1].builds[this.index2].floors[i].rooms[j])
-
 						}
-
 					}
 
+					if (typeof(index) == 'string') {
+						this.arr4 = ['请选择房间']
+						this.index4 = 0
+						
+						this.room = ''
+					}
 				}
-
-				this.arr3 = this.array3;
-
 				// this.room = this.room.concat(this.array3[this.index3]);
-
 				this.add_class3 = 1;
-
 				this.dis_num4 = 0;
-
 				// console.log(this.room)
 			},
 			changeSelect4(e) {
-				// console.log(e);
-
-				this.index4 = e.detail.value;
-
+				this.sel4(e.detail.value)
+			},
+			sel4(index) {
+				// console.log(index)
 				this.arr4 = this.array4;
 
 				this.add_class4 = 1;
 
 				if (this.room) {
-
 					this.room = ''
-
 				}
-
-				//将选择器中的值加到变量room中,传到下一个页面
-				// this.room = this.room.concat(this.array1[this.index1], this.array2[this.index2], this.array3[this.index3],
-				// 	this.array4[this.index4]);
-				this.room = this.room.concat(this.array1[this.index1] + '-' + this.array2[this.index2] + '-' + this.array3[
-					this.index3] +'-'+ this.array4[this.index4]);
-
+				for (var i = 0; i < this.rooms; i++) {
+					if (typeof(index) == 'string')
+						this.index4 = index;
+					else if (this.allData.data[this.index1].builds[this.index2].floors[this.index3].rooms[i] == index[0]) {
+						this.index4 = i
+					}
+					//将选择器中的值加到变量room中,传到下一个页面
+					// this.room = this.room.concat(this.array1[this.index1], this.array2[this.index2], this.array3[this.index3],
+					// 	this.array4[this.index4]);
+				}
+				this.room = this.room.concat(this.array1[this.index1], this.array4[this.index4]);
 				this.dis_num5 = 0;
-
 				// console.log(this.array1[this.index1])
 				// console.log(this.array2[this.index2])
 				// console.log(this.array3[this.index3])
 				// console.log(this.array4[this.index4])
-
 				// console.log(this.room)
 			},
-
 			//跳转页面
 			navigateToIndex(e) {
 				// console.log(e)
@@ -276,9 +316,16 @@
 				this.storage.roomSelect = roomSelect;
 				this.storage.dom = this.array4[this.index4];
 				// console.log(roomSelect)
-				uni.navigateTo({
-					url: '../jiaofei/jiaofei?item=' + encodeURIComponent(JSON.stringify(this.storage)),
-				});
+				if (this.room != '') {
+					uni.navigateTo({
+						url: '../jiaofei/jiaofei?item=' + encodeURIComponent(JSON.stringify(this.storage)),
+					})
+				} else {
+					uni.showToast({
+						icon:'success',
+						title:'请选择'
+					})
+				}
 			},
 
 		}

+ 16 - 52
static/test.js

@@ -17,17 +17,17 @@ const data = [{
 			"building": "1栋",
 			"floors": [{
 					"floor": "1层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['1101', '1102', '1103', '1104', '1105']
 				},
 				{
 					"floor": "2层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['1201', '1202', '1203', '1204', '1205']
 				}, {
 					"floor": "3层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['1301', '1302', '1303', '1304', '1305']
 				}, {
 					"floor": "4层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['1401', '1402', '1403', '1404', '1405']
 				}
 			]
 		},
@@ -35,35 +35,17 @@ const data = [{
 			"building": "2栋",
 			"floors": [{
 					"floor": "1层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['2101', '2102', '2103', '2104', '2105']
 				},
 				{
 					"floor": "2层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['2201', '2202', '2203', '2204', '2205']
 				}, {
 					"floor": "3层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['2301', '2302', '2303', '2304', '2305']
 				}, {
 					"floor": "4层",
-					"rooms": ['01', '02', '03', '04', '05']
-				}
-			]
-		},
-		{
-			"building": "3栋",
-			"floors": [{
-					"floor": "1层",
-					"rooms": ['01', '02', '03', '04', '05']
-				},
-				{
-					"floor": "2层",
-					"rooms": ['01', '02', '03', '04', '05']
-				}, {
-					"floor": "3层",
-					"rooms": ['01', '02', '03', '04', '05']
-				}, {
-					"floor": "4层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['2401', '2402', '2403', '2404', '2405']
 				}
 			]
 		}
@@ -74,17 +56,17 @@ const data = [{
 			"building": "1栋",
 			"floors": [{
 					"floor": "1层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['1101', '1102', '1103', '1104', '1105']
 				},
 				{
 					"floor": "2层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['1201', '1202', '1203', '1204', '1205']
 				}, {
 					"floor": "3层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['1301', '1302', '1303', '1304', '1305']
 				}, {
 					"floor": "4层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['1401', '1402', '1403', '1404', '1405']
 				}
 			]
 		},
@@ -92,35 +74,17 @@ const data = [{
 			"building": "2栋",
 			"floors": [{
 					"floor": "1层",
-					"rooms": ['01', '02', '03', '04', '05']
-				},
-				{
-					"floor": "2层",
-					"rooms": ['01', '02', '03', '04', '05']
-				}, {
-					"floor": "3层",
-					"rooms": ['01', '02', '03', '04', '05']
-				}, {
-					"floor": "4层",
-					"rooms": ['01', '02', '03', '04', '05']
-				}
-			]
-		},
-		{
-			"building": "3栋",
-			"floors": [{
-					"floor": "1层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['2101', '2102', '2103', '2104', '2105']
 				},
 				{
 					"floor": "2层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['2201', '2202', '2203', '2204', '2205']
 				}, {
 					"floor": "3层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['2301', '2302', '2303', '2304', '2305']
 				}, {
 					"floor": "4层",
-					"rooms": ['01', '02', '03', '04', '05']
+					"rooms": ['2401', '2402', '2403', '2404', '2405']
 				}
 			]
 		}