会议背景顶部预留边距

src/components/wangEditor/index.vue

@@ -19,9 +19,7 @@
 
 <script>
 import "@wangeditor/editor/dist/css/style.css"; // 引入 css
-// import { getToken } from "@/utils/auth";
 import { onBeforeUnmount, ref, shallowRef, toRefs, watch } from "vue";
-
 import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 
 export default {
@@ -39,6 +37,10 @@ export default {
       type: String,
       default: "820px",
     },
+    focus: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props, context) {
     // 编辑器实例，必须用 shallowRef
@@ -68,14 +70,12 @@ export default {
         "redo",
         "undo",
       ],
-
-      // excludeKeys: ["insertVideo", "uploadVideo"],
     };
     const editorConfig = {
       placeholder: "请输入内容...",
+      autoFocus: props.focus,
     };
 
-    // console.log(editor.getMenuConfig('uploadImage'));
     // 组件销毁时，也及时销毁编辑器
     onBeforeUnmount(() => {
       const editor = editorRef.value;

src/router/index.js

@@ -68,7 +68,10 @@ router.beforeEach(async (to) => {
       store.commit("setJoinUser", {});
     }
     // 如果参会方式发生更改，则清除数据
-    if (store.state.meeting.joinType !== store.state.joinType) {
+    if (
+      store.state.joinType &&
+      store.state.meeting.joinType !== store.state.joinType
+    ) {
       store.commit("setJoinUser", {});
       store.commit("setJoinType", store.state.meeting.joinType);
       return `/verify/${to.params.meetingId}`;
@@ -94,6 +97,7 @@ router.beforeEach(async (to) => {
       }
     } else {
       if (_.isEmpty(store.state.joinUser)) {
+        console.log("error");
         return `/verify/${to.params.meetingId}`;
       } else {
         if (store.state.meeting.joinType === "2") {

src/store/index.js

@@ -10,7 +10,7 @@ const store = createStore({
     password: "", //参会密码
     joinType: localStorage.getItem("JOINTYPE")
       ? JSON.parse(localStorage.getItem("JOINTYPE"))
-      : "1",
+      : "",
   },
   mutations: {
     // 设置参会人员信息

src/views/host.vue

@@ -22,7 +22,7 @@
           <div
             class="display-message"
             v-html="editingMessage"
-            @click="showRichEditor = true"
+            @click="openRichMessageEditor"
           ></div>
           <!-- <wangEditor v-model="editingMessage" :height="`100px`"></wangEditor> -->
           <!-- <div class="btns"> -->
@@ -58,7 +58,7 @@
           <messageList :messageList="messages"></messageList>
           <div class="option-bar">
             <el-input
-              v-model="editingMessage"
+              v-model="richMessage"
               style="margin-right: 15px"
             ></el-input>
             <!-- <wangEditor
@@ -78,13 +78,12 @@
       >
     </el-tabs>
 
-    <el-dialog title="高级输入框" v-model="showRichEditor">
+    <el-dialog title="富文本输入框" v-model="showRichEditor">
-      <wangEditor v-model="editingMessage" width="100%"></wangEditor>
+      <wangEditor v-model="richMessage" width="100%" :focus="true"></wangEditor>
       <template #footer>
         <span class="dialog-footer">
-          <el-button type="primary" @click="showRichEditor = false"
+          <el-button type="warning" @click="cancelRichMessage">取消</el-button>
-            >确定</el-button
+          <el-button type="primary" @click="saveRichMessage">确定</el-button>
-          >
         </span>
       </template>
     </el-dialog>
@@ -93,6 +92,7 @@
 <script setup>
 import { computed, reactive, watch, ref, onMounted, onUnmounted } from "vue";
 import { useStore } from "vuex";
+import axios from "axios";
 import { signMeeting, generateSignature } from "@/api/meeting";
 import wangEditor from "@/components/wangEditor";
 import messageList from "@/components/messageList";
@@ -176,12 +176,12 @@ const setTextLabel = () => {
 const meetingConfig = reactive({
   client: ZoomMtgEmbedded.createClient(),
   // This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
-  sdkKey: "TUgbQFx4RhPHDPa0OQAKVgPL2dPGQoVqZIuW",
+  sdkKey: "99Spa64AWHYVZD95imUpVyMD0KF9CpEIrIb1",
   meetingNumber: store.getters.meetingNumber,
   passWord: store.state.password,
   role: route.name === "Host" ? 1 : 0,
   // signatureEndpoint: "http://120.26.107.74:4000",
-  userEmail: "",
+  userEmail: "webinartest@126.com",
   userName: joinName.value,
   // pass in the registrant's token if your meeting or webinar requires registration. More info here:
   // Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/meetings#join-registered
@@ -212,6 +212,18 @@ const getSignature = async () => {
     role: meetingConfig.role,
   });
   startMeeting(sign);
+  // axios
+  //   .post("http://localhost:4000", {
+  //     meetingNumber: store.getters.meetingNumber,
+  //     role: meetingConfig.role,
+  //   })
+  //   .then((res) => {
+  //     console.log(res.data.signature);
+  //     startMeeting(res.data.signature);
+  //   })
+  //   .catch((error) => {
+  //     console.log(error);
+  //   });
 };
 
 const startMeeting = async (signature) => {
@@ -263,8 +275,6 @@ const startMeeting = async (signature) => {
   } catch (error) {
     isMeetingLoading.value = false;
   }
-  // console.log(meetingConfig.client.checkSystemRequirements());
-  // document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
 };
 const setFullScreen = () => {
   videoElementRef.value.requestFullscreen();
@@ -283,7 +293,7 @@ const initDesktopLayout = () => {
       ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
     ) ||
     document.querySelector(
-      ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-180"
+      ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-252"
     );
   heightEl.style.height = `${meetingHeight.value - 45}px`;
 
@@ -312,30 +322,40 @@ const setLayout = (templateId) => {
   console.log(templateId);
   const v_s_wrap_el =
     document.querySelector(
-      ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
+      ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166"
     ) ||
     document.querySelector(
-      ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-180"
+      ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176"
-    );
+    ); // 包含视频和课件的容器
   v_s_wrap_el.style.flexDirection = "";
 
   const v_wrap_el =
-    document.querySelector(
+    document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
-      ".zmwebsdk-makeStyles-wrap-167.zmwebsdk-makeStyles-wrap-171"
+    document.querySelector(".zmwebsdk-makeStyles-wrap-177");
-    ) ||
+  if (!inSharing.value) return;
-    document.querySelector(
+
-      ".zmwebsdk-makeStyles-wrap-177.zmwebsdk-makeStyles-wrap-181"
+  const s_wrap_el = document.querySelector(".zmwebsdk-makeStyles-inSharing-46");
-    );
+  if (templateId === "1") {
-  if (templateId === "1" && inSharing.value) {
+    // 课件|视频 对半分
     v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`;
-  } else if (templateId === "2" && inSharing.value) {
+  } else if (templateId === "2") {
+    // 视频|课件 对半分
     v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`;
     v_s_wrap_el.style.flexDirection = "row-reverse";
-  } else if (templateId === "3" && inSharing.value) {
+  } else if (templateId === "3") {
+    // 课件|视频 左3/4 | 右边1/4
     v_wrap_el.style.width = `${(meetingWidth.value - 4) / 4}px`;
-  } else if (templateId === "4" && inSharing.value) {
+  } else if (templateId === "4") {
+    // 视频|课件 左1/4 | 右边3/4
     v_wrap_el.style.width = `${(meetingWidth.value - 4) / 4}px`;
     v_s_wrap_el.style.flexDirection = "row-reverse";
+  } else if (templateId === "5") {
+    // 只显示课件
+    v_wrap_el.style.display = `none`;
+  } else if (templateId === "6") {
+    // 只显示视频
+    s_wrap_el.style.display = "none";
+    v_wrap_el.style.width = `${meetingWidth.value - 4}px`;
   }
 };
 
@@ -391,8 +411,6 @@ const initWebSocket = () => {
 
     // 会议结束时
     else if (data.type === "isCloseMeeting") {
-      showExamDialog.value = false;
-      showQuestionnaireDialog.value = false;
       ElMessageBox.alert("会议已结束");
       socket.close();
     }
@@ -405,22 +423,27 @@ const initWebSocket = () => {
   });
 };
 initWebSocket();
-/* 签到功能 */
-// 提交签到
-const showSignDialog = ref(false); //是否显示签到窗口
-const submitSign = async () => {
-  await signMeeting({
-    meetingId: store.getters.meetingId,
-    signTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
-    account: joinAccount.value,
-  });
-  showSignDialog.value = false;
-  ElMessage.success("签到成功");
-};
 
 /* 聊天功能 */
 const messages = ref([]); // 消息列表
-const editingMessage = ref(""); // 正在编辑的内容
+const editingMessage = ref(""); // 要发送的内容
+const richMessage = ref(""); // 正在编辑的富文本内容--主持人独有
+
+// 保存富文本聊天内容
+const saveRichMessage = () => {
+  showRichEditor.value = false;
+  editingMessage.value = richMessage.value;
+  richMessage.value = "";
+};
+// 取消保存富文本
+const cancelRichMessage = () => {
+  showRichEditor.value = false;
+};
+// 打开富文本编辑器窗口
+const openRichMessageEditor = () => {
+  showRichEditor.value = true;
+  richMessage.value = editingMessage.value;
+};
 // 发送消息
 const sendMessage = () => {
   console.log(socket);
@@ -442,10 +465,6 @@ window.addEventListener("beforeunload", leaveConference);
 onUnmounted(() => {
   window.removeEventListener("beforeunload", leaveConference);
 });
-
-// 是否显示考试和问卷弹窗
-const showExamDialog = ref(false);
-const showQuestionnaireDialog = ref(false);
 </script>
 <style scoped lang="scss">
 #app-container {
@@ -485,11 +504,14 @@ const showQuestionnaireDialog = ref(false);
     margin: 5px;
     .display-message {
       border: 1px solid #666;
-      width: 100%;
+      width: 80%;
       min-height: 100%;
       border-radius: 5px;
       margin-right: 5px;
       word-wrap: break-word;
+      :deep(p) {
+        margin: 0;
+      }
     }
   }
   :deep(.message-list) {
@@ -509,7 +531,7 @@ const showQuestionnaireDialog = ref(false);
   }
 }
 #video-element {
-  visibility: hidden;
+  // visibility: hidden;
   // height: 600px;
 }
 

src/views/meeting.vue

@@ -92,24 +92,25 @@
 <script setup>
 import { computed, reactive, watch, ref, onMounted, onUnmounted } from "vue";
 import { useStore } from "vuex";
+import axios from "axios";
 import { signMeeting, generateSignature } from "@/api/meeting";
 import questions from "@/components/questions";
 import messageList from "@/components/messageList";
 import dayjs from "dayjs";
 import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
 import _ from "lodash";
-// import { FullScreen } from "@element-plus/icons-vue";
+
 import ReconnectingWebSocket from "reconnecting-websocket";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useRoute } from "vue-router";
 const route = useRoute();
 const store = useStore();
-console.log(route.name);
+
 const meetingNote = computed(() => store.getters.meetingNote); // 会议介绍
 const meetingSchedule = computed(() => store.getters.meetingSchedule); // 会议日程
 const expertInfo = computed(() => store.getters.expertInfo); // 专家信息
 const isMeetingLoading = ref(true); // 视频课件是否正在加载
-const templateId = ref(1); // 布局 id
+const templateId = ref(6); // 布局 id
 if (store.getters.templateId) {
   templateId.value = store.getters.templateId;
 }
@@ -119,15 +120,12 @@ const screenWidth = ref(0); // 屏幕宽度
 const meetingWidth = ref(0); // 视频课件容器元素宽度
 const meetingHeight = ref(0); // 视频课件容器元素高度
 screenWidth.value = document.body.offsetWidth;
-if (route.name === "Host") {
+
-  joinAccount.value = route.params.username;
+joinAccount.value =
-  joinName.value = route.params.nickname;
+  store.getters.icCard || store.getters.phone || store.getters.nickname;
-} else {
+joinName.value =
-  joinAccount.value =
+  store.getters.nickname || store.getters.phone || store.getters.icCard;
-    store.getters.icCard || store.getters.phone || store.getters.nickname;
+
-  joinName.value =
-    store.getters.nickname || store.getters.phone || store.getters.icCard;
-}
 // 设置会议背景大小、图片
 const meetingContainerRef = ref(null); // 会议容器元素(包含背景)
 const videoElementRef = ref(null); // 视频课件容器元素
@@ -135,11 +133,11 @@ const chatRightRef = ref(null); // 右侧聊天元素
 onMounted(() => {
   meetingContainerRef.value.style.background = `url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`; // 设置背景图片
   setTextLabel();
-  meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.95;
+  meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.95; // zoom 会议组件宽度是父元素宽度的 95%
-  meetingHeight.value = (meetingWidth.value * 9) / 16;
+  meetingHeight.value = (meetingWidth.value * 9) / 16; // 根据 zoom 会议组件长宽比 16:9 计算出会议组件高度
+  meetingContainerRef.value.style.paddingTop = `${meetingHeight.value * 0.2}px`; // 父元素顶部padding 是会议组件高度的20%
   videoElementRef.value.style.width = meetingWidth.value + "px";
   videoElementRef.value.style.height = meetingHeight.value + "px";
-  chatRightRef.value.style.height = meetingHeight.value + "px";
 });
 
 // 设置文本标签
@@ -150,63 +148,69 @@ const setTextLabel = () => {
   store.getters.textLabelList.forEach((item) => {
     const labelObj = JSON.parse(item.textLabel);
     const textEl = document.createElement("div");
-    console.log(labelObj);
     textEl.id = `${_.uniqueId("tag-")}`;
     textEl.innerHTML = labelObj.content;
     textEl.className = "text-tag";
-    // console.log(labelObj);
     textEl.style.backgroundColor = labelObj.backgroundColor;
     textEl.style.visibility =
       labelObj.visibility === "1" ? "visible" : "hidden";
-
     textEl.style.left = `${labelObj.x}`;
     textEl.style.top = `${labelObj.y}`;
     meetingContainerRef.value.appendChild(textEl);
   });
 };
-// console.log(to.);
+
 // 会议配置
 const meetingConfig = reactive({
   client: ZoomMtgEmbedded.createClient(),
   // This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
-  sdkKey: "TUgbQFx4RhPHDPa0OQAKVgPL2dPGQoVqZIuW",
+  sdkKey: "99Spa64AWHYVZD95imUpVyMD0KF9CpEIrIb1",
-  meetingNumber: store.getters.meetingNumber,
+  // meetingNumber: store.getters.meetingNumber,
-  passWord: store.state.password,
+  // meetingNumber: store.getters.meetingNumber,
-  role: route.name === "Host" ? 1 : 0,
+  // passWord: store.state.password,
+  // sdkKey: "99Spa64AWHYVZD95imUpVyMD0KF9CpEIrIb1",
+  meetingNumber: "97097842319",
+  passWord: "111916",
+  // role: route.name === "Host" ? 1 : 0,
+  role: 0,
   // signatureEndpoint: "http://120.26.107.74:4000",
-  userEmail: "",
+  // userEmail:
-  userName: joinName.value,
+  //   Number(Math.random().toString().substr(3, 8) + Date.now()).toString(36) +
+  // "@163.com",
+  userEmail: "934510341@qq.com",
+  // userName: joinName.value,
+  userName: "afasde1",
   // pass in the registrant's token if your meeting or webinar requires registration. More info here:
   // Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/meetings#join-registered
   // Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/webinars#join-registered
-  registrantToken: "",
+  registrantToken:
+    "Xhi0bKUzyNBnJwe2EJWZ0JZ3IYqtPgyyWE1CXW3z2X4.DQMAAAAWm3t-jxZqSS14R0dCSFRDNkFibVQwakpHbFd3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
 });
 console.log(meetingConfig);
-const checkMedia = async () => {
-  const result = {};
-  try {
-    await navigator.mediaDevices.getUserMedia({ video: true });
-    result.video = true;
-  } catch (error) {
-    result.video = false;
-  }
-  try {
-    await navigator.mediaDevices.getUserMedia({ audio: true });
-    result.audio = true;
-  } catch (error) {
-    result.audio = false;
-  }
-  return result;
-};
 
+// 生成签名
 const getSignature = async () => {
   const { sign } = await generateSignature({
     meetingNumber: store.getters.meetingNumber,
     role: meetingConfig.role,
   });
+  console.log(sign);
   startMeeting(sign);
+  // axios
+  //   .post("http://localhost:4000", {
+  //     meetingNumber: store.getters.meetingNumber,
+  //     role: meetingConfig.role,
+  //   })
+  //   .then((res) => {
+  //     console.log(res.data.signature);
+  //     startMeeting(res.data.signature);
+  //   })
+  //   .catch((error) => {
+  //     console.log(error);
+  //   });
 };
 
+// 开始会议
 const startMeeting = async (signature) => {
   let meetingSDKElement = document.getElementById("video-element");
   try {
@@ -256,8 +260,6 @@ const startMeeting = async (signature) => {
   } catch (error) {
     isMeetingLoading.value = false;
   }
-  // console.log(meetingConfig.client.checkSystemRequirements());
-  // document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
 };
 const setFullScreen = () => {
   videoElementRef.value.requestFullscreen();
@@ -267,7 +269,6 @@ onMounted(() => {
 });
 // 初始化
 const initDesktopLayout = () => {
-  console.log(meetingHeight.value);
   // 切换到 gallery view
   document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
   // 初始化高度
@@ -276,17 +277,17 @@ const initDesktopLayout = () => {
       ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
     ) ||
     document.querySelector(
-      ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-180"
+      ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-252"
     );
   heightEl.style.height = `${meetingHeight.value - 45}px`;
-  // document.querySelector(
+  console.log(meetingHeight.value);
-  //   ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
+
-  // ).style.height = `${meetingHeight.value - 45}px`;
   // 初始化宽度
-  //
+  // zmwebsdk-MuiPaper-root zmwebsdk-makeStyles-root-21 zmwebsdk-MuiPaper-elevation1 zmwebsdk-MuiPaper-rounded
   document.querySelector(
     ".zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-root-21.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded"
   ).style.width = `${meetingWidth.value - 4}px`;
+  console.log(`${meetingWidth.value - 4}px`);
   // 加载完成显示 video element
   document.querySelector("#video-element").style.visibility = "visible";
 };
@@ -296,11 +297,6 @@ setInterval(() => {
   const elSharing = document.querySelector(".zmwebsdk-makeStyles-inSharing-46");
   // console.log(elSharing);
   if (elSharing) {
-    // if (elSharing.className.includes("in-sharing")) {
-    //   inSharing.value = true;
-    // } else {
-    //   inSharing.value = false;
-    // }
     inSharing.value = true;
   } else {
     inSharing.value = false;
@@ -312,51 +308,66 @@ const setLayout = (templateId) => {
   console.log(templateId);
   const v_s_wrap_el =
     document.querySelector(
-      ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
+      ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166"
     ) ||
     document.querySelector(
-      ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-180"
+      ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176"
-    );
+    ); // 包含视频和课件的容器
   v_s_wrap_el.style.flexDirection = "";
 
   const v_wrap_el =
-    document.querySelector(
+    document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
-      ".zmwebsdk-makeStyles-wrap-167.zmwebsdk-makeStyles-wrap-171"
+    document.querySelector(".zmwebsdk-makeStyles-wrap-177");
-    ) ||
+  if (!inSharing.value) return;
-    document.querySelector(
+
-      ".zmwebsdk-makeStyles-wrap-177.zmwebsdk-makeStyles-wrap-181"
+  const s_wrap_el = document.querySelector(".zmwebsdk-makeStyles-inSharing-46");
-    );
+  if (templateId === "1") {
-  if (templateId === "1" && inSharing.value) {
+    // 课件|视频 对半分
     v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`;
-  } else if (templateId === "2" && inSharing.value) {
+  } else if (templateId === "2") {
+    // 视频|课件 对半分
     v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`;
     v_s_wrap_el.style.flexDirection = "row-reverse";
-  } else if (templateId === "3" && inSharing.value) {
+  } else if (templateId === "3") {
-    v_wrap_el.style.width = `${(meetingWidth.value - 4) / 4}px`;
+    // 课件|视频 左4/5 | 右边1/5
-  } else if (templateId === "4" && inSharing.value) {
+    v_wrap_el.style.width = `${(meetingWidth.value - 4) / 5}px`;
-    v_wrap_el.style.width = `${(meetingWidth.value - 4) / 4}px`;
+  } else if (templateId === "4") {
+    // 视频|课件 左1/4 | 右边3/4
+    v_wrap_el.style.width = `${(meetingWidth.value - 4) / 5}px`;
     v_s_wrap_el.style.flexDirection = "row-reverse";
+  } else if (templateId === "5") {
+    // 只显示课件
+    v_wrap_el.style.display = `none`;
+  } else if (templateId === "6") {
+    // 只显示视频
+    s_wrap_el.style.display = "none";
+    v_wrap_el.style.width = `${meetingWidth.value - 4}px`;
   }
 };
 watch(inSharing, (newVal) => {
   console.log(newVal);
   if (newVal) {
     setLayout(templateId.value);
-    // document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
   } else {
-    // document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
     const galleryViewButton = document.querySelector(
       "#suspension-view-tab-thumbnail-gallery"
     );
     galleryViewButton.click();
-    document.querySelector(".zmwebsdk-makeStyles-wrap-171").style.width = "";
+    const v_wrap_el =
-    document.querySelector(
+      document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
-      ".zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
+      document.querySelector(".zmwebsdk-makeStyles-wrap-177");
-    ).style.flexDirection = "";
+    v_wrap_el.style.width = "";
+    const v_s_wrap_el =
+      document.querySelector(
+        ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166"
+      ) ||
+      document.querySelector(
+        ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176"
+      );
+    v_s_wrap_el.style.flexDirection = "";
   }
 });
 
-// const reconnectCount = ref(0); //重连次数
 let socket = reactive({});
 const initWebSocket = () => {
   // 建立websocket连接
@@ -521,7 +532,7 @@ const showQuestionnaireDialog = ref(false);
   }
 }
 #video-element {
-  visibility: hidden;
+  // visibility: hidden;
   // height: 600px;
 }
 

src/views/verify.vue

@@ -37,7 +37,11 @@
           "
         >
           <el-form-item label="手机号" prop="phone">
-            <el-input v-model="newJoinUser.phone" placeholder="请输入手机号" />
+            <el-input
+              v-model.number="newJoinUser.phone"
+              placeholder="请输入手机号"
+              max="11"
+            />
           </el-form-item>
         </div>
         <div
@@ -545,17 +549,19 @@ setJoinUserDefaultValue();
 const newJoinUserRef = ref(null);
 const submitVerify = async (newJoinUserRef) => {
   await newJoinUserRef.validate();
+  console.log(meeting.value.joinType);
   if (meeting.value.joinType === "1") {
     store.commit("setJoinUser", newJoinUser.value);
     router.push(`/meeting/${meetingId.value}`);
   } else if (meeting.value.joinType === "2") {
-    const { data } = await registerJoinUser(newJoinUser.value);
+    // const { data } = await registerJoinUser(newJoinUser.value);
-    store.commit("setPassword", data);
+    // store.commit("setPassword", data);
+    console.log(meetingId.value);
     store.commit("setJoinUser", newJoinUser.value);
     router.push(`/meeting/${meetingId.value}`);
   } else if (meeting.value.joinType === "3") {
-    const { data } = await visitorJoinUser(newJoinUser.value);
+    // const { data } = await visitorJoinUser(newJoinUser.value);
-    store.commit("setPassword", data);
+    // store.commit("setPassword", data);
     store.commit("setJoinUser", newJoinUser.value);
     router.push(`/meeting/${meetingId.value}`);
   }