66im/pages/rtc/group/dial.nvue

<template>
  <view class="call-view">
    <view class="nav-bar">
      <text class="timer">等待接听</text>
    </view>

    <view class="user-list">
      <view v-for="(callee,index) in currentCall.callees" :key="index" class="user-item">
        <image class="user-item-avatar" mode="widthFix" :src="callee.data.avatar"></image>
      </view>
      <view class="user-item">
        <!-- #ifdef APP -->
        <grtc-video v-if="currentCall.mediaType === 1" :userId="currentCall.caller.id" class="caller-view"></grtc-video>
        <image v-else class="user-item-avatar" mode="widthFix" :src="currentCall.caller.data.avatar"></image>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <web-grtc-video v-if="currentCall.mediaType === 1" :userId="currentCall.caller.id" class="caller-view"></web-grtc-video>
        <image v-else class="user-item-avatar" mode="widthFix" :src="currentCall.caller.data.avatar"></image>
        <!-- #endif -->
      </view>
    </view>

    <view class="action-box">
      <view class="action-item" @click="end()">
        <view class="end-background">
          <image class="action-icon" src="/static/images/phoneEnd.png"></image>
        </view>
        <text class="action-text">取消</text>
      </view>
    </view>

  </view>
</template>

<script>
  import webGrtcVideo from '../components/web-grtc-video/web-grtc-video.vue';
  const GRTC = uni.$GRTC;
  export default {
    data() {
      return {
        currentCall: GRTC.currentCall(),
      }
    },
    components: {
      webGrtcVideo,
    },
    onLoad() {
      this.initListener();
    },
    onUnload() {
      GRTC.off(GRTC.EVENT.USER_ACCEPTED, this.onUserAccepted);
      GRTC.off(GRTC.EVENT.USER_RANG, this.onUserRang);
      GRTC.off(GRTC.EVENT.USER_QUIT, this.onUserQuit);
      GRTC.off(GRTC.EVENT.CALL_ENDED, this.onCallEnded);
    },
    onBackPress(event) {
      return event.from === 'backbutton';  // 禁止安卓侧滑返回
    },
    methods: {
      initListener() {
        GRTC.on(GRTC.EVENT.USER_ACCEPTED, this.onUserAccepted);
        GRTC.on(GRTC.EVENT.USER_RANG, this.onUserRang);
        GRTC.on(GRTC.EVENT.USER_QUIT, this.onUserQuit);
        GRTC.on(GRTC.EVENT.CALL_ENDED, this.onCallEnded);
      },
      onUserAccepted(event) {
        uni.showToast({
        	title: event.user.data.name+"已接听",
        	icon: "none"
        });
        uni.redirectTo({
          url: './call'
        });
      },
      onUserRang(event) {
        uni.showToast({
        	title: event.user.data.name+"已响铃",
        	icon: "none"
        });
      },
      onUserQuit(event) {
        const username = event.user.data.name;
        let message = '';
        switch (event.reason) {
          case 'DIAL_TIMEOUT':
            message = `拨打超时`;
            break;
          case 'CANCELLED':
            message = `已取消`;
            break;
          case 'REJECTED':
            message = `${username}已拒绝`;
            break;
          case 'GOEASY_DISCONNECTED':
            message = `${username}网络异常`;
            break;
        }
        uni.showToast({title: message,icon: "none"});
      },
      onCallEnded() {
        uni.navigateBack();
      },
      end() {
        GRTC.end();
      },
    }
  }
</script>

<style scoped>
@import url('/static/style/rtcCallStyle.css');
</style>