tk-mini-program/pages/index/chat/chat.vue

<template>
  <view class="chat">
    <view class="bg" @click="onMore(false)">
      <image
        class="bgImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
        mode="scaleToFill"
      />
    </view>
    <view class="Return" @click="onBack">
      <image
        class="ReturnImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
        mode="scaleToFill"
      />
    </view>
    <view class="title" @click="onMore(false)">{{ nickname }}</view>
    <!-- 聊天内容 -->
    <view
      class="content"
      @click="onMore(false)"
      :style="{
        bottom:
          MoreStatus || KeyboardHeight != 0
            ? MoreStatus
              ? 650 + Elementheight + 'rpx'
              : KeyboardHeight != 0
              ? KeyboardHeight + Elementheight + 'rpx'
              :'10vh'
            : '10vh',
      }"
    >
      <scroll-view
        show-scrollbar="false"
        scroll-y="true"
        class="scroll"
        upper-threshold="100"
        @scrolltoupper="onScrollToUpper"
        :scroll-into-view="ElementPositioning"
        @scroll="onScroll"
      >
        <view
          class="chat-card"
          v-for="(item, index) in chatList"
          :key="item.id"
          :id="item.id"
        >
          <view class="chat-time" v-if="item.timestampStatus">{{
            TimeFormatting(item.timestamp)
          }}</view>
          <view class="chat-avatar">
            <!-- 对方消息 -->
            <view class="oppositeChatNews" v-if="item.senderId == userId">
              <image class="chat-avatarImg" :src="avatar" mode="scaleToFill" />
              <view class="oppositesharpCorner">
                <view
                  class="oppositeSharpCornercion"
                  v-if="item.type == 'text' || item.type == 'audio'"
                ></view>
              </view>
              <view
                class="oppositeChatNewsContent"
                :style="{
                  backgroundColor:
                    item.type == 'text' || item.type == 'audio' ? '#7bbd0093' : '#ffffff',
                }"
              >
                <!-- 消息类型 -->
                <!-- 文字消息 -->
                <textmessage
                  v-if="item.type == 'text'"
                  :messagetext="item.payload.text"
                ></textmessage>
                <!-- 自定义PK消息 -->
                <customPKMessage
                  v-if="item.type == 'pk'"
                  :message="item.payload"
                ></customPKMessage>
                <!-- 图片消息 -->
                <imageMessage
                  v-if="item.type == 'image'"
                  :message="item.payload"
                ></imageMessage>
                <!-- 视频消息 -->
                <videoMessage
                  v-if="item.type == 'video'"
                  :message="item.payload"
                ></videoMessage>
                <!-- 语音消息 -->
                <voiceMessage
                  v-if="item.type == 'audio'"
                  :message="item.payload"
                  :senderId="item.senderId"
                  :userId="userinfo.id"
                >
                </voiceMessage>
              </view>
            </view>
            <!-- 自己消息 -->
            <view class="myChatNews" v-if="item.senderId == userinfo.id">
              <image
                class="chat-avatarImg"
                :src="userinfo.headerIcon"
                mode="scaleToFill"
              />
              <view class="mysharpCorner">
                <view
                  class="mySharpCornercion"
                  v-if="item.type == 'text' || item.type == 'audio'"
                ></view>
              </view>
              <view
                class="myChatNewsContent"
                :style="{
                  backgroundColor:
                    item.type == 'text' || item.type == 'audio' ? '#7bbd0093' : '#ffffff',
                }"
              >
                <!-- 消息类型 -->
                <!-- 文字消息 -->
                <textmessage
                  v-if="item.type == 'text'"
                  :messagetext="item.payload.text"
                ></textmessage>
                <!-- 自定义PK消息 -->
                <customPKMessage
                  v-if="item.type == 'pk'"
                  :message="item.payload"
                ></customPKMessage>
                <!-- 图片消息 -->
                <imageMessage
                  v-if="item.type == 'image'"
                  :message="item.payload"
                ></imageMessage>
                <!-- 视频消息 -->
                <videoMessage
                  v-if="item.type == 'video'"
                  :message="item.payload"
                ></videoMessage>
                <!-- 语音消息 -->
                <voiceMessage
                  v-if="item.type == 'audio'"
                  :message="item.payload"
                  :senderId="item.senderId"
                  :userId="userinfo.id"
                  :playbackStatus="playbackStatus"
                  @notplayVoice="notplayVoice"
                >
                </voiceMessage>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 输入框组 -->
    <view
      class="inputComponent"
      id:inputComponent
      :style="{
        bottom:
          MoreStatus || KeyboardHeight > 300
            ? MoreStatus
              ? '650rpx'
              : KeyboardHeight > 300
              ? KeyboardHeight + 'rpx'
              : '0'
            : '0',
      }"
    >
      <view class="Voice">
        <view class="MicrophoneImg" v-if="!voiceStatus" @click="onVoice(!voiceStatus)">
          <image
            class="Microphonepng"
            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Microphone.png"
            mode="scaleToFill"
          />
        </view>
        <view class="KeyboardImg" v-if="voiceStatus" @click="onVoice(!voiceStatus)">
          <image
            class="Keyboardpng"
            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Keyboard.png"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="textareacomponent" v-if="voiceStatus">
        <view
          class="VoiceInput"
          @touchstart="voiceTouchstart"
          @touchend="voiceTouchend"
          @touchmove="voiceTouchmove"
          @touchcancel="voiceTouchcancel"
          >按住&nbsp;说话</view
        >
      </view>
      <view class="textareacomponent" v-if="!voiceStatus">
        <textarea
          v-model="content"
          @input="SendInput"
          auto-height
          class="input"
          :maxlength="500"
          cursor-spacing="20"
          @focus="onFocus"
          :focus="inputfocus"
          @blur="onBlur"
          :adjust-position="false"
        ></textarea>
      </view>
      <view class="sendComponent">
        <image
          v-if="!ButtonStatus"
          class="MoreImg"
          src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chat_add.png"
          mode="scaleToFill"
          @click="onMore(!MoreStatus)"
        />
        <button v-if="ButtonStatus" class="send" @click="onSend">发送</button>
      </view>
    </view>
    <!-- 更多消息类型弹窗 -->
    <view
      class="MoreComponent"
      :style="{
        bottom:
          MoreStatus || KeyboardHeight > 300
            ? MoreStatus
              ? '0'
              : KeyboardHeight > 300
              ? '0'
              : KeyboardHeight + 'rpx'
            : '-650rpx',
      }"
    >
      <view class="Morecontent">
        <view class="MoreList" v-for="(item, index) in popUpList" :key="index">
          <view class="MoreItem" @click="onMoreItem(item.type)">
            <image class="Moreicon" :src="item.icon" mode="scaleToFill" />
            <text class="MoreName">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 相关消息事件弹窗 -->
    <view
      class="popUpInvitation"
      @click="onMoreItem(null)"
      :style="{ top: MoreItemStatus == null ? '100vh' : '0' }"
    >
      <view
        class="popUpInvitationContent"
        @click.stop
        :style="{ bottom: MoreItemStatus == null ? '-1000rpx' : '0' }"
      >
        <!-- 自定义消息组件 -->
        <InvitationComponents
          v-if="MoreItemStatus == 'Invitation'"
          :oppositeId="userId"
          :myId="userinfo.id"
          :avatar="avatar"
          :nickname="nickname"
          @refreshMessage="refreshMessage"
        ></InvitationComponents>
      </view>
    </view>
    <!-- 语音组件 -->
    <view class="popUpVoice" :style="{ top: voicepopUpstart == false ? '100vh' : '0' }">
      <view
        class="popUpvoiceContent"
        :style="{ bottom: voicepopUpstart == false ? '-1000rpx' : '0' }"
      >
        <view class="voiceCenter">
          <view class="gifModule">
            <video
              class="video-player"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Recording.mp4"
              :autoplay="true"
              :loop="true"
              :controls="false"
            ></video>
          </view>
          <view
            class="CancelModule"
            :style="{ backgroundColor: voiceCancelOrSend ? '#ebebeb' : '#000000a9' }"
          >
            取消
          </view>
          <view
            class="btnModule"
            :style="{ backgroundColor: !voiceCancelOrSend ? '#ebebeb' : '#000000a9' }"
          >
            {{ voiceCancelOrSend ? "取消" : "松手发送" }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import textmessage from "./messageComponent/textmessage";
import customPKMessage from "./messageComponent/customPKMessage";
import imageMessage from "./messageComponent/imageMessage";
import videoMessage from "./messageComponent/videoMessage";
import voiceMessage from "./messageComponent/voiceMessage";
import InvitationComponents from "./moreMessageComponents/InvitationComponents";
import { generateId } from "../../../components/ChatId.js";
import TimeFormatting from "../../../components/TimeFormatting.js";
import request from "../../../components/request.js";
import {
  getConversationMessages,
  sendMessage,
  messageRead,
  sendCustomMessage,
  sendGroupMessage,
} from "../../../components/goEasyTool/tool.js";
import GoEasy from "goeasy";
export default {
  data() {
    return {
      userId: "", // 对方用户id
      nickname: "", // 对方用户昵称
      avatar: "", // 对方用户头像
      chatList: [], // 聊天记录
      userinfo: {}, // 自己用户信息
      ButtonStatus: false, // 发送按钮状态
      MoreStatus: false, // 更多消息类型弹窗状态
      KeyboardHeight: 0, // 键盘高度
      content: "", // 输入框内容
      MoreItemStatus: null, // 更多消息类型弹窗点击属性
      ioshide: 0, // 隐藏ios键盘
      ElementPositioning: null, // 元素定位
      scrollviewheight: 0, // 滚动视图高度
      Elementheight: 0, // 元素高度
      Scrolling: false, // 滚动状态
      scrollTop: 0, // 滚动高度
      judgescrollTop: false, // 判断滚动高度
      onPage: false, // 是否在页面
      timer: null, // 定时器
      lastTimestamp: null, // 上一次刷新时间戳
      LastTime: null, // 最后聊天记录的时间戳
      MoreMessageList: [],
      Record: null, // 定位记录
      myitem: null, //直接发送自定义消息的我的选中主播
      youritem: null, //直接发送自定义消息的对方选中主播
      type: null, //直接发送自定义消息的消息类型
      voiceStatus: false, // 语音状态
      inputfocus: false, // 输入框焦点状态
      voicepopUpstart: false, // 语音长按状态/false关闭/true开启
      voiceCancelOrSend: false, // 语音取消/发送/false发送/true取消
      recorderManager: uni.getRecorderManager(),
      playbackStatus: true, // 语音播放状态
      popUpList: [
        {
          name: "图片",
          icon: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Album.png",
          type: "Album",
        },
        // {
        //   name: "视频",
        //   icon: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Video.png",
        //   type: "Video",
        // },
        {
          name: "邀请",
          icon: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chat_invite.png",
          type: "Invitation",
        },
      ], /// 更多消息类型弹窗列表
    };
  },
  onShow() {
    this.onPage = true;
    uni.onKeyboardHeightChange((res) => {
      this.KeyboardHeight = res.height * 2 - this.ioshide;
    });
  },
  onHide() {
    this.onPage = false;
  },
  onUnload() {
    this.onPage = false;
  },
  onLoad(options) {
    this.recorderManager.onStop((res) => {
      console.log("录音结束", res);
      if(this.ioshide != 0){
        if(res.fileSize<20*1024){
        uni.showToast({
          title:"您说话太短",
          icon: "none",
          duration: 2000,
        });
      }else{
        if (this.voiceCancelOrSend) {
          this.voiceCancelOrSend = false;
        }else{
        this.sendVoice(res)
        this.voiceCancelOrSend = false;
      }
      }
      }else{
      if(res.fileSize<2*1024){
        uni.showToast({
          title:"您说话太短",
          icon: "none",
          duration: 2000,
        });
      }else{
        if (this.voiceCancelOrSend) {
          this.voiceCancelOrSend = false;
        }else{
        this.sendVoice(res)
        this.voiceCancelOrSend = false;
      }
      }
    }
    });

    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.userinfo = res.data;
      },
    });
    this.userId = options.userId;
    this.nickname = options.nickname;
    this.avatar = options.avatar;
    this.type = options.type;
    try {
      this.myitem = JSON.parse(options.myitem);
      this.youritem = JSON.parse(options.youritem);
    } catch (e) {}
    if (this.type == "pk") {
      setTimeout(() => {
        this.sendCustomMessage();
      }, 500);
    }
    // 获取和对方用户的聊天记录
    getConversationMessages(this.$goeasy, this.userId, null).then((res) => {
      this.chatList = res.map((item) => {
        item.id = generateId();
        item.timestampStatus = this.checkInterval(item.timestamp);
        return item;
      });
      setTimeout(() => {
        if (this.chatList.length > 0) {
          this.ElementPositioning = this.chatList[this.chatList.length - 1].id;
          this.LastTime = this.chatList[0].timestamp;
        } else {
          uni.showToast({
            title: "您和对方暂无聊天记录，快去聊天吧",
            icon: "none",
            duration: 2000,
          });
        }
      }, 300);
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".inputComponent")
        .boundingClientRect((res) => {
          this.Elementheight = res.height * 2;
        })
        .exec();
    });
    //已读对方的消息
    messageRead(this.$goeasy, this.userId).then((res) => {
      console.log("已读对方的消息");
    });
    this.getIOSDeviceType();
    var im = this.$goeasy.im;
    im.on(GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, this.onPrivateMessageReceived); //监听接受消息
    im.on(GoEasy.IM_EVENT.MESSAGE_READ, this.onMessageRead); //监听已读消息

    this.getscrollviewheight();

    this.checkRecordPermission();
  },
  methods: {
    //暂停所有播放
    notplayVoice(type) {
      this.playbackStatus = type;
    },
    //发送录音
    sendVoice(res) {
      const im = this.$goeasy.im;
      var message = im.createAudioMessage({
        file: res,
        to: {
          type: GoEasy.IM_SCENE.PRIVATE,
          id: this.userId, //对方用户id
          data: { avatar: this.avatar, nickname: this.nickname },
        },
        onProgress: function (event) {
          console.log("file uploading:", event);
        }, //获取上传进度
      });
      sendGroupMessage(this.$goeasy, message).then((ress) => {
        this.ElementPositioning = ress.id = generateId();
        ress.timestampStatus = this.checkInterval(ress.timestamp);
        this.chatList.push(ress);
        this.judgescrollTop = false;
      });
    },
    //长按语音
    voiceTouchstart() {
      console.log("长按语音");
      this.voicepopUpstart = true;
      this.recorderManager.start();
      this.notplayVoice(false);
    },
    //松开语音
    voiceTouchend() {
      setTimeout(() => {
        this.recorderManager.stop();
      }, 100);
      console.log("松开语音");
      this.voicepopUpstart = false;
    },
    //移动语音
    voiceTouchmove(event) {
      const threshold = uni.getSystemInfoSync().windowHeight * 0.86;
      try {
        if (event.touches[0].clientY > threshold) {
          this.voiceCancelOrSend = false;
        } else {
          this.voiceCancelOrSend = true;
        }
      } catch (e) {}
    },
    //中断语音
    voiceTouchcancel() {
      console.log("中断语音");
      this.voicepopUpstart = false;
      this.voiceCancelOrSend = false;
    },
    //语音切换
    onVoice(status) {
      if (status) {
        this.inputfocus = false;
        this.MoreStatus = false;
      } else {
        this.inputfocus = true;
      }
      this.voiceStatus = status;
    },
    //录音权限
    checkRecordPermission() {
      // 检查当前录音权限状态
      uni.getSetting({
        success: (res) => {
          const hasPermission = res.authSetting["scope.record"];
          if (hasPermission === undefined) {
            this.requestPermission();
          } else if (!hasPermission) {
            this.voiceStatus = false;
            uni.showModal({
              title: "权限提示",
              content: "需要录音权限才能正常使用功能，请在设置中开启",
              confirmText: "去开启",
              success: (modalRes) => {
                if (modalRes.confirm) {
                  uni.openSetting({
                    success: (settingRes) => {
                      if (settingRes.authSetting["scope.record"] === true) {
                        this.checkRecordPermission();
                      }
                    },
                  });
                }
              },
            });
          }
        },
      });
    },
    //请求录音权限
    requestPermission() {
      uni.authorize({
        scope: "scope.record",
        fail: (err) => {
          this.voiceStatus = false;
          uni.showToast({
            title: "请授予麦克风权限，否则可能导致语音功能异常",
            icon: "none",
          });
        },
      });
    },
    //直接发送自定义消息
    sendCustomMessage() {
      request({
        url: "pk/createPkRecord",
        method: "POST",
        data: {
          pkIdA: this.youritem.id,
          pkIdB: this.myitem.id,
          userIdA: this.userId,
          userIdB: this.userinfo.id,
          pkTime: this.youritem.pkTime,
          pkNumber: this.youritem.pkNumber,
          anchorIdA: this.youritem.anchorId,
          anchorIdB: this.myitem.anchorId,
          anchorIconA: this.youritem.anchorIcon,
          anchorIconB: this.myitem.anchorIcon,
          piIdA: this.youritem.id,
          piIdB: this.myitem.id,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          const customData = {
            id: res.data.id,
            pkIdA: this.youritem.id,
            pkIdB: this.myitem.id,
          };
          let order = {
            customData: customData,
            link: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pk.png",
            text: "PK邀请消息",
          };
          sendCustomMessage(
            this.$goeasy,
            this.type,
            this.userId,
            order,
            this.avatar,
            this.nickname
          ).then((res) => {
            this.ElementPositioning = res.id = generateId();
            res.timestampStatus = this.checkInterval(res.timestamp);
            this.chatList.push(res);
            uni.showToast({
              title: "发送成功",
              icon: "none",
            });
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    //时间显示
    checkInterval(timestamp) {
      if (!this.lastTimestamp) {
        this.lastTimestamp = timestamp;
        return true;
      }

      const timeDiff = timestamp - this.lastTimestamp;
      if (timeDiff >= 300000) {
        // 5 分钟=300000 毫秒
        this.lastTimestamp = timestamp;
        return true;
      }
      return false;
    },

    //时间格式化
    TimeFormatting: TimeFormatting,
    //获取容器高度
    getscrollviewheight() {
      const queryheight = uni.createSelectorQuery().in(this);
      queryheight
        .select(".scroll")
        .boundingClientRect((res) => {
          this.scrollviewheight = res.height;
        })
        .exec();
    },
    //滚动事件
    onScroll(event) {
      if (!this.judgescrollTop) {
        this.scrollTop = event.detail.scrollTop;
        this.judgescrollTop = true;
      } else if (this.scrollTop - event.detail.scrollTop > this.scrollviewheight) {
        this.Scrolling = true;
      } else if (this.scrollTop - event.detail.scrollTop < this.scrollviewheight) {
        this.Scrolling = false;
      }
    },
    //获取更多聊天记录
    onScrollToUpper() {
      this.lastTimestamp = null;
      getConversationMessages(this.$goeasy, this.userId, this.LastTime).then((res) => {
        this.Record = this.chatList[0].id;
        this.MoreMessageList = res.map((item) => {
          item.id = generateId();
          item.timestampStatus = this.checkInterval(item.timestamp);
          return item;
        });
      });
      setTimeout(() => {
        this.chatList = [...this.MoreMessageList, ...this.chatList];
        console.log("获取更多聊天记录", this.chatList);
        this.LastTime = this.chatList[0].timestamp;
        this.ElementPositioning = this.Record;
      }, 300);
    },
    //监听已读消息
    onMessageRead(message) {
      console.log("1已读消息", message);
    },
    //监听接受消息
    onPrivateMessageReceived(message) {
      if (!this.Scrolling) {
        this.ElementPositioning = message.id = generateId();
        message.timestampStatus = this.checkInterval(message.timestamp);
        this.judgescrollTop = false;
      } else {
        message.id = generateId();
        message.timestampStatus = this.checkInterval(message.timestamp);
      }
      this.chatList.push(message);
      if (this.onPage) {
        messageRead(this.$goeasy, this.userId).then((res) => {
          console.log("已读对方的消息");
        });
      }
    },
    //发送消息
    onSend() {
      if (this.content != "") {
        sendMessage(
          this.$goeasy,
          this.userId,
          this.content,
          this.avatar,
          this.nickname
        ).then((res) => {
          console.log("发送成功", res);
          this.ElementPositioning = res.id = generateId();
          res.timestampStatus = this.checkInterval(res.timestamp);
          this.chatList.push(res);
          this.judgescrollTop = false;
        });
        this.content = "";
        this.ButtonStatus = false;
      }
    },
    //自定义消息发送返回处理
    refreshMessage(message) {
      this.MoreItemStatus = null;
      this.ElementPositioning = message.message.id = generateId();
      message.timestampStatus = this.checkInterval(message.message.timestamp);
      this.chatList.push(message.message);
      this.judgescrollTop = false;
      this.MoreStatus = false;
    },
    //ios兼容
    getIOSDeviceType() {
      const systemInfo = uni.getSystemInfoSync();
      const model = systemInfo.model;
      if (/iPhone X|iPhone11|iPhone12|iPhone13|iPhone14|iPhone15|iPhone16|iPhone15 Pro|iPhone15 Pro Max|iPhone14 Pro|iPhone14 Pro Max|iPhone13 Pro|iPhone13 Pro Max|iPhone12 Pro|iPhone12 Pro Max|iPhone11 Pro|iPhone11 Pro Max|iPhone13 mini|iPhone12 mini|iPhoneXS|iPhoneXS Max/i.test(model)) {
        if (/iPhone X|iPhone XS|iPhone 11 Pro|iPhone 11 Pro Max|iPhone 12 Pro|iPhone 12 Pro Max|iPhone 13 Pro|iPhone 13 Pro Max|iPhone 14 Pro|iPhone 14 Pro Max|iPhone 15 Pro|iPhone 15 Pro Max|iPhone 16/i.test(model)) {
          this.ioshide = 88;
        } else if (/iPhone 12|iPhone 13|iPhone 14/i.test(model)) {
          this.ioshide = 94;
        }
      }
    },

    //更多消息类型弹窗事件
    onMore(Status) {
      if (!this.Scrolling) {
        this.ElementPositioning = null;
        setTimeout(() => {
          this.ElementPositioning = this.chatList[this.chatList.length - 1].id;
        }, 100);
        this.judgescrollTop = false;
      }
      this.getscrollviewheight();
      if (Status) {
        this.MoreStatus = Status;
        this.voiceStatus = false;
      } else {
        this.MoreStatus = Status;
      }
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".inputComponent")
        .boundingClientRect((res) => {
          this.Elementheight = res.height * 2;
        })
        .exec();
    },
    //更多消息类型弹窗点击事件
    onMoreItem(type) {
      if (type == "Album") {
        this.onSendMedia(); //发送图片
      } else if (type == "Video") {
        this.onSendVideo(); //发送视频
      } else {
        this.MoreItemStatus = type;
      }
    },
    //发送视频
    onSendVideo() {
      var im = this.$goeasy.im;
      uni.chooseVideo({
        sourceType: ["album", "camera"],
        success: (res) => {
          var message = im.createVideoMessage({
            file: res, //H5获得的视频file对象， Uniapp和小程序调用chooseVideo，success时得到的res对象
            to: {
              type: GoEasy.IM_SCENE.PRIVATE,
              id: this.userId, //对方用户id
              data: { avatar: this.avatar, nickname: this.nickname },
            },
            onProgress: function (event) {
              console.log("file uploading:", event);
            }, //获取上传进度
          });
          sendGroupMessage(this.$goeasy, message).then((res) => {
            this.ElementPositioning = res.id = generateId();
            res.timestampStatus = this.checkInterval(res.timestamp);
            this.chatList.push(res);
            this.judgescrollTop = false;
          });
        },
      });
    },
    //发送图片
    onSendMedia() {
      var im = this.$goeasy.im;
      uni.chooseImage({
        count: 9, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: (res) => {
          const tempFiles = res.tempFiles;
          tempFiles.forEach((item, index) => {
            var message = im.createImageMessage({
              file: item,
              to: {
                type: GoEasy.IM_SCENE.PRIVATE,
                id: this.userId,
                data: { avatar: this.avatar, nickname: this.nickname },
              },
              onProgress: function (event) {
                console.log("上传进度", event);
              }, //获取上传进度
            });
            sendGroupMessage(this.$goeasy, message).then((res) => {
              this.ElementPositioning = res.id = generateId();
              res.timestampStatus = this.checkInterval(res.timestamp);
              this.chatList.push(res);
              this.judgescrollTop = false;
            });
          });
        },
      });
    },
    // 获取键盘高度
    onFocus(event) {
      if (!this.Scrolling) {
        this.ElementPositioning = null;
        setTimeout(() => {
          this.ElementPositioning = this.chatList[this.chatList.length - 1].id;
        }, 100);
        this.judgescrollTop = false;
      }
      this.getscrollviewheight();
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".inputComponent")
        .boundingClientRect((res) => {
          this.Elementheight = res.height * 2;
        })
        .exec();
    },
    //键盘消失
    onBlur(event) {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".inputComponent")
        .boundingClientRect((res) => {
          this.Elementheight = res.height * 2;
        })
        .exec();
      this.getscrollviewheight();
    },
    //按钮切换
    SendInput(event) {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".inputComponent")
        .boundingClientRect((res) => {
          this.Elementheight = res.height * 2;
        })
        .exec();
      if (event.target.value != "") {
        this.ButtonStatus = true;
      } else {
        this.ButtonStatus = false;
      }
    },
    // 返回上一页
    onBack() {
      this.onPage = false;
      wx.navigateBack({
        delta: 1,
      });
    },
  },
  components: {
    textmessage,
    InvitationComponents,
    customPKMessage,
    imageMessage,
    videoMessage,
    voiceMessage,
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
}
.bgImg {
  width: 100%;
  height: 100%;
}
.Return {
  position: fixed;
  left: 35rpx;
  top: 120rpx;
  width: 46rpx;
  height: 46rpx;
  z-index: 2;
}
.title {
  position: fixed;
  top: 120rpx;
  left:0;
  right: 0;
  text-align: center;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: bold;
  z-index: 1;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
.content {
  position: absolute;
  top: 200rpx;
  left: 0rpx;
  right: 0rpx;
}
.scroll {
  width: 96%;
  height: 100%;
  padding: 0% 2% 0% 2%;
}
.scroll ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
.inputComponent {
  position: absolute;
  left: 0;
  right: 0;
  height: auto;
  background-color: #f0f0f0;
  padding: 15rpx 15rpx 37.5rpx 15rpx;
  display: flex;
  align-items: flex-end;
  transition: bottom 0.25s ease;
}
.chat-card {
  width: 100%;
  height: auto;
  margin-bottom: 10rpx;
  margin-top: 10rpx;
  padding: 10rpx;
  /* background-color: #ffffff; */
}
.chat-time {
  width: 100%;
  height: 50rpx;
  text-align: center;
  font-size: 24rpx;
  color: #999999;
  line-height: 50rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  background-color: #00000000;
}
.chat-avatar {
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
}
.oppositeChatNews {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.oppositesharpCorner {
  width: 20rpx;
  height: 80rpx;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.oppositeSharpCornercion {
  width: 0;
  height: 0;
  border-top: 13rpx solid transparent;
  border-right: 13rpx solid #ffffff;
  border-bottom: 13rpx solid transparent;
}
.oppositeChatNewsContent {
  width: auto;
  height: auto;
  background-color: #ffffff;
  border-radius: 10rpx;
  max-width: 450rpx;
}
.myChatNews {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  margin-right: 15rpx;
}
.mysharpCorner {
  width: 20rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
}
.mySharpCornercion {
  width: 0;
  height: 0;
  border-top: 13rpx solid transparent;
  border-left: 13rpx solid #7bbd0093;
  border-bottom: 13rpx solid transparent;
}
.myChatNewsContent {
  width: auto;
  height: auto;
  border-radius: 20rpx;
  max-width: 450rpx;
}
.chat-avatarImg {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
}
.Voice {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50rpx;
  margin-left: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.KeyboardImg {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Keyboardpng {
  width: 100%;
  height: 100%;
  border-radius: 50rpx;
}
.MicrophoneImg {
  margin-top: 5rpx;
  width: 53rpx;
  height: 53rpx;
  border: 4rpx solid #424242;
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Microphonepng {
  width: 80%;
  height: 80%;
  border-radius: 50rpx;
}
.textareacomponent {
  width: 570rpx;
  height: auto;
}
.input {
  width: 95%;
  background-color: #ffffff;
  min-height: 60rpx;
  max-height: 200rpx;
  border-radius: 10rpx;
  padding: 10rpx;
  overflow-wrap: break-word;
  margin-left: 30rpx;
}
.VoiceInput {
  width: 95%;
  background-color: #ffffff;
  height: 60rpx;
  border-radius: 10rpx;
  padding: 10rpx;
  overflow-wrap: break-word;
  margin-left: 30rpx;
  line-height: 60rpx;
  text-align: center;
  color: #000;
}
.sendComponent {
  margin-left: 40rpx;
}
.send {
  width: 100rpx;
  height: 75rpx;
  background-color: #539c00;
  border-radius: 10rpx;
  color: #ffffff;
  font-size: 20rpx;
  text-align: center;
  line-height: 75rpx;
}
.MoreImg {
  margin-left: 20rpx;
  height: 80rpx;
  width: 80rpx;
  margin-bottom: -10rpx;
  border-radius: 50rpx;
}
.MoreComponent {
  position: fixed;
  left: 0;
  right: 0;
  height: 650rpx;
  transition: bottom 0.25s ease;
  background-color: #ffffff;
}
.Morecontent {
  width: 100%;
  height: 100%;
  display: flex;
  align-content: baseline;
  flex-wrap: wrap;
}
.MoreList {
  width: 150rpx;
  height: 150rpx;
  background-color: #f1f1f1;
  border-radius: 20rpx;
  margin: 18.75rpx;
}
.MoreItem {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.Moreicon {
  width: 80rpx;
  height: 80rpx;
}
.popUpInvitation {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transition: top 0.25s ease;
  z-index: 1000;
}
.popUpVoice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: #8b8b8bd7;
}

.popUpInvitationContent {
  position: absolute;
  left: 0;
  right: 0;
  height: 1000rpx;
  transition: bottom 0.25s ease;
  background-color: #ffffff;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
}
.popUpvoiceContent {
  position: absolute;
  left: 0;
  right: 0;
  height: 1000rpx;
  /* transition: bottom 0.1s ease; */
  /* background-color: #ebebeb; */
}
.gifModule {
  padding: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  height: 120rpx;
  background-color: #232123;
}
.voiceCenter {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.video-player {
  width: 300rpx;
  height: 300rpx;
  border-radius: 20rpx;
  margin-top: -94rpx;
}
.CancelModule {
  width: 95%;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  background-color: #000000a9;
  font-size: 30rpx;
  color: #999999;
  border-radius: 50rpx;
  margin-top: 500rpx;
}
.btnModule {
  width: 100%;
  height: 200rpx;
  background-color: #000000;
  color: #999999;
  font-size: 30rpx;
  text-align: center;
  line-height: 200rpx;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
</style>