common-chatbox-v3

ChatBox组件

安装依赖

npm install common-chatbox-v3

开始使用

main.js文件中引入并注册
import ChatBox from 'common-chatbox-v3';
import 'common-chatbox-v3/dist/style.css';
Vue.use(ChatBox);

参数说明

isHedgehood: 是否是Hedgehood
sendAvatar: 头像链接，如果有就传递
unreadCount: 未读消息数量（根据socket实时变化）
token: 当前系统的token
profileUrl：profile请求相关Url
baseUrl：Ticket系统的baseUrl
translateLists: 翻译列表
ticketAdd: 是否有新消息（根据socket实时变化）
ticketId: ticketId
inHelpCenter: 是否是在Help Center页面，如果是，则不会打开chatbox
currentPosition: 当前Icon的布局方式（只有在Mobile端有效，默认fixed布局）
@showMask: 切换显示Mask
@toHelpCenter: 跳转到Help Center界面
@resetUnreadCount: 点击Icon重置未读消息数

使用方法

<template>
  <chat-box v-if="show" :isHedgehood="isHedgehood" :sendAvatar="sendAvatar" :unreadCount="unreadCount" :token="tokens" :profileUrl="profileUrl" :baseUrl="baseUrl" :translateLists="translateLists" @showMask="showMask" :ticketAdd="ticketAdd" :ticketId="ticketId" :inHelpCenter="inHelpCenter" @toHelpCenter="toHelpCenter" @resetUnreadCount="resetUnreadCount"></chat-box>
</template>

<script>
export default {
  components: {
    Conversation,
  },
  data() {
    return {
       baseUrl: process.env.VUE_APP_TICKET_URL,
      profileUrl: process.env.VUE_APP_PROFILE_URL,
      tokens: getIdToken(),
      translateLists: [],
      show: true,
      record: null,
      isHedgehood: false,
      sendAvatar: '',
      unreadCount: 0,
      ticketAdd: 0,
      ticketCurrentId: 0,
      ticketId: 0,
      inHelpCenter: false,
    };
  },
  created() {
    // this.lists = this.lists.reverse();
    this.values =
      'This customer called support because he had an issue with signing in. I helped him and it’s all good now.';
    this.getLists();
  },
  methods: {
    toHelpCenter() {
      this.$router.push({ path: '/' });
    },
    resetUnreadCount() {
      this.unreadCount = 0;
    },
    showMask(value) {
      this.$store.commit('SHOW_MASK', value);
    },
    async getLanuage() {
      let params = {
        tab: 'ticket',
        language: window.localStorage.getItem('language') ? window.localStorage.getItem('language') : 'English',
      }
      await getLanguageJson(params).then(res => {
        this.show = true;
        if (res.code === 200) {
          let result = JSON.parse(new Buffer.from(res.data, 'base64'));
          this.translateLists = result;
        }
      }).catch(()=>{
        this.show = true;
      })
    }
  },
};
</script>