实时聊天 Vue + Vuex + sockjs-client + stompjs进行websocket连接

知识点

WebSocket介绍

WebSocket 是一种在 Web 应用中实现实时通信的方法,它可以在客户端和服务器端之间建立长连接,实现实时消息传递。

SockJS

SockJS 是一个 JavaScript 库,用于在浏览器和 Web 服务器之间建立实时通信连接。它提供了一个 WebSocket 的备选方案,并兼容多种浏览器和 Web 服务器。SockJS 会自动检测浏览器是否支持 WebSocket,如果不支持,则会自动降级为其他协议(如 long polling、iframe、JSONP 等)

STOMP

STOMP即Simple (or Streaming) Text Orientated Messaging Protocol,简单(流)文本定向消息协议,它提供了一个可互操作的连接格式,允许STOMP客户端与任意STOMP消息代理(Broker)进行交互。
简单地说,stomp是一个用于client之间进行异步消息传输的简单文本协议

开发环境

"sockjs-client": "^1.5.1",
"stompjs": "^2.3.3",
"vue": "^2.6.10",
"vuex": "^3.6.2"
// 本地Node版本号
node v14.7.0

功能实现

安装应用

npm install sockjs-client --save
npm install stompjs --save

在vuex中创建

const call = {
  state: {
    websocketUrl: 'https://app.lzzgh.org.cn/lz72hourApi',
    stompClient: '', // websocket
    sendContent: "",//发送的数据
    userPhone: "",//给对方发送消息对方的userPhone
    chatType: "",//聊天的方式 1:单聊 2:群聊
    activitySign:false,//是否参加活动
    groupContent:"",//群聊发送数据
	groupCPContent:"", // cp小屋的
    clears:false,//清空消息
  },
  getters: {
    getWebsocketUrl: state => {
      return state.websocketUrl
    },
    getWebsocket: state => {
      return state.stompClient
    },
    getSendContent: state => {
      return state.sendContent
    },
    getGroupContent: state => {
      return state.groupContent
    },
		getGroupCPContent: state => {
		  return state.groupCPContent
		},
    getUserPhone: state => {
      return state.userPhone
    },
    getChatType: state => {
      return state.chatType
    },
    getActivitySign:state =>{
      return state.activitySign
    },
    getClears:state =>{
      return state.clears
    }
  },
  mutations: {
    setMyWebsocket(state, stompClient) {
      state.stompClient = stompClient
    },
    setMySendContent(state, sendContent) {
      state.sendContent = sendContent
    },
    setMyGroupContent(state, groupContent) {
      state.groupContent = groupContent
    },
		setMyGroupCPContent(state, groupCPContent) {
		  state.groupCPContent = groupCPContent
		},
    setMyUserPhone(state, userPhone) {
      state.userPhone = userPhone
    },
    setMyChatType(state, chatType) {
      state.chatType = chatType
    },
    setMyActivitySign(state){
      state.activitySign = !state.activitySign
    },
    setMyClears(state){
      state.clears = !state.clears
    }
  },
  actions: {
    setWebsocket({ commit }, stompClient) {
      commit('setMyWebsocket', { stompClient })
    },
    setSendContent({ commit }, sendContent) {
      commit('setMySendContent', { sendContent })
    },
    setGroupContent({ commit }, groupContent) {
      commit('setMyGroupContent', { groupContent })
    },
		setGroupCPContent({ commit }, groupCPContent) {
		  commit('setMyGroupCPContent', { groupCPContent })
		},
    setUserPhone({ commit }, userPhone) {
      commit('setMyUserPhone', { userPhone })
    },
    setChatType({ commit }, chatType) {
      commit('setMyChatType', { chatType })
    }
  }
}
export default call

vue中的引入、监听、实例化与收发、订阅消息

引入组件

import { mapGetters } from "vuex";
import Video from "@/components/video"; //播放
import { imgPreview } from "@/utils/comperssImage.js"; //压缩图片
import { judgeTime } from "@/utils/base.js"; //时间显示
import { Picker } from "emoji-mart-vue"; //引入表情组件
import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';

实例化与订阅

init(){ 
      axios.defaults.baseURL=this.websocketUrl
      axios.defaults.headers={ "X-Access-Token": Vue.ls.get(ACCESS_TOKEN)}
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        console.log(this.websocketUrl)
        // 实例化
        let socket = new SockJS(this.websocketUrl + "/jeecg-boot/websocket",undefined, { timeout: 10000 });
        this.stompClient = Stomp.over(socket);
        this.$store.commit("setMyWebsocket", this.stompClient);
        let that = this;
        console.log(Vue.ls.get(ACCESS_TOKEN))
        // 订阅
        this.stompClient.connect(
          { "X-Access-Token": Vue.ls.get(ACCESS_TOKEN) }, 
          function (frame) {
            that.isConnent = true;
            that.stompClient.subscribe(
              "/topic/" + that.chatRoomId,
              function (response) {
                let data = response.body;
                that.$store.commit("setMyGroupCPContent", data);
                console.log("小屋" + response.body);
              }
            );
          }
        )
      }
    },

计算属性

computed: {
    ...mapGetters({
      userInfo: "getUserInfo", //获取用户信息
      websocketUrl: "getWebsocketUrl",
      // stompClient: "getWebsocket", //获取websocket
      // sendContent: "getSendContent", //获取实时聊天信息
      sendContent: "getGroupCPContent", //获取实时聊天信息
    }),
  },

监听收到消息

