@sdk185/sip-phone-sdk26 0.0.5 → 0.0.6

package/package.json

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

package/src/components/MobilePhone.vue

@@ -2,10 +2,6 @@
 <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">
       <!-- 显示经纬度和海拔信息 -->
@@ -14,21 +10,19 @@
       <p>ALT: {{altitude}}</p>
     </div>
     <!-- 通话信息显示区域 -->
-    <div class="d-flex flex-column align-center" v-if="!miniMode && !showDialPad" style="margin-top:160px;">
+    <div class="d-flex flex-column align-center call-btn" v-if="!miniMode && !showDialPad">
       <!-- 应用logo -->
-      <!-- <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%;"/>
+      <img class="elevation-4 call-img" alt="logo" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/normal-logo.png"/>
       <!-- 通话状态提示 -->
-      <p class="mt-6 mb-0" style="font-size: 16px; color: #FFFFFF;">{{callPrompt}}</p>
+      <p class="mt-6 mb-0 call-label" >{{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" style="font-size: 14px;margin-top: -50px; color: #FFFFFF;">
+            v-show="isCalling && showHangup" class="call-duration">
             视频时长 {{duration}}
           </div>
         </v-col>
@@ -37,46 +31,23 @@
       <v-row class="d-flex justify-space-around mb-10">
         <!-- 取消按钮 - 用于微信公众号调用的场景 -->
         <v-btn
-            style="opacity: 1; background: transparent; box-shadow: none; position: relative; margin-top: -200px;"
+            class="cancel-btn"
+            style=" "
             v-show="!isCalling && !needDial"
             @click="onHangupBtnClick"
         >
-          <!-- <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>
+          <img class="cancel-img" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/call-down.png" alt="hangup" >
+          <span class="cancel-label">取消</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 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> -->
+          <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" >
         </v-btn>
-
         <!-- 摄像头开关按钮 -->
         <v-btn
             large
@@ -84,26 +55,10 @@
             @click="onMuteBtnClick('video')"
             class="custom-mute-btn"
         >
-          <!-- <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">
+          <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">
         </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>
 
       <!-- 第二行按钮组 -->
@@ -114,14 +69,11 @@
             v-show="isCalling && showHangup"
             @click="onHangupBtnClick"
         >
-          <!-- <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>
+          <img class="hangup-img" src="https://kefu-gm-jc-dat.boc-samsunglife.cn/static/call-down.png" alt="hangup">
+          <span class="hangup-label">挂断</span>
         </v-btn>
-
         <!-- 切换摄像头按钮 -->
         <v-btn
-          style="opacity: .6; position: absolute; left: calc(50% + 80px);"
           v-show="isCalling && showHangup"
           @click="onSwitchCameraBtnClick"
           class="transparent-btn"
@@ -130,7 +82,6 @@
         </v-btn>
       </v-row>
     </div>
-
     <!-- 视频容器区域 -->
     <v-expand-transition>
       <div class="sip-call-wrapper" v-show="showVideoCt" @click="onSipCallClick">
@@ -197,25 +148,8 @@
             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
@@ -228,12 +162,10 @@
         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}}
@@ -591,12 +523,17 @@ 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)
@@ -608,6 +545,7 @@ export default {
 
       if (this.callData) {
         params.callData = this.callData
+        console.log('Call Da1ta', this.callData)
       }
 
       // console.info('Call Params', params)
@@ -629,7 +567,6 @@ export default {
       }
 
     },
-
     onHangupBtnClick () {
       this.sipMix.hangup();
       // this.$emit('hangup-event', { imType: 0 });// 通知父组件
@@ -1030,15 +967,15 @@ export default {
 .btn-group {
   width: 100%;
   position: absolute;
-  bottom: 150px;
+  bottom: 250px;
   z-index: 4000;
 }
 
 @media screen and (min-width: 1024px) {
   .btn-group {
     position: absolute;
-    bottom: 80px;
-    width: 640px;
+    bottom: 40px;
+    width: 320px;
     z-index: 4000;
   }
 }
@@ -1051,7 +988,6 @@ export default {
 }
 
 .video-panel {
-  // touch-action: none;
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -1158,9 +1094,68 @@ 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>