七鱼快速入门开发指南： qiyukf.com/docs/guide/…
1、进入网易七鱼官网：qiyukf.com/ 点击免费试用 - 注册账号
2、进入服务中心 - 设置 - 在线接入，把以下接入代码放到vue项目中的public文件夹下的index.html文件中的body标签中（接入代码只有放在body标签中才可生效）推荐使用异步加载方式
方法一：
3、在utils文件夹下新增文件 qiyukefu.js
// 引入需要传递的用户信息的js文件
import user from "@/common/js/user.js
export default class {
//初始化方法
static init() {
window.ysf("onready", function () {
console.log("init")
});
}
// 配置及传参
static config() {
window.ysf("config", {
uid: user.getUserId(), //必传参数
data:JSON.stringify([
{"key":"real_name", "value": user.getRealName()},
{"index":0, "key":"companyCode", "label":"公司代码", "value": user.getCompanyCode()},
{"index":1, "key":"companyAbbr", "label":"公司简称", "value": user.getCompanyAbbr()}
]), //data里的参数非必传，视项目需求而定
success: function(){
// todo 成功后的回调
},
});
}
//调用ysf("open")方法打开聊天窗口
static open() {
window.ysf("open")
}
}
4、将第三步的js文件引入到main.js，挂载到全局的原型链上
import qiyukefu from './utils/qiyukefu'
Vue.prototype.qiyukefu = qiyukefu
5、在需要触发聊天窗口的vue页面中的生命周期函数中调用初始化及配置方法
beforeMount() {
this.qiyukefu.init();
},
mounted(){
this.qiyukefu.config();
},
methods:{
//页面中触发聊天窗口的方法
clickIMButtom(){
this.qiyukefu.open()
}
}
暂时只有这些，如果后续测试过程中出现什么问题我再过来更正补充一下 欢迎大佬指教～～～
方法2：
在需要接入七鱼客服的组件里直接调用window.ysf相关方法
3、在methods里面定义方法 judgePicture、initConfig
judgePicture(){
window.ysf('onready', (()=>{ //准备sdk
window.ysf('onunread', ((res)=>{ //监听未读消息
if(res.total == 0){
this.showImgFlag = require('@/assets/kefu.png')
}else{
this.showImgFlag = require('@/assets/unreaddot.png')
}
})
)})
);
initConfig(){
window.ysf("config", {
uid: this.$user.getUserId(),
name: this.$user.getRealName(),
data: JSON.stringify([
{ "key": "real_name", "value": this.$user.getRealName() },
{ "index": 0, "key": "account", "label": "公司代码", "value": this.$user.getCompanyCode() },
{ "index": 5, "key": "reg_date", "label": "公司简称", "value": this.$user.getCompanyAbbr() },
]),
success: function () {
}
});
},
4、在生命周期函数中准备配置文件及获取未读消息
beforeMount() {
this.initConfig()
},
mounted() {
//this.initConfig()
this.judgePicture()
},
5、在组件中需要触发聊天窗口的方法直接调用window.ysf("open")
clickIM() {
window.ysf("open") //打开聊天窗口
window.ysf('getUnreadMsg'); //获取未读消息
},
6、在页面设置定时器监听未读消息
activated() {
this.timerKefu = setInterval(() => {
setTimeout(() => {
this.judgePicture()
}, 0)
},100)
},
