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>
          <a :href="group.url" target="_blank" class="icon-link" v-if="!isPrivate && group.url"></a>
          <i
            class="el-icon-more"
            v-if="!isPrivate && isJoin"
            @click.stop="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>{{ $t('chat.noMore') }}</em>
              </div>
              <div class="msg-top-load" v-if="lockMore && !lockEnd">
                <i class="msg-loading-icon"></i>
              </div>
              <template>
                <msg-item
                v-for="item in chatList"
                :key="item.hash"
                :isPrivate="isPrivate"
                :msgItem="item"
                :isAdmin="isAdmin"
                v-bind="item"
                @quoteMsg="quoteMsg"
                @deleteMsg="deleteMsg"
              ></msg-item>
              </template>
            </div>
          </div>
        </div>
        <at-me v-if="!isPrivate" :atList="atList" @scrollToMsg="scrollToMsg"></at-me>
        <div
          class="msg-unread"
          @click="doSetRead"
          v-show="group.unreadNums > 0 && enableScroll && !isBottom"
        >
          <em>
            <i class="el-icon-d-arrow-right"></i>
            {{group.unreadNums}}{{ $t('chat.unreadMsg') }}
          </em>
        </div>
      </div>
      <input-area ref="inputArea" @toBottom="resizeToBottom" v-show="isJoinGroup==1" @handleFocus="showCharSet(0)"></input-area>
      <div @click="joinGroup()" class="btn-join" v-show="isJoinGroup==0">{{ $t('chat.joinGroup') }}</div>
    </div>
    <div class="pub-loading" v-show="isLoadingRoom"></div>

    <chat-set
      @showLoadingRoom = "showLoadingRoom"
      @showCharSet = "showCharSet"
      @handleShowGroudMgr="showGroudMgr"
      v-if="!isPrivate && isJoinGroup==1"
      :class="{'move-left': groupSet}"
    ></chat-set>

    <chat-groud-mgr
      v-if="!isPrivate && isCreator"
      @handleShowGroudMgr="showGroudMgr"
      @handleShowCharSet="showCharSet"
      :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 inputArea from './inputArea'
import { getResizeHeight } from '@/util/util.js'
import { Button } from 'element-ui'

Vue.component(Button.name, Button)
export default {
  name: 'chatRoom',
  mixins: [chatMixin],
  data () {
    return {
      isShowGroudMgr: false,
      bdHiden: true
    }
  },
  components: {
    msgItem,
    inputArea,
    chatPin,
    atMe,
    chatGroudMgr: () => import('@/components/chatGroudMgr'),
    chatSet: () => import('@/components/chatSet')
  },
  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>