watch: {
    sendContent() {
      debugger
      Toast.clear();
      let datas = JSON.parse(this.sendContent);
      if (datas.code == 500) {
        Dialog.alert({
          message: datas.message,
        }).then(() => {
          // on close
          this.$router.go(-1);
        });
        return;
      }
      this.message = "";
      this.quoteText = "";
      this.quoteValue = null;
      this.smileShow = false;
      let mesItem = datas.result;
      mesItem.isOprate = false;
      if (mesItem.messageType == "6") {
        mesItem.poster = this.getImgView(mesItem.messageValue);
      }
      if (mesItem.quoteValue) {
        mesItem.quoteValue = JSON.parse(mesItem.quoteValue);
      }
      if (mesItem.delFlag == "1") {
        if (
          mesItem.memberId == this.myInfo.id &&
          mesItem.chatRoomId == this.chatRoomId
        ) {
          Dialog.alert({
            message: "您已被踢出群聊,暂时不能参与会话!",
            confirmButtonText: "返回到首页",
          }).then(() => {
            // on close
            this.$router.replace("/index");
          });
        }
      } else {
        let time = mesItem.createTime;
        if (mesItem.chatRoomId == this.chatRoomId) {
          if (
            this.talkArr.length > 0 &&
            new Date(time.replace(/\-/g, "/")).getTime() -
              new Date(
                this.talkArr[this.talkArr.length - 1].createTime.replace(
                  /\-/g,
                  "/"
                )
              ).getTime() <=
              5 * 60 * 1000
          ) {
            this.talkArr[this.talkArr.length - 1].mesList.push(mesItem);
          } else {
            this.talkArr.push({
              createTime: time,
              time: judgeTime(time),
              mesList: [mesItem],
            });
          }
          console.log(this.talkArr)
          debugger
          this.seeMsg();
          if (!this.isLoading) {
            this.scrollBottom();
          }
        }
      }
    },
  },

封装的发送消息的公共方法

sendFun(messageType, messageValue, quoteValue) {
      // console.log(messageValue)
      Toast.loading({
        duration: 0, // 持续展示 toast
        message: "发送中...",
        forbidClick: true,
      });
      let date = new Date();
      let createTime = date.getTime();
      let prm=JSON.stringify({
          chatRoomId: this.chatRoomId, //群聊id
          messageType: messageType, //1文字,5图片,6视频,7求手机号、8求微信号、9发手机号、10发微信号
          messageValue: messageValue, //发送信息
          // userPhone: this.myInfo.userPhone, //用户手机号
          // fullName: this.myInfo.fullName, //用户名
          // userIcon: this.myInfo.userIcon, //用户头像
          // memberId: this.myInfo.id, //用户id
          memberId: sessionStorage.getItem('clientId'), //用户id
          // createTime: createTime, //创建时间
          // sex: this.myInfo.sex, //性别
          quoteValue: JSON.stringify(quoteValue), //引用的内容
        })
      console.log(prm)
      this.stompClient.send(
        "/app/chatRoom",
        {},
        prm
      );
    },

发送消息

//发送消息
    sendMsg() {
      const that = this;
      if (this.message) {
        this.sendFun("1", this.message, this.quoteValue);
        // that.message = "";
        // that.quoteText = "";
        // that.quoteValue = null;
      } else {
        Toast("内容不能为空!");
      }
    },

完整的代码

聊天的完整代码,包括websocket的应用,(实例化,存vuex,订阅,收发消息),表情,上传图片,视频,历史记录,时间显示,长链接的建立与销毁等

