From fbffd2b886410d8449d8530c4d3bd87050782325 Mon Sep 17 00:00:00 2001
From: tangchengming <445785772@qq.com>
Date: Fri, 17 Jan 2025 16:43:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=91=BC=E5=87=BA=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MediationRoom.vue              | 54 ++++++++++++-------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/pages/mediation-page/components/MediationRoom.vue b/src/pages/mediation-page/components/MediationRoom.vue
index 9cd5958..c17073c 100644
--- a/src/pages/mediation-page/components/MediationRoom.vue
+++ b/src/pages/mediation-page/components/MediationRoom.vue
@@ -29,29 +29,34 @@
               <el-button slot="reference" type="warning" icon="el-icon-message" circle></el-button>
           </el-popover>
           
-          <div v-if="!queue" class="wrap-btn-left-dial1 f14 flex-row justify-content-between ml-16">
-            <el-button v-if="!calling"  type="danger" icon="el-icon-phone-outline" circle></el-button>
-            <div v-else class="flex-row justify-content-between ml-16 pl-22 pr-24">
-              <div class="mr-8 f16 color-F53F3F" @click="startCall()"><i class="el-icon-phone-outline"></i></div>
-              <div class="mr-8 f12 color-000">{{formattedTime || '00:00'}}</div>
-              <div class="mr-8 f20 cursor-p" @click="hungUp()"><i class="el-icon-phone"></i></div>
-              <div class="mr-8 f20 cursor-p" v-if="!isMute" @click="muteMic()"><i class="el-icon-microphone"></i></div>
-              <div class="mr-8 f20 cursor-p" v-if="isMute" @click="unmuteMic()"><i class="el-icon-turn-off-microphone"></i></div>
-              <div class="mr-8 ai-logo-img"></div>
+          <div v-if="!queue" class="wrap-btn-left-dial-f2f3f5 f14 flex-row justify-content-between ml-16">
+            <el-button v-if="!calling"  type="danger" icon="el-icon-phone-outline" circle @click="startCall()"></el-button>
+            <div v-else class="flex-row justify-content-between align-items-center">
+              <div class="mr-8 color-fff wrap-btn-left-dial-f56c6c flex-row justify-content-between align-items-center" @click="hungUp()">
+                <i class="el-icon-phone-outline f20 mr-4"></i>
+                <span class="f12 ">挂断电话</span>
+              </div>
+              <div class="flex-row justify-content-between align-items-center ml-16 pr-24">
+                <div class="mr-8 f12 color-000">{{formattedTime || '00:00'}}</div>
+                <div class="mr-8 f20 cursor-p"><i class="el-icon-phone"></i></div>
+                <div class="mr-8 f20 cursor-p" v-if="!isMute" @click="muteMic()"><i class="el-icon-microphone"></i></div>
+                <div class="mr-8 f20 cursor-p" v-if="isMute" @click="unmuteMic()"><i class="el-icon-turn-off-microphone"></i></div>
+                <div class="mr-8 ai-logo-img"></div>
+              </div>
             </div>
           </div>
           <div class="wrap-btn-left-dial pl-22 pr-24 f14 flex-row justify-content-between ml-16">
             <div v-if="queue" class="flex-row justify-content-between align-items-center">
               <div v-if="calling" class="mr-8 f16 color-F53F3F cursor-p" @click="pauseTimer()"><i class="el-icon-video-pause"></i></div>
               <div v-else class="mr-8 f16 color-F53F3F cursor-p" @click="startCall()"><i class="el-icon-video-play"></i></div>
-              <div class="mr-8 cursor-p" v-if="calling" @click="pauseTimer()">暂停拨打</div>
-              <div class="mr-8 cursor-p" v-else @click="startCall()">开始拨打</div>
-              <div class="mr-8 f12 color-000" v-if="calling">{{formattedTime || '00:00'}}</div>
-              <div class="mr-8 f20 cursor-p" v-if="calling" @click="hungUp()"><i class="el-icon-phone"></i></div>
-              <div class="mr-8 f20 cursor-p" v-if="calling && !isMute" @click="muteMic()"><i class="el-icon-microphone"></i></div>
-              <div class="mr-8 f20 cursor-p" v-if="calling && isMute" @click="unmuteMic()"><i class="el-icon-turn-off-microphone"></i></div>
-              <div class="mr-8 ai-logo-img" v-if="calling"></div>
-            </div>
+                <div class="mr-8 cursor-p" v-if="calling" @click="pauseTimer()">暂停拨打</div>
+                <div class="mr-8 cursor-p" v-else @click="startCall()">开始拨打</div>
+                <div class="mr-8 f12 color-000" v-if="calling">{{formattedTime || '00:00'}}</div>
+                <div class="mr-8 f20 cursor-p" v-if="calling" @click="hungUp()"><i class="el-icon-phone"></i></div>
+                <div class="mr-8 f20 cursor-p" v-if="calling && !isMute" @click="muteMic()"><i class="el-icon-microphone"></i></div>
+                <div class="mr-8 f20 cursor-p" v-if="calling && isMute" @click="unmuteMic()"><i class="el-icon-turn-off-microphone"></i></div>
+                <div class="mr-8 ai-logo-img" v-if="calling"></div>
+              </div>
             <div class="flex-row justify-content-between align-items-center f14">
               <el-popover
                 placement="bottom"
@@ -394,7 +399,7 @@ export default {
         console.log('监听挂断事件', options)
         that.calling = false
         that.resetTimer()
-        const that = this.nextCall()
+        const that = that.nextCall()
     })
   },
   beforeDestroy() {
@@ -547,12 +552,13 @@ export default {
     async startOutboundCall() {
         // this.phoneNumber = this.queue ? this.queueList[this.index].phone : this.baseInfo.phone
         this.phoneNumber = '13982024318'
-        this.calling = true
+        
         console.log('进入呼叫电话：', this.phoneNumber)
         try {
             let res = await window.tccc.Call.startOutboundCall({phoneNumber: this.phoneNumber})
             this.sessionId = res.data.sessionId
             console.log('呼叫成功', res.data)
+            this.calling = true
             if (res.status === 'success') {
               this.callingSuccess()
               this.startTimer()
@@ -560,6 +566,7 @@ export default {
         } catch (err) {
             this.$message.error('呼叫失败' + err.message)
             console.log('呼叫失败',err.message)
+            this.calling = false
             this.callingFail()
             // 呼叫失败
         } finally {}
@@ -568,6 +575,7 @@ export default {
     async callingSuccess () {
       try { 
         let res = await api.callingSuccess({caseId: this.caseId})
+        console.log('呼叫成功请求接口==callingSuccess：', res)
       } catch (err) { }
     },
     // 呼叫失败
@@ -733,9 +741,15 @@ export default {
         border-radius: 20px;
 
       }
-      .wrap-btn-left-dial1 {
+      .wrap-btn-left-dial-f2f3f5 {
+        background-color: #F2F3F5;
+        border-radius: 20px;
+      }
+      .wrap-btn-left-dial-f56c6c {
         background-color: #F56C6C;
         border-radius: 20px;
+        height: 100%;
+        padding: 0px 10px;
       }
     }
   }