tj

src/App.vue

@@ -44,7 +44,7 @@ export default {
     },
     receivePush(message) {
       console.log(message, '---接收订阅消息')
-      // this.$store.commit('setVideoReminder', JSON.stringify(message))
+      this.$store.commit('setVideoReminder', message.body)
     },
     scriptWithDataSetExists(dataId) {
       const scriptElement = document.querySelector(`script[data-telephone="${dataId}"]`);

src/pages/mediation-page/components/MediationRoom.vue

@@ -115,12 +115,31 @@
 
     <div class="flex-row align-items-center pl-24 pr-24 btn-group-controls">
       <div class="pt-16 pb-16 flex-row justify-content-between align-items-center btn-group-real-time">
-        <el-badge :value="3" class="item">
+        <el-popover
-          <i class="f24 el-icon-phone cursor-pointer color-52ABF2"></i>
+            placement="top"
-        </el-badge>
+            width="400"
-        <el-badge :value="3" class="item">
+            v-model="missedCallVisible"
-          <i class="f24 el-icon-video-camera cursor-pointer color-52ABF2"></i>
+            title="未接来电"
-        </el-badge>
+            trigger="click">
+          <missedCallPopover :missedCallData="missedCallData" :missedCallVisible.sync="missedCallVisible"/>
+          <span slot="reference" class="cursor-pointer position-r">
+            <i class="f24 el-icon-phone color-52ABF2"></i>
+            <div class="ell-warn-dot" v-if="missedCallData.list.length > 0">{{missedCallData.list.length}}</div>
+          </span>
+        </el-popover>
+
+        <el-popover
+            placement="top"
+            width="400"
+            v-model="videoReminderVisible"
+            title="视频提醒"
+            trigger="click">
+          <videoReminderPopover :videoReminderData="videoReminderData" :videoReminderVisible.sync="videoReminderVisible"/>
+          <span slot="reference" class="cursor-pointer position-r">
+            <i class="f24 el-icon-video-camera color-52ABF2"></i>
+            <div class="ell-warn-dot" v-if="Object.keys(videoReminderData).length > 0">1</div>
+          </span>
+        </el-popover>
       </div>
       <div class="ml-24 mr-24 btn-group-interval"></div>
       <div class="flex-row justify-content-between align-items-center btn-group-processing-event">
@@ -234,6 +253,9 @@ export default {
     singlesmsPopover: () => import('./singlesmsPopover.vue'),//发送短信
     VideoRoom: () => import('./VideoRoom'),
     LayoutContentNew: () => import('./LayoutContentNew'),//调解数据
+
+    missedCallPopover: () => import('./missedCallPopover'),//来电
+    videoReminderPopover: () => import('./videoReminderPopover'),//视频
   },
   data() {
     return {
@@ -345,6 +367,15 @@ export default {
       elapsedTime: 0,
       timerInterval: null,
       isRunning: false,
+
+      // 未接来电
+      missedCallVisible: false,
+      missedCallData: {
+        list: []
+      },
+      // 视频提醒
+      videoReminderVisible: false,
+      videoReminderData: {}
     };
   },
   computed: {

src/pages/mediation-page/components/missedCallPopover.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="dialog-missed-call pl-16 pr-16 pt-16">
+    <div class="flex-row justify-content-between align-items-center pb-16 border-b-solid-lighter-1">
+      <div class="width70">
+        <div class="color-000 f-weight600 f16">
+          张三 134****9400
+        </div>
+<!--        <div class="f12">预约时间:{{ this.$util.formatDate(videoReminderData.bookingTime, 'YYYY-MM-DD HH:mm:ss') }}</div>-->
+        <div class="f12">来电时间：2024-11-29 21:15:05</div>
+      </div>
+      <el-button size="small" type="primary" @click="viewCase">查看</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "missedCallPopover",
+  props: {
+    missedCallList: {
+      type: {},
+      default: () => {
+        return {}
+      },
+    },
+  },
+  methods: {
+    viewCase() {
+      this.$router.push(`/mediation-page?sourcePage=sourcePage&caseId=${this.videoReminderData.caseId}`);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.dialog-missed-call{
+  width: 395px;
+}
+</style>

src/pages/mediation-page/components/videoReminderPopover.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="dialog-video-reminder pl-16 pr-16 pt-16">
+    <div class="flex-row justify-content-between align-items-center pb-16">
+      <div class="width70">
+        <div class="color-000 f-weight600 f16">
+          {{videoReminderData.content}}即将要开始了
+        </div>
+        <div class="f12">预约时间:{{ this.$util.formatDate(videoReminderData.bookingTime, 'YYYY-MM-DD HH:mm:ss') }}</div>
+      </div>
+      <el-button size="small" type="primary" @click="viewCase">查看案件</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "videoReminderPopover",
+  props: {
+    videoReminderData: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  methods: {
+    viewCase() {
+      this.$router.push(`/mediation-page?sourcePage=sourcePage&caseId=${this.videoReminderData.caseId}`);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.dialog-video-reminder{
+  width: 395px;
+}
+</style>