placeholder

src/components/countDown.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="count-down">
+  <div class="count-down" v-if="durationTime > 0">
-    <!-- <div class="title">会议倒计时</div> -->
+    <div class="title">会议倒计时</div>
-    <div v-if="durationTime > 0" class="count">将在{{ remainTime }}后开始</div>
+    <div class="count">{{ remainTime }}</div>
-    <div v-else class="count">已开始</div>
   </div>
 </template>
 <script setup name="CountDown">
@@ -10,8 +9,6 @@ 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,
@@ -27,13 +24,12 @@ 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);
     remainTime.value = `${parseInt(
-      duraDayjs.asDays()
+      duraDayjs.asHours()
-    )}天${duraDayjs.hours()}时${duraDayjs.minutes()}分${duraDayjs.seconds()}秒`;
+    )}小时${duraDayjs.minutes()}分钟${duraDayjs.seconds()}秒`;
   }, 500);
 });
 onUnmounted(() => {
@@ -43,21 +39,21 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .count-down {
-  // position: absolute;
+  position: absolute;
-  // z-index: -1;
+  z-index: -1;
-  // top: 20%;
+  top: 20%;
-  // left: 50%;
+  left: 50%;
-  // transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
-  // display: flex;
+  display: flex;
-  // flex-direction: column;
+  flex-direction: column;
-  // align-items: center;
+  align-items: center;
-  // .title {
+  .title {
-  //   font-size: 16px;
+    font-size: 24px;
-  //   font-weight: bold;
+    font-weight: bold;
-  // }
+  }
   .count {
-    font-size: 16px;
+    font-size: 36px;
-    // margin-top: 20px;
+    margin-top: 20px;
   }
 }
 </style>

src/store/index.js

@@ -6,9 +6,6 @@ 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")
@@ -31,10 +28,6 @@ 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/style/appoint-mobile.css

@@ -1,30 +0,0 @@
-@media only screen and (max-width: 768px) {
-  .meeting-cover {
-    width: 100%;
-    display: block;
-    margin: 0 auto;
-  }
-  .meeting-title {
-    font-size: 7vw;
-  }
-  .meeting-time {
-    flex-direction: column;
-    align-items: center;
-    font-size: 5vw;
-  }
-  .meeting-time .title {
-    margin-right: 3vw;
-  }
-  .meeting-time :not(:last-child) {
-    margin-right: 0px;
-  }
-  .form-container {
-    padding: 0 2vw 0;
-  }
-  .form-container .joinuser-item {
-    width: 100%;
-  }
-  .form-container .joinuser-item :deep(.el-form-item__label) {
-    width: 70px;
-  }
-}

src/style/appoint-mobile.min.css

@@ -1 +0,0 @@
-@media only screen and (max-width: 768px){.meeting-cover{width:100%;display:block;margin:0 auto}.meeting-title{font-size:7vw}.meeting-time{flex-direction:column;align-items:center;font-size:5vw}.meeting-time .title{margin-right:3vw}.meeting-time :not(:last-child){margin-right:0px}.form-container{padding:0 2vw 0}.form-container .joinuser-item{width:100%}.form-container .joinuser-item :deep(.el-form-item__label){width:70px}}

src/style/appoint-mobile.scss

@@ -12,15 +12,10 @@
     font-size: 7vw;
   }
   .meeting-time {
-    flex-direction: column;
-    align-items: center;
     font-size: 5vw;
     .title {
       margin-right: 3vw;
     }
-    :not(:last-child) {
-      margin-right: 0px;
-    }
   }
   .form-container {
     padding: 0 2vw 0;

src/views/appointment.vue

@@ -6,9 +6,8 @@
   />
   <h3 class="meeting-title">{{ meeting.meetingName }}</h3>
   <p class="meeting-time">
-    <span class="title">会议开始时间</span>
+    <span class="title">会议时间</span>
     <span class="time">{{ meeting.startTime }}</span>
-    <CountDown :start-time="meeting.startTime" />
   </p>
   <div class="form-container" v-if="appointStatus === `pending`">
     <el-form
@@ -19,11 +18,8 @@
     >
       <div class="joinuser-wrap" style="display: flex; flex-wrap: wrap">
         <div class="joinuser-item" v-if="fieldConfig.icCard">
-          <el-form-item label="IC卡编号/手机号码" prop="icCard">
+          <el-form-item label="IC卡号" prop="icCard">
-            <el-input
+            <el-input v-model="appointForm.icCard" placeholder="请输入IC卡号，若没有IC卡号可输入手机号" />
-              v-model="appointForm.icCard"
-              placeholder="请输入IC卡号或手机号码"
-            />
           </el-form-item>
         </div>
         <div class="joinuser-item" v-if="fieldConfig.nickname">
@@ -262,7 +258,6 @@
 </template>
 
 <script setup>
-import CountDown from "@/components/countDown.vue";
 import { reactive, ref, toRefs } from "vue";
 import { getMeetingDetailById, newAppointment } from "@/api/meeting";
 import { ElMessage } from "element-plus";
@@ -535,12 +530,7 @@ loadMeetingDetail(meetingId.value);
 }
 
 .meeting-time {
-  // text-align: center;
+  text-align: center;
-  display: flex;
-  justify-content: center;
-  :not(:last-child) {
-    margin-right: 12px;
-  }
 }
 
 .form-item-container {

src/views/meeting.vue

@@ -1,11 +1,5 @@
 <template>
-  <div
+  <div id="app-container" ref="appContainerRef">
-    id="app-container"
-    :class="{
-      isShare: templateId == 5 && inSharing && !isShareByme,
-    }"
-    ref="appContainerRef"
-  >
     <!-- zoom 会议组件 -->
     <div id="meeting-chat-row">
       <div class="fullscreen-wrap" ref="fullscreenWrapRef">
@@ -16,6 +10,7 @@
             fullscreen: isFullScreen && !isVerticalFullScreen,
             verticalFullScreen: isVerticalFullScreen,
             notInSharing: !inSharing,
+            'only-share': templateId == 5 && !isShareByMe,
           }"
         >
           <div class="text-label-container" ref="textLabelContainerRef"></div>
@@ -24,7 +19,7 @@
             :class="`layout-template-${templateId}`"
             ref="videoElementRef"
           ></div>
-          <!-- <CountDown :start-time="store.getters.startTime" /> -->
+          <CountDown :start-time="store.getters.startTime" />
           <!-- <like
             v-if="screenWidth > 900"
             :meeting-id="store.getters.meetingId"
@@ -56,11 +51,7 @@
         />
       </div>
     </div>
-    <div
+    <div class="like-row">
-      :class="`like-row ${
-        templateId == 5 && inSharing && !isShareByme ? 'isShare' : ''
-      }`"
-    >
       <like
         :meeting-id="store.getters.meetingId"
         :like="likeCount"
@@ -195,7 +186,7 @@ import {
   commitQuestionnaire,
   commitExam,
 } from "@/api/meeting";
-// import CountDown from "@/components/countDown.vue";
+import CountDown from "@/components/countDown.vue";
 
 const store = useStore();
 const route = useRoute();
@@ -430,6 +421,7 @@ const switchToVideoOn = () => {
       clearInterval(timer);
       return;
     }
+
     nextBtn.click();
     isNextBtnHidden = nextBtn.className.includes(
       "zmwebsdk-makeStyles-hidePaginationIcon"
@@ -447,8 +439,8 @@ const switchToVideoOn = () => {
 };
 
 const inSharing = ref(false); // 共享屏幕是否开启
-const isShareByme = ref(false); // 是否由我共享
 const attendeeslist = ref("");
+const isShareByMe = ref(false);
 setInterval(() => {
   // 共享屏幕状态变化
   const screenShareEl = document.querySelector(
@@ -457,13 +449,6 @@ setInterval(() => {
   inSharing.value = screenShareEl ? true : false;
   // ------
 
-  // TODO:查找停止共享按钮元素，判断是否由自己共享，由自己共享则不应用 id 5 布局。
-  if (templateId.value == 5) {
-    const stopShareEl = document.querySelector(
-      `div[class*="zmwebsdk-makeStyles-isSharing-"]`
-    );
-    isShareByme.value = stopShareEl ? true : false;
-  }
   // 检测是否是ribbon视图, 如果是, 则切换到gallery view, 当观众被设为嘉宾或嘉宾被设为观众时需要切换视图.
   const isRibbon = document.querySelector(
     "#suspension-view-tab-thumbnail-ribbon.zmwebsdk-MuiTab-selected"
@@ -476,6 +461,27 @@ setInterval(() => {
   }
   // ------
 
+  const stopShareEL = document.querySelector(
+    `div[class*="zmwebsdk-makeStyles-isSharing"]`
+  );
+  //-------------
+  const screenel = document.querySelectorAll(
+    'div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root'
+  )[1];
+  isShareByMe.value = stopShareEL ? true : false;
+  if (templateId.value == 5 && !isShareByMe.value) {
+    videoElementRef.value.style.height = `${
+      (videoElementRef.value.offsetWidth * 850) / 1346 + 42
+    }px`;
+    if (screenel)
+      screenel.style.height = `${
+        (videoElementRef.value.offsetWidth * 850) / 1346
+      }px`;
+  } else {
+    videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
+    screenel.style.height = "45vw";
+  }
+  //-----------
   // TODO:
   // 检测是否存在"同意被设为嘉宾按钮",存在则自动点击
   const isSetAsGuest = document.querySelector(
@@ -930,125 +936,23 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 $meetingBackgroundWidth: 80vw; //会议背景宽度
 $meetingBackgroundHeight: 80vw * 9 / 16;
 
-// @media screen and (max-width: 900px) {
+// 只有共享屏幕时
-.like-row.isShare {
+.only-share {
-  margin-top: 42px;
+  padding-top: 0 !important;
-}
+  // height: $meetingBackgroundHeight;
-// }
-.isShare {
-  .text-label-container {
-    display: none !important;
-  }
-  #meeting-container {
-    padding-top: 0 !important;
-  }
-  #right-chat {
-    height: calc(80vw * 1080 / 1920) !important;
-  }
   #video-element {
-    width: 80vw !important;
+    width: $meetingBackgroundWidth !important;
-    // height: calc(80vw * 850 / 1346) !important;
+    // height: $meetingBackgroundHeight !important;
-    height: calc(80vw * 1080 / 1920) !important;
   }
-  // 底部操作条
   :deep(#video-element
       > div
       > .zmwebsdk-MuiPaper-root
-      > .zmwebsdk-MuiPaper-root:nth-child(2)) {
+      > .zmwebsdk-MuiPaper-root:first-child) {
-    // display: none !important;
+    width: $meetingBackgroundWidth !important;
-    // position: absolute;
-    // visibility: hidden;
-    position: absolute;
-    visibility: visible;
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 100%);
   }
-  // 视频组件宽度
-  :deep(#video-element
-      > div
-      > .zmwebsdk-MuiPaper-root
-      > .zmwebsdk-MuiPaper-root:nth-child(1)) {
-    width: 80vw !important;
-  }
-  // zoom 会议共享屏幕组件宽度
   :deep(div[id*="suspension-view-tabpanel"]
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
-    // height: calc(80vw * 850 / 1346) !important;
+    // height: $meetingBackgroundHeight !important;
-    height: calc(80vw * 1080 / 1920) !important;
-  }
-  .fullscreen {
-    #video-element {
-      width: 100vw !important;
-      height: calc(100vw * 1080 / 1920) !important;
-    }
-
-    // 视频组件宽度
-    :deep(#video-element
-        > div
-        > .zmwebsdk-MuiPaper-root
-        > .zmwebsdk-MuiPaper-root:nth-child(1)) {
-      width: 100vw !important;
-    }
-    // zoom 会议共享屏幕组件宽度
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
-      // height: calc(80vw * 850 / 1346) !important;
-      height: calc(100vw * 1080 / 1920) !important;
-    }
-  }
-  @media screen and (max-width: 900px) {
-    #video-element {
-      width: 100vw !important;
-      height: calc(100vw * 1080 / 1920) !important;
-    }
-
-    // 视频组件宽度
-    :deep(#video-element
-        > div
-        > .zmwebsdk-MuiPaper-root
-        > .zmwebsdk-MuiPaper-root:nth-child(1)) {
-      width: 100vw !important;
-    }
-    // zoom 会议共享屏幕组件宽度
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
-      // height: calc(80vw * 850 / 1346) !important;
-      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%);
-    // }
-  }
-  .verticalFullScreen {
-    // background-color: saddlebrown !important;
-    #video-element {
-      width: calc(100vw * 1920 / 1080) !important;
-      // height: calc(100vh * 1080 / 1920) !important;
-      height: 100vw !important;
-    }
-
-    // 视频组件宽度
-    :deep(#video-element
-        > div
-        > .zmwebsdk-MuiPaper-root
-        > .zmwebsdk-MuiPaper-root:nth-child(1)) {
-      width: calc(100vw * 1920 / 1080) !important;
-    }
-    // zoom 会议共享屏幕组件宽度
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
-      // height: calc(100vh * 1080 / 1920) !important;
-      height: 100vw !important;
-    }
   }
 }
 

src/views/panelist-verify.vue

@@ -6,9 +6,8 @@
   />
   <h3 class="meeting-title">{{ meeting.meetingName }}</h3>
   <p class="meeting-time">
-    <span class="title">会议开始时间</span>
+    <span class="title">会议时间</span>
     <span class="time">{{ meeting.startTime }}</span>
-    <CountDown :start-time="meeting.startTime" @timeup="btnStatus = true" />
   </p>
   <div class="form-container">
     <el-form
@@ -19,10 +18,10 @@
     >
       <div class="joinuser-wrap" style="display: flex; flex-wrap: wrap">
         <div class="joinuser-item">
-          <el-form-item label="IC卡编号/手机号码" prop="icCard">
+          <el-form-item label="IC卡号" prop="icCard">
             <el-input
               v-model="newJoinUser.icCard"
-              placeholder="请输入IC卡号或手机号码"
+              placeholder="请输入IC卡号，若没有IC卡号可输入手机号"
             />
           </el-form-item>
         </div>
@@ -53,15 +52,9 @@
     </div>
 
     <div style="display: flex; justify-content: center">
-      <el-button
+      <el-button type="primary" @click="submitVerify(newJoinUserRef)"
-        v-if="btnStatus"
-        type="primary"
-        @click="submitVerify(newJoinUserRef)"
         >加入会议</el-button
       >
-      <el-button v-else type="primary" @click="saveTempUser(newJoinUserRef)"
-        >保存信息</el-button
-      >
     </div>
   </div>
   <agreement
@@ -73,7 +66,6 @@
 </template>
 
 <script setup>
-import CountDown from "@/components/countDown.vue";
 import { reactive, ref, toRefs } from "vue";
 import { useStore } from "vuex";
 import { useRoute, useRouter } from "vue-router";
@@ -113,15 +105,6 @@ 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); // 是否同意协议
 
@@ -135,12 +118,6 @@ 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>
@@ -151,12 +128,7 @@ const saveTempUser = async (newJoinUserRef) => {
   text-align: center;
 }
 .meeting-time {
-  // text-align: center;
+  text-align: center;
-  display: flex;
-  justify-content: center;
-  :not(:last-child) {
-    margin-right: 12px;
-  }
 }
 .form-item-container {
   display: flex;

src/views/verify.vue

@@ -6,9 +6,8 @@
   />
   <h3 class="meeting-title">{{ meeting.meetingName }}</h3>
   <p class="meeting-time">
-    <span class="title">会议开始时间</span>
+    <span class="title">会议时间</span>
     <span class="time">{{ meeting.startTime }}</span>
-    <CountDown :start-time="meeting.startTime" @timeup="btnStatus = true" />
   </p>
   <div class="form-container">
     <el-form
@@ -22,10 +21,10 @@
           class="joinuser-item"
           v-if="fieldConfig.icCard && meeting.joinType !== `3`"
         >
-          <el-form-item label="IC卡编号/手机号码" prop="icCard">
+          <el-form-item label="IC卡号" prop="icCard">
             <el-input
               v-model="newJoinUser.icCard"
-              placeholder="请输入IC卡号或手机号码"
+              placeholder="请输入IC卡号，若没有IC卡号可输入手机号"
             />
           </el-form-item>
         </div>
@@ -379,15 +378,9 @@
       </el-button>
     </div>
     <div style="display: flex; justify-content: center">
-      <el-button
+      <el-button type="primary" @click="submitVerify(newJoinUserRef)"
-        v-if="btnStatus"
-        type="primary"
-        @click="submitVerify(newJoinUserRef)"
         >加入会议</el-button
       >
-      <el-button v-else type="primary" @click="saveTempUser(newJoinUserRef)"
-        >保存信息</el-button
-      >
     </div>
   </div>
   <agreement
@@ -399,9 +392,8 @@
 </template>
 
 <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";
@@ -585,19 +577,11 @@ 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 = () => {
   [
@@ -632,6 +616,9 @@ 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") {
@@ -641,12 +628,6 @@ 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>
@@ -663,12 +644,7 @@ const saveTempUser = async (newJoinUserRef) => {
   text-align: center;
 }
 .meeting-time {
-  // text-align: center;
+  text-align: center;
-  display: flex;
-  justify-content: center;
-  :not(:last-child) {
-    margin-right: 12px;
-  }
 }
 .form-item-container {
   display: flex;