perf: 会议呼叫

resources/assets/js/pages/manage/components/MeetingManager/index.vue

@@ -66,6 +66,15 @@
                     <Player :player="user"/>
                 </li>
             </ul>
+            <div v-if="isCallIng" class="meeting-calling">
+                <div class="meeting-calling-close" @click="closeCall"></div>
+                <div class="meeting-calling-title">{{$L('正在呼叫中...')}}</div>
+                <ul class="meeting-calling-list">
+                    <li v-for="item in callingList">
+                        <UserAvatar :userid="item" :size="32" show-name/>
+                    </li>
+                </ul>
+            </div>
             <div slot="footer" class="adaption meeting-button-group">
                 <Button type="primary" :loading="audioLoad" @click="onAudio">
                     <i class="taskfont" v-html="localUser.audioTrack ? '&#xe7c3;' : '&#xe7c7;'"></i>
@@ -110,11 +119,12 @@
             :mask-closable="false">
             <Form ref="invitationForm" :model="invitationData" v-bind="formOptions" @submit.native.prevent>
                 <FormItem prop="userids" :label="$L('邀请成员')">
-                    <UserSelect v-model="invitationData.userids" :multiple-max="20" :title="$L('选择邀请成员')"/>
+                    <UserSelect v-model="invitationData.userids" :disabled-choice="meetUserids" :multiple-max="20" :title="$L('选择邀请成员')"/>
                 </FormItem>
             </Form>
             <div slot="footer" class="adaption">
                 <Button type="default" :loading="linkCopyLoad" @click="linkCopy">{{$L('复制链接')}}</Button>
+                <Button type="primary" :loading="invitationLoad" @click="onInvitation('call')">{{$L('发送呼叫')}}</Button>
                 <Button type="primary" :loading="invitationLoad" @click="onInvitation('submit')">{{$L('发送邀请')}}</Button>
             </div>
         </Modal>
@@ -137,7 +147,7 @@ import Player from "./player.vue";
 import DragBallComponent from "../../../../components/DragBallComponent";
 import UserSelect from "../../../../components/UserSelect.vue";
 import emitter from "../../../../store/events";
-import {getErrorMessage} from "./utils";
+import {getErrorMessage, uidToUserid} from "./utils";
 import {getLanguage} from "../../../../language";
 
 export default {
@@ -186,11 +196,30 @@ export default {
             },
 
             linkCopyLoad: false,
+
+            callings: []
         }
     },
 
     computed: {
         ...mapState(['meetingWindow', 'appMeetingShow', 'formOptions', 'userToken']),
+
+        isCallIng({meetingShow, callings}) {
+            return meetingShow && callings.length > 0
+        },
+
+        callingList({callings}) {
+            return callings.filter(id => {
+                if (id == this.userId) {
+                    return false
+                }
+                return this.meetUserids.indexOf(id) === -1
+            })
+        },
+
+        meetUserids({remoteUsers}) {
+            return [this.userId, ...remoteUsers.map(({uid}) => uidToUserid(uid)).filter(uid => uid > 0)]
+        }
     },
 
     mounted() {
@@ -468,6 +497,13 @@ export default {
                     meetingid: this.addData.meetingid
                 };
                 this.invitationShow = true;
+            } else if (type === 'call') {
+                if (this.invitationData.userids.length === 0) {
+                    this.openModal("请选择邀请成员", 'warning');
+                    return;
+                }
+                this.callings = [...this.invitationData.userids]
+                this.invitationShow = false;
             } else if (type === 'submit') {
                 if (this.invitationData.userids.length === 0) {
                     this.openModal("请选择邀请成员", 'warning');
@@ -728,6 +764,10 @@ export default {
                 await this.agoraClient.unsubscribe(user, mediaType);
             }
         },
+
+        closeCall() {
+            this.callings = []
+        }
     }
 }
 </script>

resources/assets/js/pages/manage/components/MeetingManager/player.vue

@@ -26,14 +26,15 @@
 
 <script>
 import {mapState} from "vuex";
+import {uidToUserid} from "./utils";
 
 export default {
     name: "MeetingPlayer",
     props: {
         id: {
             type: String,
             default: () => {
-                return  "meeting-player-" + Math.round(Math.random() * 10000);
+                return "meeting-player-" + Math.round(Math.random() * 10000);
             }
         },
         player: {
@@ -71,14 +72,7 @@ export default {
     computed: {
         ...mapState(['cacheUserBasic']),
         userid() {
-            if (this.player.uid) {
-                if( (this.player.uid + '').indexOf('88888') !== -1 ){
-                    this.getTouristInfo();
-                    return 0;
-                }
-                return parseInt( (this.player.uid+"").substring(6) ) || 0
-            }
-            return 0
+            return uidToUserid(this.player.uid, this.getTouristInfo)
         },
         username() {
             if (this.userid) {
@@ -96,7 +90,7 @@ export default {
                 return {
                     backgroundImage: `url("${user.userimg}")`
                 }
-            }else if(this.tourist.userimg){
+            } else if (this.tourist.userimg) {
                 return {
                     backgroundImage: `url("${this.tourist.userimg}")`
                 }

resources/assets/js/pages/manage/components/MeetingManager/utils.js

@@ -537,4 +537,16 @@ const getErrorMessage = (errorCode, language) => {
     return null;
 }
 
-export {getErrorMessage}
+const uidToUserid = (uid, call8888) => {
+    if (uid) {
+        uid = `${uid}`
+        if (uid.indexOf('88888') !== -1) {
+            typeof call8888 === "function" && call8888()
+            return 0;
+        }
+        return parseInt(uid.substring(6)) || 0
+    }
+    return 0
+}
+
+export {getErrorMessage, uidToUserid}

resources/assets/sass/pages/components/meeting-manager.scss

@@ -152,3 +152,88 @@ body.window-portrait {
         }
     }
 }
+
+.meeting-calling {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px 0 0 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 16px 0;
+    z-index: 1000;
+
+    .meeting-calling-close {
+        position: absolute;
+        top: -14px;
+        left: -14px;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background-color: #f0f0f0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: transform 0.3s ease;
+
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            width: 1px;
+            height: 12px;
+            background-color: #999;
+        }
+
+        &::before {
+            transform: rotate(45deg);
+        }
+
+        &::after {
+            transform: rotate(-45deg);
+        }
+
+        &:hover {
+            transform: rotate(90deg);
+        }
+    }
+
+    .meeting-calling-title {
+        padding: 0 16px;
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 12px;
+        color: #333;
+    }
+
+    ul.meeting-calling-list {
+        list-style-type: none;
+        padding: 0 16px;
+        margin: 0;
+        min-width: 140px;
+        max-width: 170px;
+        max-height: 300px;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        > li {
+            padding: 8px 0;
+            border-bottom: 1px solid #e0e0e0;
+            color: #555;
+            font-size: 16px;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            .avatar-name {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+}