@sdk185/sip-phone-sdk26 0.0.6 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdk185/sip-phone-sdk26",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/MobilePhone.vue

@@ -2,6 +2,10 @@
 <template>
   <!-- 主容器：使用flex垂直布局，内容居中对齐 -->
   <div class="d-flex flex-column align-center justify-space-between sip-call-main">
+    <!-- 顶部提示信息 -->
+    <div style="position: absolute; top: 0; left: 0; background: transparent; color: #FFFFFF; width: 100%; z-index: 9999; height: 0; padding-top: 10px; padding-left: 10px;">
+      <!-- {{ prompt }} -->
+    </div>
     <!-- 位置信息显示区域 -->
     <div class="location-wrapper" v-if="showLocation">
       <!-- 显示经纬度和海拔信息 -->
@@ -10,19 +14,21 @@
       <p>ALT: {{altitude}}</p>
     </div>
     <!-- 通话信息显示区域 -->
-    <div class="d-flex flex-column align-center call-btn" v-if="!miniMode && !showDialPad">
+    <div class="d-flex flex-column align-center" v-if="!miniMode && !showDialPad" style="margin-top:160px;">
       <!-- 应用logo -->
-      <img class="elevation-4 call-img" alt="logo" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/normal-logo.png"/>
+      <!-- <img class="elevation-4" alt="logo" :src="require('@/assets/normal-logo.png')" width="72" height="72" style="border-radius: 50%;"/> -->
+      <img class="elevation-4" alt="logo" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/normal-logo.png" width="72" height="72" style="border-radius: 50%;"/>
       <!-- 通话状态提示 -->
-      <p class="mt-6 mb-0 call-label" >{{callPrompt}}</p>
+      <p class="mt-6 mb-0" style="font-size: 16px; color: #FFFFFF;">{{callPrompt}}</p>
     </div>
+
     <!-- 功能按钮区域 -->
     <div class="pr-10 pl-10 btn-group" v-if="!miniMode && !showDialPad">
       <v-row>
         <v-col cols="12" class="text-center">
           <!-- 通话计时器 -->
           <div 
-            v-show="isCalling && showHangup" class="call-duration">
+            v-show="isCalling && showHangup" style="font-size: 14px;margin-top: -50px; color: #FFFFFF;">
             视频时长 {{duration}}
           </div>
         </v-col>
@@ -31,23 +37,46 @@
       <v-row class="d-flex justify-space-around mb-10">
         <!-- 取消按钮 - 用于微信公众号调用的场景 -->
         <v-btn
-            class="cancel-btn"
-            style=" "
+            style="opacity: 1; background: transparent; box-shadow: none; position: relative; margin-top: -200px;"
             v-show="!isCalling && !needDial"
             @click="onHangupBtnClick"
         >
-          <img class="cancel-img" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/call-down.png" alt="hangup" >
-          <span class="cancel-label">取消</span>
+          <!-- <img :src="require('@/assets/call-down.png')" alt="hangup" width="80" height="80"> -->
+          <img src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/call-down.png" alt="hangup" width="80" height="80">
+
+          <span style="position: absolute; top: 78px; color: #FFFFFF;">取消</span>
         </v-btn>
+        
+        <!-- 原拨号按钮已注释，改为由微信公众号调用 -->
+        <!-- <v-btn
+            large
+            fab
+            color="#FFFFFF"
+            v-show="!isCalling && !needDial"
+            @click="onMakeCallBtnClick"
+        >
+          <v-icon>mdi-phone</v-icon>
+          <span class="btn-label">拨号</span>
+        </v-btn> -->
+
+        <!-- 麦克风静音/取消静音按钮 -->
+        <!-- 当正在通话且显示挂断按钮时显示 -->
+        <!-- 点击时触发onMuteBtnClick方法，传入'audio'参数 -->
         <v-btn
             large
             v-show="isCalling && showHangup"
             @click="onMuteBtnClick('audio')"
             class="custom-mute-btn"
         >
