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' :disabled="dis_num5">完成</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.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);
			// }
			// for (i = 0; i < arr.length; i++) {
			// 	console.log(arr[i]);
			// }
			
			
			this.arr1 = [str[0]]
			this.arr2 = [str[1]]
			this.arr3 = [str[2]]
			this.arr4 = [str[3]]

			// 自动填充

			this.nschool = this.allData.data.length
		},

		methods: {
			changeSelect1(e) {
				// console.log(e);
				this.index1 = e.detail.value;
				//清空选择器
				if (this.array2) {
					this.array2 = []
				}

				//获取选择器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 (!this.allData.data[i].builds) {
						continue
					}

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

				this.arr1 = this.array1;
				// 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) {
				// console.log(e);
				this.index2 = e.detail.value;
				if (this.array3) {
					this.array3 = []
				}

				for (var i = 0; i < this.nbuilds; i++) {
					// this.array1.push(this.allData.data[i].school)
					// console.log(this.allData.data[i].school)
					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
						// 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)
						}
					}
				}

				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 = []

				}

				for (var i = 0; i < this.floors; i++) {

					// this.array1.push(this.allData.data[i].school)

					// console.log(this.allData.data[i].school)

					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

						// 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])

						}

					}

				}

				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.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]);

				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)
				uni.navigateTo({
					url: '../jiaofei/jiaofei?item=' + encodeURIComponent(JSON.stringify(this.storage)),
				});
			},

		}
	}
</script>

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