宿舍选择优化显示，增加用户体验

pagesElectric/select/select.css

@@ -90,4 +90,8 @@ page {
 
 .font-txt{
 	color: #333333;
+}
+
+.font-txt-red {
+	color: #ff0000;
 }

pagesElectric/select/select.vue

@@ -1,52 +1,48 @@
 <template>
 	<view class="container">
-		<picker class="picker-item1" @tap="clickSelect1" @change="changeSelect1" :range="array1" :value="index1"
-			:disabled="dis_num1">
+		<picker class="picker-item1" @tap="clickSelect1" @change="changeSelect1" :range="array1" :value="index1">
 			<view class="select-item">
 				<view class="picker-item-logol">
 					<image class="picker-item-logo-left" src="../static/images/school.png"></image>
 				</view>
 				<view class="picker-item-label">校区</view>
-				<view class="picker-item-content" :class="{'font-txt':add_class1==1}">{{arr1[index1]}}</view>
+				<view class="picker-item-content" :class="{'font-txt':add_class1==1, 'font-txt-red': add_class1!=1}">{{arr1[index1]}}</view>
 				<view class="picker-item-logor">
 					<image class="picker-item-logo-right" src="../static/images/right.png"></image>
 				</view>
 			</view>
 		</picker>
-		<picker class="picker-item2" @tap="clickSelect2" @change="changeSelect2" :range="array2" :value="index2"
-			:disabled="dis_num2">
+		<picker class="picker-item2" @tap="clickSelect2" @change="changeSelect2" :range="array2" :value="index2">
 			<view class="select-item">
 				<view class="picker-item-logol">
 					<image class="picker-item-logo-left" src="../static/images/building.png"></image>
 				</view>
 				<view class="picker-item-label">楼栋</view>
-				<view class="picker-item-content" :class="{'font-txt':add_class2==1}">{{arr2[index2]}}</view>
+				<view class="picker-item-content" :class="{'font-txt':add_class2==1, 'font-txt-red': add_class2!=1}">{{arr2[index2]}}</view>
 				<view class="picker-item-logor">
 					<image class="picker-item-logo-right" src="../static/images/right.png"></image>
 				</view>
 			</view>
 		</picker>
-		<picker class="picker-item2" @tap="clickSelect3" @change="changeSelect3" :range="array3" :value="index3"
-			:disabled="dis_num3">
+		<picker class="picker-item2" @tap="clickSelect3" @change="changeSelect3" :range="array3" :value="index3">
 			<view class="select-item">
 				<view class="picker-item-logol">
 					<image class="picker-item-logo-left" src="../static/images/floor.png"></image>
 				</view>
 				<view class="picker-item-label">楼层</view>
-				<view class="picker-item-content" :class="{'font-txt':add_class3==1}">{{arr3[index3]}}</view>
+				<view class="picker-item-content" :class="{'font-txt':add_class3==1, 'font-txt-red': add_class3!=1}">{{arr3[index3]}}</view>
 				<view class="picker-item-logor">
 					<image class="picker-item-logo-right" src="../static/images/right.png"></image>
 				</view>
 			</view>
 		</picker>
-		<picker class="picker-item2" @tap="clickSelect4" @change="changeSelect4" :range="array4" :value="index4"
-			:disabled="dis_num4">
+		<picker class="picker-item2" @tap="clickSelect4" @change="changeSelect4" :range="array4" :value="index4">
 			<view class="select-item">
 				<view class="picker-item-logol">
 					<image class="picker-item-logo-left" src="../static/images/room.png"></image>
 				</view>
 				<view class="picker-item-label">房间</view>
-				<view class="picker-item-content" :class="{'font-txt':add_class4==1}">{{arr4[index4]}}</view>
+				<view class="picker-item-content" :class="{'font-txt':add_class4==1, 'font-txt-red': add_class4!=1}">{{arr4[index4]}}</view>
 				<view class="picker-item-logor">
 					<image class="picker-item-logo-right" src="../static/images/right.png"></image>
 				</view>
@@ -80,15 +76,10 @@
 				array3: [],
 				array4: [],
 				room: '', //存储选择器选择的所有值
-				add_class1: '', //选择器class属性
-				add_class2: '',
-				add_class3: '',
-				add_class4: '',
-				dis_num1: 1, //选择器disable属性,是否禁用
-				dis_num2: 1,
-				dis_num3: 1,
-				dis_num4: 1,
-				// dis_num5: 1,
+				add_class1: 0, //选择器class属性
+				add_class2: 0,
+				add_class3: 0,
+				add_class4: 0,
 				allData: [], //所有数据
 				storage: {}, //存放选择数据
 				ceshi: 'code',
@@ -100,13 +91,13 @@
 			if (this.test == 'weihuzhong') {
 				uni.redirectTo({
 					url: '../../pages/index/index'
-				})
-				
+				});
+
 				return;
 			}