-          <img class="img-open-close" v-if="!isAudioMute" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/adudio-open.png" >
-          <img class="img-open-close" v-else src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/adudio-close.png" >
+         <!-- 静音状态显示开启的麦克风图标 -->
+          <!-- <img v-if="!isAudioMute" :src="require('@/assets/adudio-open.png')" width="55" height="80">
+          <img v-else :src="require('@/assets/audio-close.png')" width="55" height="80"> -->
+          <img v-if="!isAudioMute" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/adudio-open.png" width="55" height="80">
+          <img v-else src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/adudio-close.png" width="55" height="80">
+          <!-- 显示当前状态的文字提示 -->
+          <!-- <span class="btn-label">{{ isAudioMute ? '取消静音' : '静音' }}</span> -->
         </v-btn>
+
         <!-- 摄像头开关按钮 -->
         <v-btn
             large
@@ -55,10 +84,26 @@
             @click="onMuteBtnClick('video')"
             class="custom-mute-btn"
         >
-          <img class="img-open-close" v-if="!isVideoMute" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/camera-open.png" alt="mic-on">
-          <img class="img-open-close" v-else src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/camera-close.png" alt="mic-off">
+          <!-- <img v-if="!isVideoMute" :src="require('@/assets/camera-open.png')" alt="mic-on" width="55" height="80">
+          <img v-else :src="require('@/assets/camera-close.png')" alt="mic-off" width="55" height="80"> -->
+          <img v-if="!isVideoMute" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/camera-open.png" alt="mic-on" width="55" height="80">
+          <img v-else src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/camera-close.png" alt="mic-off" width="55" height="80">
         </v-btn>
 
+        <!-- 显示/隐藏本地视频按钮 -->
+        <!-- <v-btn
+            style="opacity: .6"
+            color="blue-grey"
+            fab
+            large
+            dark
+            v-show="isCalling && showHangup"
+            @click="onShowLocalVideoBtnClick"
+        >
+          <v-icon v-if="localVideo.show">mdi-monitor</v-icon>
+          <v-icon v-else>mdi-monitor-multiple</v-icon>
+          <span class="btn-label">{{ localVideo.show ? '隐藏本地' : '显示本地' }}</span>
+        </v-btn> -->
       </v-row>
 
       <!-- 第二行按钮组 -->
@@ -69,11 +114,14 @@
             v-show="isCalling && showHangup"
             @click="onHangupBtnClick"
         >
-          <img class="hangup-img" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/call-down.png" alt="hangup">
-          <span class="hangup-label">挂断</span>
+          <!-- <img :src="require('@/assets/call-down.png')" alt="hangup" width="80" height="80"> -->
+          <img src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/call-down.png" alt="hangup" width="80" height="80">
+          <span style="position: absolute; top: 73px; color: #FFFFFF;">挂断</span>
         </v-btn>
+
         <!-- 切换摄像头按钮 -->
         <v-btn
+          style="opacity: .6; position: absolute; left: calc(50% + 80px);"
           v-show="isCalling && showHangup"
           @click="onSwitchCameraBtnClick"
           class="transparent-btn"
@@ -82,6 +130,7 @@
         </v-btn>
       </v-row>
     </div>
+
     <!-- 视频容器区域 -->
     <v-expand-transition>
       <div class="sip-call-wrapper" v-show="showVideoCt" @click="onSipCallClick">
@@ -148,8 +197,25 @@
             controls
           ></video>
         </vue-draggable-resizable>
+
+        <!-- 视频控制区域 -->
+        <!-- <template v-if="!miniMode">
+          通话计时器
+          <span class="video-timer">
+            <img :src="require('@/assets/icon_Recording_Fill_Red_Active.svg')" alt="icon" width="24" height="24" class="mr-2">
+            {{duration}}
+          </span>
+
+          全屏切换按钮
+          <v-btn class="camera-switch-btn" dark text x-small width="24" height="24" min-width="24" @click="onChangeVideoFullScreenBtnClick">
+            <v-icon>mdi-box-shadow</v-icon>
+            <span class="btn-label">全屏</span>
+          </v-btn>
+        </template> -->
+
       </div>
     </v-expand-transition>