<template>
  <div class="groupChatInf">
    <!-- <NavBar :title="title"></NavBar> -->
    <div class="chatInf">
      <div class="chatBox" id="chat">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div class="chatOne" v-for="(item, i) in talkArr" :key="i">
            <div class="date">{{ item.time }}</div>
            <div v-for="(items, is) in item.mesList" :key="is">
              <div
                class="welcome"
                v-html="welcome"
                v-if="welcome && items.messageType == '4'"
              ></div>
              <div v-if="items.messageType != '4'">
                <div
                  class="chatMine"
                  v-if="items.userPhone == myInfo.userPhone"
                >
                  <div
                    class="chatImg"
                    v-if="
                      items.messageType != '12' && items.messageType != '15'
                    "
                  >
                    <van-image
                      :src="items.userIcon"
                      fit="cover"
                      v-if="items.userIcon"
                      ><template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                      </template>
                      <template v-slot:error>加载失败</template></van-image
                    >
                    <img
                      src="~@/assets/img/redGirl.png"
                      alt=""
                      v-else-if="items.memberId == 9999999"
                      class="imgs"
                    />
                    <img
                      src="~@/assets/img/girlHeadImg.png"
                      alt=""
                      v-else-if="items.sex == 'F'"
                      class="imgs"
                    />
                    <img
                      src="~@/assets/img/boyHeadImg.png"
                      alt=""
                      class="imgs"
                      v-else
                    />
                  </div>
                  <div
                    class="chatName"
                    v-if="
                      items.messageType != '12' && items.messageType != '15'
                    "
                  ><i v-if="items.isAdmin == '1'"
                      ><img src="~@/assets/img/manage2.png"
                    /></i>
                    <i v-if="items.isAdmin == '2'"
                      ><img src="~@/assets/img/manage1.png"
                    /></i>
                  </div>
                  <div class="chatvalueDiv" v-if="items.messageType == '1'">
                    <div
                      class="chatText"
                      @touchstart="touchstart(items)"
                      @touchend="touchend"
                    >
                      {{ items.messageValue }}
                    </div>
                    <div
                      class="chatOprateMask"
                      v-if="items.isOprate"
                      @click="closeMask(items)"
                    ></div>
                    <div class="chatOprate" v-if="items.isOprate">
                      <span @click="quoteChat(items)">引用</span>
                      <span @click="delChat(items)">删除</span>
                      <span @click="copyChat(items)">复制</span>
                      <span @click="recallChat(items)">撤回</span>
                    </div>
                  </div>
                  <div class="chatvalueDiv" v-if="items.messageType == '5'">
                    <div
                      class="chatImage"
                      @click="imgPreview(items.messageValue)"
                    >
                      <img :src="items.messageValue" alt="" />
                    </div>
                    <div
                      class="chatOprateMask"
                      v-if="items.isOprate"
                      @click="closeMask(items)"
                    ></div>
                    <div class="chatOprate" v-if="items.isOprate">
                      <span @click="quoteChat(items)">引用</span>
                      <span @click="delChat(items)">删除</span>
                      <span @click="copyChat(items)">复制</span>
                      <span @click="recallChat(items)">撤回</span>
                    </div>
                  </div>
                  <div class="chatvalueDiv" v-if="items.messageType == '6'">
                    <div class="chatVideo">
                      <video
                        :src="items.messageValue"
                        :poster="items.poster"
                      ></video>
                      <div
                        class="chatmask"
                        @click="videoPlay(items.messageValue, items.poster)"
                      >
                        <img src="~@/assets/bofang.png" alt="" />
                      </div>
                    </div>
                    <div
                      class="chatOprateMask"
                      v-if="items.isOprate"
                      @click="closeMask(items)"
                    ></div>
                    <div class="chatOprate" v-if="items.isOprate">
                      <span @click="quoteChat(items)">引用</span>
                      <span @click="delChat(items)">删除</span>
                      <span @click="copyChat(items)">复制</span>
                      <span @click="recallChat(items)">撤回</span>
                    </div>
                  </div>
                  <div
                    class="chatvalueDiv"
                    v-if="items.quoteValue && items.messageType != '12'"
                  >
                    <div
                      class="quoteValue"
                      v-if="items.quoteValue.messageType == '1'"
                    >
                      @{{
                        items.quoteValue.fullName +
                        items.quoteValue.messageValue
                      }}
                    </div>
                    <div
                      class="quoteImg"
                      v-else-if="items.quoteValue.messageType == '5'"
                    >
                      <p>@{{ items.quoteValue.fullName }}</p>
                      <img
                        :src="items.quoteValue.messageValue"
                        alt=""
                        class="qimgs"
                        @click="imgPreview(items.quoteValue.messageValue)"
                      />
                    </div>
                    <div
                      class="quoteImg"
                      v-else-if="items.quoteValue.messageType == '6'"
                    >
                      <p>@{{ items.quoteValue.fullName }}</p>
                      <div class="quoteVideo">
                        <video
                          :src="items.quoteValue.messageValue"
                          :poster="items.quoteValue.poster"
                        ></video>
                        <div
                          class="chatmask"
                          @click="
                            videoPlay(
                              items.quoteValue.messageValue,
                              items.quoteValue.poster
                            )
                          "
                        >
                          <img src="~@/assets/bofang.png" alt="" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="chatRecall" v-if="items.messageType == '12'">
                    消息已撤回 <a @click="reEdit(items)">重新编辑</a>
                  </div>
                </div>
                <div class="chatOther" v-else>
                  <div
                    class="chatImg"
                    @click="toPerson(items.memberId)"
                    v-if="
                      items.messageType != '12' && items.messageType != '15'
                    "
                  >
                    <van-image
                      :src="items.userIcon"
                      fit="cover"
                      v-if="items.userIcon"
                      ><template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                      </template>
                      <template v-slot:error>加载失败</template></van-image
                    >
                    <img
                      src="~@/assets/img/girlHeadImg.png"
                      alt=""
                      v-else-if="items.sex == 'F'"
                      class="imgs"
                    />
                    <img
                      src="~@/assets/img/boyHeadImg.png"
                      alt=""
                      class="imgs"
                      v-else
                    />
                    <img
                      src="~@/assets/img/woman.png"
                      alt=""
                      class="sex"
                      v-if="items.sex == 'F'"
                    />
                    <img
                      src="~@/assets/img/man.png"
                      alt=""
                      class="sex"
                      v-if="items.sex == 'M'"
                    />
                  </div>
                  <div
                    class="chatName"
                    v-if="
                      items.messageType != '12' && items.messageType != '15'
                    "
                  >
                    {{ items.fullName
                    }}<i v-if="items.isAdmin == '1'"
                      ><img src="~@/assets/img/manage2.png"
                    /></i>
                    <i v-if="items.isAdmin == '2'"
                      ><img src="~@/assets/img/manage1.png"
                    /></i>
                  </div>
                  <div class="chatvalueDiv" v-if="items.messageType == '1'">
                    <div
                      class="chatText"
                      @touchstart="touchstart(items)"
                      @touchend="touchend"
                    >
                      {{ items.messageValue }}
                    </div>
                    <div
                      class="chatOprateMask"
                      v-if="items.isOprate"
                      @click="closeMask(items)"
                    ></div>
                    <div class="chatOprate" v-if="items.isOprate">
                      <span @click="quoteChat(items)">引用</span>
                      <span @click="delChat(items)">删除</span>
                      <span @click="copyChat(items)">复制</span>
                    </div>
                  </div>
                  <div class="chatvalueDiv" v-if="items.messageType == '5'">
                    <div
                      class="chatImage"
                      @click="imgPreview(items.messageValue)"
                    >
                      <img :src="items.messageValue" alt="" />
                    </div>
                    <div
                      class="chatOprateMask"
                      v-if="items.isOprate"
                      @click="closeMask(items)"
                    ></div>
                    <div class="chatOprate" v-if="items.isOprate">
                      <span @click="quoteChat(items)">引用</span>
                      <span @click="delChat(items)">删除</span>
                      <span @click="copyChat(items)">复制</span>
                    </div>
                  </div>
                  <div class="chatvalueDiv" v-if="items.messageType == '6'">
                    <div class="chatVideo">
                      <video
                        :src="items.messageValue"
                        :poster="items.poster"
                      ></video>
                      <div
                        class="chatmask"
                        @click="videoPlay(items.messageValue, items.poster)"
                      >
                        <img src="~@/assets/bofang.png" alt="" />
                      </div>
                    </div>
                    <div
                      class="chatOprateMask"
                      v-if="items.isOprate"
                      @click="closeMask(items)"
                    ></div>
                    <div class="chatOprate" v-if="items.isOprate">
                      <span @click="quoteChat(items)">引用</span>
                      <span @click="delChat(items)">删除</span>
                      <span @click="copyChat(items)">复制</span>
                    </div>
                  </div>
                  <div
                    class="chatvalueDiv"
                    v-if="items.quoteValue && items.messageType != '12'"
                  >
                    <div
                      class="quoteValue"
                      v-if="items.quoteValue.messageType == '1'"
                    >
                      @{{
                        items.quoteValue.fullName +
                        items.quoteValue.messageValue
                      }}
                    </div>
                    <div
                      class="quoteImg"
                      v-else-if="items.quoteValue.messageType == '5'"
                    >
                      <p>@{{ items.quoteValue.fullName }}</p>
                      <img
                        :src="items.quoteValue.messageValue"
                        alt=""
                        class="qimgs"
                        @click="imgPreview(items.quoteValue.messageValue)"
                      />
                    </div>
                    <div
                      class="quoteImg"
                      v-else-if="items.quoteValue.messageType == '6'"
                    >
                      <p>@{{ items.quoteValue.fullName }}</p>
                      <div class="quoteVideo">
                        <video
                          :src="items.quoteValue.messageValue"
                          :poster="items.quoteValue.poster"
                        ></video>
                        <div
                          class="chatmask"
                          @click="
                            videoPlay(
                              items.quoteValue.messageValue,
                              items.quoteValue.poster
                            )
                          "
                        >
                          <img src="~@/assets/bofang.png" alt="" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="chatRecall" v-if="items.messageType == '12'">
                    {{ items.fullName }}撤回了一条消息
                  </div>
                  <div class="chatRecall" v-if="items.messageType == '15'">
                    <a>{{ items.createBy }}</a
                    >加入了群聊
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-pull-refresh>
      </div>
    </div>
    <div class="sendBox">
      <div class="sendBoxTop">
        <form>
          <!-- @click="toMember" -->
          <span class="sendMember" >
            <img src="~@/assets/img/member.png" alt="" />
          </span>
          <van-field
            class="sendInf"
            v-model="message"
            :border="false"
            style="border: 0px;"
            @keyup.enter.native="sendMsg"
          />
          <div class="quoteMessage" v-if="quoteText">
            <p class="quoteText">{{ quoteText }}</p>
            <img
              src="~@/assets/img/mclose.png"
              alt=""
              class="quoteClose"
              @click="quoteClose"
            />
          </div>
          <span class="sendExpression" @click="smile">
            <img src="~@/assets/img/smile.png" alt="" />
          </span>
          <span class="sendBtn" @click="sendMsg"
            ><img src="~@/assets/img/sendBtn.png" alt=""
          /></span>
        </form>
      </div>
      <div class="emojiBox" @select="addEmoji" v-if="smileShow">
        <div class="emojiDiv">
          <span
            v-for="(item, index) in emojiList"
            :key="'e-' + index"
            @click="chooseEmoji(item)"
            >{{ item.emoji }}</span
          >
        </div>
      </div>
      <!-- <picker
        :include="['people', 'Smileys']"
        :showSearch="false"
        :showPreview="false"
        :showCategories="false"
        @select="addEmoji"
        v-if="smileShow"
      /> -->
      <div class="sendBoxBtm" v-if="!smileShow">
        <div class="sendOprate">
          <img src="~@/assets/img/micon1.png" alt="" />
          <van-uploader
            :after-read="afterRead"
            upload-icon="plus"
            :before-read="beforeRead"
            accept="image/png,image/jpg,image/jpeg,video/mp4,video/mov"
            :max-count="1"
          />
        </div>
        <div class="sendOprate">
          <img src="~@/assets/img/micon2.png" alt="" />
          <!--是苹果手机直接调用摄像头-->
          <van-uploader
            :after-read="afterReadVideo"
            upload-icon="plus"
            :before-read="beforeReadVideo"
            accept="image/png,image/jpg,image/jpeg,video/mp4,video/mov"
            :max-count="1"
            capture="camera"
            v-if="isIos"
          />
          <!--不是苹果手机先调起相册-->
          <van-uploader
            :after-read="afterReadVideo"
            upload-icon="plus"
            :before-read="beforeReadVideo"
            accept="image/png,image/jpg,image/jpeg,video/mp4,video/mov"
            :max-count="1"
            v-if="!isIos"
          />
        </div>
        <div class="sendOprate">
          <img src="~@/assets/img/nowx.png" alt="" />
        </div>
        <div class="sendOprate">
          <img src="~@/assets/img/nophone.png" alt="" />
        </div>
      </div>
    </div>
    <Video
      :videoPath="videoPath"
      v-if="videoShow"
      @videoFun="videoFun"
      :posterPath="posterPath"
    ></Video>
  </div>
