waterpay_h5/pages/select/select.vue

<template>
	<view class="container">
		<!-- 选择校区区域 -->
		<picker class="picker-item" @change="changeSelect" :range="array" :value="index">
			<view class="select-item">
				<view class="picker-item-logol">
					<image class="picker-item-logo-left" src="../../static/school.png"></image>
				</view>
				<view class="picker-item-label">校区</view>
				<view class="picker-item-content" :class="value!='请选择校区'?'color':''">{{value}}</view>
				<view class="picker-item-logor">
					<image class="picker-item-logo-right" src="../../static/right.png"></image>
				</view>
			</view>
		</picker>

		<!-- 选择楼栋区域 -->
		<picker class="picker-item" @click="handleBuild" @change="changeSelect_build" :range="array_build"
			range-key="buildName" :value="index_build" :disabled="disabled_build">
			<view class="select-item">
				<view class="picker-item-logol">
					<image class="picker-item-logo-left" src="../../static/building.png"></image>
				</view>
				<view class="picker-item-label">楼栋</view>
				<view class="picker-item-content" :class="value_build!='请选择楼栋'?'color':''">{{value_build}}</view>
				<view class="picker-item-logor">
					<image class="picker-item-logo-right" src="../../static/right.png"></image>
				</view>
			</view>
		</picker>

		<!-- 选择楼层区域 -->
		<picker class="picker-item" @click="handleFloor" @change="changeSelect_floor" :range="array_floor"
			range-key="floorName" :value="index_floor" :disabled="disabled_floor">
			<view class="select-item">
				<view class="picker-item-logol">
					<image class="picker-item-logo-left" src="../../static/floor.png"></image>
				</view>
				<view class="picker-item-label">楼层</view>
				<view class="picker-item-content" :class="value_floor!='请选择楼层'?'color':''">{{value_floor}}</view>
				<view class="picker-item-logor">
					<image class="picker-item-logo-right" src="../../static/right.png"></image>
				</view>
			</view>
		</picker>

		<!-- 选择房间区域 -->
		<picker class="picker-item" @click="handleRoom" @change="changeSelect_room" :range="array_room"
			range-key="roomName" :value="index_room" :disabled="disabled_room">
			<view class="select-item">
				<view class="picker-item-logol">
					<image class="picker-item-logo-left" src="../../static/room.png"></image>
				</view>
				<view class="picker-item-label">房间</view>
				<view class="picker-item-content" :class="value_room!='请选择房间'?'color':''">{{value_room}}</view>
				<view class="picker-item-logor">
					<image class="picker-item-logo-right" src="../../static/right.png"></image>
				</view>
			</view>
		</picker>

		<view class="submit-item">
			<button class="submit" type="primary" @click="handleSubmit">完成</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 校区筛选框绑定数组
				array: ["黄家湖"],
				// 校区筛选框数组绑定下标
				index: 0,
				// 校区筛选框选中数据
				value: "请选择校区",
				// 楼栋筛选框绑定数组
				array_build: ["1栋", "2栋"],
				// 楼栋筛选框数组绑定下标
				index_build: 0,
				// 楼栋筛选框选中数据
				value_build: "请选择楼栋",
				// 楼栋筛选框禁用
				disabled_build: true,
				// 楼层筛选框绑定数组
				array_floor: ["1层", "2层"],
				// 楼层筛选框数组绑定下标
				index_floor: 0,
				// 楼层筛选框选中数据
				value_floor: "请选择楼层",
				// 楼层筛选框禁用
				disabled_floor: true,
				// 房间筛选框绑定数组
				array_room: ["101", "102"],
				// 房间筛选框数组绑定下标
				index_room: 0,
				// 房间筛选框选中数据
				value_room: "请选择房间",
				// 房间筛选框禁用
				disabled_room: true,
			};
		},
		mounted() {
			this.getBuild()
		},
		methods: {
			// 获取楼栋数据
			async getBuild() {
				let res = await this.$myRequest({
					url: "/room/queryAllBuild",
				})
				// console.log(res);
				if (res.success) {
					this.array_build = res.data
				}
			},
			// 点击楼栋区域回调
			handleBuild() {
				if (this.disabled_build) {
					uni.showToast({
						title: "请先选择校区",
						icon: 'none'
					})
				}
			},
			// 点击楼层区域回调
			handleFloor() {
				if (this.disabled_build) {
					uni.showToast({
						title: "请先选择校区",
						icon: 'none'
					})
				} else if (this.disabled_floor) {
					uni.showToast({
						title: "请先选择楼栋",
						icon: 'none'
					})
				}
			},
			// 点击房间区域回调
			handleRoom() {
				if (this.disabled_build) {
					uni.showToast({
						title: "请先选择校区",
						icon: 'none'
					})
				} else if (this.disabled_floor) {
					uni.showToast({
						title: "请先选择楼栋",
						icon: 'none'
					})
				} else if (this.disabled_room) {
					uni.showToast({
						title: "请先选择楼层",
						icon: 'none'
					})
				}
			},
			// 校区筛选框change回调
			changeSelect(e) {
				let index = e.detail.value
				this.value = this.array[index]
				this.disabled_build = false
			},
			// 楼栋筛选框change回调
			async changeSelect_build(e) {
				let index = e.detail.value
				this.value_build = this.array_build[index].buildName
				this.disabled_floor = false

				let data = {
					buildId: this.array_build[index].buildId
				}

				let res = await this.$myRequest({
					url: "/room/queryAllFloor",
					data
				})
				// console.log(res);
				if (res.success) {
					this.array_floor = res.data
				}
			},
			// 楼层筛选框change回调
			async changeSelect_floor(e) {
				let index = e.detail.value
				this.value_floor = this.array_floor[index].floorName
				this.disabled_room = false

				let data = {
					floorId: this.array_floor[index].floorId
				}

				let res = await this.$myRequest({
					url: "/room/queryAllRoom",
					data
				})
				// console.log(res);
				if (res.success) {
					this.array_room = res.data
				}
			},
			// 房间筛选框change回调
			changeSelect_room(e) {
				let index = e.detail.value
				this.value_room = this.array_room[index].roomName
			},
			// 完成按钮点击回调
			handleSubmit() {
				if (!this.disabled_build && !this.disabled_floor && !this.disabled_room) {
					let temRoom = this.value_build + this.value_floor + this.value_room
					localStorage.room = temRoom
					uni.reLaunch({
						url: "/pages/home/home"
					})
				} else {
					uni.showToast({
						title: "请选择完整地址",
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-image: url(../../static/bg.png);
		background-size: 100% 100%;

		.picker-item {
			padding: 19rpx 0 10rpx 0;

			.select-item {
				display: flex;
				background-color: #ffffff;
				height: 139rpx;

				.picker-item-logol {
					width: 88rpx;
					display: flex;
					justify-content: flex-end;

					.picker-item-logo-left {
						width: 58rpx;
						height: 58rpx;
						margin: 41rpx 0rpx 40rpx 0rpx;
					}
				}

				.picker-item-label {
					font-size: 30rpx;
					width: 99rpx;
					margin: 52rpx 0rpx 52rpx 0rpx;
					display: flex;
					justify-content: center;
				}

				.picker-item-content {
					display: flex;
					justify-content: flex-start;
					width: 360rpx;
					height: 26rpx;
					font-size: 32rpx;
					margin: 46rpx 0rpx 46rpx 120rpx;
					color: #999999;
				}

				.color {
					color: #000;
				}

				.picker-item-logor {
					width: 91rpx;
					display: flex;
					justify-content: center;
					margin: 57rpx 0rpx 51rpx 0rpx;

					.picker-item-logo-right {
						width: 20rpx;
						height: 31rpx;
					}
				}
			}
		}

		.submit-item {
			margin: 112rpx 30rpx;
			width: 690rpx;
			height: 96rpx;

			.submit {
				border-radius: 47.5rpx;
			}
		}
	}
</style>