会议未开始时，禁止用户进入会议，可以暂存信息到本地

src/components/countDown.vue

@@ -10,6 +10,8 @@ import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import { onMounted, onUnmounted, ref } from "vue";
 dayjs.extend(duration);
+
+const emit = defineEmits(["timeup"]);
 const props = defineProps({
   startTime: {
     type: String,
@@ -25,6 +27,7 @@ onMounted(() => {
     durationTime.value =
       new Date(props.startTime).getTime() - new Date().getTime();
     if (durationTime.value <= 0) {
+      emit("timeup");
       clearInterval(timer);
     }
     const duraDayjs = dayjs.duration(durationTime.value);

src/store/index.js

@@ -6,6 +6,9 @@ const store = createStore({
     joinUser: localStorage.getItem("JOIN_USER")
       ? JSON.parse(localStorage.getItem("JOIN_USER"))
       : {},
+    tempUser: localStorage.getItem("TEMP_USER")
+      ? JSON.parse(localStorage.getItem("TEMP_USER"))
+      : {},
     meeting: {},
     meetingSetting: {},
     messagesList: localStorage.getItem("MESSAGES")
@@ -28,6 +31,10 @@ const store = createStore({
       state.joinUser = data;
       localStorage.setItem("JOIN_USER", JSON.stringify(data));
     },
+    setTempUser(state, data) {
+      state.tempUser = data
+      localStorage.setItem("TEMP_USER", JSON.stringify(data))
+    },
     // 设置会议信息
     setMeetingInfo(state, data) {
       state.meeting = data;

src/views/meeting.vue

@@ -930,11 +930,11 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 $meetingBackgroundWidth: 80vw; //会议背景宽度
 $meetingBackgroundHeight: 80vw * 9 / 16;
 
-@media screen and (max-width: 900px) {
-  .like-row.isShare {
-    margin-top: 42px;
-  }
+// @media screen and (max-width: 900px) {
+.like-row.isShare {
+  margin-top: 42px;
 }
+// }
 .isShare {
   .text-label-container {
     display: none !important;
@@ -956,8 +956,13 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
       > .zmwebsdk-MuiPaper-root
       > .zmwebsdk-MuiPaper-root:nth-child(2)) {
     // display: none !important;
+    // position: absolute;
+    // visibility: hidden;
     position: absolute;
-    visibility: hidden;
+    visibility: visible;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 100%);
   }
   // 视频组件宽度
   :deep(#video-element
@@ -1012,16 +1017,16 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
       height: calc(100vw * 1080 / 1920) !important;
     }
     // 底部操作条
-    :deep(#video-element
-        > div
-        > .zmwebsdk-MuiPaper-root
-        > .zmwebsdk-MuiPaper-root:nth-child(2)) {
-      position: absolute;
-      visibility: visible;
-      bottom: 0;
-      left: 50%;
-      transform: translate(-50%, 100%);
-    }
+    // :deep(#video-element
+    //     > div
+    //     > .zmwebsdk-MuiPaper-root
+    //     > .zmwebsdk-MuiPaper-root:nth-child(2)) {
+    //   position: absolute;
+    //   visibility: visible;
+    //   bottom: 0;
+    //   left: 50%;
+    //   transform: translate(-50%, 100%);
+    // }
   }
   .verticalFullScreen {
     // background-color: saddlebrown !important;

src/views/panelist-verify.vue

@@ -8,7 +8,7 @@
   <p class="meeting-time">
     <span class="title">会议开始时间</span>
     <span class="time">{{ meeting.startTime }}</span>
-    <CountDown :start-time="meeting.startTime" />
+    <CountDown :start-time="meeting.startTime" @timeup="btnStatus = true" />
   </p>
   <div class="form-container">
     <el-form
@@ -53,9 +53,15 @@
     </div>
 
     <div style="display: flex; justify-content: center">
-      <el-button type="primary" @click="submitVerify(newJoinUserRef)"
+      <el-button
+        v-if="btnStatus"
+        type="primary"
+        @click="submitVerify(newJoinUserRef)"
         >加入会议</el-button
       >
+      <el-button v-else type="primary" @click="saveTempUser(newJoinUserRef)"
+        >保存信息</el-button
+      >
     </div>
   </div>
   <agreement
@@ -107,6 +113,15 @@ const meetingId = ref(route.params.meetingId);
 meeting.value = _.cloneDeep(store.state.meeting);
 newJoinUser.value.meetingId = meetingId.value;
 
+const btnStatus = ref(false);
+btnStatus.value = meeting.value.status == 1 ? true : false;
+// 从本地存储中获取临时存储的信息
+if (Object.keys(store.state.tempUser).length) {
+  if (meeting.value.id == store.state.tempUser.meetingId) {
+    newJoinUser.value = _.cloneDeep(store.state.tempUser);
+  }
+}
+
 const showUserAgreement = ref(false); // 是否显示用户协议弹窗
 const isAgreeAgreement = ref(false); // 是否同意协议
 
@@ -120,6 +135,12 @@ const submitVerify = async (newJoinUserRef) => {
   store.commit("setJoinUser", newJoinUser.value);
   router.push(`/panelist/${meetingId.value}`);
 };
+
+const saveTempUser = async (newJoinUserRef) => {
+  await newJoinUserRef.validate();
+  store.commit("setTempUser", newJoinUser.value);
+  ElMessage.success("已将信息存储到本地");
+};
 </script>
 
 <style lang="scss" scoped>

src/views/verify.vue

@@ -8,7 +8,7 @@
   <p class="meeting-time">
     <span class="title">会议开始时间</span>
     <span class="time">{{ meeting.startTime }}</span>
-    <CountDown :start-time="meeting.startTime" />
+    <CountDown :start-time="meeting.startTime" @timeup="btnStatus = true" />
   </p>
   <div class="form-container">
     <el-form
@@ -379,9 +379,15 @@
       </el-button>
     </div>
     <div style="display: flex; justify-content: center">
-      <el-button type="primary" @click="submitVerify(newJoinUserRef)"
+      <el-button
+        v-if="btnStatus"
+        type="primary"
+        @click="submitVerify(newJoinUserRef)"
         >加入会议</el-button
       >
+      <el-button v-else type="primary" @click="saveTempUser(newJoinUserRef)"
+        >保存信息</el-button
+      >
     </div>
   </div>
   <agreement
@@ -395,7 +401,7 @@
 <script setup>
 import CountDown from "@/components/countDown.vue";
 import { reactive, ref, toRefs } from "vue";
-import { registerJoinUser, visitorJoinUser } from "@/api/meeting";
+// import { registerJoinUser, visitorJoinUser } from "@/api/meeting";
 import { ElMessage } from "element-plus";
 import { useStore } from "vuex";
 import { useRoute, useRouter } from "vue-router";
@@ -579,11 +585,19 @@ meeting.value = _.cloneDeep(store.state.meeting);
 
 const showUserAgreement = ref(false); // 是否显示用户协议弹窗
 const isAgreeAgreement = ref(false); // 是否同意协议
-
 if (data.fieldConfig) {
   fieldConfig.value = JSON.parse(meeting.value.fieldConfig);
 }
 
+const btnStatus = ref(false);
+btnStatus.value = meeting.value.status == 1 ? true : false;
+// 从本地存储中获取临时存储的信息
+if (Object.keys(store.state.tempUser).length) {
+  if (meeting.value.id == store.state.tempUser.meetingId) {
+    newJoinUser.value = _.cloneDeep(store.state.tempUser);
+  }
+}
+
 // 设置gender basicLevelUnitFlag countryDoctorFlag affiliateWestFlag 默认值
 const setJoinUserDefaultValue = () => {
   [
@@ -618,9 +632,6 @@ const submitVerify = async (newJoinUserRef) => {
     store.commit("setJoinUser", newJoinUser.value);
     router.push(`/meeting/${meetingId.value}`);
   } else if (meeting.value.joinType === "2") {
-    // const { data } = await registerJoinUser(newJoinUser.value);
-    // store.commit("setPassword", data);
-    console.log(meetingId.value);
     store.commit("setJoinUser", newJoinUser.value);
     router.push(`/meeting/${meetingId.value}`);
   } else if (meeting.value.joinType === "3") {
@@ -630,6 +641,12 @@ const submitVerify = async (newJoinUserRef) => {
     router.push(`/meeting/${meetingId.value}`);
   }
 };
+
+const saveTempUser = async (newJoinUserRef) => {
+  await newJoinUserRef.validate();
+  store.commit("setTempUser", newJoinUser.value);
+  ElMessage.success("已将信息存储到本地");
+};
 </script>
 
 <style lang="scss" scoped>