</template>

<script>
import {
  Image as vanImage,
  Toast,
  PullRefresh,
  Field,
  Loading,
  Dialog,
  ImagePreview,
  Uploader,
} from "vant";
import { mapGetters } from "vuex";
import Video from "@/components/video"; //播放
import { imgPreview } from "@/utils/comperssImage.js"; //压缩图片
import { judgeTime } from "@/utils/base.js"; //时间显示
import { Picker } from "emoji-mart-vue"; //引入表情组件
import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import axios from 'axios'

export default {
  name: "GroupChat",
  components: {
    [vanImage.name]: vanImage,
    [Field.name]: Field,
    [PullRefresh.name]: PullRefresh,
    [Loading.name]: Loading,
    [Uploader.name]: Uploader,
    Video,
    Picker,
  },
  props:{
    records:{
      type: Object,
      default: ()=>({})
    }
  },
  data() {
    return {
      stompClient:"",
      message: "", //发送内容
      talkArr: [], //聊天信息
      title: "聊天", //标题
      isToday: false, //是否是今天
      isLoading: false, //是否在加载中
      params: {
        chatRoomId: "", //群聊id
        pageNo: 1, //页数
        pageSize: 50, //每页数据数量
        oldMesId: "", //最后一条消息id
      }, //群聊查询历史数据参数
      chatRoomId: "", //群聊id
      allPage: 0, //历史消息总页数
      myInfo: {}, //个人信息
      welcome: "", //欢迎信息
      isFirst: true, //是否首次进入
      quoteText: "", //引用的文字
      videoShow: false, //播放器插件是否出现
      videoPath: "", //视频路径
      posterPath: "", //默认图路径
      touch: null, //长按方法定时器
      reMessage: "", //要重新编辑的信息
      fileList: [], //上传图片视频返回值
      videoList: [], //拍摄返回值
      isIos: false, //是否是苹果手机
      quoteValue: null, //引用的详细信息
      isClick: true, //操作按钮是否可以点击
      smileShow: false, //
      imgUrl:'',
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "getUserInfo", //获取用户信息
      websocketUrl: "getWebsocketUrl",
      // stompClient: "getWebsocket", //获取websocket
      // sendContent: "getSendContent", //获取实时聊天信息
      sendContent: "getGroupCPContent", //获取实时聊天信息
    }),
  },
  watch: {
    sendContent() {
      debugger
      Toast.clear();
      let datas = JSON.parse(this.sendContent);
      if (datas.code == 500) {
        Dialog.alert({
          message: datas.message,
        }).then(() => {
          // on close
          this.$router.go(-1);
        });
        return;
      }
      this.message = "";
      this.quoteText = "";
      this.quoteValue = null;
      this.smileShow = false;
      let mesItem = datas.result;
      mesItem.isOprate = false;
      if (mesItem.messageType == "6") {
        mesItem.poster = this.getImgView(mesItem.messageValue);
      }
      if (mesItem.quoteValue) {
        mesItem.quoteValue = JSON.parse(mesItem.quoteValue);
      }
      if (mesItem.delFlag == "1") {
        if (
          mesItem.memberId == this.myInfo.id &&
          mesItem.chatRoomId == this.chatRoomId
        ) {
          Dialog.alert({
            message: "您已被踢出群聊,暂时不能参与会话!",
            confirmButtonText: "返回到首页",
          }).then(() => {
            // on close
            this.$router.replace("/index");
          });
        }
      } else {
        let time = mesItem.createTime;
        if (mesItem.chatRoomId == this.chatRoomId) {
          if (
            this.talkArr.length > 0 &&
            new Date(time.replace(/\-/g, "/")).getTime() -
              new Date(
                this.talkArr[this.talkArr.length - 1].createTime.replace(
                  /\-/g,
                  "/"
                )
              ).getTime() <=
              5 * 60 * 1000
          ) {
            this.talkArr[this.talkArr.length - 1].mesList.push(mesItem);
          } else {
            this.talkArr.push({
              createTime: time,
              time: judgeTime(time),
              mesList: [mesItem],
            });
          }
          console.log(this.talkArr)
          debugger
          this.seeMsg();
          if (!this.isLoading) {
            this.scrollBottom();
          }
        }
      }
    },
  },
  created() {
    this.imgUrl=this.websocketUrl+'/jeecg-boot/sys/common/static'
    const that = this;
    const UA = navigator.userAgent;
    const isIpad = /(iPad).*OS\s([\d_]+)/.test(UA);
    const isIpod = /(iPod)(.*OS\s([\d_]+))?/.test(UA);
    const isIphone = !isIpad && /(iPhone\sOS)\s([\d_]+)/.test(UA);
    this.isIos = isIpad || isIpod || isIphone;
    if (this.$route.query.activityName) {
      this.title = this.$route.query.activityName;
    }
    this.type = this.$route.query.type;
    if (this.$route.query.activityId) {
      this.chatRoomId = this.$route.query.activityId;
      this.params.chatRoomId = this.$route.query.activityId;
    }
    console.log(this.records)
    this.chatRoomId = this.records.chatId;
    this.params.chatRoomId = this.records.chatId;
    this.init()
    // this.getpersonfo();
    //查看未读消息
    this.seeMsg();
    //获取历史消息
    this.getHistory();
    this.getEmoji();
  },
  // mounted() {},
  destroyed() {
    // 取消订阅
    this.stompClient.unsubscribe('/topic/'+this.chatRoomId)
    // 销毁连接
    this.stompClient.disconnect()
  }, 
  methods: {
    // 初始化
    init(){
      axios.defaults.baseURL=this.websocketUrl
      axios.defaults.headers={ "X-Access-Token": Vue.ls.get(ACCESS_TOKEN)}
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        console.log(this.websocketUrl)
        let socket = new SockJS(this.websocketUrl + "/jeecg-boot/websocket",undefined, { timeout: 10000 });
        this.stompClient = Stomp.over(socket);
        this.$store.commit("setMyWebsocket", this.stompClient);
        let that = this;
        console.log(Vue.ls.get(ACCESS_TOKEN))
        this.stompClient.connect(
          { "X-Access-Token": Vue.ls.get(ACCESS_TOKEN) }, 
          function (frame) {
            that.isConnent = true;
            that.stompClient.subscribe(
              "/topic/" + that.chatRoomId,
              function (response) {
                let data = response.body;
                that.$store.commit("setMyGroupCPContent", data);
                console.log("小屋" + response.body);
              }
            );
          }
        )
      }
    },
    //获取表情包
    getEmoji() {
      axios.get("/jeecg-boot/api/emoji/emojiList")
        .then((res) => {
          if (res.code == 200) {
            this.emojiList = res.result;
          }
        })
        .catch(() => {});
    },
    //获取个人资料
    getpersonfo() {
      axios.get("/jeecg-boot/api/member/memberDetails")
        .then((res) => {
          if (res.code == 200) {
            this.myInfo = res.result;
          }
        })
        .catch(() => {});
    },
    //发送消息
    sendMsg() {
      const that = this;
      if (this.message) {
        this.sendFun("1", this.message, this.quoteValue);
        // that.message = "";
        // that.quoteText = "";
        // that.quoteValue = null;
      } else {
        Toast("内容不能为空!");
      }
    },
    //查看未读消息
    seeMsg() {
      axios.get("/jeecg-boot/api/releaseLog/seePcReleaseLog", {params:{
        type: 2,
        chatRoomId: this.chatRoomId,
      }})
        .then((res) => {})
        .catch(() => {});
    },
    //刷新历史消息
    onRefresh() {
      this.getHistory();
      // if (this.params.pageNo <= this.allPage) {
      //   this.getHistory();
      // } else {
      //   this.isLoading = false;
      // }
    },
    //查看历史消息
    getHistory() {
      const that = this;
      axios.get("/jeecg-boot/api/memberMessage/historyCpMsgList", {params:this.params} )
        .then((res) => {
          // console.log(res);
          res=res.data
          if (res.result.records.length == 0) {
            if (!this.isFirst) {
              Toast("没有更多数据了");
            }
          }
          res.result.records.forEach((item) => {
            let mesItem = item;
            let time = mesItem.createTime;
            if (mesItem.messageType == "6") {
              mesItem.poster = that.getImgView(mesItem.messageValue);
            }
            mesItem.isOprate = false;
            if (mesItem.quoteValue) {
              mesItem.quoteValue = JSON.parse(mesItem.quoteValue);
            }
            if (mesItem.chatRoomId == this.chatRoomId) {
              if (mesItem.messageType == "4") {
                this.welcome = mesItem.messageValue.replace(/\r\n/g, "<br>");
                this.welcome = this.welcome.replace(/\n/g, "<br>");
              }
              if (this.talkArr.length > 0) {
                let time1 = new Date(time.replace(/\-/g, "/")).getTime();
                let time2 = new Date(
                  that.talkArr[0].createTime.replace(/\-/g, "/")
                ).getTime();
                let diff = 0;
                if (parseInt(time1) >= parseInt(time2)) {
                  diff = parseInt(time1) - parseInt(time2);
                } else {
                  diff = parseInt(time2) - parseInt(time1);
                }
                if (diff <= 5 * 60 * 1000) {
                  that.talkArr[0].mesList.unshift(mesItem);
                } else {
                  that.talkArr.unshift({
                    createTime: time,
                    time: judgeTime(time),
                    mesList: [mesItem],
                  });
                }
              } else {
                that.talkArr.unshift({
                  createTime: time,
                  time: judgeTime(time),
                  mesList: [mesItem],
                });
              }
            }
          });
          // Toast("刷新成功");
          this.isLoading = false;
          this.allPage = res.result.pages;
          this.params.oldMesId =
            res.result.records[res.result.records.length - 1].id;
          if (this.isFirst) {
            that.isFirst = false;
            that.scrollBottom();
          }
        })
        .catch(() => {});
    },
    //去个人主页
    toPerson(id) {
      if (id) {
        this.$router.push({ path: "/person", query: { id: id } });
      }
    },
    //去聊天室信息页面
    toMember() {
      this.$router.push({
        path: "/groupMember",
        query: { activityId: this.chatRoomId },
      });
    },
    scrollBottom() {
      this.$nextTick((res) => {
        let div = document.getElementById("chat");
        div.scrollTop = div.scrollHeight;
      });
    },

    //选择表情
    smile() {
      this.smileShow = !this.smileShow;
    },
    //查看大图
    imgPreview(src) {
      // ImagePreview([src]);
    },
    //视频播放
    videoPlay(path, poster) {
      this.videoPath = path;
      this.posterPath = poster;
      this.videoShow = true;
    },
    //
    videoFun(visible) {
      this.videoShow = visible;
      this.posterPath = "";
      this.videoPath = "";
    },
    /* 视频取第一秒截图 */
    getImgView(text) {
      return text + "?x-oss-process=video/snapshot,t_1000";
    },
    // 在屏幕上时触发
    touchstart(items) {
      clearTimeout(this.touch); //再次清空定时器,防止重复注册定时器
      this.touch = setTimeout(() => {
        items.isOprate = true;
        this.$forceUpdate();
      }, 800);
    },
    //离开屏幕时触发
    touchend() {
      clearTimeout(this.touch); //再次清空定时器,防止重复注册定时器
    },
    //点击任意地方关闭操作
    closeMask(items) {
      items.isOprate = false;
      this.$forceUpdate();
    },
    //重新编辑
    reEdit() {
      this.message = this.reMessage;
    },
    //引用
    quoteChat(items) {
      if (items.messageType == "1") {
        this.quoteText = "@" + items.fullName + " " + items.messageValue;
      } else if (items.messageType == "5") {
        this.quoteText = "@" + items.fullName + " [图片]";
      } else if (items.messageType == "6") {
        this.quoteText = "@" + items.fullName + " [视频]";
      }
      this.quoteValue = items;
      items.isOprate = false;
      this.$forceUpdate();
    },
    //清楚引用
    quoteClose() {
      this.quoteText = "";
      this.quoteValue = null;
    },
    //删除
    delChat(items) {
      if (this.isClick) {
        this.isClick = false;
        this.$fetch("/jeecg-boot/api/memberMessage/delMessageLog", {
          messageLogId: items.id,
        })
          .then((res) => {
            if (res.code == 200) {
              Toast("消息删除成功");
              items.isOprate = false;
              items.delFlag = "1";
              this.$forceUpdate();
            } else {
              Toast(res.message);
            }
            this.isClick = true;
          })
          .catch(() => {
            this.isClick = true;
          });
      }
    },
    //复制
    copyChat(items) {
      this.copeText(items);
    },
    //撤回
    recallChat(items) {
      if (this.isClick) {
        this.isClick = false;
        this.$fetch("/jeecg-boot/api/memberMessage/delMessageLog", {
          messageLogId: items.id,
          messageType: 12,
        })
          .then((res) => {
            if (res.code == 200) {
              Toast("消息撤回成功");
              items.isOprate = false;
              items.messageType = "12";
              this.$forceUpdate();
            } else {
              Toast(res.message);
            }
            this.isClick = true;
          })
          .catch(() => {
            this.isClick = true;
          });
      }
    },
    //复制消息
    copeText(items) {
      let that = this;
      // 数字没有 .length 不能执行selectText 需要转化成字符串
      const textString = items.messageValue.toString();
      let input = document.querySelector("#copy-input");
      if (!input) {
        input = document.createElement("input");
        input.id = "copy-input";
        input.readOnly = "readOnly"; // 防止ios聚焦触发键盘事件
        input.style.position = "absolute";
        input.style.left = "-1000px";
        input.style.zIndex = "-1000";
        document.body.appendChild(input);
      }
      input.value = textString;
      // ios必须先选中文字且不支持 input.select();
      this.selectText(input, 0, textString.length);
      if (document.execCommand("copy")) {
        document.execCommand("copy");
        console.log("复制成功");
        Toast("复制成功!");
        items.isOprate = false;
        that.$forceUpdate();
      } else {
        console.log("不兼容");
      }
      input.blur();
    },
    // input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
    // 选择文本。createTextRange(setSelectionRange)是input方法
    selectText(textbox, startIndex, stopIndex) {
      if (textbox.createTextRange) {
        // ie
        const range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex); // 起始光标
        range.moveEnd("character", stopIndex - startIndex); // 结束光标
        range.select(); // 不兼容苹果
      } else {
        // firefox/chrome
        textbox.setSelectionRange(startIndex, stopIndex);
        textbox.focus();
      }
    },
    // 上传图片
    async afterRead(fileList) {
      Toast.loading({
        duration: 0, // 持续展示 toast
        message: "发送中...",
        forbidClick: true,
      });
      let that = this;
      let formData = new FormData(); //构造一个 FormData,把后台需要发送的参数添加
      if (fileList.file.type.indexOf("video") == 0) {
        formData.append("file", fileList.file); //接口需要传的参数
        formData.append("biz", fileList.file.name.split(".")[0]);
        await axios.post("/jeecg-boot/sys/common/uploadCp", formData)
          .then((res) => {
            Toast.clear();
            if (res.data.code == 0) {
              let imgsrc = res.data.message;
              that.sendFun("6", imgsrc);
            } else {
              Toast("发送失败");
            }
          });
      } else {
        imgPreview(fileList.file, async (files) => {
          // console.log(files)
          formData.append("file", files); //接口需要传的参数
          formData.append("biz", files.name.split(".")[0]);
          await axios.post("/jeecg-boot/sys/common/uploadCp", formData)
            .then((res) => {
              Toast.clear();
              if (res.data.code == 0) {
                let imgsrc = this.imgUrl+res.data.message;
                that.sendFun("5", imgsrc);
              } else {
                Toast("发送失败");
              }
            });
        });
      }
    },
    beforeRead(fileList) {
      if (
        fileList.type.indexOf("image") != 0 &&
        fileList.type.indexOf("video") != 0
      ) {
        Toast("只能上传图片(jpg,jpeg,png)、视频(mp4,mov)");
        return false;
      }
      let fileListLength = fileList.length ? fileList.length : 1;
      if (fileListLength + this.fileList.length > 1) {
        Toast("最多同时上传一张图片或视频");
        return false;
      }
      return true;
    },
    // 拍摄
    async afterReadVideo(fileList) {
      Toast.loading({
        duration: 0, // 持续展示 toast
        message: "发送中...",
        forbidClick: true,
      });
      let that = this;
      let formData = new FormData(); //构造一个 FormData,把后台需要发送的参数添加
      if (fileList.file.type.indexOf("video") == 0) {
        formData.append("file", fileList.file); //接口需要传的参数
        formData.append("biz", fileList.file.name.split(".")[0]);
        await axios.post("/jeecg-boot/sys/common/uploadCp", formData)
          .then((res) => {
            Toast.clear();
            if (res.data.code == 0) {
              let imgsrc = res.data.message;
              that.sendFun("6", imgsrc);
            } else {
              Toast("发送失败");
            }
          });
      } else {
        imgPreview(fileList.file, async (files) => {
          // console.log(files)
          formData.append("file", files); //接口需要传的参数
          formData.append("biz", files.name.split(".")[0]);
          await axios.post("/jeecg-boot/sys/common/uploadCp", formData)
            .then((res) => {
              Toast.clear();
              if (res.data.code == 0) {
                let imgsrc =this.imgUrl+ res.data.message;
                that.sendFun("5", imgsrc);
              } else {
                Toast("发送失败");
              }
            });
        });
      }
    },
    beforeReadVideo(fileList) {
      if (
        fileList.type.indexOf("image") != 0 &&
        fileList.type.indexOf("video") != 0
      ) {
        Toast("只能上传图片(jpg,jpeg,png)、视频(mp4,mov)");
        return false;
      }
      let fileListLength = fileList.length ? fileList.length : 1;
      if (fileListLength + this.fileList.length > 1) {
        Toast("最多同时上传一张图片或视频");
        return false;
      }
      return true;
    },
    //发送方法
    sendFun(messageType, messageValue, quoteValue) {
      // console.log(messageValue)
      Toast.loading({
        duration: 0, // 持续展示 toast
        message: "发送中...",
        forbidClick: true,
      });
      let date = new Date();
      let createTime = date.getTime();
      let prm=JSON.stringify({
          chatRoomId: this.chatRoomId, //群聊id
          messageType: messageType, //1文字,5图片,6视频,7求手机号、8求微信号、9发手机号、10发微信号
          messageValue: messageValue, //发送信息
          // userPhone: this.myInfo.userPhone, //用户手机号
          // fullName: this.myInfo.fullName, //用户名
          // userIcon: this.myInfo.userIcon, //用户头像
          // memberId: this.myInfo.id, //用户id
          memberId: sessionStorage.getItem('clientId'), //用户id
          // createTime: createTime, //创建时间
          // sex: this.myInfo.sex, //性别
          quoteValue: JSON.stringify(quoteValue), //引用的内容
        })
      console.log(prm)
      this.stompClient.send(
        "/app/chatRoom",
        {},
        prm
      );
    },
    //添加表情
    addEmoji(e) {
      this.message += e.native;
    },
    //选择表情
    chooseEmoji(item) {
      this.message += item.emoji;
    },
  },
  beforeDestroy() {
    Toast.clear();
  },
  updated() {},
};
</script>

