dezhu-icall-vue

得助智能 iCall 外呼组件 - Vue 封装

安装

npm install dezhu-icall-vue

使用

<template>
  <div>
    <DeZhuICall
      ref="icall"
      :server-url="serverUrl"
      :token="token"
      :visible="false"
      @ready="onReady"
      @error="onError"
      @offline="onOffline"
      @callFailed="onCallFailed"
      @hangup="onHangup"
      @peerHangup="onPeerHangup"
    />
    <button @click="makeCall" :disabled="!isReady">拨打电话</button>
  </div>
</template>

<script>
import { DeZhuICall } from 'dezhu-icall-vue'

export default {
  components: { DeZhuICall },
  data() {
    return {
      serverUrl: '',
      token: '',
      isReady: false
    }
  },
  async mounted() {
    const config = await fetch('/api/call-config').then(r => r.json())
    this.serverUrl = config.serverUrl
    this.token = config.token
  },
  methods: {
    onReady() {
      this.isReady = true
    },
    onError(error) {
      console.error('错误:', error.message)
    },
    onOffline() {
      console.log('已离线，正在重连...')
    },
    onCallFailed(reason) {
      alert('呼叫失败: ' + reason)
    },
    onHangup(params) {
      console.log('通话结束:', params.isSelfHangup ? '自己挂断' : '对方挂断')
    },
    onPeerHangup() {
      console.log('对方已挂断')
    },
    async makeCall() {
      try {
        await this.$refs.icall.call('13800138000')
      } catch (error) {
        alert(error.message)
      }
    }
  }
}
</script>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | serverUrl | String | '' | 服务器地址 | | token | String | '' | 认证 Token | | autoInit | Boolean | true | 参数准备好后自动初始化 | | visible | Boolean | false | 是否显示拨号盘界面 |

事件

| 事件名 | 说明 | 参数 | |--------|------|------| | ready | 初始化完成 | - | | error | 错误 | Error | | offline | 连接断开/离线 | - | | statusChange | 状态变化 | status, params | | dialing | 正在拨号 | params | | ringing | 响铃中 | params | | connected | 通话接通 | params | | hangup | 通话挂断 | params | | peerHangup | 对方挂断 | params | | callFailed | 呼叫失败 | reason |

方法

| 方法名 | 说明 | 参数 | |--------|------|------| | init() | 手动初始化 | - | | call(phoneNumber) | 拨打电话 | phoneNumber: String | | hangup() | 挂断电话 | - |

特性

• 防重复初始化 - checkAndInit() 确保不会创建多个拨号盘
• 自动重连 - 离线后自动重连（5秒间隔）
• 页面可见性监听 - 切换回页面后自动检查并重连
• 拨号盘显示控制 - visible 属性控制是否显示拨号盘