阿里云云呼叫中心——软电话SDK前端接入

摘要：2018年十二月份的时候，我们需要基于我们的后台系统开发应急呼叫系统。一直没有总结。我对这部分也许会有很多理解不透彻的地方，望小伙伴们彼此相互学习，多多提出不足呢。技术：由于是基于我们的后来系统来实现，后台系统中使用的技术如下：vue框架vue-router 路由的相关使用axios用于前后端数据交互ElementUI组件应急呼叫系统，引入了阿里云云呼叫中心系统集成中的...

澜岚伊人

9538人浏览 · 2019-01-29 17:29:31

澜岚伊人 · 2019-01-29 17:29:31 发布

摘要：2018年十二月份的时候，我们需要基于我们的后台系统开发应急呼叫系统。一直没有总结。我对这部分也许会有很多理解不透彻的地方，望小伙伴们彼此相互学习，多多提出不足呢。

技术：由于是基于我们的后来系统来实现，后台系统中使用的技术如下：

vue框架
vue-router 路由的相关使用
axios用于前后端数据交互
ElementUI组件

应急呼叫系统，引入了阿里云云呼叫中心系统集成中的软电话SDK前端接入

需求如下：

需要全局使用云呼的功能
云呼的按钮需要根据用户权限，来确定是否显示云呼的按钮
可以获取到打进来的电话号码
可以实现平台外呼号码
当有电话呼入到平台上的时候，显示工作台弹窗
点击云呼的按钮，可以控制面板的显示与隐藏

大概思路：

（刚开始有点迷茫，不知道从何下手），具体如下：

全局引入样式和SDK
根据用户的权限控制云呼按钮的显示和隐藏
对云呼进行初始化

具体代码实现如下：

1、由于需要全局使用，在index.html中引入阿里云的SDK。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>你自己写</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="keywords" content="你自己写" />
    <meta name="description" content="" />
    <link rel="icon" href="../static/img/L_icon7.png">
    <!--sdk样式文件-->
    <link rel="stylesheet" type="text/css" href="https://g.alicdn.com/acca/workbench-sdk/0.4.7/main.min.css">
</head>
<body>
<div id="app"></div>
<!-- 阿里云云呼叫SDK -->
<script type="text/javascript" src="https://g.alicdn.com/crm/acc-phone/1.1.2/SIPml-api.js"></script>
<script type="text/javascript" src="https://g.alicdn.com/crm/acc-phone/1.1.2/index.js"></script>
<script type="text/javascript" src="https://g.alicdn.com/acca/workbench-sdk/0.4.7/workbenchSdk.min.js"></script>
</body>
</html>

2、由于需要全局使用，所以我在home.vue页写初始化的配置。

这里一开始写的时候，遇到了一个问题。一开始云呼的挂载元素写在了class='callDiv'里面了，初始化后在子组件中调用window.workbench的时候会报错，这个主要的原因是v-if=openWbShow的影响，所以我把云呼的挂载元素div放在外面了，就没这个报错了。

<template> 
    <div class="callDiv" v-if="openWbShow">
        <!-- 云呼 -->
        <div @click="openWB(openStatus)" v-if="login" class="mini-workbench">云呼</div> 
        <div class="noLogin" v-else> 
            <a href="后台给我需要登录的接口" class="noLoginWorkbench">云呼</a>
        </div>
    </div>
    <!-- 云呼挂载元素id -->
    <div id="workbench" :class="{'workbenchBorder':workbenchBorder}"></div>                                    
</template>
<script>
    export default {
        data() {
            return {
                openWbShow:false, // 云呼按钮的显示
                login:false, // 云呼按钮是登录状态
                openStatus:false, // 控制面板的显示
                workbenchBorder:false, // 面板的边框
                visibleWorkbench:false, // 来电的时候工作台弹窗的显示
            }
        },
        mounted() { 
            this.getUserInfo();
        },
        methods : {
            getUserInf(){
                let self = this;
                self.$axios.post("后台给的用户相关的接口").then((res) => {
                    // console.log(res.data);
                    // user.isCall属性来判断是给允许进入云呼叫拨打电话,0：云呼按钮不可见；1：可见云呼按钮，但不能进行外：能够实现外呼功能
                    // 判断当前用户的权限 有权限的话显示云呼按钮 
                    // 判断云呼登录状态 如果已登录 按钮蓝色 初始化initWorkBench，如果未登录的话是灰色按钮，点击去登录的界面（后台给我的阿里云的子账户登陆页面，这是后台配置好的）
                    if(res.data.data.user.isCall==null || res.data.data.user.isCall == 0{
                        self.openWbShow = false;
                    }else if(res.data.data.user.isCall == 1){
                        self.openWbShow = true; //云呼按钮可以显示
                        if(res.data.data.user.aliToken){
                            // 判断是不是有aliToken，有的话云呼可以上线，初始化
                            self.login = true;
                            self.initWorkBench();
                        }else{  
                            // 可以显示云呼按钮，但不能使得上线，上线按钮为灰色
                            self.login = false;
                        }
                    }
                });
            },
            //云呼相关初始化
            initWorkBench(){
                let self = this;
                window.workbench = new window.WorkbenchSdk({
                    dom: 'workbench', // 挂载的元素
                    width: '280px', // 面板的宽
                    height: '500px', // 面板的高
                    instanceId: '这里是你们自己申请后的id',
                    ajaxPath: '后台配置好的接口，让我写的',
                    ajaxMethod: 'post',
                    afterCallRule: 15,  // 挂机后的话后处理时间
                    header: true,
                    defaultVisible:false,
                    useOpenApiSdk: false,
                    exportErrorOfApi: true,
                    moreActionList: ['mobilePhoneAnswer', 'break', 'offline'],
                    onInit: function () {
                        // window.workbench.register(); // 想实现自动上线在此注册
                        // window.workbench.changeVisible(true); //可以实现初始化后显示面板
                    },
                    onErrorNotify: function (error) {
                        console.warn(error)
                    },
                    onCallComing: function (connid,caller,calee,contactId,skillgroupId) {
                        // connid: 通话id;caller: 主叫号码;calee:被叫号码;contactId:录音id，通话记录查询需要的字段;skillgroupId:技能组id
                        eventBus.phone = caller; //将获取的号码，先赋值
                        eventBus.$emit("callComming",caller); // 传递给非父子组件
                    },
                    onCallDialing: function (connid,caller,calee,contactId) {
                      // console.log('这里是',connid,caller,calee,contactId);
                    },
                    onStatusChange: function (code, lastCode, context) {
                      // console.log(code, lastCode, context);
                    },
                    onCallEstablish: function (connid, caller, calee, contactId) {
                      // console.log('这里是通话建立时触发的回调函数', connid, caller, calee, contactId)
                    },
                    onCallRelease: function (connid, caller, calee, contactId) {
                      // console.log('这里是通话结束时触发的回调函数', connid, caller, calee, contactId)
                    },
                    onHangUp(type){
                        // console.log("挂机");
                        eventBus.phone = ""; 
                    },
                    onStatusChange(code, lastCode, context){
                        // console.log(code, lastCode, context);
                    }
                })
            },
            // 云呼相关配置
            openWB(openStatus){
                //  点击出现云呼面板，再次点击面板消失
                if(openStatus == true){
                    window.workbench.changeVisible(false);
                    this.openStatus = false;
                    this.workbenchBorder = false;
                }else{
                    window.workbench.changeVisible(true);
                    this.openStatus = true;
                    this.workbenchBorder = true;
                }                
            }
        }
    }
</script>

实现的效果：如下

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

澜岚伊人

@qq_36275889

已为社区贡献4条内容