common-chatbox
v1.2.7
Published
Common chatbox component
Downloads
368
Readme
ChatBox组件
安装依赖
npm install common-chatbox
开始使用
main.js文件中引入并注册
import ChatBox from 'common-chatbox';
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
@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>