默认封面

src/api/meeting.js

@@ -90,3 +90,10 @@ export function commitQuestionnaire(data) {
     data,
   });
 }
+
+export function getMeetingSetting() {
+  return request({
+    url: `/app/meetingSetting`,
+    method: "get",
+  });
+}

src/router/index.js

@@ -56,6 +56,7 @@ const router = createRouter({
 });
 
 router.beforeEach(async (to) => {
+  await store.dispatch("getMeetingSettings");
   // 判断会议信息是否存在，不存在则请求数据
   if (!store.state.meeting.id && to.params.meetingId) {
     await store.dispatch("getMeetingInfo", to.params.meetingId);

src/store/index.js

@@ -1,5 +1,5 @@
 import { createStore } from "vuex";
-import { getMeetingDetailById } from "@/api/meeting";
+import { getMeetingDetailById, getMeetingSetting } from "@/api/meeting";
 
 const store = createStore({
   state: {
@@ -7,6 +7,7 @@ const store = createStore({
       ? JSON.parse(localStorage.getItem("JOIN_USER"))
       : {},
     meeting: {},
+    meetingSetting: {},
     password: "", //参会密码
     joinType: localStorage.getItem("JOINTYPE")
       ? JSON.parse(localStorage.getItem("JOINTYPE"))
@@ -32,6 +33,9 @@ const store = createStore({
       state.joinType = data;
       localStorage.setItem("JOINTYPE", JSON.stringify(data));
     },
+    setMeetingSetting(state, data) {
+      state.meetingSetting = data;
+    },
   },
   actions: {
     // 请求会议信息
@@ -40,6 +44,11 @@ const store = createStore({
       context.commit("setMeetingInfo", data);
       // context.commit("setJoinType", data.joinType);
     },
+    async getMeetingSettings(context) {
+      const { data } = await getMeetingSetting();
+      console.log(data);
+      context.commit("setMeetingSetting", data);
+    },
   },
   getters: {
     nickname: (state) => state.joinUser.nickname, // 姓名
@@ -58,6 +67,8 @@ const store = createStore({
     textLabelList: (state) => state.meeting.textLabelList,
     questionnaireId: (state) => state.meeting.questionnaireId,
     bankId: (state) => state.meeting.bankId,
+    defaultCover: (state) => state.meetingSetting.defaultCover,
+    defaultBackground: (state) => state.meetingSetting.defaultBackground,
   },
 });
 

src/views/appointment.vue

@@ -1,5 +1,9 @@
 <template>
-  <img class="meeting-cover" :src="meeting.meetingPic" alt="" />
+  <img
+    class="meeting-cover"
+    :src="meeting.meetingPic ? meeting.meetingPic : store.getters.defaultCover"
+    alt=""
+  />
   <h3 class="meeting-title">{{ meeting.meetingName }}</h3>
   <p class="meeting-time">
     <span class="title">会议时间</span>

src/views/meeting.vue

@@ -97,15 +97,6 @@
       :showDialog="showQuestionnaireDialog"
       @close="showQuestionnaireDialog = $event"
     ></questions>
-    <el-dialog v-model="showHorizontalScreen" fullscreen :show-close="false">
-      <el-result icon="warning" title="无法全屏" sub-title="请先将手机横过来">
-        <template #icon>
-          <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-hengping"></use>
-          </svg>
-        </template>
-      </el-result>
-    </el-dialog>
   </div>
 </template>
 
@@ -178,7 +169,6 @@ const meetingConfig = reactive({
 });
 
 // 开始会议
-const isJoinFirstTime = ref(true);
 const startMeeting = async () => {
   const { sign } = await generateSignature({
     meetingNumber: store.getters.meetingNumber,
@@ -228,8 +218,7 @@ const startMeeting = async () => {
       userEmail: meetingConfig.userEmail,
       tk: meetingConfig.registrantToken,
     });
-    isJoinFirstTime.value = false;
+
-    console.log(meetingConfig.client.getAttendeeslist());
     document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
 
     // 自动点击允许共享屏幕 //TODO:自动点击按钮
@@ -271,9 +260,6 @@ const setSize = () => {
     });
 };
 
-window.client = meetingConfig.client;
-window.startMeeting = startMeeting;
-
 // 设置文本标签
 const setTextLabel = () => {
   document.querySelectorAll(".text-tag").forEach((el) => {
@@ -294,6 +280,7 @@ const setTextLabel = () => {
   });
 };
 
+// 自动翻页到开启摄像头的用户
 const switchToVideoOn = () => {
   const prevBtn = document.querySelector(
     "#suspension-view-tabpanel-ribbon>div>div:last-child>.zmwebsdk-MuiBox-root>button:first-child"
@@ -340,13 +327,11 @@ const switchToVideoOn = () => {
       clearInterval(timer);
     }
   }, 100);
-  // console.log(isNextBtnHidden);
 };
 
 const inSharing = ref(false); // 共享屏幕是否开启
 const attendeeslist = ref("");
 setInterval(() => {
-  screenWidth.value = window.screen.width;
   // 共享屏幕状态变化
   const screenShareEl = document.querySelector(
     `div[class*="zmwebsdk-makeStyles-inSharing"]`
@@ -436,16 +421,8 @@ watch(attendeeslist, (val) => {
 // 点击进入全屏模式
 const fullscreenWrapRef = ref(null);
 const isVerticalFullScreen = ref(false);
-const showHorizontalScreen = ref(false);
+
 const setFullScreen = async () => {
-  // if (window.orientation === 0) {
-  //   // ElMessageBox.prompt("请将手机横过来");
-  //   showHorizontalScreen.value = true;
-  //   setTimeout(() => {
-  //     showHorizontalScreen.value = false;
-  //   }, 1500);
-  //   return;
-  // }
   try {
     document.querySelector(".fullscreen-wrap").requestFullscreen();
   } catch (error) {
@@ -700,7 +677,7 @@ onMounted(() => {
 });
 // 当修改窗口尺寸时
 window.addEventListener("resize", (e) => {
-  console.log(e);
+  screenWidth.value = window.screen.width;
   meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.96;
   meetingHeight.value = (meetingWidth.value * 9) / 16;
   if (!document.fullscreenElement) {
@@ -743,9 +720,12 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-$meetingComponentWitdh: 80vw * 0.96;
+$meetingComponentWitdh: 80vw * 0.96; // 会议组件宽度
 $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 
+$meetingBackgroundWidth: 80vw; //会议背景宽度
+$meetingBackgroundHeight: 80vw * 9 / 16;
+
 :deep(#right-chat .chat-container .message-list) {
   height: $meetingComponentWitdh * 9 / 16;
   overflow-y: scroll;
@@ -760,7 +740,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       padding-top: calc(80vw * 0.08);
       display: flex;
       justify-content: center;
-      width: 80vw;
+      width: $meetingBackgroundWidth;
       position: relative;
       #video-element {
         width: $meetingComponentWitdh;

src/views/panelist-verify.vue

@@ -1,5 +1,9 @@
 <template>
-  <img class="meeting-cover" :src="meeting.meetingPic" alt="" />
+  <img
+    class="meeting-cover"
+    :src="meeting.meetingPic ? meeting.meetingPic : store.getters.defaultCover"
+    alt=""
+  />
   <h3 class="meeting-title">{{ meeting.meetingName }}</h3>
   <p class="meeting-time">
     <span class="title">会议时间</span>

src/views/verify.vue

@@ -1,5 +1,9 @@
 <template>
-  <img class="meeting-cover" :src="meeting.meetingPic" alt="" />
+  <img
+    class="meeting-cover"
+    :src="meeting.meetingPic ? meeting.meetingPic : store.getters.defaultCover"
+    alt=""
+  />
   <h3 class="meeting-title">{{ meeting.meetingName }}</h3>
   <p class="meeting-time">
     <span class="title">会议时间</span>