dezhu-icall-vue 2.0.2 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dezhu-icall-vue",
-  "version": "2.0.2",
+  "version": "4.0.0",
   "description": "得助智能 iCall 外呼组件 - Vue 封装",
   "main": "src/index.js",
   "keywords": [

package/src/DeZhuICall.vue

@@ -1,6 +1,5 @@
 <template>
-  <!-- 拨号盘容器，通过 visible 控制显示/隐藏 -->
-  <div ref="callContainer" :style="containerStyle" class="dezhu-icall-container" />
+  <div ref="callContainer" class="dezhu-icall-container" style="display: none;" />
 </template>
 
 <style>
@@ -11,64 +10,17 @@
 </style>
 
 <script>
-/**
- * 得助外呼组件
- * @description 封装得助智能 iCall 外呼功能 - 开箱即用版本
- * @example
- * <DeZhuICall
- *   server-url="https://hnzz.dezhuyun.com"
- *   :token="deZhuToken"
- *   :auto-init="true"
- *   @ready="onReady"
- *   @error="onError"
- * />
- */
-
 export default {
   name: 'DeZhuICall',
 
   props: {
-    /** 得助服务器地址，如：https://hnzz.dezhuyun.com */
     serverUrl: {
       type: String,
       required: true
     },
-    /** 代理前缀，用于本地开发跨域，如：'/dzfront' */
-    proxyPrefix: {
-      type: String,
-      default: ''
-    },
-    /** 认证 Token，通过 SSO 接入获取 */
     token: {
       type: String,
       required: true
-    },
-    /** 是否自动初始化 */
-    autoInit: {
-      type: Boolean,
-      default: true
-    },
-    /** 是否显示拨号盘界面 */
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  computed: {
-    containerStyle() {
-      return {
-        display: this.visible ? 'block' : 'none'
-      }
-    }
-  },
-
-  watch: {
-    serverUrl() {
-      if (this.autoInit) this.checkAndInit()
-    },
-    token() {
-      if (this.autoInit) this.checkAndInit()
     }
   },
 
@@ -76,55 +28,50 @@ export default {
     return {
       iCall: null,
       isInitialized: false,
-      isInitializing: false,
-      isCalling: false,
-      reconnectTimer: null,
+      scriptLoaded: false,
       reconnectCount: 0,
-      maxReconnectCount: 5
+      maxReconnectCount: 5,
+      reconnectTimer: null
     }
   },
 
   mounted() {
-    if (this.autoInit) this.checkAndInit()
-    document.addEventListener('visibilitychange', this.handleVisibilityChange)
+    if (this.token) {
+      this.loadSDKAndToken()
+    }
+  },
+
+  watch: {
+    token(newVal) {
+      if (newVal && !this.isInitialized) {
+        this.loadSDKAndToken()
+      }
+    }
   },
 
   beforeDestroy() {
-    document.removeEventListener('visibilitychange', this.handleVisibilityChange)
-    this.clearReconnectTimer()
     this.destroy()
   },
 
   methods: {
-    async checkAndInit() {
-      if (this.isInitializing || this.isInitialized) return
-      if (!this.serverUrl || !this.token) return
-
-      this.isInitializing = true
+    async loadSDKAndToken() {
       try {
         await this.loadSDK()
         await this.initICall()
       } catch (error) {
         this.$emit('error', error)
-        this.scheduleReconnect()
-      } finally {
-        this.isInitializing = false
       }
     },
 
     loadSDK() {
       if (window.DeZhuFrontIcall) {
+        this.scriptLoaded = true
         return Promise.resolve()
       }
 
       return new Promise((resolve, reject) => {
         const script = document.createElement('script')
-        // SDK 加载路径：如果有代理前缀，直接使用代理前缀（浏览器会拦截并转发）
-        // 否则使用完整 serverUrl
-        const baseUrl = this.proxyPrefix || this.serverUrl
-        // 注意：proxyPrefix 已经包含 /dzfront，所以不需要再拼接
-        const path = this.proxyPrefix ? '/icall/lib/icall.js' : '/dzfront/icall/lib/icall.js'
-        script.src = `${baseUrl}${path}?time=${Date.now()}`
+        script.src = `${this.serverUrl}/dzfront/icall/lib/icall.js?time=${Date.now()}`
         script.async = true
 
         const timeout = setTimeout(() => {
@@ -133,6 +80,7 @@ export default {
 
         script.onload = () => {
           clearTimeout(timeout)
+          this.scriptLoaded = true
           resolve()
         }
 
@@ -153,35 +101,25 @@ export default {
           return
         }
 
-        if (this.iCall && typeof this.iCall.signOut === 'function') {
-          this.iCall.signOut()
+        if (this.iCall) {
+          if (typeof this.iCall.signOut === 'function') {
+            this.iCall.signOut()
+          }
           this.iCall = null
         }
 
-        // 如果有代理前缀，server 配置为空（SDK 会基于当前域名请求）
-        const serverConfig = this.proxyPrefix ? '' : this.serverUrl
         this.iCall = new window.DeZhuFrontIcall(container, {
           option: {
-            server: serverConfig,
+            server: this.serverUrl,
             token: this.token
           },
           event: {
-            onCallStatusChange: (status, params) => {
-              this.$emit('statusChange', status, params)
-              switch (status) {
-                case 'MANUAL_DIALING':
-                  this.$emit('dialing', params)
-                  break
-                case 'MANUAL_EARLY_MEDIA':
-                  this.$emit('ringing', params)
-                  break
-                case 'MANUAL_ACTIVE':
-                  this.$emit('connected', params)
-                  break
-                case 'MANUAL_NOT_ACTIVE':
-                  this.handleHangup(params)
-                  break
-              }
+            onCallStatusChange: (callStatus, params) => {
+              this.$emit('statusChange', callStatus, params)
+              if (callStatus === 'MANUAL_DIALING') this.$emit('dialing', params)
+              if (callStatus === 'MANUAL_EARLY_MEDIA') this.$emit('ringing', params)
+              if (callStatus === 'MANUAL_ACTIVE') this.$emit('connected', params)
+              if (callStatus === 'MANUAL_NOT_ACTIVE') this.$emit('hangup', params)
             },
             onFinishedAcw: (acwDuration) => {
               this.$emit('finishedAcw', acwDuration)
@@ -190,18 +128,17 @@ export default {
               this.$emit('error', error)
             },
             onDisconnect: () => {
-              this.isInitialized = false
               this.$emit('offline')
-              this.scheduleReconnect()
+              this.isInitialized = false
+              this.handleReconnect()
             },
             onReconnect: () => {
-              this.reconnectCount = 0
-              this.clearReconnectTimer()
               this.$emit('reconnect')
-            },
-            onWillHangup: (callStatus, isAutoAnswer) => {
-              this.$emit('willHangup', callStatus, isAutoAnswer)
-              return Promise.resolve(true)
+              this.reconnectCount = 0
+              if (this.reconnectTimer) {
+                clearTimeout(this.reconnectTimer)
+                this.reconnectTimer = null
+              }
             }
           }
         }, async () => {
@@ -219,74 +156,70 @@ export default {
       })
     },
 
-    handleHangup(params) {
-      this.isCalling = false
-      const isPeerHangup = params?.isPeerHangup || params?.endReason === 2
-      if (isPeerHangup) {
-        this.$emit('peerHangup', params)
+    async handleReconnect() {
+      if (this.reconnectTimer) {
+        return
+      }
+
+      if (this.reconnectCount >= this.maxReconnectCount) {
+        this.$emit('error', new Error(`重连失败，已达最大重连次数: ${this.maxReconnectCount}`))
+        return
       }
-      this.$emit('hangup', {
-        isSelfHangup: params?.isSelfHangup || params?.endReason === 1,
-        isPeerHangup,
-        isFailed: params?.isCallFail,
-        reason: params?.callFailReason,
-        params
-      })
+
+      this.reconnectCount++
+      const delay = Math.min(1000 * Math.pow(2, this.reconnectCount), 30000)
+
+      this.reconnectTimer = setTimeout(async () => {
+        this.reconnectTimer = null
+        try {
+          this.$emit('reconnecting', this.reconnectCount, this.maxReconnectCount)
+          await this.initICall()
+        } catch (error) {
+          this.$emit('error', error)
+          this.handleReconnect()
+        }
+      }, delay)
     },
 
     async call(phoneNumber) {
       if (!this.iCall || !this.isInitialized) {
         throw new Error('拨号盘未初始化')
       }
-      this.isCalling = true
       await this.iCall.call(phoneNumber)
     },
 
     async hangup() {
-      if (this.iCall && this.isCalling) {
+      if (this.iCall) {
         await this.iCall.hangup()
       }
     },
 
-    destroy() {
-      if (this.iCall) {
-        if (typeof this.iCall.signOut === 'function') {
-          this.iCall.signOut()
-        }
-        this.iCall = null
+    async signIn() {
+      if (this.iCall && this.isInitialized) {
+        await this.iCall.signIn()
       }
-      this.isInitialized = false
-      this.isCalling = false
     },
 
-    handleVisibilityChange() {
-      if (!document.hidden && !this.isInitialized && this.autoInit) {
-        this.checkAndInit()
+    async signOut() {
+      if (this.iCall && this.isInitialized) {
+        await this.iCall.signOut()
       }
     },
 
-    scheduleReconnect() {
-      if (this.reconnectTimer || this.reconnectCount >= this.maxReconnectCount) return
-
-      this.reconnectCount++
-      const delay = Math.min(3000 * this.reconnectCount, 15000)
-
-      this.reconnectTimer = setTimeout(async () => {
-        this.reconnectTimer = null
-        try {
-          await this.checkAndInit()
-          this.$emit('reconnect')
-        } catch (error) {
-          this.scheduleReconnect()
-        }
-      }, delay)
-    },
-
-    clearReconnectTimer() {
+    destroy() {
       if (this.reconnectTimer) {
         clearTimeout(this.reconnectTimer)
         this.reconnectTimer = null
       }
+      if (this.iCall) {
+        if (typeof this.iCall.signOut === 'function') {
+          this.iCall.signOut()
+        }
+        this.iCall = null
+      }
+      this.isInitialized = false
+      const scripts = document.querySelectorAll('script[src*="icall.js"]')
+      scripts.forEach(s => s.remove())
     }
   }
 }