fix: input value is userID

tyrosning · anderlu · commit 2e7c4ccc6ed0 · 2021-11-02T16:08:11.000+08:00
diff --git a/Web/TRTCScenesDemo/trtc-calling-web/package.json b/Web/TRTCScenesDemo/trtc-calling-web/package.json
@@ -13,10 +13,10 @@
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
     "qs": "^6.9.4",
-    "tim-js-sdk": "2.10.2",
-    "trtc-calling-js": "^0.8.0",
+    "tim-js-sdk": "2.15.0",
+    "trtc-calling-js": "^1.0.1",
     "trtc-js-sdk": "^4.11.1",
-    "tsignaling": "0.6.0",
+    "tsignaling": "0.8.0",
     "vue": "^2.6.11",
     "vue-router": "^3.3.4",
     "vuex": "^3.5.1"
diff --git a/Web/TRTCScenesDemo/trtc-calling-web/src/components/audio-call/index.vue b/Web/TRTCScenesDemo/trtc-calling-web/src/components/audio-call/index.vue
@@ -4,7 +4,7 @@
       class="audio-call-section-header"
     >Welcome {{loginUserInfo && (loginUserInfo.name || loginUserInfo.userId)}}</div>
     <div class="audio-call-section-title">语音通话</div>
-    <search-user @callUser="handleCallUser" @cancelCallUser="handleCancelCallUser"></search-user>
+    <search-user  :callFlag="callFlag" :cancelFlag="cancelFlag" @callUser="handleCallUser" @cancelCallUser="handleCancelCallUser"></search-user>
     <div :class="{ 'audio-conference': true, 'is-show': isShowAudioCall }">
       <div class="audio-conference-header">语音通话区域</div>
 
@@ -39,7 +39,6 @@
 import { mapState } from "vuex";
 import SearchUser from "../search-user";
 import { getUserDetailInfoByUserid } from "../../service";
