cnhis-design-vue 0.2.64-beta → 0.3.2-beta

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

@@ -1,348 +0,0 @@
-<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>