zhxg_xsbdV1.0/pages/Confirm/Confirm.vue

<template>
	<!-- 个人资料 -->
	<view class="Userinformation">
		<view class="list">
			<view class="sm-list">
				<text>姓名</text>
				<text>{{stu_name}}</text>
			</view>
			<view class="sm-list">
				<text>性别</text>
				<text>{{gender}}</text>
			</view>
			<view class="sm-list">
				<text>学号</text>
				<text>{{stu_no}}</text>
			</view>
			<view class="sm-list">
				<text>身份证号</text>
				<text>{{sfzh}}</text>
			</view>
			<view class="sm-list">
				<text>手机号</text>
				<text>{{sjh}}</text>
			</view>
			<view class="sm-list">
				<text>专业</text>
				<text>{{zy}}</text>
			</view>


		</view>
		<view class="btn">
			<button @click="handleButtonClick" :disabled="is_read || (countdown > 0 && !is_read) "
				:style="{ backgroundColor: buttonColor }">
				{{ is_read ? "已确认" : countdown == 0 && is_read == 0 ? "确认" : '请先阅读以上内容并等待'+countdown+'秒' }}
			</button>
		</view>
		<FloatBall />
	</view>
</template>

<script>
	import {
		getUserInfo
	} from "@/api/validApi.js";
	import FloatBall from "@/pages/compoents/FloatBall.vue";
	import {
		confirmZyqr,
		getOwnTaskStatusByCode
	} from "@/api/toApi.js";
	import {
		isEmpty
	} from "@/api/helpFunc.js";
	export default {
		components: {
			FloatBall
		},
		data() {
			return {
				reset_pwd: "",

				stu_name: "",
				gender: "",
				stu_no: "",
				sfzh: "",
				sjh: "",
				zy: "",
				countdown: 10,
				timer: null,

				is_read: false

			}
		},
		async onLoad() {
			await this.getUserInfo();
			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 getOwnTaskStatusByCode() {
				let res = await getOwnTaskStatusByCode("ZYQR");
				if (res.code == 200) {
					if (!isEmpty(res.data)) {
						this.is_read = res.data.status == '1';
					}
				}
			},
			async getUserInfo() {
				let res = await getUserInfo();
				console.log(res);
				if (res.code == 200) {
					let data = {
						...res.data
					};
					this.zy = data.zy;
					this.sjh = data.sjh;
					this.stu_no = data.xh;
					this.sfzh = data.sfzh;
					this.stu_name = data.xsxm;
					this.gender = data.xb;

				}
			},
			startTimer() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(this.timer);
					}
				}, 1000); // 每秒更新一次倒计时
			},
			async handleButtonClick() {
				if (this.countdown === 0) {
					let res = await confirmZyqr();
					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>
	.Userinformation {
		margin-bottom: 10rpx;

		.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;
				}
			}
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;

			button {
				position: fixed;
				bottom: 100rpx;
				// margin-left: 60rpx;
				width: 80%;
				border-radius: 50rpx;
				color: white;
			}
		}
	}
</style>