chat/_src/components/chatRoom/chatRoom.vue

<template>
  <div class="c-view">
    <div class="box">
      <div class="box-hd">
        <div class="title-wrap">
          {{isPrivate ? group.privateName : group.groupName}}
          <span v-if="!isPrivate">({{group.membersNum}})</span>
          <i
            class="el-icon-more"
            v-if="!isPrivate"
            @click="groupSet = !groupSet"
          ></i>
        </div>
      </div>
      <chat-pin v-bind="pinMsg" @pinMsgClose="pinMsgClose" @scrollToView="scrollToView"></chat-pin>
      <div class="box-bd" :class="{'hidden': bdHiden}">
        <div ref="scrollWrap" class="bar" @scroll="handleScroll">
          <div ref="msgWrap" class="scroll-wrapper">
            <div class="msg-wrap">
              <div class="msg-top-more" v-if="lockEnd">
                <em>没有更多了</em>
              </div>
              <div class="msg-top-load" v-if="lockMore && !lockEnd">
                <i class="msg-loading-icon"></i>
              </div>
              <template v-if="group.chatList.length">
                <msg-item
                  v-for="(item ,key) in group.pinList"
                  :key="'pin' + key"
                  v-bind="item"
                  @quoteMsg="quoteMsg"
                  @deleteMsg="deleteMsg"
                ></msg-item>
              </template>
              <msg-item
                v-for="(item, key) in chatList"
                :key="key"
                :isPrivate="isPrivate"
                :msgItem="item"
                v-bind="item"
                @quoteMsg="quoteMsg"
                @deleteMsg="deleteMsg"
              ></msg-item>
            </div>
          </div>
        </div>
        <at-me v-if="!isPrivate" :atList="atList" @scrollToMsg="scrollToMsg"></at-me>
        <div
          class="msg-unread"
          @click="doSetRead"
          v-if="group.unreadNums > 0 && enableScroll && !isBottom"
        >
          <em>
            <i class="el-icon-d-arrow-right"></i>
            {{group.unreadNums}}条未读消息
          </em>
        </div>
      </div>
      <input-area ref="inputArea" @toBottom="resizeToBottom" v-show="isJoinGroup==1"></input-area>
      <div @click="joinGroup()" class="btn-join" v-show="isJoinGroup==0">加入群聊</div>
    </div>
    <chat-set
      @handleShowGroudMgr="showGroudMgr"
      v-if="group.members && !isPrivate"
      :class="{'move-left': groupSet}"
    ></chat-set>

    <chat-groud-mgr
      @handleShowGroudMgr="showGroudMgr"
      @handleShowCharSet="showCharSet"
      v-show="isCreator"
      :class="{'move-left': isShowGroudMgr}"
    ></chat-groud-mgr>
  </div>
</template>

<script>
import Vue from 'vue'
import msgItem from '@/components/msgItem'
import chatPin from '@/components/chatPin'
import atMe from '@/components/chatAt/atme'
import { chatMixin } from '@/mixins/chat'
import chatSet from '@/components/chatSet'
import inputArea from './inputArea'
import { getResizeHeight } from '@/util/util.js'
import { Button } from 'element-ui'
import chatGroudMgr from '@/components/chatGroudMgr'

Vue.component(Button.name, Button)

export default {
  name: 'chatRoom',
  mixins: [chatMixin],
  data () {
    return {
      isShowGroudMgr: false,
      bdHiden: true
    }
  },
  components: {
    msgItem,
    inputArea,
    chatGroudMgr,
    chatSet,
    chatPin,
    atMe
  },
  methods: {
    showCharSet (flag) {
      this.groupSet = flag == 1
      this.isShowGroudMgr = false
    },
    showGroudMgr (flag) {
      this.isShowGroudMgr = flag == 1
    }
  },
  mounted () {
    this.scrollHeight = getResizeHeight()
    window.onresize = () => {
      this.scrollHeight = getResizeHeight()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./chatRoom.scss";
</style>