66im/pages/conversations.vue

<template>
  <scroll-view class="conversations" scroll-y="true">
	  <view class="navBox">
	  	<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
	  	<view class="nav">
	  		<view class="navLeft" ><!-- @click="goBack" -->
	  			<!-- <image src="../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback"></image> -->
	  		</view>
	  		<view class="title">{{loginInfo.supplierName}}</view>
	  		<view class="goVin" ></view>
	  	</view>
	  </view>
	  <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
	  <view style="height: 44px;"></view>
    <view v-if="conversations.length > 0">
      <view class="scroll-item" v-for="(conversation, key) in conversations" :key="key">
        <view class="item-head">
         <!-- <image :src="conversation.data.avatar" class="head-icon"></image> -->
		  <image src="/static/img/yonghu.png" class="head-icon"></image>
          <view class="item-head_unread" v-if="conversation.unread">{{ conversation.unread }}</view>
        </view>
        <view class="scroll-item_info" @click="chat(conversation)">
          <view class="item-info-top">
            <text class="item-info-top_name">{{ conversation.data.name }}</text>
            <view class="item-info-top_time">{{ formatDate(conversation.lastMessage.timestamp) }}</view>
          </view>
          <view class="item-info-bottom">
            <view class="item-info-bottom-item">
              <view class="item-info-top_content" v-if="!conversation.lastMessage.recalled">
                <text class="unread-text">
                  {{ conversation.lastMessage.read === false && conversation.lastMessage.senderId === currentUser.userId ? '[未读]' : '' }}
                </text>

                <text v-if="conversation.lastMessage.senderId === currentUser.userId">我: </text>
                <text v-else>{{ conversation.type === 'group' ? conversation.lastMessage.senderData.name : conversation.data.name }}: </text>
                <text v-if="conversation.lastMessage.type === 'text'">{{ conversation.lastMessage.payload.text }}</text>
                <text v-else-if="conversation.lastMessage.type === 'video'">[视频消息]</text>
                <text v-else-if="conversation.lastMessage.type === 'audio'">[语音消息]</text>
                <text v-else-if="conversation.lastMessage.type === 'image'">[图片消息]</text>
                <text v-else-if="conversation.lastMessage.type === 'file'">[文件消息]</text>
                <text v-else-if="conversation.lastMessage.type === 'order'">[自定义消息:订单]</text>
                <text v-else-if="conversation.lastMessage.type === 'pic'">[图片消息]</text>
				<text v-else-if="conversation.lastMessage.type === 'car'">[车辆信息]</text>
				<text v-else>[[未识别内容]]</text>
              </view>
              <view class="item-info-top_content" v-else>
                <text>
                  {{conversation.lastMessage.recaller.id === currentUser.userId ? '你' : conversation.lastMessage.recaller.data.name}}撤回了一条消息
                </text>
              </view>
              <view class="item-info-bottom_action" @click.stop="showAction(conversation)"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="no-conversation" v-else>当前没有会话</view>
    <view class="action-container" v-if="actionPopup.visible">
      <view class="layer" @click="actionPopup.visible = false"></view>
      <view class="action-box">
        <view class="action-item" @click="topConversation">
          {{ actionPopup.conversation.top ? '取消置顶' : '置顶聊天' }}
        </view>
        <view class="action-item" @click="deleteConversation">删除聊天</view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
  import {formatDate} from '../lib/utils';
  import restApi from '../lib/restapi';

  const GoEasy = uni.$GoEasy;
  const GRTC = uni.$GRTC;
  export default {
    name: 'conversation',
    data() {
      return {
        conversations: [],

        actionPopup: {
          conversation: null,
          visible: false
        },
        currentUser: null,
		loginInfo:'',
		iStatusBarHeight:'',
      }
    },
	onLoad() {
		 this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	},
    onShow() {
	  
	  this.loginInfo=uni.getStorageSync('loginInfo');
	  /* uni.setNavigationBarTitle({
		  title:this.loginInfo.supplierName
	  }); */
     // uni.$currentUser = uni.getStorageSync('loginInfo');
      this.currentUser = uni.getStorageSync('loginInfo') // uni.$currentUser;
	  console.log(this.currentUser)
      if (!this.currentUser) {
        uni.navigateTo({ url: './login' });
        return;
      }
	  console.log("onShowconversations")
     // if (GoEasy.getConnectionStatus() === 'disconnected') {
        this.connectGoEasy(); //连接goeasy
        this.subscribeGroup(); //建立连接后，就应该订阅群聊消息，避免漏掉
     // }
      this.loadConversations(); //加载会话列表
      this.initGoEasyListeners();
    },
    onHide() {
      if (GoEasy.getConnectionStatus() === 'disconnected') {
        return
      }
      GoEasy.im.off(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, this.renderConversations);
    },
    methods: {
      formatDate,
      connectGoEasy() {
        uni.showLoading();
        GoEasy.connect({
          id: this.currentUser.userId,
          data: {
            name: this.currentUser.supplierName,
            avatar: ''
          },
          onSuccess: () => {
            console.log('GoEasy connect successfully.')
          },
          onFailed: (error) => {
            console.log('Failed to connect GoEasy, code:' + error.code + ',error:' + error.content);
          },
          onProgress: (attempts) => {
            console.log('GoEasy is connecting', attempts);
          }
        });
      },
      initGoEasyListeners() {
        GoEasy.im.on(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, this.renderConversations); //监听会话列表变化
        GoEasy.im.off(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, this.setUnreadAmount); // 移除之前的设置角标回调，防止重复回调
        GoEasy.im.on(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, this.setUnreadAmount); // 设置角标
        // #ifdef APP-PLUS || H5
        GRTC.off(GRTC.EVENT.RING, this.onRing); //移除之前的监听来电事件，防止重复回调
        GRTC.on(GRTC.EVENT.RING, this.onRing); //监听来电事件
        // #endif
      },
	  goBack(){
	  		  //app交互
	  		  var standalone = window.navigator.standalone
	  		  var userAgent = window.navigator.userAgent.toLowerCase()
	  		  var safari = /safari/.test(userAgent)
	  		  var ios = /iphone|ipod|ipad|mac/.test(userAgent)
	  		  var android = /android/.test(userAgent)
	  		  if (ios) {
	  			 if ( true) {//!standalone&& !safari
	  			   window.webkit.messageHandlers.goMyNav.postMessage(null)
	  			 }
	  		  } else if (android) {
	  		  	  window.android.postMessage()
	  		  }
	  },
      onRing() {
        const currentCall = GRTC.currentCall();
        if (currentCall.groupId) {
          uni.navigateTo({
            url: `./rtc/group/ring`,
          })
        } else {
          uni.navigateTo({
            url: `./rtc/private/ring`,
          })
        }
      },

      // 加载最新的会话列表
      loadConversations() {
        GoEasy.im.latestConversations({
          onSuccess: (result) => {
            uni.hideLoading();
            let content = result.content;
            this.renderConversations(content);
            this.setUnreadAmount(content);
          },
          onFailed: (error) => {
            uni.hideLoading();
            console.log('获取最新会话列表失败, error:', error);
          }
        });
      },
      renderConversations(content) {
        this.conversations = content.conversations;
		console.log("消息列表")
		console.log(this.conversations)
      },
      setUnreadAmount(content) {
        const unreadTotal = content.unreadTotal;
        if(unreadTotal > 0) {
          uni.setTabBarBadge({
            index: 0,
            text: unreadTotal.toString()
          });
        }else{
          uni.removeTabBarBadge({index: 0});
        }
        // #ifdef APP-PLUS
        GoEasy.setBadge({
          badge: unreadTotal,
          onSuccess: function () {
            console.log("setBadge successfully.")
          },
          onFailed: function (error) {
            console.log("Failed to setBadge,error:" + error);
          }
        });
        // #endif
      },
      subscribeGroup() {
        let groups = restApi.findGroups(this.currentUser);
        let groupIds = groups.map(item => item.id);
        GoEasy.im.subscribeGroup({
          groupIds: groupIds,
          onSuccess: function () {
            console.log('订阅群消息成功');
          },
          onFailed: function (error) {
            console.log('订阅群消息失败:', error);
          }
        });
      },
      topConversation() {  //会话置顶
        this.actionPopup.visible = false;
        let conversation = this.actionPopup.conversation;
        let description = conversation.top ? '取消置顶' : '置顶';
        GoEasy.im.topConversation({
          conversation: conversation,
          top: !conversation.top,
          onSuccess: function () {
            uni.showToast({
              title: description + '成功',
              icon: 'none'
            });
          },
          onFailed: function (error) {
            console.log(description, '失败：', error);
          }
        });
      },
      deleteConversation() {
        uni.showModal({
          content: '确认删除这条会话吗？',
          success: (res) => {
            if (res.confirm) {
              let conversation = this.actionPopup.conversation;
              this.actionPopup.visible = false;
              GoEasy.im.removeConversation({
                conversation: conversation,
                onSuccess: function () {
                  console.log('删除会话成功');
                },
                onFailed: function (error) {
                  console.log(error);
                },
              });
            } else {
              this.actionPopup.visible = false;
            }
          },
        })
      },
      chat(conversation) {
        let path = conversation.type === GoEasy.IM_SCENE.PRIVATE ?
          './privateChatG?to=' + conversation.userId :
          './groupChat?to=' + conversation.groupId;
		  var friend={
			  id:conversation.userId,
			  supplierName:conversation.data.name,
			  avatar:conversation.data.avatar,
		  }
		  uni.setStorage({
		  		key: 'friend',
		  		data: friend,
		  		 success: function () {	
		  				/* uni.navigateTo({
		  				  url: './privateChat?to=' + friend.ID
		  				});	 */
						uni.navigateTo({ url: path });
		  		 }
		  });
		  		
        
      },
      showAction(conversation) {
        this.actionPopup.conversation = conversation;
        this.actionPopup.visible = true;
      }
    }
  }
