zhxg_xsbdV1.0/pages/ownDorm/index.vue

<template>
	<view style="margin: 10rpx;">
		<view class="list">
			<view class="sm-list">
				<text>校区</text>
				<text>{{campusName}}</text>
			</view>
			<view class="sm-list">
				<text>园区</text>
				<text>{{parkName}}</text>
			</view>
			<view class="sm-list">
				<text>楼栋</text>
				<text>{{buildingName}}</text>
			</view>
			<view class="sm-list">
				<text>楼层</text>
				<text>{{floor}}</text>
			</view>
			<view class="sm-list">
				<text>宿舍号</text>
				<text>{{ roomNo }}</text>
			</view>
			
		</view>
		<view class="wxtsxx">
			<text>  温馨提示，宿舍9月初才能确认，请同学们多关注。</text>
		</view>
		<button @click="handleButtonClick" :disabled="is_read || (countdown > 0 && !is_read) "
			:style="{ backgroundColor: buttonColor }">
			{{ is_read ? "已确认" : countdown == 0 && is_read == 0 ? "确认" : '请先阅读以上内容并等待'+countdown+'秒' }}
		</button>
		<u-toast ref="uToast"></u-toast>
		<FloatBall />
	</view>
</template>

<script>
	import FloatBall from "@/pages/compoents/FloatBall.vue";
	import {
		isEmpty
	} from "@/api/helpFunc.js";
	import {
		getOwnDorm
	} from "@/api/dormApi.js";
	import {
		confirmZxxs,
		getOwnTaskStatusByCode
	} from "@/api/toApi.js";
	export default {
		components: {
			FloatBall
		},
		data() {
			return {
				campusName: "暂无",
				parkName: "暂无",
				buildingName: "暂无",
				floor: "暂无",
				roomNo: "暂无",

				countdown: 10,
				timer: null,

				is_read: false
			}
		},
		async onLoad() {
			await this.getOwnDorm();
			await this.getOwnTaskStatusByCode();
		},
		mounted() {
			this.startTimer();
		},
		computed: {
			buttonColor() {
				if (this.is_read || (this.countdown > 0 && !this.is_read)) {
					return 'gray'; // 倒计时结束后的背景色
				} else {
					return 'green'; // 倒计时进行中的背景色
				}
			}
		},
		methods: {
			async getOwnDorm() {
				let res = await getOwnDorm();
				if (res.code == 200) {
					if (!isEmpty(res.data)) {
						let data = {
							...res.data
						};
						this.campusName = data.campusName;
						this.parkName = data.parkName;
						this.buildingName = data.buildingName;
						this.floor = data.floor;
						this.roomNo = data.roomNo;
					}
				}
			},
			async getOwnTaskStatusByCode() {
				let res = await getOwnTaskStatusByCode("ZXXS");
				if (res.code == 200) {
					if (!isEmpty(res.data)) {
						this.is_read = res.data.status == '1';
					}
				}
			},
			startTimer() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(this.timer);
					}
				}, 1000); // 每秒更新一次倒计时
			},
			async handleButtonClick() {
				if (this.countdown === 0) {

					if (this.campusName == "暂无") {
						this.$refs.uToast.show({
							type: "error",
							message: "您的辅导员还没有为您分配宿舍哦",
							duration: 1500,
						});
						return;
					}
					let res = await confirmZxxs();
					if (res.code == 200) {
						this.is_read = true;
						uni.redirectTo({
							url: "/pages/newindex/newindex"
						});
					} else {
						this.$refs.uToast.show({
							type: "error",
							message: res.msg,
							duration: 1500,
						})
					}
				} else {

					console.log('请先阅读以上内容并等待倒计时结束！');
				}
			}
		},
		beforeDestroy() {
			clearInterval(this.timer);
		}
	}
</script>

<style lang="less" scoped>
	button {

		position: fixed;
		bottom: 100rpx;
		margin-left: 60rpx;
		width: 80%;
		border-radius: 50rpx;

		color: white;
	}

	.wxtsxx{
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 20rpx;
		color: chocolate;
	}
	.list {

		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;



		.sm-list {
			display: flex;
			justify-content: space-between;
			align-items: center;

			margin-top: 10px;
			width: 722rpx;
			height: 60rpx;
			border-bottom: 1px solid #EFEFEF;

			text:nth-child(1) {
				margin-top: 10px;
				color: #0F0F0F;
			}

			text:nth-child(2) {
				margin-top: 10px;
				color: #575757;
			}

			.password {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 200rpx;
			}
		}
	}
</style>