update

TEAMModelOS/ClientApp/src/common/BaseCountDown.vue

@@ -0,0 +1,60 @@
+<template>
+	<div>
+		<span>{{ countdown }}</span>
+	</div>
+</template>
+<script>
+	export default {
+		props: {
+			timestamp: {
+				type: Number,
+				required: true
+			}
+		},
+		data() {
+			return {
+				remainingTime: 0,
+				timer: null
+			};
+		},
+		computed: {
+			countdown() {
+				if (this.remainingTime <= 0) {
+					return "已失效";
+				}
+				const hours = Math.floor(this.remainingTime / 3600);
+				const minutes = Math.floor((this.remainingTime % 3600) / 60);
+				const seconds = this.remainingTime % 60;
+				return `${this.pad(hours)} : ${this.pad(minutes)} : ${this.pad(seconds)} 后到期`;
+			}
+		},
+		beforeDestroy() {
+			this.clearTimer();
+		},
+		mounted() {
+			this.startTimer();
+		},
+
+		methods: {
+			clearTimer() {
+				clearInterval(this.timer);
+			},
+			startTimer() {
+				const currentTime = Math.floor(Date.now() / 1000);
+				this.remainingTime = Math.floor(this.timestamp / 1000) - currentTime;
+				this.timer = setInterval(() => {
+					this.remainingTime--;
+				}, 1000);
+			},
+			pad(value) {
+				return String(value).padStart(2, "0");
+			}
+		},
+        watch:{
+            timestamp(n,o){
+                this.clearTimer();
+                this.startTimer()
+            }
+        }
+	};
+</script>

TEAMModelOS/ClientApp/src/view/mycourse/MyCourse.vue

@@ -120,7 +120,7 @@
 			</Split>
 		</div>
 		<QrcodeModal v-model="showQrStatus" :config="qrConfig">
-			<div style="font-size: 14px;padding: 0 20px" slot="switch">
+			<div style="font-size: 14px;padding: 0 20px" slot="switch" v-if="showQrStatus">
 				<!-- <span>{{ agreeJoin ? '已同意扫码加入' : '禁止扫码加入' }}</span> -->
 				<!-- <i-switch v-model="agreeJoin" size="small" @on-change="agreeJoinClass" /> -->
 				<p style="display: flex;justify-content:space-between;margin:15px 0">
@@ -139,7 +139,7 @@
 						开启审核
 						<i-switch v-model="qrSetting.review" size="small" @on-change="onSettingChange" />
 					</span>
-					<span>
+					<span v-if="qrSetting.review">
 						二维码有效期
 						<Select v-model="qrSetting.qrcodeDays" size="small" style="width:70px;margin-left: 5px;" @on-change="onSettingChange">
 							<Option :value="1" :key="1">1天</Option>
@@ -148,7 +148,10 @@
 						</Select>
 					</span>
 				</p>
-				<!-- <BaseCountDown :timestamp="1691468827882"></BaseCountDown> -->
+				<p style="display:flex;color:rgba(236, 69, 69, 0.945);font-weight: bold;font-size: 14px" v-if="qrSetting.review && qrSetting.qrcodeDays > 0">
+					<span>二维码状态：</span>
+					<BaseCountDown :timestamp="qrSetting.qrcodeExpire"></BaseCountDown>
+				</p>
 			</div>
 			<!-- 支持自定义内容 -->
 			<p class="qr-code-text" slot="tips-content">
@@ -312,7 +315,8 @@
 				qrSetting:{
 					review:false,
 					limitCount:200,
-					qrcodeDays: 1
+					qrcodeDays: 1,
+					qrcodeExpire:0
 				},
 				schoolClassInfo: [],
 				isGraduate: false,
@@ -450,6 +454,7 @@
 			//课程名单 —— 去重处理后的数据
 			teaClassList() {
 				if (this.courseInfo && this.courseInfo.schedule) {
+					console.error(this.courseInfo.schedule)
 					//一个名单被安排到不同教室上课会出现重复数据，这里需要去重
 					let list = [];
 					this.courseInfo.schedule.forEach((item) => {
@@ -497,7 +502,6 @@
 		},
 		methods: {
 			onSettingChange(){
-				console.error('xxxxxxxxx')
 				let stulist = this.courseGroupList.find((item) => {
 					return item.id == this.teaClassList[this.curClassIndex].stulist;
 				});
@@ -505,13 +509,21 @@
 					console.log(stulist)
 					let params = stulist;
 					params.review = this.qrSetting.review ? 1 : 0;
-					params.qrcodeDays = this.qrSetting.qrcodeDays;
-					params.limit = this.qrSetting.limitCount;
+					params.qrcodeDays = this.qrSetting.qrcodeDays || 1;
+					params.limitCount = this.qrSetting.limitCount;
 					this.listLoading = true;
 					this.$api.common
 						.upsertGroupInfo(params)
 						.then(
 							(res) => {
+								console.log(res)
+								this.qrSetting = {
+									review: res.list.review ? true : false,
+									limitCount: res.list.limitCount,
+									qrcodeDays: res.list.qrcodeDays || 1,
+									qrcodeExpire:res.list.qrcodeExpire
+								}
+								console.log(this.qrSetting)
 								this.$Message.info(this.$t("cusMgt.updOk"));
 							},
 							(err) => {
@@ -682,6 +694,13 @@
 			},
 			async showQrCode(index) {
 				console.log(this.courseInfo);
+				console.log(this.teaClassList[index]);
+				this.qrSetting = {
+					review: this.teaClassList[index].review ? true : false,
+					limitCount: this.teaClassList[index].limitCount,
+					qrcodeDays: this.teaClassList[index].qrcodeDays || 1,
+					qrcodeExpire:this.teaClassList[index].qrcodeExpire
+				}
 				let loginUrl = window.location.host;
 				let tName = this.$store.state.userInfo.name;
 				let listId = this.teaClassList[index].stulist;
@@ -1199,7 +1218,10 @@
 												item.listName = listInfo ? listInfo.name : this.$t("cusMgt.hasDelClass");
 												item.listSchool = listInfo ? listInfo.school : undefined;
 												item.joinLock = listInfo?.joinLock;
-												item.graduate = listInfo?.graduate;
+												item.review = listInfo?.review;
+												item.qrcodeDays = listInfo?.qrcodeDays;
+												item.qrcodeExpire = listInfo?.qrcodeExpire;
+												item.limitCount = listInfo?.limitCount;
 											}
 											//统一数据格式
 											item.classId = item.classId || undefined;