210 lines
4.2 KiB
Vue
210 lines
4.2 KiB
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> |