-import config from "../../config";
 
 export default {
   name: "AudioCall",
@@ -59,7 +58,9 @@ export default {
     return {
       isShowAudioCall: false,
       isAudioOn: true,
-      userId2User: {}
+      userId2User: {},
+      callFlag: false,
+      cancelFlag: false,
     };
   },
   mounted() {
@@ -92,23 +93,25 @@ export default {
   },
   methods: {
     handleCallUser: function({ param }) {
-      if (!param) {
-        this.$message.error("请输入拨叫号码");
-        return;
-      }
+      this.callFlag = true
       this.$trtcCalling.call({
         userID: param,
-        type: this.TrtcCalling.CALL_TYPE.AUDIO_CALL,
-        timeout: config.CallTimeout
-      });
-      this.$store.commit("userJoinMeeting", this.loginUserInfo.userId);
-      this.$store.commit("updateCallStatus", "calling");
-      this.$store.commit("updateIsInviter", true);
+        type: this.TrtcCalling.CALL_TYPE.VIDEO_CALL
+      }).then(()=>{
+        this.callFlag = false
+        this.$store.commit("userJoinMeeting", this.loginUserInfo.userId);
+        this.$store.commit("updateCallStatus", "calling");
+        this.$store.commit("updateIsInviter", true);
+      })
+      
     },
     handleCancelCallUser: function() {
-      this.$trtcCalling.hangup();
-      this.$store.commit("dissolveMeeting");
-      this.$store.commit("updateCallStatus", "idle");
+      this.cancelFlag = true
+      this.$trtcCalling.hangup().then(()=>{
+        this.cancelFlag = false
+        this.$store.commit("dissolveMeeting");
+        this.$store.commit("updateCallStatus", "idle");
+      })
     },
     toggleAudio: function() {
       this.isAudioOn = !this.isAudioOn;
diff --git a/Web/TRTCScenesDemo/trtc-calling-web/src/components/login/index.vue b/Web/TRTCScenesDemo/trtc-calling-web/src/components/login/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="user-login">
-    <el-input placeholder="电话号码" v-model="UserID" maxlength="11" class="phone-num"></el-input>
+    <el-input placeholder="用户ID" v-model="UserID" maxlength="11" class="phone-num"></el-input>
     <el-button class="user-login-btn" @click="handleLogin">登陆</el-button>
   </div>
 </template>
@@ -21,7 +21,7 @@ export default {
     handleLogin: async function() {
       console.log("userid");
       if (!this.UserID) {
-        this.$message.error("请输入电话号码");
+        this.$message.error("请输入用户ID");
         return;
       }
 
diff --git a/Web/TRTCScenesDemo/trtc-calling-web/src/components/search-user/index.vue b/Web/TRTCScenesDemo/trtc-calling-web/src/components/search-user/index.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="search-user-container" v-if="callStatus !== 'connected'">
     <div class="search-section">
-      <el-input class="inline-input" v-model="searchInput" maxlength="11" placeholder="请输入呼叫号码"></el-input>
+      <el-input class="inline-input" v-model="searchInput" maxlength="11" placeholder="请输入用户ID"></el-input>
     </div>
 
     <div v-show="callStatus !== 'connected'" class="search-user-list">
       <div v-if="callStatus === 'calling' && isInviter" class="calling-user-footer">
         <el-button class="user-item-join-btn calling">呼叫中...</el-button>
-        <el-button class="user-item-cancel-join-btn" @click="handleCancelCallBtnClick">取消</el-button>
+        <el-button class="user-item-cancel-join-btn" :disabled="cancel" :loading="cancel" @click="handleCancelCallBtnClick">取消</el-button>
       </div>
-      <el-button v-else @click="handleCallBtnClick(searchInput)" class="user-item-join-btn">呼叫</el-button>
+      <el-button v-else @click="handleCallBtnClick(searchInput)" :disabled="call" class="user-item-join-btn">呼叫</el-button>
     </div>
   </div>
 </template>
@@ -20,12 +20,22 @@ import { getSearchHistory } from "../../utils";
 
 export default {
   name: "SearchUser",
+  props:{
+    callFlag: {
+      type: Boolean
+    },
+    cancelFlag:{
+      type: Boolean
+    },
+  },
   data() {
     return {
       searchInput: "",
       callUserId: "",
       searchResultList: [],
-      searchHistoryUser: getSearchHistory()
+      searchHistoryUser: getSearchHistory(),
+      call: false,
+      cancel: false
     };
   },
   computed: {
@@ -52,23 +62,27 @@ export default {
       if (newStatus === "idle") {
         this.callUserId = "";
       }
+    },
+    callFlag(newVal) {
+      this.call = newVal
+    },
+    cancelFlag(newVal) {
+      this.cancel = newVal
     }
   },
   methods: {
     handleCallBtnClick: function(param) {
       if (param === this.loginUserInfo.userId) {
-        this.$message("请输入正确号码");
+        this.$message("请输入正确用户ID");
         return;
       }
+      this.call = true
       this.callUserId = param;
       this.$emit("callUser", { param });
     },
     handleCancelCallBtnClick: function() {
       // 对方刚接受邀请，但进房未成功
-      if (this.isAccepted && this.callStatus !== "connected") {
-        return;
-      }
-      this.callUserId = "";
+      this.cancel = true
       this.$emit("cancelCallUser");
     }
   }
diff --git a/Web/TRTCScenesDemo/trtc-calling-web/src/components/video-call/index.vue b/Web/TRTCScenesDemo/trtc-calling-web/src/components/video-call/index.vue
@@ -4,7 +4,7 @@
       class="video-call-section-header"
     >Welcome {{loginUserInfo && (loginUserInfo.name || loginUserInfo.userId)}}</div>
     <div class="video-call-section-title">视频通话</div>
-    <search-user @callUser="handleCallUser" @cancelCallUser="handleCancelCallUser"></search-user>
+    <search-user :callFlag="callFlag" :cancelFlag="cancelFlag" @callUser="handleCallUser" @cancelCallUser="handleCancelCallUser"></search-user>
     <div :class="{ 'video-conference': true, 'is-show': isShowVideoCall }">
       <div class="video-conference-header">视频通话区域</div>
 
@@ -49,7 +49,7 @@
 import { mapState } from "vuex";
 import SearchUser from "../search-user";
 import { getUsernameByUserid } from "../../service";
-import config from "../../config";
+
 export default {
   name: "VideoCall",
   components: {
@@ -70,7 +70,9 @@ export default {
       isShowVideoCall: false,
       isVideoOn: true,
       isAudioOn: true,
-      userId2Name: {}
+      userId2Name: {},
+      callFlag: false,
+      cancelFlag: false,
     };
   },
   mounted() {
@@ -103,20 +105,25 @@ export default {
   },
   methods: {
     handleCallUser: function({ param }) {
-      // 可设置超时
+      this.callFlag = true
       this.$trtcCalling.call({
         userID: param,
-        type: this.TrtcCalling.CALL_TYPE.VIDEO_CALL,
-        timeout: config.CallTimeout
-      });
-      this.$store.commit("userJoinMeeting", this.loginUserInfo.userId);
-      this.$store.commit("updateCallStatus", "calling");
-      this.$store.commit("updateIsInviter", true);
+        type: this.TrtcCalling.CALL_TYPE.VIDEO_CALL
+      }).then(()=>{
+        this.callFlag = false
+        this.$store.commit("userJoinMeeting", this.loginUserInfo.userId);
+        this.$store.commit("updateCallStatus", "calling");
+        this.$store.commit("updateIsInviter", true);
+      })
+      
     },
     handleCancelCallUser: function() {
-      this.$trtcCalling.hangup();
-      this.$store.commit("dissolveMeeting");
-      this.$store.commit("updateCallStatus", "idle");
+      this.cancelFlag = true
+      this.$trtcCalling.hangup().then(()=>{
+        this.cancelFlag = false
+        this.$store.commit("dissolveMeeting");
+        this.$store.commit("updateCallStatus", "idle");
+      })
     },
     startMeeting: function() {
       if (this.meetingUserIdList.length >= 3) {
