waterElectricityMinApp/pages/select/select.vue

<template>
	<view class="container">
		<picker class="picker-item1" @change="changeSelect1" :range="array1" :value="index1">
			<view class="select-item">
				<view class="picker-item-logol">
					<image class="picker-item-logo-left" src="/static/image/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-logor">
					<image class="picker-item-logo-right" src="/static/image/right.png"></image>
				</view>
			</view>
		</picker>
		<picker class="picker-item2" @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/image/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-logor">
					<image class="picker-item-logo-right" src="/static/image/right.png"></image>
				</view>
			</view>
		</picker>
		<picker class="picker-item2" @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/image/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-logor">
					<image class="picker-item-logo-right" src="/static/image/right.png"></image>
				</view>
			</view>
		</picker>
		<picker class="picker-item2" @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/image/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-logor">
					<image class="picker-item-logo-right" src="/static/image/right.png"></image>
				</view>
			</view>
		</picker>
		<view class="submit-item">
			<button @tap="navigateToIndex" class="submit" :data-room='room'>完成</button>
		</view>
	</view>
</template>

<script>
	import sortdata from '../../static/test.js'
	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: '', //选择器class属性
				add_class2: '',
				add_class3: '',
				add_class4: '',
				dis_num2: 1, //选择器disable属性,是否禁用
				dis_num3: 1,
				dis_num4: 1,
				// dis_num5: 1,
				allData: sortdata, //所有数据
				storage: {} //存放选择数据
			}
		},

		onLoad(options) {
			// console.log(options)
			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], i);
			// }

			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.sel1(this.arr1)
				this.sel2(this.arr2)
				this.sel3(this.arr3)
				this.sel4(this.arr4)

				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
			}
		},

		methods: {
			changeSelect1(e) {
				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
					}

					//获取选择器二中的值
					if (i == this.index1) {
						//得到选择器二中值的个数
						this.nbuilds = this.allData.data[i].builds.length
						this.array2 = []
						//将数据加入选择器二中
						for (var j = 0; j < this.nbuilds; j++) {
							this.array2.push(this.allData.data[i].builds[j].building)
						}
					}

					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;
				// console.log(this.array2)
				// console.log(this.room)
			},
			changeSelect2(e) {
				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.room = this.room.concat(this.array2[this.index2]);
				this.add_class2 = 1;
				this.dis_num3 = 0;
				// console.log(this.room)
			},
			changeSelect3(e) {
				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.room = this.room.concat(this.array3[this.index3]);
				this.add_class3 = 1;
				this.dis_num4 = 0;
				// console.log(this.room)
			},
			changeSelect4(e) {
				this.sel4(e.detail.value)
			},
			sel4(index) {
				// console.log(index)
				this.arr4 = this.array4;

				this.add_class4 = 1;

				if (this.room) {
					this.room = ''
				}
				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)
				var roomSelect = e.currentTarget.dataset.room;
				this.storage.roomSelect = roomSelect;
				this.storage.dom = this.array4[this.index4];
				// console.log(roomSelect)
				if (this.room != '') {
					uni.redirectTo({
						url: '../jiaofei/jiaofei?o=select&item=' + encodeURIComponent(JSON.stringify(this.storage)),
					})
				} else {
					uni.showToast({
						icon:'success',
						title:'请选择'
					})
				}
			},

		}
	}
</script>

<style>
	@import url("select.css");
</style>