66im/pages/rtc/group/chooseCallee.vue

<template>
  <view class="callee-selector">
    <view class="callee-selector-header">
      <view class="close" @click="goBack()">取消</view>
      <text>选择成员</text>
      <view class="confirm" @click="groupCall()">确定</view>
    </view>
    <view class="callee-avatar">
      <view class="avatar-list">
        <image class="avatar-item" :src="currentUser.avatar"></image>
        <image class="avatar-item" v-for="(callee, index) in callees" :key="index" :src="callee.avatar"></image>
      </view>
    </view>
    <checkbox-group @change="selectCallees" class="member-list">
      <view v-for="(member, index) in groupMembers" :key="index" class="member-item">
        <image class="member-avatar" :src="member.avatar"></image>
        <view class="member-name">{{member.name}}</view>
        <checkbox class="member-check" :value="member.id" :checked="callees.includes(member)"/>
      </view>
    </checkbox-group>
  </view>
</template>

<script>
  import restApi from '../../../lib/restapi';
  const GRTC = uni.$GRTC;
  export default {
    data() {
      return {
        groupId: null,
        currentUser: null,
        groupMembers: null,
        callees: []
      }
    },
    onLoad(options) {
      this.mediaType = Number(options.mediaType);
      this.groupId = options.groupId;
      this.currentUser = uni.$currentUser;
      this.groupMembers = restApi.findGroupMembers(this.groupId);
      this.groupMembers = this.groupMembers.filter(user => user.id !== this.currentUser.id)
    },
    methods: {
      selectCallees(e) {
        const selectedCalleeIds = e.detail.value;
        this.callees = this.groupMembers.filter(member => selectedCalleeIds.includes(member.id));
      },
      goBack () {
        uni.navigateBack();
      },
      groupCall() {
        const calleeIds = this.callees.map((user) => user.id);
        if(calleeIds.length < 1) {
          uni.showToast({
            icon: "error",
            title: "请先选择成员！",
            duration: 2000
          })
          return;
        }
        const notificationBody = this.mediaType === 0 ? '邀请你加入多人视频':'邀请你加入多人通话';
        GRTC.groupCall({
          groupId: this.groupId,
          calleeIds: calleeIds,
          mediaType: this.mediaType,
          notification: {
            title: this.currentUser.name,
            body: notificationBody,
            sound: 'ring',
            badge: '+1'
          },
        }).then(() => {
          uni.redirectTo({
            url: `./dial`,
          })
        }).catch((error)=>{
          console.log("error:",error)
          uni.showToast({
            icon: "error",
            title: "呼叫失败:" + error,
            duration: 2000
          })
        })
      }
    }
  }
</script>

<style>
.callee-selector {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #29282B;
}

.callee-selector-header {
  padding: 100rpx 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
}

.callee-selector-header .confirm {
  width: 110rpx;
  height: 60rpx;
  border-radius: 10rpx;
  background: #D02129;
  text-align: center;
  line-height: 60rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.callee-avatar {
  padding: 20rpx;
  display: flex;
  justify-content: center;
}

.avatar-list {
  display: flex;
  overflow: scroll;
  flex-wrap: nowrap;
}

.avatar-item {
  flex-basis: 120rpx;
  flex-shrink: 0;
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  background-color: #4D4D4D;
  margin: 0 10rpx;
}

.member-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.member-item {
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #393538;
  padding: 20rpx 40rpx;
}

.member-check {
  height: 80rpx;
  display: flex;
  align-items: center;
}

uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
  border-color: #d1d1d1 !important;
}

uni-checkbox .uni-checkbox-input {
  border-radius: 50% !important;
}

uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  color: #D02129;
}
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
  color: #D02129;
}

.member-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
  background-color: #4D4D4D;
}

.member-name {
  flex: 1;
  margin-left: 20rpx;
  color: #D0D2D4;
  font-size: 30rpx
}

</style>