zhxg_xsbdV1.0/pages/dormitoryOptions/dormitoryOptions.vue

<template>
	<view class="dormitory">

		<view class="room-top">
			我的宿舍: <text style="color: indianred;">{{my_room}}</text>
		</view>

		<view :class="own_dorm == v.id ?'my-dormitory-item' : 'dormitory-item' " :id="v.msg?'':'not-full'"
			v-for="(v,i) in dormitoryList" :key="i" @click="chooseDorm(v)">
			<text style="font-size: 0.8rem;">{{v.parkName == "default" ? "" : v.parkName}}</text>
			<text>{{v.buildingName == "default" ? "" : v.buildingName}}</text>
			<text>{{v.name}}</text>
			<text>{{v.msg | filtPreson}}</text>
			<text>可选床位数:{{v.bedCount}}</text>
		</view>
		<u-toast ref="uToast" @show="toSomePage"></u-toast>
		<zero-loading v-if="loading"></zero-loading>
		<FloatBall />
	</view>
</template>

<script>
	import FloatBall from "@/pages/compoents/FloatBall.vue";
	import {
		isEmpty
	} from "@/api/helpFunc.js";
	import {
		listRoom,
		listOwnCanSelectDorm,
		getOwnRoomInfo
	} from "@/api/dormApi.js";

	export default {
		components: {
			FloatBall
		},
		data() {
			return {
				dormitoryList: [],
				loading: false,
				own_dorm: null,
				my_room: "暂无"
			}
		},
		async onShow() {
			await this.listRoom();
		},
		methods: {
			chooseDorm() {

			},
			async listRoom() {
				this.loading = true;
				let res = await listOwnCanSelectDorm();
				this.loading = false;
				let temp = [];
				if (res.code == 200) {
					let rows = [...res.data];

					rows.map(x => {
						temp.push({
							buildingName: x.buildingName,
							name: x.roomNo,
							msg: x.bedNum - x.occupancy,
							bedNum: x.bedNum,
							id: x.id,
							parkName: x.parkName,
							bedCount: x.bedCount
						});
					});
					this.dormitoryList = [...temp];
				}
				let res2 = await getOwnRoomInfo();
				if (res2.code == 200) {
					let data = res2.data;
					if (!isEmpty(data.BuildingName)) {
						this.own_dorm = data.DormId;
						uni.setStorageSync("own_dorm", data.DormId);
						let park = data.ParkName == "default" ? "" : data.ParkName + "-";
						let building = data.BuildingName == "default" ? "" : data.BuildingName + "-";
						this.my_room = park + building + data.UnitName + "-" + data.RoomNo;
					} else {
						this.my_room = "暂无";
						this.own_dorm = null;
						uni.setStorageSync("own_dorm", null);
					}
				}
			},

			toSomePage(v) {

				let sdata = {
					...v
				};
				let param = JSON.stringify(sdata)
				uni.navigateTo({
					url: `/pages/bedChoice/bedChoice?param=` + param
				})
			}
		},
		filters: {
			filtPreson(value) {
				if (value) {
					return `剩余${value}个床位`
				}
				return "已满"
			}
		}
	}
</script>

<style lang="scss" scoped>
	.room-top {
		// background-color: aquamarine;
		width: 670rpx;
		margin: 0 auto;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 10rpx;
	}

	.dormitory {
		padding: 25rpx;
		display: flex;
		flex-wrap: wrap;


		#not-full {
			background-color: #F4F4F4;
			color: #7B7B7B;

			text {
				color: #7B7B7B;
			}

			text:nth-child(2) {
				color: #A0A0A0;
			}
		}

		.my-dormitory-item {
			width: 215rpx;
			height: fit-content;
			background-color: #409EFF;
			// border: 1px dotted yellow;
			color: white;
			margin: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			padding: 10rpx 0 10rpx 0;


			image {
				width: 66rpx;
				height: 88rpx;
			}

			text {
				// color: #4A90E2;
				font-size: 28rpx;
			}

			text:nth-child(2) {
				color: #f0f0f0;
			}
		}

		.dormitory-item {
			width: 215rpx;
			height: fit-content;
			background-color: #F2F8FF;
			margin: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			padding: 10rpx 0 10rpx 0;

			image {
				width: 66rpx;
				height: 88rpx;
			}

			text {
				color: #4A90E2;
				font-size: 28rpx;
			}

			text:nth-child(2) {
				color: #71B2FF;
			}
		}
	}
</style>