yijianbao_user_uniapp/pages_im/pages/common/nativeCallHistory/index.vue

<template>
  <view class="page_container">
    <custom-nav-bar title="通话记录" />

    <u-tabs class="top_tab" :scrollable="false" :list="tabList" @click="clickTab"></u-tabs>

    <view class="pane_row" :style="{ transform: `translateX(${isAll ? '0' : '-100%'})` }">
      <view class="pane_content">
        <u-list :height="`${listHeight}px`" lowerThreshold="100" v-if="allList.length > 0" class="member_list">
          <u-list-item v-for="item in allList" :key="item.roomID">
            <view class="user_item" :style="{ color: item.duration > 0 ? '' : '#FF381F' }"
              @click="rtcInvitePrepare(item.isSelf ? item.inviteeUserIDList[0] : item.inviterUserID)">
              <my-avatar :src="item.faceURL" :desc="item.nickname" :isGroup="false" size="42" />
              <view class="details">
                <text style="font-size: 34rpx;">{{ item.nickname }}</text>
                <text
                  :style="{ marginTop: '4rpx', color: item.duration > 0 ? '#8E9AB0' : '#FF381F', fontSize: '28rpx' }">{{
                    item.mediaType === "video" ? '[视频通话]' :
                    '[语音通话]' }}{{ latestMessageTime(item.time) }}</text>
              </view>
              <text class="type" v-if="item.duration === 0">{{ item.isSelf ? '呼出' : '呼入' }}</text>
              <text class="type" v-else>{{ toSecFormat(item.duration) }}</text>
            </view>
          </u-list-item>
        </u-list>
        <u-empty v-else mode="list" />
      </view>

      <view class="pane_content">
        <u-list :height="`${listHeight}px`" lowerThreshold="100" v-if="blockList.length > 0" class="member_list">
          <u-list-item v-for="item in blockList" :key="item.roomID">
            <view class="user_item" :style="{ color: item.duration > 0 ? '' : '#FF381F' }"
              @click="rtcInvitePrepare(item.isSelf ? item.inviteeUserIDList[0] : item.inviterUserID)">
              <my-avatar :src="item.faceURL" :desc="item.nickname" :isGroup="false" size="42" />
              <view class="details">
                <text style="font-size: 34rpx;">{{ item.nickname }}</text>
                <text
                  :style="{ marginTop: '4rpx', color: item.duration > 0 ? '#8E9AB0' : '#FF381F', fontSize: '28rpx' }">{{
                    item.mediaType === "video" ? '[视频通话]' :
                    '[语音通话]' }}{{ latestMessageTime(item.time) }}</text>
              </view>
              <text class="type" v-if="item.duration === 0">{{ item.isSelf ? '呼出' : '呼入' }}</text>
              <text class="type" v-else>{{ toSecFormat(item.duration) }}</text>
            </view>
          </u-list-item>
        </u-list>
        <u-empty v-else mode="list" />
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import {
  callingModule,
  secFormat
} from "../../../util/imCommon";
import {
  formatConversionTime,
} from "../../../util/imCommon";
import CustomNavBar from "../../../components/CustomNavBar/index.vue";
import MyAvatar from "../../../components/MyAvatar/index.vue";
export default {
  components: {
    CustomNavBar,
    MyAvatar,
  },
  computed: {
    ...mapGetters([
      "storeFriendList",
    ]),
    latestMessageTime() {
      return function (time) {
        return formatConversionTime(time)
      }
    },
    toSecFormat() {
      return function (time) {
        return secFormat(time)
      }
    },
  },
  data() {
    return {
      allList: [],
      blockList: [],
      isAll: true,
      tabList: [
        {
          name: "所有通话",
        },
        {
          name: "未接来电",
        },
      ],
      listHeight:
        uni.getWindowInfo().windowHeight -
        uni.getWindowInfo().statusBarHeight -
        110,
    };
  },
  onShow() {
    this.getNativeCallList();
  },
  methods: {
    clickTab({ index }) {
      this.isAll = index === 0;
    },
    chooseCallMediaType() {
      return new Promise((resolve, reject) => {
        uni.showActionSheet({
          itemList: ["语音通话", "视频通话"],
          success: ({ tapIndex }) => {
            resolve(tapIndex ? "video" : "audio");
          },
          fail: () => reject(),
        });
      });
    },
    sendRtcInvite(mediaType, userID) {
      const isVideo = mediaType === "video";
      callingModule.startLiveChat(
        isVideo,
        [userID],
        "",
        this.$store.getters.storeCurrentUserID,
      );
    },
    rtcInvitePrepare(userID) {
      this.chooseCallMediaType()
        .then((callMediaType) => {
          this.sendRtcInvite(callMediaType, userID);
        });
    },
    getUserInfo(userID, storeFriendList) {
      const friend = storeFriendList.find((friend) => friend.userID === userID);
      return {
        nickname: friend.nickname,
        faceURL: friend.faceURL,
      }
    },
    mapNativeCalls(nativeCallList, storeFriendList) {
      return nativeCallList.map((item) => {
        const userInfo = item.isSelf
          ? this.getUserInfo(item.inviteeUserIDList[0], storeFriendList)
          : this.getUserInfo(item.inviterUserID, storeFriendList);

        return { ...item, ...userInfo };
      });
    },
    getNativeCallList() {
      const nativeCallList = uni.getStorageSync(`${this.$store.getters.storeCurrentUserID}_nativecall`) || [];
      this.allList = this.mapNativeCalls(nativeCallList, this.storeFriendList);
      this.blockList = this.mapNativeCalls(nativeCallList, this.storeFriendList).filter((item) => item.duration === 0);
    }
  },
};
</script>

<style lang="scss">
.page_container {
  background-color: #f8f8f8;
  overflow-x: hidden;

  .u-tabs {
    background-color: #fff;
    // margin-bottom: 12px;
  }

  .pane_row {
    display: flex;
    transition: all 0.3s ease 0s !important;

    .pane_content {
      @include colBox(false);
      height: 100%;
      flex: 0 0 100%;

      .user_item {
        @include vCenterBox();
        padding: 24rpx;
        color: $uni-text-color;

        .details {
          @include vCenterBox();
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          margin-left: 12rpx;
          width: 75%;
        }

        .type {
          font-size: 28rpx;
          margin-right: 12rpx;
        }
      }

      /deep/.user_item {
        background-color: #fff;
      }
    }
  }

  .u-empty {
    margin-top: 20vh !important;
  }
}
</style>