wutian-miniprogram/src/module1/pages/chatRoom/index.ts

import dayjs from "dayjs";

const app = getApp<IAppOption>();

interface IMessageItem {
  msgId: string;
  contentType: "1" | "2" | "3" | "4" | "5"; //  1:文本  2: 语音 3. 图片 4. 视频 5. 提示信息
  content: any;
  fromDoctorId: string;
  doctorImg: string;
  createTime: string;
  createTimeName?: string;
  isSelf: 1 | 2;
  isRead: 1 | 2;
  doctorName: string;
  hospitalName: string;
  showTime?: boolean;
  isPlay?: boolean;
}

Page({
  data: {
    id: "",

    show1: false,

    fold: true,
    scrollTop: 0,
    scrollIntoView: "",
    doctorDetail: {} as any,

    roomDoctors: [],
    newRoomDoctors: [],
    case: {} as any,
    chatGroupInfo: {} as any,
    chatDoctor: {} as any,

    isLoad: false,
    isFinish: false,
    messageList: [] as IMessageItem[],
    lastMsgId: "",
    unReadCount: 0,

    userInfo: {} as any,

    sendMessage: [],
  },
  innerAudioContext: null as WechatMiniprogram.InnerAudioContext | null,
  videoContext: null as WechatMiniprogram.VideoContext | null,
  onLoad(options) {
    this.setData({
      id: options.id,
    });
    this.videoContext = wx.createVideoContext("video");
    app.waitLogin().then(() => {
      // this.getAgree();

      this.getMessageList();
      this.getDetail();
      this.listenMessage();
      app.getUserInfo(this);
    });
  },
  onUnload() {
    wx.WebIM.conn.close();
    if (this.innerAudioContext) {
      this.innerAudioContext.stop();
    }
  },
  getAgree() {
    wx.ajax({
      method: "GET",
      url: "?r=takeda/chat/get-agree",
      data: {
        roomId: this.data.id,
      },
    }).then((res) => {
      this.setData({
        show1: res === 2,
      });
    });
  },
  onAgreeClose() {
    wx.navigateBack();
  },
  handleSubmitAgree() {
    wx.ajax({
      method: "POST",
      url: "?r=takeda/chat/agree-room",
      data: {
        roomId: this.data.id,
      },
    }).then(() => {
      this.setData({
        show1: false,
      });
    });
  },
  getDetail() {
    wx.ajax({
      method: "GET",
      url: "?r=takeda/chat/get-room-detail",
      data: { roomId: this.data.id },
    }).then((res) => {
      this.setData({
        roomDoctors: res.roomDoctors,
        newRoomDoctors: res.roomDoctors.slice(0, 4),
        case: res.case,
        chatGroupInfo: res.chatGroupInfo,
        chatDoctor: res.chatDoctor,
      });
      this.WebIMLogin();
    });
  },
  handleRoomDetail() {
    wx.navigateTo({
      url: `/module1/pages/chatRoomInfo/index?id=${this.data.id}&cid=${this.data.case.caseId}`,
    });
  },

  handleView(index = -1) {
    this.setData({
      scrollIntoView: index > -1 ? `view${index}` : `place`,
    });
  },
  listenMessage() {
    wx.WebIM.conn.addEventHandler("room", {
      onConnected: (message) => {
        console.log("message: ", message);
      },
      onTextMessage: (meessage) => {
        console.log("meessage1: ", meessage);
      },
    });
  },
  getMessageList() {
    if (this.data.isLoad || this.data.isFinish) return;
    this.setData({
      isLoad: true,
    });
    const lastMsgId = this.data.lastMsgId;
    wx.ajax({
      method: "GET",
      url: "?r=takeda/chat/get-message-list",
      data: {
        lastMsgId,
        roomId: this.data.id,
      },
    }).then((res) => {
      if (res.length === 0) {
        this.setData({
          isFinite: true,
        });
        return;
      }
      res.map((item) => {
        //消息内容类型，1-文本，2-语音，3-图片，4-视频，5-提示信息
        if (["2", "3", "4"].includes(item.contentType)) {
          item.msgContent = JSON.parse(item.msgContent);
        }
        return item;
      });
      this.setData({
        messageList: [...res.reverse(), ...this.data.messageList],
        lastMsgId: res[0].msgId,
        isLoad: false,
      });
      this.filterCreateTime();
      if (!lastMsgId) {
        this.handleView();
      }
    });
  },
  scrolltoupper(e) {
    if (e.detail.direction === "top") {
      this.getMessageList();
    }
  },
  WebIMLogin() {
    const { chatDoctor } = this.data;
    wx.WebIM.conn.open({
      user: chatDoctor.chatUserId,
      pwd: chatDoctor.chatUserPwd,
    });
  },
  handleSendMessage() {
    const { sendMessage, userInfo } = this.data;
    if (!sendMessage) {
      wx.showToast({
        icon: "none",
        title: "请输入内容",
      });
      return;
    }
    const message: IMessageItem = {
      msgId: "",
      contentType: "1",
      content: sendMessage,
      fromDoctorId: userInfo.DoctorId,
      createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      isSelf: 1,
      isRead: 1,
      doctorImg: userInfo.Img,
      doctorName: userInfo.Name,
      hospitalName: userInfo.HospitalName,
    };
    this.WebIMSendMessage(message);
  },
  WebIMSendMessage(message: IMessageItem) {
    const { chatGroupInfo } = this.data;
    const option = {
      type: "txt",
      msg: message.content,
      to: chatGroupInfo.ChatGroupId,
      chatType: "groupChat",
      ext: {
        ...message,
      },
    };
    const msg = wx.WebIM.message.create(option);
    wx.WebIM.conn
      .send(msg)
      .then((res) => {
        this.sendMessage({ ...message, uniqueCode: res.serverMsgId });
        this.setData({
          messageList: [...this.data.messageList, message],
        });
      })
      .catch(() => {
        wx.showToast({
          icon: "none",
          title: "发送失败",
        });
      });
  },
  sendMessage({ uniqueCode, ...message }) {
    wx.ajax({
      method: "POST",
      url: "?r=takeda/chat/send-message",
      data: {
        roomId: this.data.id,
        message: {
          contentType: message.contentType,
          content: message.content,
          uniqueCode,
        },
      },
    });
  },
  handleHot(e) {
    const { index, mindex } = e.currentTarget.dataset;
    const { messageList } = this.data;
    const hotList = messageList[mindex].welcomeMsg?.hotQuestion;
    const hot = hotList?.[index];
    this.setData({
      messageList: [
        ...messageList,
        {
          msgId: "",
          contentType: "1",
          msgContent: hot?.question,
          msgVisitTime: "",
          msgFromType: "1",
          createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        },
      ],
    });
    this.handleView();
    this.sendQuestion(hot?.questionId);
  },
  formatTime(date: string) {
    let createTimeName = "";
    if (dayjs().format("YYYY-MM-DD") === dayjs(date).format("YYYY-MM-DD")) {
      createTimeName = dayjs(date).format("HH:mm");
    } else if (dayjs().format("YYYY-MM-DD") === dayjs(date).add(1, "day").format("YYYY-MM-DD")) {
      createTimeName = `昨天 ${dayjs(date).format("HH:mm")}`;
    } else if (dayjs().diff(date, "day") < 7) {
      createTimeName = dayjs(date).format(`dddd HH:mm`);
    } else {
      createTimeName = dayjs(date).format("YYYY-MM-DD HH:mm");
    }
    return createTimeName;
  },
  filterCreateTime() {
    const gapTime = 5 * 60 * 1000;
    const { messageList } = this.data;

    let preTime = 0;
    messageList.forEach((item, index) => {
      if (index === 0) {
        item.showTime = true;
        preTime = dayjs(item.createTime).valueOf();
        item.createTimeName = this.formatTime(item.createTime);
      } else {
        const curTime = dayjs(item.createTime).valueOf();
        if (curTime - preTime > gapTime) {
          item.showTime = true;
          item.createTimeName = this.formatTime(item.createTime);
          preTime = dayjs(item.createTime).valueOf();
        }
      }
    });
    this.setData({
      messageList,
    });
  },
  handleFooter() {
    this.setData({
      fold: !this.data.fold,
    });
    if (this.data.fold) {
      setTimeout(() => {
        this.handleView();
      }, 300);
    }
  },
  handleAudio(e) {
    const { index } = e.currentTarget.dataset;
    const { messageList } = this.data;
    const messageItem = messageList[index];
    const { url } = messageItem.content[0];
    if (this.innerAudioContext) {
      if (messageItem.isPlay) {
        this.innerAudioContext.stop();
        messageItem.isPlay = false;
        this.setData({
          messageList,
        });
        return;
      }
      this.innerAudioContext.stop();
      this.innerAudioContext.src = url;
      this.innerAudioContext.play();
      messageItem.isPlay = true;
      this.innerAudioContext.onEnded(() => {
        messageItem.isPlay = false;
        this.setData({
          messageList,
        });
      });
      this.setData({
        messageList,
      });
    }
  },
  handlePreview(e) {
    const { url } = e.currentTarget.dataset;
    wx.previewImage({
      urls: [url],
    });
  },
  handleVideo() {
    if (this.videoContext) {
      this.videoContext.play();
      this.videoContext.requestFullScreen({});
    }
  },
});