cnhis-design-vue 0.2.63-beta → 0.3.1-beta

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

@@ -1,601 +0,0 @@
-<template>
-  <div class="chat-history">
-    <div class="online-message" ref="message-wrapper" v-infinite-scroll="handleInfiniteOnLoad">
-      <template v-for="(item, index) in msgList">
-        <div :key="index">
-          <p v-if="isNeedShowTime(item, index)" class="message-time">
-            {{ formatDate(item.createdTime) }}
-          </p>
-          <div v-if="item.recallFlag" style="margin: 10px 0;">
-            {{ i18nText('1.9.367') }}
-          </div>
-          <div v-if="!item.recallFlag" class="message-item" :class="getMessageItemClass(item)">
-            <template>
-              <img src="../img/system_message.png" class="avatar" style="cursor: pointer;" width="40" height="40" v-if="item.content.source === 1" />
-              <div v-else class="first-name">
-                {{ item.fromName.slice(0, 1) }}
-              </div>
-            </template>
-            <div>
-              <div class="content-wrap" v-if="item.content.type === 0">
-                <span class="right-time">
-                  {{ formatDate(item.createdTime || item.sendTime, true) }}
-                </span>
-                <p class="content" v-html="item.content.content"></p>
-              </div>
-              <div v-else-if="item.content.type === 1" style="margin-bottom: 20px;" class="upload-image content-wrap">
-                <span class="right-time">
-                  {{ formatDate(item.createdTime || item.sendTime, true) }}
-                </span>
-                <MsgPicture style="max-height: 250px;" :image="item.content.content" @click="showImageDetail(item.content.content)" />
-              </div>
-              <div class="content-wrap" v-else-if="item.content.type === 2">
-                <span class="right-time">
-                  {{ formatDate(item.createdTime || item.sendTime, true) }}
-                </span>
-                <div class="content">
-                  <img style="width:16px;" src="../img/video_consult.png" />
-                  {{ item.content.content }}
-                </div>
-              </div>
-              <div class="content-wrap" v-else-if="item.content.type === 6">
-                <span class="right-time">
-                  {{ formatDate(item.createdTime || item.sendTime, true) }}
-                </span>
-                <div class="voice-bg content" @click.prevent.stop="playAudio(item)">
-                  <img v-if="item.content.isPlay" :src="require('../img/audio-play.gif')" alt="" />
-                  <img v-else :src="require('../img/audio-new.png')" alt="" />
-                  <span class="voice-text" :style="AudioStyle(item)"> {{ item.content.duration || 1 }}" </span>
-                </div>
-                <!-- <p class="content">
-                  <span
-                    v-for="(item, index) in item.content.content"
-                    :key="index"
-                    class="bot-message"
-                    >{{ item }}</span
-                  >
-                </p> -->
-              </div>
-              <template v-else-if="item.content.type === 4">
-                <div v-if="isSystemMsg(item)" class="system-msg">
-                  <a-icon class="system-icon" theme="filled" type="exclamation-circle" />
-                  <div>
-                    <span v-html="getSystemMsgContent(item)"></span>
-                    <span class="system-btn" v-for="(btn, index) in getTemplateButton(item)" @click="handleTemplateButton(btn)" :key="index">{{ btn.title }}</span>
-                  </div>
-                </div>
-                <msg-describe v-else-if="isDescribeMsg(item)" :item="item" />
-                <div v-else class="content-wrap">
-                  <MsgPrescription :data="item" :isServer="true" @handleTemplateDetail="handleTemplateDetail" @handleTemplateButton="handleTemplateButton" />
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-      </template>
-      <a-spin v-if="loading" class="loading-icon" />
-    </div>
-    <!-- 图片预览 -->
-    <viewer class="viewer" ref="viewer" :images="currentImage" @inited="inited" style="display: none">
-      <template slot-scope="scope">
-        <img v-for="src in scope.images" :src="src" :key="src" />
-      </template>
-    </viewer>
-    <div style="display:none;">
-      <audio controls autoplay ref="audio" preload="auto" crossOrigin="anonymous" media-player="audioPlayer" :src="curAudioUrl" @ended="audioEnd" @error="audioError"></audio>
-    </div>
-  </div>
-</template>
-
-<script>
-import MsgDescribe from '../components/msg-describe';
-import MsgPicture from '../components/msg-picture';
-import MsgPrescription from '../components/msg-prescription';
-import { component as Viewer } from "v-viewer";
-import 'viewerjs/dist/viewer.css';
-import InfiniteScroll from 'vue-infinite-scroll';
-import vexutils from '@/utils/vexutils';
-import fetch from '@/utils/chatFetch';
-import { Icon, Spin } from 'ant-design-vue';
-
-export default {
-  name: 'c-chat-history',
-  components: {
-    [Icon.name]: Icon,
-    [Spin.name]: Spin,
-    Viewer,
-    MsgPrescription,
-    MsgPicture,
-    MsgDescribe
-  },
-  data() {
-    return {
-      msgList: [],
-      historySessionId: '',
-      clientId: '',
-      loading: false,
-      visible: false,
-      currentImage: [],
-      curAudioUrl: '',
-      lastAudioItem: null
-    };
-  },
-  props: ['params', 'i18nText'],
-  computed: {
-    AudioStyle() {
-      return function(item) {
-        let { duration = 1 } = item.content;
-        if (!duration) {
-          duration = 1;
-        }
-        let curWidth = (+duration / 60) * 400;
-        return {
-          width: curWidth < 13 ? 13 : curWidth + 'px'
-        };
-      };
-    }
-  },
-  created() {
-    this.handleInfiniteOnLoad();
-  },
-  methods: {
-    getMessageItemClass(item) {
-      return {
-        right: item.senderFlag === 2,
-        left: item.senderFlag === 1 || item.content.source === 1
-      };
-    },
-    /* 向上滚动刷新 */
-    handleInfiniteOnLoad() {
-      this.loading = true;
-      let id = this.msgList[0] && this.msgList[0].id;
-      // let params = {
-      //   assemblyId: "1227514588661026816",
-      //   userId: 180114,
-      //   userType: "JZR",
-      //   orgId: 5522,
-      //   sessionId: "1336845424006537216",
-      //   source: 1,
-      //   serviceId: 172,
-      //   serviceType: "STAFF"
-      // };
-      return fetch
-        .get('/chat/service/getHistoryRecord', {
-          params: {
-            id,
-            ...this.params
-          }
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            this.loading = false;
-            if (id && data.list.length === 0) {
-              return '没有更多消息了';
-            }
-            this.msgList = [...data.list, ...this.msgList];
-            this.currentImage = this.msgList
-              .filter(v => !v.recallFlag && v.content.type == 1)
-              ?.map(v => v.content?.content);
-            this.handleScrollTo('current');
-          }
-        });
-    },
-
-    showImageDetail(src) {
-      // this.currentImage = vexutils.imgs2imgArr(src);
-      this.$viewer.view(this.currentImage.findIndex(v => v === src));
-      this.$viewer.show();
-    },
-    inited(viewer) {
-      this.$viewer = viewer;
-    },
-
-    /* 滚动条定位 */
-    handleScrollTo(scrollTo) {
-      let target = this.$refs['message-wrapper'];
-      if (!target) return;
-      let scrollHeight = target?.scrollHeight;
-      this.$nextTick().then(() => {
-        let top = target.scrollHeight;
-        if (scrollTo === 'current') {
-          top = target.scrollHeight - scrollHeight;
-        }
-        target.scrollTo({
-          left: 0,
-          top,
-          behavior: 'instant'
-        });
-      });
-    },
-
-    /**
-     * 是否需要显示时间
-     */
-    isNeedShowTime(item, index) {
-      const curMsgTime = item.createdTime || new Date().getTime();
-      let duration = 3 * 60 * 1000;
-      let lastMsgTime;
-      if (index == 0) {
-        lastMsgTime = 0;
-      } else {
-        lastMsgTime = this.msgList[index - 1].createdTime;
-      }
-      if (Number(curMsgTime) - Number(lastMsgTime) > duration) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    formatDate(date) {
-      return vexutils.formatDate(date, true);
-    },
-    getTemplateTitle(item) {
-      let content = JSON.parse(item.content.content);
-      return content.title;
-    },
-    showArrow(item) {
-      let content;
-      if (vexutils.isJSON(item.content.content)) {
-        content = JSON.parse(item.content.content);
-      } else {
-        content = item.content.content;
-      }
-      let { address } = content.customerSetting || {};
-      if (!address) return false;
-      return true;
-    },
-    getTemplateTitleIcon(item) {
-      let content = JSON.parse(item.content.content);
-      return content.icon;
-    },
-    getTemplateContent(item) {
-      let content = JSON.parse(item.content.content);
-      let array = content.content.split('##');
-      array = array.map(item => `<div>${item}</div>`);
-      return array.join('');
-    },
-    handleTemplateDetail(item) {
-      let content = JSON.parse(item.content.content);
-      let { targetType, address, params } = content.serverSetting;
-      if (!address) return;
-      if (targetType === 'LINK_ADDRESS') {
-        let urlParams = [];
-        params.forEach(({ p_name, p_value }) => {
-          urlParams.push(`${p_name}=${p_value}`);
-        });
-        if (address.includes('?')) {
-          address += `&${urlParams.join('&')}`;
-        } else {
-          address += `?${urlParams.join('&')}`;
-        }
-        window.open(address);
-      }
-    },
-    getTemplateButton(item) {
-      let content = JSON.parse(item.content.content);
-      return content.serverSetting.toolbar_button;
-    },
-    playAudio(item) {
-      let { content = '' } = item?.content || {};
-      if (!content) return;
-      if (this.lastAudioItem && (item.id !== this.lastAudioItem.id || item.createdTime !== this.lastAudioItem.createdTime)) {
-        this.$set(this.lastAudioItem.content, 'isPlay', false);
-      }
-
-      this.lastAudioItem = item;
-      this.$set(item.content, 'isPlay', !item.content.isPlay);
-      this.$nextTick(() => {
-        this.curAudioUrl = content;
-        let audioRef = this.$refs['audio'];
-        if (!audioRef) return;
-        audioRef.load();
-        setTimeout(() => {
-          if (item.content.isPlay) {
-            let playPromise = audioRef.play();
-            if (playPromise !== undefined) {
-              playPromise
-                .then(() => {
-                  audioRef.play();
-                })
-                .catch(() => {
-                  console.log('播放错误');
-                  this.$message.error('语音播放错误');
-                  this.audioEnd();
-                });
-            }
-          } else {
-            audioRef.pause();
-            this.curAudioUrl = '';
-          }
-        });
-      });
-    },
-    audioEnd() {
-      if (!this.lastAudioItem) return;
-      this.$set(this.lastAudioItem.content, 'isPlay', false);
-    },
-    audioError(e) {
-      console.log(e);
-    },
-    getSystemMsgContent(item) {
-      let content = JSON.parse(item.content.content);
-      let array = [];
-      try {
-        array = content.content.split('##');
-      } catch {
-        console.log(content, 'error');
-      }
-      return array.join('<br>');
-    },
-    handleTemplateButton(btn) {
-      let { targetType, address, params } = btn;
-      if (targetType === 'LINK_ADDRESS') {
-        let urlParams = [];
-        params.forEach(({ p_name, p_value }) => {
-          urlParams.push(`${p_name}=${p_value}`);
-        });
-        if (address.includes('?')) {
-          address += `&${urlParams.join('&')}`;
-        } else {
-          address += `?${urlParams.join('&')}`;
-        }
-        window.open(address);
-      }
-    },
-    isSystemMsg(item) {
-      let content = JSON.parse(item.content.content);
-      return content.styleId == '2';
-    },
-    isDescribeMsg(item) {
-      const content = JSON.parse(item.content.content);
-      return content.styleId == '3';
-    }
-  },
-  directives: {
-    InfiniteScroll
-  }
-};
-</script>
-
-<style lang="less" scoped>
-@import '../style/emoji.css';
-@import '../style/message.mixin.less';
-.chat-history {
-  .createMessageStyle(#ebebeb, @primary-color);
-  height: 100%;
-  // position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow-x: hidden;
-  .broadcast-wrap {
-    height: 30px;
-    text-align: center;
-    font-size: 14px;
-    background-color: #fffbe8;
-    /deep/ .carousel-item {
-      display: inline-flex !important;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 30px;
-      text-align: center;
-      &.has-link {
-        color: #ed6a0c;
-        cursor: pointer;
-      }
-      span {
-        display: inline-block;
-        max-width: calc(100% - 30px);
-        margin-left: 4px;
-      }
-    }
-  }
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-  .loading-icon {
-    position: absolute;
-    top: 0;
-    left: 50%;
-  }
-}
-.online-message {
-  flex: 1;
-  // height: 608px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 10px 22px;
-  text-align: center;
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-  .message-time {
-    display: inline-block;
-    color: #666;
-    font-size: 14px;
-    border-radius: 4px;
-    padding: 4px;
-    margin: 0 auto;
-    margin-bottom: 16px;
-  }
-  > div {
-    margin-bottom: 16px;
-  }
-  .message-item {
-    display: flex;
-    .right-time {
-      display: none;
-      position: absolute;
-      top: -16px;
-      left: 10px;
-      font-size: 12px;
-      color: #b0b1b1;
-      white-space: nowrap;
-    }
-    .content-wrap {
-      padding: 0 10px;
-      text-align: left;
-      position: relative;
-
-      &:hover {
-        .right-time {
-          display: block;
-        }
-      }
-    }
-    .voice-bg {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      img {
-        mix-blend-mode: difference;
-        display: inline-block;
-        width: 14px;
-      }
-      .voice-text {
-        display: inline-block;
-      }
-      span {
-        margin-left: 8px;
-      }
-    }
-    .content {
-      max-width: 500px;
-      padding: 10px;
-      border-radius: 0px 8px 8px 8px;
-      line-height: 20px;
-      font-size: 14px;
-      background: #ebebeb;
-      color: #000;
-      text-align: left;
-      word-wrap: break-word;
-      /deep/ p {
-        margin: 0;
-      }
-    }
-    .upload-image {
-      margin-left: 8px;
-    }
-    &.right {
-      flex-direction: row-reverse;
-      .right-time {
-        left: unset;
-        right: 10px;
-        top: -20px;
-      }
-      .content-wrap {
-        text-align: right;
-      }
-      .content {
-        background-color: #e7f0ff;
-        border-radius: 8px 0px 8px 8px;
-        border: 1px solid #e7f0ff;
-        box-sizing: border-box;
-      }
-      .upload-image {
-        margin-right: 8px;
-      }
-      .voice-bg {
-        flex-direction: row-reverse;
-        align-self: flex-end;
-        img {
-          transform: rotateY(180deg);
-        }
-        span {
-          margin-left: 0;
-          margin-right: 8px;
-          text-align: right;
-        }
-      }
-    }
-  }
-  .msg-prescription {
-    border-top-left-radius: 0;
-  }
-  .bot-message {
-    display: block;
-    text-decoration: underline;
-    color: #5585f5;
-    cursor: pointer;
-  }
-  .session-end {
-    display: flex;
-    justify-content: center;
-    margin-top: 15px;
-    margin-bottom: 25px;
-    .end {
-      display: flex;
-      justify-content: center;
-      width: 30%;
-      height: 36px;
-      line-height: 36px;
-      background-color: #e8e8e8;
-      color: #939393;
-      font-size: 14px;
-      border-radius: 18px;
-    }
-  }
-  .menu-tip {
-    font-size: 20px;
-    align-self: flex-end;
-    margin-bottom: 8px;
-    background: #f6f6f6;
-    height: 25px;
-    line-height: 25px;
-    width: 30px;
-    border-radius: 4px;
-  }
-  .menu-item {
-    :hover {
-      background: red;
-    }
-  }
-  .menu-main {
-    width: 100px;
-    background-color: #101627;
-    color: #fff;
-    text-align: left;
-    border-radius: 6px;
-    padding: 10px 0;
-    z-index: 3000;
-    cursor: pointer;
-    .menu-item {
-      padding: 0 10px;
-    }
-    .menu-item:hover {
-      background-color: #efefef;
-      color: #000;
-    }
-  }
-  .first-name {
-    width: 40px;
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    background: #5585f5;
-    color: #fff;
-    border-radius: 100%;
-    font-size: 18px;
-  }
-}
-.system-msg {
-  text-align: left;
-  line-height: 20px;
-  word-wrap: break-word;
-  display: flex;
-  justify-content: center;
-  .system-icon {
-    font-size: 18px;
-    color: #ffc200;
-    vertical-align: middle;
-    margin-right: 10px;
-    margin-top: 1px;
-  }
-  .system-btn {
-    color: @primary-color;
-    margin-left: 8px;
-    cursor: pointer;
-    text-decoration: underline;
-  }
-}
-</style>