+
     <!-- 拨号盘组件 -->
     <v-expand-transition>
       <dial-panel-mini
@@ -162,10 +228,12 @@
         ref="dialPanelMini"
       />
     </v-expand-transition>
+
     <!-- 音频播放器（用于播放提示音） -->
     <v-bottom-sheet v-model="showAudioPlayer" hide-overlay>
       <audio :src="require('@/assets/outgoing-call2.mp3')" loop ref="audioPlayer"></audio>
     </v-bottom-sheet>
+
     <!-- 提示信息弹窗 -->
     <v-snackbar v-model="showSnackbar" :timeout="2000">
       {{snackbarText}}
@@ -523,17 +591,12 @@ export default {
       }
 
       const params = { target: this.dialNum }
-      console.log('paramsparams Data', params)
-      console.log('this.callData Data', this.callData)
-      console.log('window.config.videoParams', window.config.videoParams)
       if (this.callType === 'videoOnly') {
-        console.log('videoOnly')
         params.video = Object.assign({
           facingMode: 'user'
         }, window.config.videoParams)
         params.audio = false
       } else if (this.callType === 'video') {
-        console.log('video')
         params.video = Object.assign({
           facingMode: 'user'
         }, window.config.videoParams)
@@ -545,7 +608,6 @@ export default {
 
       if (this.callData) {
         params.callData = this.callData
-        console.log('Call Da1ta', this.callData)
       }
 
       // console.info('Call Params', params)
@@ -567,6 +629,7 @@ export default {
       }
 
     },
+
     onHangupBtnClick () {
       this.sipMix.hangup();
       // this.$emit('hangup-event', { imType: 0 });// 通知父组件
@@ -967,15 +1030,15 @@ export default {
 .btn-group {
   width: 100%;
   position: absolute;
-  bottom: 250px;
+  bottom: 150px;
   z-index: 4000;
 }
 
 @media screen and (min-width: 1024px) {
   .btn-group {
     position: absolute;
-    bottom: 40px;
-    width: 320px;
+    bottom: 80px;
+    width: 640px;
     z-index: 4000;
   }
 }
@@ -988,6 +1051,7 @@ export default {
 }
 
 .video-panel {
+  // touch-action: none;
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -1094,68 +1158,10 @@ export default {
     height: auto !important;
     padding: 0 !important;
     margin: 0 !important;
-    opacity: .6 !important; 
-    position: absolute !important; 
-    left: calc(50% + 80px) !important;
-    color: #FFFFFF;
 }
 .transparent-btn::before {
     background-color: transparent !important;
     opacity: 0 !important;
 }
 
-.call-btn{
-  margin-top:160px;
-}
-.call-img{
- width:100px;
- height:100px; 
- border-radius: 50%;
-}
-
-
-.call-label{
-  font-size: 16px;
-  color: #FFFFFF
-}
-
-.cancel-btn{
-  opacity: 1; 
-  background: transparent !important;
-  box-shadow: none !important; 
-  position: relative !important;
-  margin-top: -50px !important;
-}
-.cancel-img {
-  width: 80px;
-  height: 80px;
-}
-.cancel-label{
-  top: 78px;
-  position: absolute;  color: #FFFFFF;
-  font-size: 16px;
-}
-
-
-.call-duration{
-  font-size: 14px;margin-top: -12.5px; color: #FFFFFF;
-}
-.hangup-img{
-  width: 80px;
-  height: 80px;
-}
-.hangup-label{
-  top: 73px;
-  position: absolute;  color: #FFFFFF;
-  font-size: 14px;
-}
-
-.img-open-close{
-  width: 55px;
-  height: 80px;
-}
-.mb-10 {
-  margin-bottom: 80px;
-  z-index: 1000;
-}
 </style>