异地登录强制下线, 显示点赞和在线人数

2022-07-05 08:38:27 +08:00
parent 2170c339eb
commit 2bbcdf8afd
14 changed files with 1073 additions and 6 deletions
--- a/src/api/meeting.js
+++ b/src/api/meeting.js
@ -107,3 +107,23 @@ export function superviseJoinMeeting(params) {
    params,
  });
 }
+
+// 点赞
+export function addMeetingLikeTotal(meetingId) {
+  return request({
+    url: `/app/addMeetingLikeTotal`,
+    method: "get",
+    params: {
+      meetingId,
+    },
+  });
+}
+export function getOnlineUserTotalAndLikes(meetingId) {
+  return request({
+    url: `/app/getOnlineUserTotalAndLikes`,
+    method: "get",
+    params: {
+      meetingId,
+    },
+  });
+}
--- a/src/components/like.vue
+++ b/src/components/like.vue
@ -0,0 +1,82 @@
+<template>
+  <div class="bar">
+    <svg
+      class="icon"
+      aria-hidden="true"
+      style="user-select: none; cursor: pointer"
+      @click="handleClickLike"
+    >
+      <use xlink:href="#icon-like"></use>
+    </svg>
+    <!-- <svg
+      v-else
+      class="icon"
+      aria-hidden="true"
+      style="user-select: none; cursor: pointer"
+      @click="handleClickLike"
+    >
+      <use xlink:href="#icon-likefill"></use>
+    </svg> -->
+    <span class="count">{{ like }}</span>
+    <svg class="icon" aria-hidden="true">
+      <use xlink:href="#icon-online"></use>
+    </svg>
+    <span class="count">{{ online }}</span>
+  </div>
+</template>
+<script setup name="Like">
+import { ElMessage } from "element-plus";
+import { toRefs } from "vue";
+import { addMeetingLikeTotal } from "@/api/meeting";
+import { useStore } from "vuex";
+const store = useStore();
+const props = defineProps({
+  like: {
+    type: Number,
+    default: 0,
+  },
+  online: {
+    type: Number,
+    default: 0,
+  },
+  meetingId: {
+    type: Number,
+    required: true,
+  },
+});
+const { like, online, meetingId } = toRefs(props);
+
+const handleClickLike = async () => {
+  // if (store.state.liked) {
+  //   ElMessage.error("不允许重复点赞");
+  //   return;
+  // }
+  await addMeetingLikeTotal(meetingId.value);
+  // store.commit("setLiked", true);
+  ElMessage.success("点赞成功");
+};
+</script>
+<style scoped lang="scss">
+.bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100px;
+  height: 34px;
+  //   background-color: indianred;
+  .count {
+    min-width: 3em;
+    margin: 0 4px 0 4px;
+    color: #888;
+  }
+}
+
+.icon {
+  color: indianred;
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -91,6 +91,7 @@ router.beforeEach(async (to) => {
    // 当参会角色（host,panelist,meeting,supervisor）改变时,清空用户信息、消息列表
    if (store.state.joinRole && store.state.joinRole !== to.name) {
      store.commit("setJoinUser", {});
+      store.commit("setLiked", false);
      store.commit("setMessagesList", []);
    }
    store.commit("setJoinRole", to.name);
@ -99,6 +100,7 @@ router.beforeEach(async (to) => {
  if (to.params.meetingId !== store.state.joinUser.meetingId) {
    store.commit("setJoinUser", {});
    store.commit("setMessagesList", []);
+    store.commit("setLiked", false);
  }
  // 前往主持人页面
  if (to.name === "Host") {
@ -128,6 +130,8 @@ router.beforeEach(async (to) => {
      store.state.meeting.joinType !== store.state.joinType
    ) {
      store.commit("setJoinUser", {});
+      store.commit("setLiked", false);
+      store.commit("setMessagesList", []);
      store.commit("setJoinType", store.state.meeting.joinType);
      return `/verify/${to.params.meetingId}`;
    }
@ -149,15 +153,21 @@ router.beforeEach(async (to) => {
          return true;
        } catch (error) {
          store.commit("setJoinUser", {});
+          store.commit("setLiked", false);
+          store.commit("setMessagesList", []);
          return `/verify/${to.params.meetingId}`;
        }
      } else {
        store.commit("setJoinUser", {});
+        store.commit("setLiked", false);
+        store.commit("setMessagesList", []);
        return `/verify/${to.params.meetingId}`;
      }
    } else {
      if (_.isEmpty(store.state.joinUser)) {
-        console.log("error");
+        store.commit("setJoinUser", {});
+        store.commit("setLiked", false);
+        store.commit("setMessagesList", []);
        return `/verify/${to.params.meetingId}`;
      } else {
        if (store.state.meeting.joinType === "2") {
@ -205,10 +215,14 @@ router.beforeEach(async (to) => {
        return true;
      } catch (error) {
        store.commit("setJoinUser", {});
+        store.commit("setLiked", false);
+        store.commit("setMessagesList", []);
        return `/panelist-verify/${to.params.meetingId}`;
      }
    } else {
      store.commit("setJoinUser", {});
+      store.commit("setLiked", false);
+      store.commit("setMessagesList", []);
      return `/panelist-verify/${to.params.meetingId}`;
    }
  } else if (to.name === "Supervisor") {
--- a/src/store/index.js
+++ b/src/store/index.js
@ -12,6 +12,9 @@ const store = createStore({
      ? JSON.parse(localStorage.getItem("MESSAGES"))
      : [],
    password: "", //参会密码
+    liked: localStorage.getItem("LIKED")
+      ? localStorage.getItem("LIKED")
+      : false,
    joinType: localStorage.getItem("JOINTYPE")
      ? JSON.parse(localStorage.getItem("JOINTYPE"))
      : "",
@ -29,7 +32,12 @@ const store = createStore({
    setMeetingInfo(state, data) {
      state.meeting = data;
    },
-
+    // 是否点赞
+    setLiked(state, data) {
+      state.liked = data;
+      console.log(data);
+      localStorage.setItem("LIKED", data);
+    },
    // 设置参会密码
    setPassword(state, data) {
      state.password = data;
--- a/src/views/meeting.vue
+++ b/src/views/meeting.vue
@ -18,6 +18,13 @@
            :class="`layout-template-${templateId}`"
            ref="videoElementRef"
          ></div>
+          <like
+            v-if="screenWidth > 900"
+            :meeting-id="store.getters.meetingId"
+            :like="likeCount"
+            :online="onlineCount"
+            style="position: absolute; bottom: 1vw; right: 4vw"
+          />
          <el-button
            v-if="!isFullScreen"
            :icon="FullScreen"
@ -42,6 +49,13 @@
        />
      </div>
    </div>
+    <like
+      v-if="screenWidth <= 900"
+      :meeting-id="store.getters.meetingId"
+      :like="likeCount"
+      :online="onlineCount"
+      style="margin: 0 auto"
+    />
    <el-tabs class="tabs" type="border-card">
      <el-tab-pane label="会议介绍">
        <div class="meeting-info meeting-note" v-html="meetingNote"></div>
@ -145,7 +159,7 @@ import {
  watch,
 } from "vue";
 import { useStore } from "vuex";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";

 import dayjs from "dayjs";
 import { uniqueId } from "lodash";
@ -153,9 +167,15 @@ import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
 import ReconnectingWebSocket from "reconnecting-websocket";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { FullScreen, CloseBold } from "@element-plus/icons-vue";
-import { signMeeting, generateSignature } from "@/api/meeting";
+import {
+  signMeeting,
+  generateSignature,
+  getOnlineUserTotalAndLikes,
+} from "@/api/meeting";
+import axios from "axios";
 import Chat from "@/components/chat";
 import mediaCheck from "@/components/mediaCheck.vue";
+import like from "@/components/like.vue";
 import questions from "@/components/questions";
 import {
  getQuestionsList,
@ -165,7 +185,7 @@ import {

 const store = useStore();
 const route = useRoute();
-
+const router = useRouter();
 const meetingNote = computed(() => store.getters.meetingNote); // 会议介绍
 const meetingSchedule = computed(() => store.getters.meetingSchedule); // 会议日程
 const expertInfo = computed(() => store.getters.expertInfo); // 专家信息
@ -192,7 +212,7 @@ templateId.value = store.getters.templateId;
 /* 会议配置 */
 const meetingConfig = reactive({
  client: ZoomMtgEmbedded.createClient(),
-  sdkKey: "99Spa64AWHYVZD95imUpVyMD0KF9CpEIrIb1",
+  sdkKey: "ZAqxohNPDbVvx3cmc5Wzp2cFVwZvbyHFAzgl",
  meetingNumber: store.getters.meetingNumber,
  passWord: store.state.password,
  role: route.name === "Host" ? 1 : 0,
@ -241,6 +261,11 @@ const startMeeting = async () => {
    meetingNumber: store.getters.meetingNumber,
    role: meetingConfig.role,
  });
+  // const resp = await axios.post("http://localhost:4000", {
+  //   meetingNumber: store.getters.meetingNumber,
+  //   role: meetingConfig.role,
+  // });
+  // const sign = resp.data.signature;
  let meetingSDKElement = document.getElementById("video-element");

  try {
@ -486,6 +511,15 @@ watch(attendeeslist, (val) => {
  }
 });

+// 进入会议时回去点赞数量和在线人数
+const onlineCount = ref(0);
+const likeCount = ref(0);
+const getLikeAndOnline = async () => {
+  const { data } = await getOnlineUserTotalAndLikes(store.getters.meetingId);
+  onlineCount.value = data.online;
+  likeCount.value = data.like;
+};
+getLikeAndOnline();
 // 点击进入全屏模式
 const fullscreenWrapRef = ref(null);
 const isVerticalFullScreen = ref(false);
@ -670,6 +704,26 @@ const initWebSocket = () => {
    else if (data.type === "isStartQuestionnaire" && route.name === "Meeting") {
      showQuestionnaireDialog.value = true;
      isDuringQuestionnairePeriod.value = true;
+    } else if (data.type === "isRefreshOnlineAndLike") {
+      console.log(data.type);
+      getLikeAndOnline();
+    }
+    // 当检测到异地登陆时，强制退出登录,并清除数据
+    else if (data.type === "isRemoteLogin") {
+      ElMessageBox.alert("您的账号在异地登录，将被强制下线", "异地登录", {
+        type: "warning",
+        "show-close": false,
+        "show-confirm-button": false,
+        "show-cancel-button": false,
+      });
+      setTimeout(() => {
+        leaveConference();
+        store.commit("setJoinUser", {});
+        store.commit("setPassword", "");
+        store.commit("setMessagesList", []);
+        store.commit("setLiked", false);
+        router.push(`/verify/${store.getters.meetingId}`);
+      }, 2000);
    }
    // 会议结束时
    else if (data.type === "isCloseMeeting") {