cte-share/pages/imcall/GoeasyExchange.vue

<template>
  <view class="chatInterface" @contextmenu.prevent="">
    <view class="scroll-view">
      <image v-if="history.loading" class="history-loaded" src="/static/goimge/loading.svg"/>
      <view v-else :class="history.allLoaded ? 'history-loaded':'load'" @click="loadHistoryMessage(false)">
        <view>{{ history.allLoaded ?$t('GoeasyExchange.nohistory'):$t('GoeasyExchange.gethistory') }}</view>
      </view>

      <checkbox-group @change="selectMessages">
        <!--消息记录-->
        <view v-for="(message,index) in history.messages" :key="message.messageId">
          <!--时间显示，类似于微信，隔5分钟不发言，才显示时间-->
          <view class="time-lag">
            {{ renderMessageDate(message, index) }}
          </view>
          <view class="message-recalled" v-if="message.recalled">
            <view v-if="message.recaller.id === currentUser.id" class="message-recalled-self">
              <view>{{$t('GoeasyExchange.nichlytxx')}}</view>
              <span v-if="message.type === 'text' && Date.now()-message.timestamp< 60 * 1000 "
                    @click="editRecalledMessage(message.payload.text)">{{$t('GoeasyExchange.chongxbj')}}</span>
            </view>
            <view v-else>{{ message.recaller.data.name }}{{$t('GoeasyExchange.nichlytxx')}}</view>
          </view>
          <view class="message-item" v-else>
            <view class="message-item-checkbox">
              <checkbox v-show="messageSelector.visible && message.status !== 'sending'" :value="message.messageId"
                        :checked="messageSelector.messages.includes(message)"/>
            </view>
            <view class="message-item-content" :class="{'self' : message.senderId ===  currentUser.id}">
              <view class="avatar">
                <image :src="message.senderId === currentUser.id? SplicingImgUrl(currentUser.avatar) : SplicingImgUrl(friend.avatar)"></image>
              </view>

              <view class="content" @click.right="showActionPopup(message)" @longpress="showActionPopup(message)">
                <view class="message-payload">
                  <b class="pending" v-if="message.status === 'sending'"></b>
                  <b class="send-fail" v-if="message.status === 'fail'"></b>
                  <view v-if="message.type === 'text'" v-html="renderTextMessage(message)"></view>
                  <image v-if="message.type === 'image'"
                     :data-url="message.payload.url"
                     :src="message.payload.thumbnail"
                     class="image-content"
                     @click="showImageFullScreen"
                  ></image>
				  <image v-if="message.type === 'Privateimage'"
				     :data-url="SplicingImgUrl(message.payload.image)"
				     :src="SplicingImgUrl(message.payload.image)"
				     class="image-content"
				     @click="showImageFullScreen"
				  ></image>
                  <view class="video-snapshot" v-if="message.type === 'video'" :data-url="message.payload.video.url"
                        @click="playVideo">
                    <image
                      :src="message.payload.thumbnail.url"
                      :style="{height: getImageHeight(message.payload.thumbnail.width,message.payload.thumbnail.height)+'rpx' }"
                      mode="heightFix"
                    ></image>
                    <view class="video-play-icon"></view>
                  </view>
                  <view class="file-content" v-if="message.type === 'file'">
                    <view class="file-info">
                      <span class="file-name">{{ message.payload.name }}</span>
                      <span class="file-size">{{ (message.payload.size / 1024).toFixed(2) }}KB</span>
                    </view>
                    <image class="file-img" src="/static/goimge/file-icon.png"></image>
                  </view>
                  <view v-if="message.type ==='audio'" class="audio-content" @click="playAudio(message)">
                    <view class="audio-facade" :style="{width:Math.ceil(message.payload.duration)*7 + 50 + 'px'}">
                      <view
                        class="audio-facade-bg"
                        :class="{'play-icon':audioPlayer.playingMessage && audioPlayer.playingMessage.messageId === message.messageId}"
                      ></view>
                      <view>{{Math.ceil(message.payload.duration) || 1}}<span>"</span></view>
                    </view>
                  </view>
                  <view v-if="message.type === 'order'" class="order-content">
                    <view class="order-id">{{$t('GoeasyExchange.dingdanhao')}}：{{ message.payload.id }}</view>
                    <view class="order-body">
                      <image :src="message.payload.url" class="order-img"></image>
                      <view>
                        <view class="order-name">{{ message.payload.name }}</view>
                        <view class="order-info">
                          <view class="order-price">{{ message.payload.price }}</view>
                          <view class="order-count">{{$t('GoeasyExchange.gong')}}{{ message.payload.count }}{{$t('GoeasyExchange.jian')}}</view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view v-if="message.senderId === currentUser.id" :class="message.read ?'message-read':'message-unread'">
                  <view v-if="message.status === 'success'">{{ message.read ? $t('GoeasyExchange.yidu') :$t('GoeasyExchange.weidu')}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </checkbox-group>
    </view>
    <view class="action-box" v-if="!videoPlayer.visible && !messageSelector.visible">
      <view class="action-top">
        <view @click="switchAudioKeyboard">
          <image class="more" v-if="audio.visible" src="/static/goimge/jianpan.png"></image>
          <image class="more" v-else src="/static/goimge/audio.png"></image>
        </view>
        <view v-if="audio.visible" class="record-input" @click="onRecordStart" @touchend.stop="onRecordEnd" @touchstart.stop="onRecordStart">
          {{ audio.recording ? $t('GoeasyExchange.songkfs') : $t('GoeasyExchange.anzhuly') }}
        </view>
        <!-- GoEasyIM最大支持3k的文本消息，如需发送长文本，需调整输入框maxlength值 -->
        <input v-else v-model="text" @confirm="sendTextMessage" class="consult-input" maxlength="700" :placeholder="$t('GoeasyExchange.fasongxx')" type="text" />
        <view @click="switchEmojiKeyboard">
          <image class="more" v-if="emoji.visible" src="/static/goimge/jianpan.png"></image>
          <image class="more" v-else src="/static/goimge/emoji.png"></image>
        </view>
        <view>
          <image @click="showOtherTypesMessagePanel()" class="more" src="/static/goimge/more.png"/>
        </view>
        <view v-if="text" class="send-btn-box">
          <text class="btn" @click="sendTextMessage()">{{$t('GoeasyExchange.fasong')}}</text>
        </view>
      </view>
      <!--展示表情列表-->
      <view class="action-bottom action-bottom-emoji" v-if="emoji.visible">
        <image class="emoji-item" v-for="(emojiItem, emojiKey, index) in emoji.map" :key="index"
               :src="emoji.url + emojiItem" @click="chooseEmoji(emojiKey)"></image>
      </view>
      <!--其他类型消息面板-->
      <view v-if="otherTypesMessagePanelVisible" class="action-bottom">
        <view class="more-icon">
          <image @click="sendPrivateMessage()" class="operation-icon" src="/static/goimge/picture.png"></image>
          <view class="operation-title">{{$t('GoeasyExchange.tupian')}}</view>
        </view>
		<view class="more-icon">
		  <image @click="imcall()" class="operation-icon" src="/static/goimge/jietong.png"></image>
		  <view class="operation-title">{{$t('GoeasyExchange.tonghua')}}</view>
		</view>
        <!-- <view class="more-icon">
          <image @click="sendVideoMessage()" class="operation-icon" src="/static/goimge/video.png"></image>
          <view class="operation-title">视频</view>
        </view>
        <view class="more-icon">
          <image @click="showOrderMessageList()" class="operation-icon" src="/static/goimge/order.png"></image>
          <view class="operation-title">订单</view>
        </view> -->
      </view>
    </view>
    <view class="action-popup" @touchmove.stop.prevent v-if="actionPopup.visible">
      <view class="layer"></view>
      <view class="action-list">
        <view class="action-item" @click="deleteSingleMessage">{{$t('GoeasyExchange.sanchu')}}</view>
        <view class="action-item" v-if="actionPopup.recallable" @click="recallMessage">{{$t('GoeasyExchange.chehui')}}</view>
        <view class="action-item" @click="showCheckBox">{{$t('GoeasyExchange.duoxuan')}}</view>
        <view class="action-item" @click="hideActionPopup">{{$t('GoeasyExchange.quxiao')}}</view>
      </view>
    </view>
    <view class="messageSelector-box" v-if="messageSelector.visible">
      <image class="messageSelector-btn" @click="deleteMultipleMessages" src="/static/goimge/delete.png"></image>
    </view>
    <view class="record-loading" v-if="audio.recording"></view>
    <video v-if="videoPlayer.visible" :src="videoPlayer.url" id="videoPlayer"
           @fullscreenchange="onVideoFullScreenChange"></video>
    <view v-if="orderList.visible" class="order-list">
      <view class="orders-content">
        <view class="title">
          <view>{{$t('GoeasyExchange.qingxuanzdd')}}</view>
          <view class="close" @click="hideOrderMessageList">×</view>
        </view>
        <view class="orders">
          <view
            v-for="(order, index) in orderList.orders"
            :key="index" class="order-item"
            @click="sendOrderMessage(order)"
          >
            <view class="order-id">{{$t('GoeasyExchange.dingdanhao')}}：{{ order.id }}</view>
            <view class="order-body">
              <image :src="order.url" class="order-img"></image>
              <view class="order-name">{{ order.name }}</view>
              <view class="order-right">
                <view class="order-price">{{ order.price }}</view>
                <view class="order-count">{{$t('GoeasyExchange.gong')}}{{ order.count }}{{$t('GoeasyExchange.jian')}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import EmojiDecoder from '@/pages/api/EmojiDecoder.js';
  import restApi from '@/pages/api/restapi';
  import {formatDate} from '@/pages/api/utils';
 
  const IMAGE_MAX_WIDTH = 200;
  const IMAGE_MAX_HEIGHT = 150;
  const recorderManager = uni.getRecorderManager();
  export default {
    name: 'privateChat',
    data() {
      const emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/';
      const emojiMap = {
        '[么么哒]': 'emoji_3@2x.png',
        '[乒乓]': 'emoji_4@2x.png',
        '[便便]': 'emoji_5@2x.png',
        '[信封]': 'emoji_6@2x.png',
        '[偷笑]': 'emoji_7@2x.png',
        '[傲慢]': 'emoji_8@2x.png'
      };
      return {
        //聊天文本框
        text: '',
        friend: null,
		iscaller:false,
		issend:false,
        to: {},// 作为createMessage的参数
        currentUser: null,
		audioObj:null,
		soundPlay:false,
        //定义表情列表
        emoji: {
          url: emojiUrl,
          map: emojiMap,
          visible: false,
          decoder: new EmojiDecoder(emojiUrl, emojiMap),
        },
        //是否展示‘其他消息类型面板’
        otherTypesMessagePanelVisible: false,
        orderList: {
          orders: [],
          visible: false
        },
        history: {
          messages: [],
          allLoaded: false,
          loading: false
        },
        audio: {
          startTime: null,
          //语音录音中
          recording: false,
          //录音按钮展示
          visible: false
        },
        audioPlayer: {
          innerAudioContext: null,
          playingMessage: null,
        },
        videoPlayer: {
          visible: false,
          url: '',
          context: null
        },
        // 展示消息删除弹出框
        actionPopup: {
          visible: false,
          message: null,
          recallable: false,
        },
        // 消息选择
        messageSelector: {
          visible: false,
          messages: []
        }
      }
    },
    onLoad(option) {
      //聊天对象
	  var systemInfo = uni.getSystemInfoSync();
	  var isAndroid = systemInfo.platform.toLowerCase() === 'android';
	  getApp().globalData.EXViewOpen=true;
	  if(option.caller==1){
	  	this.iscaller=true;
		var friendinfo = uni.getStorageSync('imUser');
	  	this.friend = {
			id:'userid_'+friendinfo.userId,
			name:friendinfo.nickName,
			avatar:friendinfo.avatar
		}
	  }
	  else{
	  	var payload=uni.getStorageSync('impayload');
		this.doPushMessage(payload);
		if(!isAndroid){
			this.audioObj=uni.createInnerAudioContext();
			this.audioObj.src='static/y800.mp3';
			this.audioObj.play();
			this.soundPlay=true;
		}
	  }
	  var userinfo = uni.getStorageSync('userInfo');
      this.currentUser={
		  id:'userid_'+userinfo.userId,
		  name:userinfo.nickName,
		  avatar:userinfo.avatar
	  };
      this.to = {
        id:this.friend.id,
        type: this.GoEasy.IM_SCENE.PRIVATE,
        data: {
          name: this.friend.name,
          avatar: this.friend.avatar
        }
      };

      this.initialGoEasyListeners();
      // 语音播放器
      this.initialAudioPlayer();
      // 录音监听器
      this.initRecorderListeners();
    },
    onShow() {
      this.otherTypesMessagePanelVisible = false;
      this.emoji.visible = false;
    },
    onReady() {
      this.loadHistoryMessage(true);
      this.videoPlayer.context = uni.createVideoContext('videoPlayer', this);
      // https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle
      uni.setNavigationBarTitle({ title: this.friend.name });
    },
    onPullDownRefresh(e) {
      this.loadHistoryMessage(false);
    },
    onUnload() {
		if(this.soundPlay){
			this.audioObj.pause();
		}
      //退出聊天页面之前，清空监听器
	  getApp().globalData.EXViewOpen=false;
      this.goEasy.im.off(this.GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, this.onMessageReceived);
      this.goEasy.im.off(this.GoEasy.IM_EVENT.MESSAGE_DELETED, this.onMessageDeleted);
	  //this.goEasy.im.off(this.GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, this.onPrivateMessageReceived);
    },
    methods: {
		doPushMessage(str){
			if(str.indexOf("\\\"")!=-1){
				str=str.replace(/\\\"/g, '\"');
				str = str.replace(/\"{/g, '{');
				str = str.replace(/}\"/g, '}');
			}
			var obj = JSON.parse(str)
			this.friend = {
				id:'userid_'+obj.userId,
				name:obj.nickName,
				avatar:obj.avatar
			}
			console.log(obj);
			// this.imUser=obj;
			uni.setStorageSync('imUser',obj);
		},
		SplicingImgUrl(url){
			var baseUrl='https://backend.cityexpress168.com.vn/prod-api';
			if(!url){
				return '';
			}
			if(url.length<8){
				return '';
			}
			var http= url.substring(0,8);
			if(http==='https://'){
				return url;
			}
			else if(http==='/static/'){
				return url;
			}
			else{
				return (baseUrl+url);
			}
			return '';
		},
      //渲染文本消息，如果包含表情，替换为图片
      //todo:本不需要该方法，可以在标签里完成，但小程序有兼容性问题，被迫这样实现
      renderTextMessage(message) {
        return '<span class="text-content">' + this.emoji.decoder.decode(message.payload.text) + '</span>'
      },
      //像微信那样显示时间，如果有几分钟没发消息了，才显示时间
      //todo:本不需要该方法，可以在标签里完成，但小程序有兼容性问题，被迫这样实现
      renderMessageDate(message, index) {
        if (index === 0) {
          return formatDate(message.timestamp)
        } else {
          if (message.timestamp - this.history.messages[index - 1].timestamp > 5 * 60 * 1000) {
            return formatDate(message.timestamp)
          }
        }
        return '';
      },
      initialGoEasyListeners() {
        // 监听私聊消息
        this.goEasy.im.on(this.GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, this.onMessageReceived);
        //监听消息删除
        this.goEasy.im.on(this.GoEasy.IM_EVENT.MESSAGE_DELETED, this.onMessageDeleted);
		//监听自定义消息
		//this.goEasy.im.on(this.GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, this.onPrivateMessageReceived);
      },
      onMessageReceived (message) {
        let senderId = message.senderId;
        let receiverId = message.receiverId;
        let friendId = this.currentUser.id === senderId ? receiverId : senderId;
        if (friendId === this.friend.id) {
          this.history.messages.push(message);
          //聊天时，收到消息标记为已读
          this.markPrivateMessageAsRead();
          //收到新消息，是滚动到最底部
          this.scrollToBottom();
        }
      },
      onMessageDeleted (deletedMessages) {
        deletedMessages.forEach(message => {
          let senderId = message.senderId;
          let receiverId = message.receiverId;
          let friendId = this.currentUser.id === senderId ? receiverId : senderId;
          if (friendId === this.friend.id) {
            let index = this.history.messages.indexOf(message);
            if (index > -1) {
              this.history.messages.splice(index, 1);
            }
          }
        });
      },
	  onPrivateMessageReceived(message){
		  let senderId = message.senderId;
		  let receiverId = message.receiverId;
		  let friendId = this.currentUser.id === senderId ? receiverId : senderId;
		  if (friendId === this.friend.id) {
			this.history.messages.push(message);
			//聊天时，收到消息标记为已读
			this.markPrivateMessageAsRead();
			//收到新消息，是滚动到最底部
			this.scrollToBottom();
		  }
	  },
      initialAudioPlayer () {
        this.audioPlayer.innerAudioContext = uni.createInnerAudioContext();
        this.audioPlayer.innerAudioContext.onEnded(() => {
          this.audioPlayer.playingMessage = null;
        });
        this.audioPlayer.innerAudioContext.onStop(() => {
          this.audioPlayer.playingMessage = null;
        });
      },
      initRecorderListeners() {
        // 监听录音开始
        recorderManager.onStart(() => {
          this.audio.recording = true;
          this.audio.startTime = Date.now();
        });
        //录音结束后，发送
        recorderManager.onStop((res) => {
          let endTime = Date.now();
          this.audio.recording = false;
          let duration = endTime - this.audio.startTime;
          if (duration < 1000) {
            uni.showToast({
              icon: 'error',
              title:this.$t('GoeasyExchange.luyinsjtd'),
              duration: 500
            });
            return;
          }
          res.duration = duration;
          this.goEasy.im.createAudioMessage({
            to: this.to,
            file: res,
            notification: {
              title: this.currentUser.name + 'message',
              body:this.$t('GoeasyExchange.yuyinxx'),		// 字段最长 50 字符message
              sound: 'message',
              badge: '+1'
            },
            onProgress: function (progress) {
              console.log(progress)
            },
            onSuccess: (message) => {
              this.sendMessage(message);
            },
            onFailed: (e) => {
              console.log('error :', e);
            }
          });
        });
        // 监听录音报错
        recorderManager.onError((res) => {
          this.audio.recording = false;
          recorderManager.stop();
          uni.showToast({
            icon: 'none',
            title:this.$t('GoeasyExchange.luyinshib'),
            duration: 1000
          });
        })
      },
      /**
       * 核心就是设置高度，产生明确占位
       *
       * 小  (宽度和高度都小于预设尺寸)
       *    设高=原始高度
       * 宽 (宽度>高度)
       *    高度= 根据宽度等比缩放
       * 窄  (宽度<高度)或方(宽度=高度)
       *    设高=MAX height
       *
       * @param width,height
       * @returns number
       */
      getImageHeight(width, height) {
        if (width < IMAGE_MAX_WIDTH && height < IMAGE_MAX_HEIGHT) {
          return height * 2;
        } else if (width > height) {
          return (IMAGE_MAX_WIDTH / width * height) * 2;
        } else if (width === height || width < height) {
          return IMAGE_MAX_HEIGHT * 2;
        }
      },
      sendMessage(message) {
		  var that=this;
        this.history.messages.push(message);
        this.scrollToBottom();
        this.goEasy.im.sendMessage({
          message: message,
          onSuccess: function (message) {
            console.log('发送成功.', message);
			if(that.iscaller&&!that.issend){
				that.goEasypushmsg();
			}
          },
          onFailed: function (error) {
            if (error.code === 507) {
              console.log('发送语音/图片/视频/文件失败，没有配置OSS存储，详情参考：https://docs.goeasy.io/2.x/im/message/media/alioss');
            } else {
              console.log('发送失败:', error);
            }
          }
        });
      },
      sendTextMessage() {
        if (this.text.trim() !== '') {
          let body = this.text;
          if (this.text.length >= 50) {
            body = this.text.substring(0, 30) + '...';
          }
          this.goEasy.im.createTextMessage({
            text: this.text,
            to: this.to,
            notification: {
              title: this.currentUser.name + 'message',
              body: body,
              sound: 'message',
              badge: '+1'
            },
            onSuccess: (message) => {
              this.sendMessage(message);
            },
            onFailed: (e) => {
              console.log('error :', e);
            }
          });
        }
        this.text = '';
      },
      sendVideoMessage() {
        uni.chooseVideo({
          success: (res) => {
            this.goEasy.im.createVideoMessage({
              to: this.to,
              file: res,
              notification: {
                title: this.currentUser.name + 'message',
                body:this.$t('GoeasyExchange.shipinxx'),		// 字段最长 50 字符
                sound: 'message',
                badge: '+1'
              },
              onProgress: function (progress) {
                console.log(progress)
              },
              onSuccess: (message) => {
                this.otherTypesMessagePanelVisible = false;
                this.sendMessage(message);
              },
              onFailed: (e) => {
                console.log('error :', e);
              }
            });
          }
        })
      },
      sendImageMessage() {
        uni.chooseImage({
          count: 9,
          success: (res) => {
            res.tempFiles.forEach(file => {
              this.goEasy.im.createImageMessage({
                to: this.to,
                file: file,
                notification: {
                  title: this.currentUser.name + 'message',
                  body:this.$t('GoeasyExchange.tupianxx'),		// 字段最长 50 字符
                  sound: 'message',
                  badge: '+1'
                },
                beforeSend:()=>{

                },
                customizedUpload:(file,message)=> {
                  return new Promise((resolve, reject) => {
                    //上传图片到自己的服务器
                    uni.uploadFile({
                      url: 'https://www.goeasy.io/2.0/im/upload', //仅为示例，非真实的接口地址
                      filePath: file.path,
                      name: 'file',
                      success: (uploadFileRes) => {
                        let data = JSON.parse(uploadFileRes.data);
                        if (data.code === 0) {
                          message.url = data.data.url;

                          resolve();
                        } else {
                          reject();
                        }
                      },
                      fail: (e) => {
                        reject(e);
                      }
                    });
                  })
                },
                onProgress: function (progress) {
                  console.log(progress)
                },
                onSuccess: (message) => {
                  this.otherTypesMessagePanelVisible = false;
                  this.sendMessage(message);
                },
                onFailed: (e) => {
                  console.log('error :', e);
                }
              });
            })
          }
        });
      },
	  sendPrivateMessage() {
	  	var that = this;
	    uni.chooseImage({
	      count: 9,
	      success: (res) => {
	        res.tempFiles.forEach(file => {
	          //上传图片到自己的服务器
	          uni.uploadFile({
	            url:that.$upImagurl, //仅为示例，非真实的接口地址
	            filePath: file.path,
	            name: 'file',
	            success: (uploadFileRes) => {
	              let data = JSON.parse(uploadFileRes.data);
	          		console.log('1------2',data);
	  					if(data.code==200){
	  						var Pimage = {
	  							image:data.data,
	  						};
	  						var customMessage = that.goEasy.im.createCustomMessage({
	  							type: 'Privateimage',  //字符串，可以任意自定义类型，比如红包'hongbao', 订单'order，处方'chufang'
	  							payload: Pimage,
	  							to: that.to
	  						});
	  						that.otherTypesMessagePanelVisible = false;
	  						that.sendMessage(customMessage);
	  					}
	            },
	            fail: (e) => {
	              
	            }
	          });
	        })
	      }
	    });
	  },
	  imcall(){
		  uni.navigateTo({
		  	url:'/pages/imcall/audioCall?caller=1'
		  })
	  },
      sendOrderMessage(order) {
        //GoEasyIM自定义消息,实现订单发送
        this.goEasy.im.createCustomMessage({
          type: 'order',
          payload: order,
          to: this.to,
          notification: {
            title: this.currentUser.name + 'message',
            body:this.$t('GoeasyExchange.dingdanxx'),
            sound: 'message',
            badge: '+1'
          },
          onSuccess: (message) => {
            this.otherTypesMessagePanelVisible = false;
            this.sendMessage(message);
          },
          onFailed: (e) => {
            console.log('error :', e);
          }
        });
        this.orderList.visible = false;
      },
      showActionPopup(message) {
        const MAX_RECALLABLE_TIME = 3 * 60 * 1000; //3分钟以内的消息才可以撤回
        this.messageSelector.messages = [message];
        if ((Date.now() - message.timestamp) < MAX_RECALLABLE_TIME && message.senderId === this.currentUser.id && message.status === 'success') {
          this.actionPopup.recallable = true;
        } else {
          this.actionPopup.recallable = false;
        }
        this.actionPopup.visible = true;
      },
      hideActionPopup () {
        this.actionPopup.visible = false;
        this.actionPopup.message = null;
      },
      deleteSingleMessage() {
        uni.showModal({
          content:this.$t('GoeasyExchange.querensanc'),
          success: (res) => {
            this.actionPopup.visible = false;
            if (res.confirm) {
              this.deleteMessage();
            }
          },
        })
      },
      deleteMultipleMessages() {
        if (this.messageSelector.messages.length > 0) {
          uni.showModal({
            content: this.$t('GoeasyExchange.querensanc'),
            success: (res) => {
              this.messageSelector.visible = false;
              if (res.confirm) {
                this.deleteMessage();
              }
            },
          })
        }
      },
      deleteMessage() {
        this.goEasy.im.deleteMessage({
          messages: this.messageSelector.messages,
          onSuccess: (result) => {
            this.messageSelector.messages.forEach(message => {
              let index = this.history.messages.indexOf(message);
              if (index > -1) {
                this.history.messages.splice(index, 1);
              }
            });
            this.messageSelector.messages = [];
          },
          onFailed: (error) => {
            console.log('error:', error);
          }
        });
      },
      recallMessage() {
        this.actionPopup.visible = false;
        this.goEasy.im.recallMessage({
          messages: this.messageSelector.messages,
          onSuccess: () => {
            console.log('撤回成功');
          },
          onFailed: (error) => {
            console.log('撤回失败,error:', error);
          }
        });
      },
      editRecalledMessage(text) {
        if (this.audio.visible) {
          this.audio.visible = false;
        }
        this.text = text;
      },
      showCheckBox() {
        this.messageSelector.messages = [];
        this.messageSelector.visible = true;
        this.actionPopup.visible = false;
      },
      selectMessages(e) {
        const selectedMessageIds = e.detail.value;
        let selectedMessages = [];
        this.history.messages.forEach(message => {
          if (selectedMessageIds.includes(message.messageId)) {
            selectedMessages.push(message);
          }
        })
        this.messageSelector.messages = selectedMessages;
      },
      loadHistoryMessage(scrollToBottom) {//历史消息
        this.history.loading = true;
        let lastMessageTimeStamp = null;
        let lastMessage = this.history.messages[0];
        if (lastMessage) {
          lastMessageTimeStamp = lastMessage.timestamp;
        }
        this.goEasy.im.history({
          userId: this.friend.id,
          lastTimestamp: lastMessageTimeStamp,
          limit: 10,
          onSuccess: (result) => {
            uni.stopPullDownRefresh();
            this.history.loading = false;
            let messages = result.content;
            if (messages.length === 0) {
              this.history.allLoaded = true;
            } else {
              if (lastMessageTimeStamp) {
                this.history.messages = messages.concat(this.history.messages);
              } else {
                this.history.messages = messages;
              }
              if (messages.length < 10) {
                this.history.allLoaded = true;
              }
              if (scrollToBottom) {
                this.scrollToBottom();
                //收到的消息设置为已读
                this.markPrivateMessageAsRead();
              }
            }
          },
          onFailed: (error) => {
            //获取失败
            console.log('获取历史消息失败:', error);
            uni.stopPullDownRefresh();
            this.history.loading = false;
          }
        });
      },
      //语音录制按钮和键盘输入的切换
      switchAudioKeyboard() {
        this.audio.visible = !this.audio.visible;
        if (uni.authorize) {
          uni.authorize({
            scope: 'scope.record',
            fail: () => {
              uni.showModal({
                title:this.$t('GoeasyExchange.huoquqxsb'),
                content:this.$t('GoeasyExchange.qingxsqly')
              });
            }
          });
        }
      },
      onRecordStart() {
		  var that = this;
        try {
          // 更多配置参考uniapp：https://uniapp.dcloud.net.cn/api/media/record-manager.html#getrecordermanager
          recorderManager.start({
            duration: 600000 // 指定录音的时长,单位 ms
          });
        } catch (e) {
          uni.showModal({
            title:that.$t('GoeasyExchange.luyincw'),
            content:that.$t('GoeasyExchange.qingshcs')
          });
        }
      },
      onRecordEnd() {
        try {
          recorderManager.stop();
        } catch (e) {
          console.log(e);
        }
      },
      showImageFullScreen(e) {
        let imagesUrl = [e.currentTarget.dataset.url];
        uni.previewImage({
          urls: imagesUrl
        });
      },
      playVideo(e) {
        this.videoPlayer.visible = true;
        this.videoPlayer.url = e.currentTarget.dataset.url;
        this.$nextTick(() => {
          this.videoPlayer.context.requestFullScreen({
            direction: 0
          });
          this.videoPlayer.context.play();
        });
      },
      playAudio (audioMessage) {
        let playingMessage = this.audioPlayer.playingMessage;

        if (playingMessage) {
          this.audioPlayer.innerAudioContext.stop();
          // 如果点击的消息正在播放，就认为是停止播放操作
          if (playingMessage === audioMessage) {
            return;
          }
        }
        this.audioPlayer.playingMessage = audioMessage;
        this.audioPlayer.innerAudioContext.src = audioMessage.payload.url;
        this.audioPlayer.innerAudioContext.play();
      },
      onVideoFullScreenChange(e) {
        //当退出全屏播放时，隐藏播放器
        if (this.videoPlayer.visible && !e.detail.fullScreen) {
          this.videoPlayer.visible = false;
          this.videoPlayer.context.stop();
        }
      },
      messageInputFocusin() {
        this.otherTypesMessagePanelVisible = false;
        this.emoji.visible = false;
      },
      switchEmojiKeyboard() {
        this.emoji.visible = !this.emoji.visible;
        this.otherTypesMessagePanelVisible = false;
      },
      showOtherTypesMessagePanel() {
        this.otherTypesMessagePanelVisible = !this.otherTypesMessagePanelVisible;
        this.emoji.visible = false;
      },
      chooseEmoji(emojiKey) {
        this.text += emojiKey;
      },
      showOrderMessageList() {
        this.orderList.orders = restApi.getOrderList();
        this.orderList.visible = true;
      },
      hideOrderMessageList() {
        this.orderList.visible = false;
      },
      scrollToBottom() {
        this.$nextTick(() => {
          uni.pageScrollTo({
            scrollTop: 2000000,
            duration: 0
          });
        });
      },
      markPrivateMessageAsRead() {
        this.goEasy.im.markMessageAsRead({
          id: this.to.id,
          type: this.to.type,
          onSuccess: function () {
            console.log('标记私聊已读成功');
          },
          onFailed: function (error) {
            console.log("标记私聊已读失败", error);
          }
        });
      },
	  goEasypushmsg(){
	  		  var userinfo = uni.getStorageSync('userInfo');
	  		  var payload={
	  		  	roomId:this.currentUser.id,
	  			userId:userinfo.userId,
	  		  	nickName:this.currentUser.name,
	  		  	avatar:this.currentUser.avatar,
	  		  	ptype:2
	  		  }
			  var that = this;
	  		  var pubsub = this.goEasy.pubsub;
	  		  pubsub.publish({
	  			  channel:this.friend.id,  //请确认与接收端一致
	  			  message:JSON.stringify(payload),   //app内onMessage收到的消息内容
	  			  notification: { //定义通知栏推送
	  				  title: 'IM message', //通知栏提醒标题，仅显示于通知栏
	  				  body:'message', //通知栏提醒内容，仅显示于通知栏
	  			  },
	  			  onSuccess: function () {
	  				  that.issend=true;
	  				  console.log("Publish successfully.")
	  			  },
	  			  onFailed: function (error) {
	  				  console.log("Failed to publish message, code:" + error.code + ' error:' + error.content);
	  			  }
	  		  });
	  },
    }
  }
</script>

<style lang="scss">
@import url('@/static/style/chatInterface.css');
</style>