waterElectricityMinApp/pages/select/select.vue

<template>
	<view class="container">
		<picker class="picker-item1" @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/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_num1: 1, //选择器disable属性,是否禁用
				dis_num2: 1,
				dis_num3: 1,
				dis_num4: 1,
				// dis_num5: 1,
				allData: [], //所有数据
				storage: {}, //存放选择数据
				ceshi: 'code',
				test: this.$store.state.test
			}
		},
		onLoad() {
			// 请求校区、楼栋、层好、宿舍号等数据
			this.requestAllData()
		},

		methods: {
			/**
			 * 请求楼栋、楼层、宿舍等信息
			 */
			async requestAllData() {
				uni.showLoading({
					title: '数据加载中……',
					mask: true
				});
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/buildelec.action',
					method: 'POST',
					header: {
						'content-type': 'application/json'
					}
				})
				// console.log(res.data.data);
				let rooms = JSON.parse('[{"data":' + res.data.data + '}]')[0]
				// console.log(rooms);
				if (typeof(rooms) != 'undefined') {
					this.allData = rooms
					this.nschool = rooms.data.length
					this.array1 = []

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

					this.dis_num1 = 0
					uni.hideLoading()
				}
				
				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) {
						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
				}
			},
			/**
			 * 选择校区
			 */
			changeSelect1(e) {
				this.sel1(e.detail.value)
			},
			// 根据参数的值选中
			sel1(index) {
				// console.log(index)
				// console.log(typeof(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) {
				// console.log(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];
				if (this.room != '') {
					this.$store.state.building.roomSelect = this.storage.roomSelect;
					this.$store.state.building.add_class = 1;
					this.$store.state.building.dom = this.storage.dom;
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.showToast({
						icon: 'success',
						title: '宿舍号不完整'
					})
				}
			},

		}
	}
</script>

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