</script>

<style scoped>
  page {
    height: 100%;
  }

  .conversations {
    width: 750rpx;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .conversations .scroll-item {
    height: 152rpx;
    display: flex;
    align-items: center;
    padding-left: 32rpx;
  }

  .conversations .scroll-item .head-icon {
    width: 88rpx;
    height: 88rpx;
    margin-right: 28rpx;
	border-radius: 8rpx;
  }

  .conversations .scroll-item_info {
    height: 151rpx;
    width: 590rpx;
    padding-right: 32rpx;
    border-bottom: 1px solid #EFEFEF;
  }

  .conversations .scroll-item_info .item-info-top {
    padding-top: 20rpx;
    height: 60rpx;
    line-height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

  }

  .conversations .item-info-top_name {
    font-size: 30rpx;
    color: #1C1C1C;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 370rpx;
	white-space: nowrap;
  }

  .conversations .item-info-top_time {
    font-size: 24rpx;
   color: #BFBFBF;
  }

  .conversations .item-info-bottom {
    height: 40rpx;
    line-height: 40rpx;
    overflow: hidden;
  }

  .conversations .item-info-bottom-item {
    display: flex;
    justify-content: space-between;
  }

  .item-info-bottom .item-info-top_content {
    font-size: 26rpx;
    color: #A5A5A5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  .item-info-bottom .item-info-bottom_action {
    width: 50rpx;
    height: 50rpx;
    font-size: 34rpx;
    background: url("../static/images/action.png") no-repeat center;
    background-size: 28rpx 30rpx;
  }

  .no-conversation {
    width: 100%;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 34rpx;
    color: #9D9D9D;
  }

  .item-head {
    position: relative;
  }

  .item-head .item-head_unread {
    padding: 6rpx;
    background-color: #EE593C;
    color: #FFFFFF;
    font-size: 34rpx;
    line-height: 28rpx;
    border-radius: 24rpx;
    min-width: 24rpx;
    min-height: 24rpx;
    text-align: center;
    position: absolute;
    top: -10rpx;
    right: 15rpx;
  }

  .action-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .action-container .layer {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(51, 51, 51, 0.5);
    width: 100%;
    height: 100%;
    z-index: 99;
  }

  .action-box {
    width: 400rpx;
    height: 240rpx;
    background: #ffffff;
    position: relative;
    z-index: 100;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .action-item {
    text-align: center;
    line-height: 120rpx;
    font-size: 34rpx;
    color: #262628;
    border-bottom: 1px solid #EFEFEF;
  }

  .unread-text {
    color: #d02129;
  }
  .backImg{
  		width: 44rpx;
  		height: 44rpx;
  		
  		/* margin-left: 10rpx; */
  		/* margin-right: 20rpx; */
  	}
  	.nav{
  		height: 44px;
  		display: flex;
  		justify-content: space-between;
  		
  		align-items: center;
  		border-bottom: 1px solid #eaeaea;
  	}
  .goVin{
  	width: 2rpx;
  	color: #3F90F7;
  	text-align: right;
  	padding-right: 20rpx;
  }
  .navLeft{
  	width: 2rpx;
  	padding-left: 20rpx;
  }
  .navBox{
  	position: fixed;
  	left: 0;
  	top: 0;
  	z-index: 11;
  	width: 100vw;
  }
.nav  .title{
	font-size: 32rpx;font-weight: 500;
}
</style>