cnhis-design-vue 2.1.57 → 2.1.59

package/packages/multi-chat/chat/videoVoiceList.vue

@@ -1,348 +1,348 @@
-<template>
-  <div class="videoVoiceList-page">
-    <div class="header" @click="closeVideoList">
-      <p>{{ listTitle }}</p>
-      <a-icon type="down" />
-    </div>
-    <div class="videoVoiceList-container" v-if="!noData">
-      <div class="top-wrap" v-if="videoRecord.length">
-        <template v-for="(item, index) in videoRecord">
-          <div :key="index" class="video-record">
-            <div class="title">
-              <i></i>
-              <span>
-                {{ videoName(item, item.caller && item.caller.name) }}
-              </span>
-            </div>
-            <div class="content">
-              <span>{{ handleGoing(item) }}</span>
-              <span class="add-chat" @click="handleVideoEnter(item)">
-                加入通话
-              </span>
-            </div>
-          </div>
-        </template>
-      </div>
-      <div class="list-wrap" v-if="videoVoiceList.length">
-        <template v-for="(item, index) in videoVoiceList">
-          <div :key="index" class="list-item">
-            <div class="left-icon">
-              <img :src="item.portrait ? item.portrait : require('../img/customer.png')" alt="" />
-            </div>
-            <div class="right-wrap" :class="{ 'chat-cancel': item.kind == 2 && item.status == 3 }">
-              <div class="right-title">
-                {{ videoName(item, item.callerName) }}
-              </div>
-              <div class="right-content">
-                <div>
-                  <img :src="require(`../img/${formatCallImg(item)}.png`)" alt="" />
-                  <span>{{ item.mode == 1 ? '语音' : '视频' }}</span>
-                  <template v-if="item.createdTime">
-                    {{ formatDate(item.createdTime) }}
-                  </template>
-                </div>
-                <span v-if="item.duration">
-                  {{ formatSeconds(item.duration) }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-    <div class="no-data" v-if="noData">无历史数据</div>
-  </div>
-</template>
-<script>
-import { mapGetters, mapActions } from '../store/helper';
-import vexutils from '@/utils/vexutils';
-import { Icon } from 'ant-design-vue';
-
-export default {
-  name: 'VideoVoiceList',
-  inject: ['store'],
-  components: {
-    [Icon.name]: Icon
-  },
-  data() {
-    return {
-      noData: false
-    };
-  },
-
-  computed: {
-    // videoRecord
-    ...mapGetters(['assemblyId', 'assemblySetting', 'videoRecord', 'showVideo', 'showAudio', 'multiVideoShow', 'videoVoiceList', 'videoData']),
-    listTitle() {
-      let { serverInfo = [] } = this.assemblySetting?.serverSetting || {};
-      let matchItem = serverInfo.find(v => v.key === 'videoCallTitle');
-      return matchItem?.value || '语音历史';
-    },
-    videoName() {
-      return function(item, name) {
-        if (item.type == 1) return name;
-        return `${name} 发起的${item.mode == 1 ? '语音' : '视频'}通话`;
-      };
-    },
-    handleGoing() {
-      return function(item) {
-        if (item.isCaller == 1) {
-          if (item.caller.status === 3) return '进行中（已加入）';
-          return '进行中';
-        } else {
-          if (item.callee.status === 3) return '进行中（已加入）';
-          return '进行中';
-        }
-      };
-    },
-    formatCallImg() {
-      return function(item) {
-        if (item.kind == 1) {
-          return 'callout';
-        }
-        if (item.status == 3) {
-          return 'callin_cancel';
-        }
-        return 'callin';
-      };
-    }
-  },
-  watch: {
-    videoRecord: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (val.length) {
-          this.noData = false;
-        }
-      }
-    }
-  },
-  // 生命周期
-  created() {
-    this.init();
-  },
-  mounted() {},
-
-  // 方法
-  methods: {
-    ...mapActions(['getVideoHistoryList']),
-    async init() {
-      try {
-        await this.getVideoHistoryList();
-      } catch (err) {
-        console.log(err);
-      }
-    },
-    handleVideoEnter(item) {
-      if (this.showVideo || this.showAudio || this.multiVideoShow) {
-        if (this.videoData.recordId && item.id === this.videoData.recordId) {
-          return;
-        } else {
-          return this.$message.warning('你当前有正在进行的通话，请退出当前通话后重试。');
-        }
-      }
-      this.$emit('handleVideoEnter', item);
-    },
-    closeVideoList() {
-      this.$emit('closeVideoList', false);
-    },
-    formatDate(date) {
-      return vexutils.formatDate(date, true);
-    },
-    formatSeconds(date) {
-      var theTime = Number(date); // 需要转换的时间秒
-      var theTime1 = 0; // 分
-      var theTime2 = 0; // 小时
-      var theTime3 = 0; // 天
-      if (theTime > 60) {
-        theTime1 = theTime / 60;
-        theTime = theTime % 60;
-        if (theTime1 > 60) {
-          theTime2 = theTime1 / 60;
-          theTime1 = theTime1 % 60;
-          if (theTime2 > 24) {
-            // 大于24小时
-            theTime3 = theTime2 / 24;
-            theTime2 = theTime2 % 24;
-          }
-        }
-      }
-      var result = '';
-      if (theTime > 0) {
-        result = '' + parseInt(theTime) + '秒';
-      }
-      if (theTime1 > 0) {
-        result = '' + parseInt(theTime1) + '分' + result;
-      }
-      if (theTime2 > 0) {
-        result = '' + parseInt(theTime2) + '小时' + result;
-      }
-      if (theTime3 > 0) {
-        result = '' + parseInt(theTime3) + '天' + result;
-      }
-      return result;
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.videoVoiceList-page {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  .header {
-    display: flex;
-    align-items: center;
-    height: 45px;
-    line-height: 45px;
-    padding: 0 22px;
-    border-bottom: 1px solid #f0f0f5;
-    cursor: pointer;
-    p {
-      margin-bottom: 0;
-      margin-right: 8px;
-      font-size: 16px;
-      color: #252529;
-    }
-  }
-  .videoVoiceList-container {
-    width: 100%;
-    height: calc(100% - 45px);
-    box-sizing: border-box;
-    overflow-y: auto;
-    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 10px;
-      background-color: #f2f2f2;
-    }
-    /*定义滚动条轨道 内阴影+圆角*/
-    &::-webkit-scrollbar-track {
-      border-radius: 10px;
-      background-color: #f2f2f2;
-    }
-    /*定义滑块 内阴影+圆角*/
-    &::-webkit-scrollbar-thumb {
-      border-radius: 10px;
-      background-color: #dbdcdc;
-    }
-    .top-wrap {
-      box-sizing: border-box;
-      padding: 8px 8px 0;
-      .video-record {
-        margin-top: 8px;
-        padding: 16px;
-        background: #f6f6f6;
-        border-radius: 4px;
-        border: 1px solid rgba(213, 213, 213, 0.35);
-        box-sizing: border-box;
-        .title {
-          i {
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            background: #05c987;
-            border-radius: 100%;
-            margin-right: 8px;
-            vertical-align: middle;
-          }
-          span {
-            display: inline-block;
-            max-width: calc(100% - 16px);
-            color: #252529;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            vertical-align: middle;
-          }
-        }
-        .content {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding-left: 16px;
-          color: #828894;
-          .add-chat {
-            padding: 6px 16px;
-            border-radius: 20px;
-            border: 1px solid #05c987;
-            color: #05c987;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-    .list-wrap {
-      margin-bottom: -1px;
-      overflow: hidden;
-      .list-item {
-        display: flex;
-        align-items: center;
-        padding: 15px 8px;
-        box-sizing: border-box;
-        border-bottom: 1px solid #f0f0f5;
-        .left-icon {
-          width: 48px;
-          height: 48px;
-          border-radius: 100%;
-          margin-right: 8px;
-          img {
-            display: inline-block;
-            width: 100%;
-            height: 100%;
-            border-radius: 100%;
-          }
-        }
-        .right-wrap {
-          flex: 1;
-          max-width: calc(100% - 56px);
-          color: #828894;
-          .right-title {
-            max-width: 100%;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            color: #212121;
-            font-size: 16px;
-            line-height: 26px;
-            margin-bottom: 4px;
-          }
-          .right-content {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 14px;
-            color: rgba(33, 33, 33, 0.6);
-            line-height: 20px;
-            img {
-              width: 16px;
-              height: 16px;
-              vertical-align: middle;
-            }
-            span {
-              margin: 0 4px;
-            }
-          }
-          &.chat-cancel {
-            color: #fd4f4f;
-            .right-content,
-            .right-title {
-              color: #fd4f4f;
-            }
-          }
-        }
-      }
-    }
-  }
-  .no-data {
-    width: 100%;
-    height: calc(100% - 55px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #828894;
-    font-size: 16px;
-  }
-}
-</style>
+<template>
+  <div class="videoVoiceList-page">
+    <div class="header" @click="closeVideoList">
+      <p>{{ listTitle }}</p>
+      <a-icon type="down" />
+    </div>
+    <div class="videoVoiceList-container" v-if="!noData">
+      <div class="top-wrap" v-if="videoRecord.length">
+        <template v-for="(item, index) in videoRecord">
+          <div :key="index" class="video-record">
+            <div class="title">
+              <i></i>
+              <span>
+                {{ videoName(item, item.caller && item.caller.name) }}
+              </span>
+            </div>
+            <div class="content">
+              <span>{{ handleGoing(item) }}</span>
+              <span class="add-chat" @click="handleVideoEnter(item)">
+                加入通话
+              </span>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div class="list-wrap" v-if="videoVoiceList.length">
+        <template v-for="(item, index) in videoVoiceList">
+          <div :key="index" class="list-item">
+            <div class="left-icon">
+              <img :src="item.portrait ? item.portrait : require('../img/customer.png')" alt="" />
+            </div>
+            <div class="right-wrap" :class="{ 'chat-cancel': item.kind == 2 && item.status == 3 }">
+              <div class="right-title">
+                {{ videoName(item, item.callerName) }}
+              </div>
+              <div class="right-content">
+                <div>
+                  <img :src="require(`../img/${formatCallImg(item)}.png`)" alt="" />
+                  <span>{{ item.mode == 1 ? '语音' : '视频' }}</span>
+                  <template v-if="item.createdTime">
+                    {{ formatDate(item.createdTime) }}
+                  </template>
+                </div>
+                <span v-if="item.duration">
+                  {{ formatSeconds(item.duration) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+    <div class="no-data" v-if="noData">无历史数据</div>
+  </div>
+</template>
+<script>
+import { mapGetters, mapActions } from '../store/helper';
+import vexutils from '@/utils/vexutils';
+import { Icon } from 'ant-design-vue';
+
+export default {
+  name: 'VideoVoiceList',
+  inject: ['store'],
+  components: {
+    [Icon.name]: Icon
+  },
+  data() {
+    return {
+      noData: false
+    };
+  },
+
+  computed: {
+    // videoRecord
+    ...mapGetters(['assemblyId', 'assemblySetting', 'videoRecord', 'showVideo', 'showAudio', 'multiVideoShow', 'videoVoiceList', 'videoData']),
+    listTitle() {
+      let { serverInfo = [] } = this.assemblySetting?.serverSetting || {};
+      let matchItem = serverInfo.find(v => v.key === 'videoCallTitle');
+      return matchItem?.value || '语音历史';
+    },
+    videoName() {
+      return function(item, name) {
+        if (item.type == 1) return name;
+        return `${name} 发起的${item.mode == 1 ? '语音' : '视频'}通话`;
+      };
+    },
+    handleGoing() {
+      return function(item) {
+        if (item.isCaller == 1) {
+          if (item.caller.status === 3) return '进行中（已加入）';
+          return '进行中';
+        } else {
+          if (item.callee.status === 3) return '进行中（已加入）';
+          return '进行中';
+        }
+      };
+    },
+    formatCallImg() {
+      return function(item) {
+        if (item.kind == 1) {
+          return 'callout';
+        }
+        if (item.status == 3) {
+          return 'callin_cancel';
+        }
+        return 'callin';
+      };
+    }
+  },
+  watch: {
+    videoRecord: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val.length) {
+          this.noData = false;
+        }
+      }
+    }
+  },
+  // 生命周期
+  created() {
+    this.init();
+  },
+  mounted() {},
+
+  // 方法
+  methods: {
+    ...mapActions(['getVideoHistoryList']),
+    async init() {
+      try {
+        await this.getVideoHistoryList();
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    handleVideoEnter(item) {
+      if (this.showVideo || this.showAudio || this.multiVideoShow) {
+        if (this.videoData.recordId && item.id === this.videoData.recordId) {
+          return;
+        } else {
+          return this.$message.warning('你当前有正在进行的通话，请退出当前通话后重试。');
+        }
+      }
+      this.$emit('handleVideoEnter', item);
+    },
+    closeVideoList() {
+      this.$emit('closeVideoList', false);
+    },
+    formatDate(date) {
+      return vexutils.formatDate(date, true);
+    },
+    formatSeconds(date) {
+      var theTime = Number(date); // 需要转换的时间秒
+      var theTime1 = 0; // 分
+      var theTime2 = 0; // 小时
+      var theTime3 = 0; // 天
+      if (theTime > 60) {
+        theTime1 = theTime / 60;
+        theTime = theTime % 60;
+        if (theTime1 > 60) {
+          theTime2 = theTime1 / 60;
+          theTime1 = theTime1 % 60;
+          if (theTime2 > 24) {
+            // 大于24小时
+            theTime3 = theTime2 / 24;
+            theTime2 = theTime2 % 24;
+          }
+        }
+      }
+      var result = '';
+      if (theTime > 0) {
+        result = '' + parseInt(theTime) + '秒';
+      }
+      if (theTime1 > 0) {
+        result = '' + parseInt(theTime1) + '分' + result;
+      }
+      if (theTime2 > 0) {
+        result = '' + parseInt(theTime2) + '小时' + result;
+      }
+      if (theTime3 > 0) {
+        result = '' + parseInt(theTime3) + '天' + result;
+      }
+      return result;
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.videoVoiceList-page {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  .header {
+    display: flex;
+    align-items: center;
+    height: 45px;
+    line-height: 45px;
+    padding: 0 22px;
+    border-bottom: 1px solid #f0f0f5;
+    cursor: pointer;
+    p {
+      margin-bottom: 0;
+      margin-right: 8px;
+      font-size: 16px;
+      color: #252529;
+    }
+  }
+  .videoVoiceList-container {
+    width: 100%;
+    height: calc(100% - 45px);
+    box-sizing: border-box;
+    overflow-y: auto;
+    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 10px;
+      background-color: #f2f2f2;
+    }
+    /*定义滚动条轨道 内阴影+圆角*/
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background-color: #f2f2f2;
+    }
+    /*定义滑块 内阴影+圆角*/
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background-color: #dbdcdc;
+    }
+    .top-wrap {
+      box-sizing: border-box;
+      padding: 8px 8px 0;
+      .video-record {
+        margin-top: 8px;
+        padding: 16px;
+        background: #f6f6f6;
+        border-radius: 4px;
+        border: 1px solid rgba(213, 213, 213, 0.35);
+        box-sizing: border-box;
+        .title {
+          i {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            background: #05c987;
+            border-radius: 100%;
+            margin-right: 8px;
+            vertical-align: middle;
+          }
+          span {
+            display: inline-block;
+            max-width: calc(100% - 16px);
+            color: #252529;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            vertical-align: middle;
+          }
+        }
+        .content {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-left: 16px;
+          color: #828894;
+          .add-chat {
+            padding: 6px 16px;
+            border-radius: 20px;
+            border: 1px solid #05c987;
+            color: #05c987;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+    .list-wrap {
+      margin-bottom: -1px;
+      overflow: hidden;
+      .list-item {
+        display: flex;
+        align-items: center;
+        padding: 15px 8px;
+        box-sizing: border-box;
+        border-bottom: 1px solid #f0f0f5;
+        .left-icon {
+          width: 48px;
+          height: 48px;
+          border-radius: 100%;
+          margin-right: 8px;
+          img {
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+            border-radius: 100%;
+          }
+        }
+        .right-wrap {
+          flex: 1;
+          max-width: calc(100% - 56px);
+          color: #828894;
+          .right-title {
+            max-width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            color: #212121;
+            font-size: 16px;
+            line-height: 26px;
+            margin-bottom: 4px;
+          }
+          .right-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 14px;
+            color: rgba(33, 33, 33, 0.6);
+            line-height: 20px;
+            img {
+              width: 16px;
+              height: 16px;
+              vertical-align: middle;
+            }
+            span {
+              margin: 0 4px;
+            }
+          }
+          &.chat-cancel {
+            color: #fd4f4f;
+            .right-content,
+            .right-title {
+              color: #fd4f4f;
+            }
+          }
+        }
+      }
+    }
+  }
+  .no-data {
+    width: 100%;
+    height: calc(100% - 55px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #828894;
+    font-size: 16px;
+  }
+}
+</style>