<style lang="scss" scoped>
.groupChatInf {
  position: relative;
  .chatBox {
    // position: relative;
    height: calc(100vh - 320px);
    overflow-y: auto;
  }
  /deep/.van-pull-refresh {
    // min-height: 300px;
    min-height: calc(100vh - 320px);
    .van-pull-refresh__track {
      padding: 0px 10px;
    }
  }
  // ::v-deep .van-pull-refresh {
  //   min-height: 300px;
  // }
  .welcome {
    text-align: center;
    font-size: 14px;
    color: #666;
    padding: 6px 10px;
  }
  .chatInf {
    width: 100%;
    padding: 0px 0px 70px 0px;
    .chatOne {
      .date {
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        color: #999;
      }
      .chatMine,
      .chatOther {
        position: relative;
        margin-bottom: 10px;
        padding: 0px 50px;
        min-height: 40px;
        position: relative;
        .chatImg {
          width: 38px;
          height: 38px;
          position: absolute;
          top: 0px;
          .imgs {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
          }
          .van-image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
          }
          .sex {
            width: 15px;
            position: absolute;
            right: -4px;
            bottom: 0px;
          }
        }
        .chatText {
          padding: 8px 13px;
          background: #d8d8d8;
          font-size: 14px;
          color: #333;
          line-height: 1.7;
          border-radius: 6px;
          position: relative;
        }
        .chatName {
          font-size: 12px;
          color: #666;
          line-height: 20px;
          img {
            width: 11px;
            position: relative;
            top: -1px;
            margin-right: 3px;
          }
        }
        .chatImage,
        .chatVideo {
          width: 124px;
          height: 124px;
          overflow: hidden;
        }
        .chatImage {
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .chatVideo {
          position: relative;
          video {
            width: 100%;
            height: 100%;
          }
          .chatmask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            img {
              width: 40px;
              height: 40px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
        .chatvalueDiv {
          position: relative;
        }
        .chatvalueDiv:after {
          content: "";
          display: block;
          clear: both;
        }
        .quoteValue {
          padding: 5px 10px;
          font-size: 10px;
          color: #8e8e93;
          border-radius: 4px;
          background: #eeeeef;
          margin-top: 5px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .chatOprate {
          width: auto;
          height: 28px;
          background: #fff;
          position: absolute;
          bottom: -34px;
          z-index: 120;
          border-radius: 4px;
          display: flex;
          span {
            font-size: 13px;
            color: #333;
            line-height: 28px;
            width: 40px;
            text-align: center;
            margin: 0 10px;
          }
        }
        .chatOprateMask {
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background: rgba(255, 255, 255, 0);
          z-index: 111;
        }
        .quoteImg {
          padding: 5px 10px;
          border-radius: 4px;
          background: #eeeeef;
          margin-top: 5px;
          p {
            font-size: 10px;
            color: #8e8e93;
          }
          .qimgs {
            width: 90px;
            height: 60px;
            object-fit: cover;
            margin-left: 5px;
          }
          .quoteVideo {
            width: 90px;
            height: 60px;
            position: relative;
            margin-left: 5px;
            video {
              width: 100%;
              height: 100%;
            }
            .chatmask {
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.5);
              position: absolute;
              top: 0;
              left: 0;
              img {
                width: 30px;
                height: 30px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
        }
      }
      .chatMine {
        .chatImg {
          right: 0px;
        }
        .chatText {
          float: right;
          background: #ff4e7b;
          border: 1px #ff4e7b solid;
          color: #fff;
        }
        .chatName {
          text-align: right;
        }
        .quoteValue {
          float: right;
        }
        .chatImage,
        .chatVideo {
          border-radius: 6px 0 6px 6px;
          float: right;
        }
        .chatOprate {
          right: 0;
        }
        .chatOprate:after {
          content: "";
          position: absolute;
          width: 0px;
          height: 0px;
          line-height: 0px; /*为了防止ie下出现题型*/
          border-bottom: 5px solid #fff;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          right: 10px;
          top: -5px;
        }
        .quoteImg {
          float: right;
          p {
            float: left;
          }
          .qimgs,
          .quoteVideo {
            float: right;
          }
        }
      }
      .chatOther {
        .chatImg {
          left: 0px;
        }
        .chatText {
          float: left;
          background: #fff;
          // border: 1px #eee solid;
        }
        .chatImage,
        .chatVideo {
          border-radius: 0 6px 6px 6px;
          float: left;
        }
        .quoteValue {
          float: left;
        }
        .chatOprate {
          left: 0;
        }
        .chatOprate:after {
          content: "";
          position: absolute;
          width: 0px;
          height: 0px;
          line-height: 0px; /*为了防止ie下出现题型*/
          border-bottom: 5px solid #fff;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          left: 10px;
          top: -5px;
        }
        .quoteImg {
          float: left;
          p {
            float: left;
          }
          .qimgs,
          .quoteVideo {
            float: right;
          }
        }
      }
      .chatMine:after,
      .chatOther:after {
        content: "";
        display: block;
        clear: both;
      }
    }
  }
  .sendBox {
    // width: 400px;
    width: 100%;
    background: #fff;
    position: absolute;
    z-index: 99;
    left: 0px;
    margin: 0 auto;
    bottom: -20px;
    border-top: 1px #eee solid;
    .sendBoxTop {
      min-height: 50px;
      width: 100%;
      padding: 6px 60px 6px 60px;
      .sendMember {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 5px;
        left: 10px;
        img {
          width: 24px;
          height: 24px;
          position: absolute;
          top: 8px;
          left: 8px;
        }
      }
      .sendInf {
        width: 100%;
        height: 40px;
        background: #f5f5f5;
        border-radius: 20px;
        padding-left: 10px;
      }
      .sendBtn {
        width: 60px;
        height: 50px;
        padding: 5px 10px;
        position: absolute;
        top: 0px;
        right: 0px;
        img {
          width: 40px;
        }
      }
    }
    .sendBoxBtm {
      width: 100%;
      height: 42px;
      display: flex;
      .sendOprate {
        flex: 1;
        height: 100%;
        align-items: center;
        justify-content: center;
        position: relative;
        img {
          padding: 5px;
          width: 34px;
          height: 34px;
          display: block;
          margin: 4px auto;
        }
        ::v-deep .van-uploader {
          width: 34px;
          height: 34px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          .van-uploader__upload {
            width: 34px;
            height: 34px;
            margin: 0;
            opacity: 0;
          }
        }
      }
    }
    .sendExpression {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 12px;
      right: 65px;
      padding: 3px;
      img {
        width: 24px;
      }
    }
    .quoteMessage {
      display: inline-block;
      background: #f4f4f4;
      border-radius: 6px;
      padding: 5px 30px 5px 8px;
      position: relative;
      margin-top: 6px;
      .quoteText {
        font-size: 10px;
        color: #8e8e93;
        line-height: 1.5;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .quoteClose {
        width: 24px;
        height: 24px;
        padding: 5px;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .chatRecall {
    text-align: center;
    font-size: 12px;
    color: #8e8e93;
    padding: 6px 0px;
    line-height: 20px;
    a {
      color: #ff0021;
    }
  }
  .rejectCol {
    color: #ee6262;
  }
  ::v-deep .emoji-mart {
    width: 100% !important;
    height: 160px;
    border: none;
    .emoji-mart-category-label {
      display: none;
    }
  }
  .emojiBox {
    width: 100%;
    height: 160px;
    overflow: auto;
    .emojiDiv {
      display: flex;
      flex-wrap: wrap;
      padding: 0 10px;
      span {
        padding: 3px;
        width:32px;
        height:32px;
        text-align:center;
        line-height:32px;
      }
    }
  }
}
::v-deep .van-field__control{
  margin-top: 8px;
  border: 0px;
  width: calc(100% - 40px);
  background-color: transparent;
}
::v-deep .van-field__control:focus{
  outline: none !important;
}
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值