waterElectricityMinApp/pagesElectric/select/select.vue

<template>
	<view class="container">
		<picker class="picker-item1" @tap="clickSelect1" @change="changeSelect1" :range="array1" :value="index1" :disabled="dis_num1">
			<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, '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">
			<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, '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">
			<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, '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">
			<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, '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>
			</view>
		</picker>
		<view class="submit-item">
			<button @tap="navigateToIndex" class="submit" :data-room='room'>完成</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index1: 0, //选择器选择
				index2: 0,
				index3: 0,
				index4: 0,
				nschool: 0, //选择器中各个值的个数
				nbuilds: 0,
				floors: 0,
				rooms: 0,
				arr1: ['请选择校区'], //初始选择
				arr2: ['请选择楼栋'],
				arr3: ['请选择楼层'],
				arr4: ['请选择房间'],
				array1: [], //选择器的值
				array2: [],
				array3: [],
				array4: [],
				room: '', //存储选择器选择的所有值
				add_class1: 0, //选择器class属性
				add_class2: 0,
				add_class3: 0,
				add_class4: 0,
				dis_num1: 1, //选择器disable属性,是否禁用
				dis_num2: 1,
				dis_num3: 1,
				dis_num4: 1,
				allData: [], //所有数据
				storage: {}, //存放选择数据
				ceshi: 'code',
				test: this.$store.state.test
			}
		},
		onLoad() {
			// 系统正在维护...
			if (this.test == 'weihuzhong') {
				uni.redirectTo({
					url: '../../pages/index/index'
				});

				return;
			}

			// 获取校区
			this.getCampus();
		},
		methods: {
			/**
			 * 获取校区
			 */
			async getCampus() {
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/buildschools.action',
					method: 'POST',
					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 = [];

					for (var i = 0; i < this.nschool; i++) {
						this.array1.push(tmpData[i].school);
					}

					this.dis_num1 = 0;
				} else {
					uni.showToast({
						title: '未获得校区',
						icon: 'none'
					});
				}

				if (this.$store.state.building.roomSelect != '') {
					this.fillData();
				}
			},
			/**
			 * 填充楼栋号和宿舍号
			 */
			fillData() {
				// 拆分之前选好的楼栋和宿舍号
				var str = this.$store.state.building.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);
				}

				// 自动填充
				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) {
						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.checkNull();

					this.dis_num2 = 0;
					this.dis_num3 = 0;
					this.dis_num4 = 0;
				}
			},
			clickSelect1() {
				if (this.array1.length == 0) {
					uni.showToast({
						title: '未获得校区，可能网络异常',
						icon: 'none'
					});
				}
			},
			/**
			 * 选择校区
			 */
			changeSelect1(e) {
				// console.log(e);
				this.array2 = [];
				this.array3 = [];
				this.array4 = [];
				this.sel1(e.detail.value, false);
			},
			// 根据参数的值选中
			sel1(index, theRoomIsExist) {
				// console.log(index)
				// console.log(typeof(index))
				this.arr1 = this.array1;
				//获取选择器1的值
				if (typeof index == 'string') {
					this.index1 = index;
				} else {
					for (var i = 0; i < this.nschool; i++) {
						if (index[0] == this.array1[i]) {
							this.index1 = i;
						}
					}
				}

				//获取选择器二中的值
				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.add_class1 = 1;
				this.dis_num2 = 0;
			},
			// 检测对应的下拉列表是否为空，空为红色，非空黑色
			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;
				}
			},
			/**
			 * 获取楼栋
			 * @param {Object} campus
			 */
			async getBuilds(campus, theRoomIsExist) {
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/buildbuilds.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					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 = [];
					//将数据加入选择器二中
					for (var j = 0; j < this.nbuilds; j++) {
						this.array2.push(tmpData[j].build);
					}

					if (theRoomIsExist == true) {
						this.sel2(this.arr2, true);
					}
				} else {
					this.array2 = []
					uni.showToast({
						title: '未获得楼栋',
						icon: 'none'
					});
				}

				this.checkNull();

				this.chgDisable();
			},
			clickSelect2() {
				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);
			},
			sel2(index, theRoomIsExist) {
				// console.log(index);
				// console.log(typeof index);
				this.arr2 = this.array2;

				if (typeof index == 'string') {
					this.index2 = index;
				} else {
					for (var i = 0; i < this.nbuilds; i++) {
						if (index[0] == this.array2[i]) {
							this.index2 = i;
						}
					}
				}

				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.room = '';
				}

				this.add_class2 = 1;
				this.dis_num3 = 0;
			},
			/**
			 * 获取楼层
			 * @param {Object} campus
			 * @param {Object} build
			 */
			async getFloors(campus, build, theRoomIsExist) {
				// console.log(campus, build);
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/buildFloors.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						school: campus,
						build: build
					}
				});
				// console.log('楼层：', res.data);
				if (res.data.code === 200) {
					let tmpData = res.data.data;
					this.floors = tmpData.length;
					this.array3 = [];

					for (var j = 0; j < this.floors; j++) {
						this.array3.push(tmpData[j].floors);
					}

					if (theRoomIsExist == true) {
						this.sel3(this.arr3, true);
					}
				} else {
					uni.showToast({
						title: '未获得楼层',
						icon: 'none'
					});
				}

				this.checkNull();
				
				this.chgDisable();
			},
			clickSelect3() {
				if (this.array3.length == 0) {
					uni.showToast({
						title: '未获得楼层，请选择楼栋',
						icon: 'none'
					});
				}
			},
			changeSelect3(e) {
				// console.log(e);
				this.array4 = []
				this.sel3(e.detail.value, false)
			},
			sel3(index, theRoomIsExit) {
				// console.log(index)
				this.arr3 = this.array3;

				if (typeof index == 'string') {
					this.index3 = index;
				} else {
					for (var i = 0; i < this.floors; i++) {
						if (index[0] == this.array3[i]) {
							this.index3 = i;
						}
					}
				}

				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.room = '';
				}

				this.add_class3 = 1;
				this.dis_num4 = 0;
			},
			/**
			 * 获取房间
			 * @param {Object} campus
			 * @param {Object} build
			 * @param {Object} floors
			 */
			async getDoms(campus, build, floors, theRoomIsExist) {
				// console.log(campus, build, floors);
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/builddoms.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						school: campus,
						build: build,
						floors: floors
					}
				});
				// console.log('房间：', res.data);
				if (res.data.code === 200) {
					let tmpData = res.data.data;
					this.rooms = tmpData.length;
					this.array4 = [];
					for (var j = 0; j < this.rooms; j++) {
						this.array4.push(tmpData[j].dom);
					}

					if (theRoomIsExist == true) {
						this.sel4(this.arr4, true);
					}
				} else {
					uni.showToast({
						title: '未获得房间',
						icon: 'none'
					});
				}
				
				this.checkNull();

				this.chgDisable();
			},
			clickSelect4() {
				if (this.array4.length == 0) {
					uni.showToast({
						title: '未获得房间，请选择楼层',
						icon: 'none'
					});
				}
			},
			changeSelect4(e) {
				// console.log(e);
				this.sel4(e.detail.value, false)
			},
			sel4(index, theRoomIsExist) {
				// console.log(index)
				this.arr4 = this.array4;

				this.add_class4 = 1;

				if (this.room) {
					this.room = '';
				}


				if (typeof index == 'string') {
					this.index4 = index;
				} else {
					for (var i = 0; i < this.rooms; i++) {
						if (this.array4[i] == index[0]) {
							this.index4 = i;
						}
					}
				}

				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
			 */
			navigateToIndex(e) {
				// console.log(e)
				var roomSelect = e.currentTarget.dataset.room;
				this.storage.roomSelect = roomSelect;
				this.storage.dom = this.array4[this.index4];
				if (this.room != '') {
					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>