-			
+
 			// 获取校区
-			this.getCampus()
+			this.getCampus();
 		},
 		methods: {
 			/**
@@ -120,27 +111,25 @@
 					header: {
 						'content-type': 'application/json'
 					}
-				})
+				});
 				// console.log(res.data);
 				if (res.data.code === 200) {
 					let tmpData = res.data.data;
-					this.nschool = tmpData.length
-					this.array1 = []
+					this.nschool = tmpData.length;
+					this.array1 = [];
 
 					for (var i = 0; i < this.nschool; i++) {
-						this.array1.push(tmpData[i].school)
+						this.array1.push(tmpData[i].school);
 					}
-
-					this.dis_num1 = 0
 				} else {
 					uni.showToast({
 						title: '未获得校区',
 						icon: 'none'
-					})
+					});
 				}
 
 				if (this.$store.state.building.roomSelect != '') {
-					this.fillData()
+					this.fillData();
 				}
 			},
 			/**
@@ -170,34 +159,32 @@
 				// 自动填充
 				if (arr.length > 0) {
 					if (arr[1] != null && arr[1].length > 0) {
-						this.arr1 = [arr[1]]
+						this.arr1 = [arr[1]];
 					}
 					let len = arr[2].length
 					if (arr[2] != null && len > 0) {
-						let a = arr[2].split('-')
-						this.arr2 = [a[0] + '栋']
-						this.arr3 = [a[1].substring(0, a[1].length - 2) + '层']
-						this.arr4 = [arr[2]]
+						let a = arr[2].split('-');
+						this.arr2 = [a[0] + '栋'];
+						this.arr3 = [a[1].substring(0, a[1].length - 2) + '层'];
+						this.arr4 = [arr[2]];
 					}
 
 					this.sel1(this.arr1, true);
 
-					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.add_class1 = 1;
+					this.add_class2 = 1;
+					this.add_class3 = 1;
+					this.add_class4 = 1;
 				}
 			},
 			clickSelect1() {
+				this.checkNull();
+				
 				if (this.array1.length == 0) {
 					uni.showToast({
 						title: '未获得校区，可能网络异常',
 						icon: 'none'
-					})
+					});
 				}
 			},
 			/**
@@ -205,10 +192,10 @@
 			 */
 			changeSelect1(e) {
 				// console.log(e);
-				this.array2 = []
-				this.array3 = []
-				this.array4 = []
-				this.sel1(e.detail.value, false)
+				this.array2 = [];
+				this.array3 = [];
+				this.array4 = [];
+				this.sel1(e.detail.value, false);
 			},
 			// 根据参数的值选中
 			sel1(index, theRoomIsExist) {
@@ -221,29 +208,49 @@
 				} else {
 					for (var i = 0; i < this.nschool; i++) {
 						if (index[0] == this.array1[i]) {
-							this.index1 = i
+							this.index1 = i;
 						}
 					}
 				}
 
 				//获取选择器二中的值
-				this.getBuilds(this.array1[this.index1], theRoomIsExist)
+				this.getBuilds(this.array1[this.index1], theRoomIsExist);
 
 				if (typeof index == 'string') {
-					this.arr2 = ['请选择楼栋']
-					this.arr3 = ['请选择楼层']
-					this.arr4 = ['请选择房间']
-					this.index2 = 0
-					this.index3 = 0
-					this.index4 = 0
-
-					this.room = ''
+					this.arr2 = ['请选择楼栋'];
+					this.arr3 = ['请选择楼层'];
+					this.arr4 = ['请选择房间'];
+					this.index2 = 0;
+					this.index3 = 0;
+					this.index4 = 0;
+
+					this.room = '';
 				}
 
 				this.add_class1 = 1;
-				this.dis_num2 = 0;
-
-				this.chgDisable()
+			},
+			// 检测对应的下拉列表是否为空，空为红色，非空黑色
+			checkNull() {
+				if (this.array1.length === 0) {
+					this.add_class1 = 0;
+				} else {
+					this.add_class1 = 1;
+				}
+				if (this.array2.length === 0) {
+					this.add_class2 = 0;
+				} else {
+					this.add_class2 = 1;
+				}
+				if (this.array3.length === 0) {
+					this.add_class3 = 0;
+				} else {
+					this.add_class3 = 1;
+				}
+				if (this.array4.length === 0) {
+					this.add_class4 = 0;
+				} else {
+					this.add_class4 = 1;
+				}
 			},
 			/**
 			 * 获取楼栋
@@ -260,43 +267,47 @@
 					data: {
 						school: campus
 					}
-				})
+				});
 				// console.log('楼栋：', res.data);
 				if (res.data.code === 200) {
 					let tmpData = res.data.data;
 					// this.allData = rooms
 					//得到选择器二中值的个数
-					this.nbuilds = tmpData.length
-					this.array2 = []
+					this.nbuilds = tmpData.length;
+					this.array2 = [];
 					//将数据加入选择器二中
 					for (var j = 0; j < this.nbuilds; j++) {
-						this.array2.push(tmpData[j].build)
+						this.array2.push(tmpData[j].build);
 					}
 
 					if (theRoomIsExist == true) {
-						this.sel2(this.arr2, true)
+						this.sel2(this.arr2, true);
 					}
 				} else {
 					this.array2 = []
 					uni.showToast({
 						title: '未获得楼栋',
 						icon: 'none'
-					})
+					});
 				}
+
+				this.checkNull();
 			},
 			clickSelect2() {
+				this.checkNull();
+				
 				if (this.array2.length == 0) {
 					uni.showToast({
 						title: '未获得楼栋，该校区没有楼栋',
 						icon: 'none'
-					})
+					});
 				}
 			},
 			changeSelect2(e) {
 				// console.log(e);
-				this.array3 = []
-				this.array4 = []
-				this.sel2(e.detail.value, false)
+				this.array3 = [];
+				this.array4 = [];
+				this.sel2(e.detail.value, false);
 			},
 			sel2(index, theRoomIsExist) {
 				// console.log(index);
@@ -308,26 +319,23 @@
 				} else {
 					for (var i = 0; i < this.nbuilds; i++) {
 						if (index[0] == this.array2[i]) {
-							this.index2 = i
+							this.index2 = i;
 						}
 					}
 				}
 
-				this.getFloors(this.array1[this.index1], this.array2[this.index2], theRoomIsExist)
+				this.getFloors(this.array1[this.index1], this.array2[this.index2], theRoomIsExist);
 
 				if (typeof index == 'string') {
-					this.arr3 = ['请选择楼层']
-					this.arr4 = ['请选择房间']
-					this.index3 = 0
-					this.index4 = 0
+					this.arr3 = ['请选择楼层'];
+					this.arr4 = ['请选择房间'];
+					this.index3 = 0;
+					this.index4 = 0;
 
-					this.room = ''
+					this.room = '';
 				}
 
 				this.add_class2 = 1;
-				this.dis_num3 = 0;
-
-				this.chgDisable()
 			},
 			/**
 			 * 获取楼层
@@ -347,33 +355,37 @@
 						school: campus,
 						build: build
 					}
-				})
+				});
 				// console.log('楼层：', res.data);
 				if (res.data.code === 200) {
 					let tmpData = res.data.data;
-					this.floors = tmpData.length
-					this.array3 = []
+					this.floors = tmpData.length;
+					this.array3 = [];
 
 					for (var j = 0; j < this.floors; j++) {
-						this.array3.push(tmpData[j].floors)
+						this.array3.push(tmpData[j].floors);
 					}
 
 					if (theRoomIsExist == true) {
-						this.sel3(this.arr3, true)
+						this.sel3(this.arr3, true);
 					}
 				} else {
 					uni.showToast({
 						title: '未获得楼层',
 						icon: 'none'
-					})
+					});
 				}
+
+				this.checkNull();
 			},
 			clickSelect3() {
+				this.checkNull();
+				
 				if (this.array3.length == 0) {
 					uni.showToast({
 						title: '未获得楼层，请选择楼栋',
 						icon: 'none'
-					})
+					});
 				}
 			},
 			changeSelect3(e) {
@@ -390,24 +402,21 @@
 				} else {
 					for (var i = 0; i < this.floors; i++) {
 						if (index[0] == this.array3[i]) {
-							this.index3 = i
+							this.index3 = i;
 						}
 					}
 				}
 
-				this.getDoms(this.array1[this.index1], this.array2[this.index2], this.array3[this.index3], theRoomIsExit)
+				this.getDoms(this.array1[this.index1], this.array2[this.index2], this.array3[this.index3], theRoomIsExit);
 
 				if (typeof index == 'string') {
-					this.arr4 = ['请选择房间']
-					this.index4 = 0
+					this.arr4 = ['请选择房间'];
+					this.index4 = 0;
 
-					this.room = ''
+					this.room = '';
 				}
 
 				this.add_class3 = 1;
-				this.dis_num4 = 0;
-
-				this.chgDisable()
 			},
 			/**
 			 * 获取房间
@@ -429,32 +438,36 @@
 						build: build,
 						floors: floors
 					}
-				})
+				});
 				// console.log('房间：', res.data);
 				if (res.data.code === 200) {
 					let tmpData = res.data.data;
-					this.rooms = tmpData.length
-					this.array4 = []
+					this.rooms = tmpData.length;
+					this.array4 = [];
 					for (var j = 0; j < this.rooms; j++) {
-						this.array4.push(tmpData[j].dom)
+						this.array4.push(tmpData[j].dom);
 					}
 
 					if (theRoomIsExist == true) {
-						this.sel4(this.arr4, true)
+						this.sel4(this.arr4, true);
 					}
 				} else {
 					uni.showToast({
 						title: '未获得房间',
 						icon: 'none'
-					})
+					});
 				}
+
+				this.checkNull();
 			},
 			clickSelect4() {
+				this.checkNull();
+				
 				if (this.array4.length == 0) {
 					uni.showToast({
 						title: '未获得房间，请选择楼层',
 						icon: 'none'
-					})
+					});
 				}
 			},
 			changeSelect4(e) {
@@ -468,7 +481,7 @@
 				this.add_class4 = 1;
 
 				if (this.room) {
-					this.room = ''
+					this.room = '';
 				}
 
 
@@ -477,7 +490,7 @@
 				} else {
 					for (var i = 0; i < this.rooms; i++) {
 						if (this.array4[i] == index[0]) {
-							this.index4 = i
+							this.index4 = i;
 						}
 					}
 				}
@@ -485,25 +498,6 @@
 				this.room = this.array1[this.index1] + this.array4[this.index4];
 			},
 			/**
-			 * 下拉框变量数组为空，就禁用
-			 */
-			chgDisable() {
-				setTimeout(() => {
-					if (this.array1.length == 0) {
-						this.dis_num1 = 1
-					}
-					if (this.array2.length == 0) {
-						this.dis_num2 = 1
-					}
-					if (this.array3.length == 0) {
-						this.dis_num3 = 1
-					}
-					if (this.array4.length == 0) {
-						this.dis_num4 = 1
-					}
-				}, 300)
-			},
-			/**
 			 * 跳转缴费页面
 			 * @param {Object} e
 			 */
@@ -516,21 +510,21 @@
 					this.$store.state.building.roomSelect = this.storage.roomSelect;
 					this.$store.state.building.add_class = 1;
 					this.$store.state.building.dorm_number = this.storage.dom;
+
 					uni.navigateBack({
 						delta: 1
-					})
+					});
 				} else {
 					uni.showToast({
 						icon: 'success',
 						title: '宿舍号不完整'
-					})
+					});
 				}
-			},
-
+			}
 		}
 	}
 </script>
 
 <style>
 	@import url("select.css");
-</style>
+</style>