BDSaas BC

Appearance

On this page

拨号条 ​

拨号条，集成了完整的交互，包括拨号、拨号后的动画、拨号后的结果展示等，并提供事件。

效果预览 ​

示例代码 ​

vue
<script setup lang="ts">
import { BcDialBar } from 'bdsaas-bc'
import { ref } from 'vue'

defineOptions({
  name: 'DialBarDemo'
})

const dialBar = ref()
const dialBar2 = ref()
const callType = ref('FS')
const status = ref('NOT_STARTED')

function todoHandler(val: any) {
  console.log('todo的数据：', val)
}

function hangUpHandler(type: string) {
  console.log('挂断电话：', type)
}

// 拨打电话
function callHandler() {
  console.log('拨打电话')
  status.value = 'DIALING'
}

const configText = ref('')

function getConfigText() {
  configText.value = JSON.stringify(dialBar.value.getConfig(), null, 2)
}

function reset() {
  dialBar.value.resetConfig()
}

function openHandler() {
  dialBar2.value.open()
}
function closeHandler() {
  dialBar2.value.close()
}
</script>

<template>
  <div style="padding: 200px;">
    <button
      class="beautify"
      @click="callType = callType === 'FS' ? 'CALLBACK' : 'FS'"
    >
      当前 {{ callType }} 切换为{{ callType === 'FS' ? 'CALLBACK' : 'FS' }}
    </button>
    <br />
    <button class="beautify" @click="getConfigText">获取 config 数据</button>
    <button class="beautify" @click="reset">重置 config</button>
    <pre v-html="configText"></pre>
    <button class="beautify" @click="status = 'CALLING'">
      通话中{{ status }}
    </button>
    <BcDialBar
      ref="dialBar"
      :callType="callType"
      v-model:status="status"
      :options="{
        phone: 18156224704,
        number: 2,
        todo: 'todo-id-001'
      }"
      @todo="todoHandler"
      @call="callHandler"
      @hang-up="hangUpHandler"
    >
      <button class="beautify">拨打电话{{ status }}</button>
    </BcDialBar>
    <div style="height: 200px;">
      <p>DiaBar 组件测试</p>
      <p>DiaBar 组件测试</p>
      <p>DiaBar 组件测试</p>
      <p>DiaBar 组件测试</p>
      <p>DiaBar 组件测试</p>
      <p>DiaBar 组件测试</p>
    </div>
    <BcDialBar
      ref="dialBar2"
      :callType="callType"
      v-model:status="status"
      :options="{
        phone: 18156224704,
        number: 2,
        todo: 'todo-id-001'
      }"
      @todo="todoHandler"
      @call="callHandler"
      @hang-up="hangUpHandler"
    />
    <button class="beautify" @click="openHandler">手动打开</button>
    <button class="beautify" @click="closeHandler">手动关闭</button>
  </div>
</template>

Props ​

属性名说明类型可选值默认值
options菜单数据Options——
status打电话状态string'NOT_STARTED' | 'DIALING' | 'CALLING''NOT_STARTED'
callType拨号类型string'CALLBACK' | 'FS'—
showTodo显示待办功能boolean—false

Options ​

属性名说明类型可选值默认值
phone电话号码string number——
number拨打次数number——
todo点击进行代办操作的数据any——

事件 ​

事件名说明回调参数
todo点击待办触发options.todo
call点击拨打触发—
hang-up点击挂断触发props.callType
beforeOpen拨号条打开前触发—
beforeClose拨号条关闭前触发—

方法 ​

方法名说明参数
open打开拨号条—
close关闭拨号条—
getConfig获取当前打电话的配置数据statusConfig
resetConfig重置打电话的配置数据为初始值（进行下一通电话时很有用）—
hangUp触发 hang-up 事件，并关闭拨号条（通过监听 SIP 状态调用）—

statusConfig ​

typescript
const initStatusConfig = [
  {
    label: '拨打中', // 打电话状态，拨号条上显示的文字
    status: 'DIALING', // 打电话状态，用于业务方操作逻辑
    startTime: 0, // 状态开始时间（时间戳）
    endTime: 0 // 状态结束时间（时间戳）
  },
  { label: '通话中', status: 'CALLING', startTime: 0, endTime: 0 }
]