cnhis-design-vue 2.1.56 → 2.1.57

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

@@ -1,605 +1,605 @@
-<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="$xss(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="show(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 }}
-                  <img v-if="item.content.name" @click="openReplayVideo(item.content.name)" style="width: 20px;margin-left: 12px;cursor:pointer" src="../img/replay.png" />
-                </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="images" @inited="inited" :options="options" 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 viewerOptions from './mixins/viewerOptions';
-import InfiniteScroll from '@/directive/scroll';
-import vexutils from '@/utils/vexutils';
-import fetch from '@/utils/chatFetch';
-import { Icon, Spin } from 'ant-design-vue';
-
-export default {
-  name: 'c-chat-history',
-  mixins: [viewerOptions],
-  components: {
-    [Icon.name]: Icon,
-    [Spin.name]: Spin,
-    MsgPrescription,
-    MsgPicture,
-    MsgDescribe
-  },
-  data() {
-    this.handleInfiniteOnLoad = vexutils.debounce(this.handleInfiniteOnLoad, 200)
-    return {
-      msgList: [],
-      historySessionId: '',
-      clientId: '',
-      loading: false,
-      visible: false,
-      images: [],
-      curAudioUrl: '',
-      lastAudioItem: null,
-      loadFinished: false
-    };
-  },
-  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: {
-    openReplayVideo(url) {
-      window.open(url)
-    },
-    getMessageItemClass(item) {
-      return {
-        right: item.senderFlag === 2,
-        left: item.senderFlag === 1 || item.content.source === 1
-      };
-    },
-    /* 向上滚动刷新 */
-    handleInfiniteOnLoad() {
-      console.log('加载记录');
-      if (this.loadFinished) {
-        console.log('loadFinished')
-        return
-      }
-      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) {
-              this.loadFinished = true
-              return '没有更多消息了';
-            }
-            this.msgList = [...data.list, ...this.msgList];
-            this.images = this.msgList
-              .filter(v => !v.recallFlag && v.content.type == 1)
-              ?.map(v => v.content?.content);
-            this.handleScrollTo('current');
-          } else {
-            console.log('加载失败');
-          }
-        });
-    },
-
-    /* 滚动条定位 */
-    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>
+<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="$xss(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="show(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 }}
+                  <img v-if="item.content.name" @click="openReplayVideo(item.content.name)" style="width: 20px;margin-left: 12px;cursor:pointer" src="../img/replay.png" />
+                </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="images" @inited="inited" :options="options" 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 viewerOptions from './mixins/viewerOptions';
+import InfiniteScroll from '@/directive/scroll';
+import vexutils from '@/utils/vexutils';
+import fetch from '@/utils/chatFetch';
+import { Icon, Spin } from 'ant-design-vue';
+
+export default {
+  name: 'c-chat-history',
+  mixins: [viewerOptions],
+  components: {
+    [Icon.name]: Icon,
+    [Spin.name]: Spin,
+    MsgPrescription,
+    MsgPicture,
+    MsgDescribe
+  },
+  data() {
+    this.handleInfiniteOnLoad = vexutils.debounce(this.handleInfiniteOnLoad, 200)
+    return {
+      msgList: [],
+      historySessionId: '',
+      clientId: '',
+      loading: false,
+      visible: false,
+      images: [],
+      curAudioUrl: '',
+      lastAudioItem: null,
+      loadFinished: false
+    };
+  },
+  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: {
+    openReplayVideo(url) {
+      window.open(url)
+    },
+    getMessageItemClass(item) {
+      return {
+        right: item.senderFlag === 2,
+        left: item.senderFlag === 1 || item.content.source === 1
+      };
+    },
+    /* 向上滚动刷新 */
+    handleInfiniteOnLoad() {
+      console.log('加载记录');
+      if (this.loadFinished) {
+        console.log('loadFinished')
+        return
+      }
+      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) {
+              this.loadFinished = true
+              return '没有更多消息了';
+            }
+            this.msgList = [...data.list, ...this.msgList];
+            this.images = this.msgList
+              .filter(v => !v.recallFlag && v.content.type == 1)
+              ?.map(v => v.content?.content);
+            this.handleScrollTo('current');
+          } else {
+            console.log('加载失败');
+          }
+        });
+    },
+
+    /* 滚动条定位 */
+    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>