chat/_src/components/chatMini/chatMini.vue

<template>
  <div class="mini-wrap">
    <div class="mini-body" :class="{'moblie-wrap': isMobile}" v-show="showChat">
      <div class="box">
        <div class="box-hd">
          <div class="btn-menu" :class="[{'active':personUnRead>0}]" @click.stop="showMenuExtra = !showMenuExtra"></div>
          <div class="box-title" @click.stop="showMenuExtra = !showMenuExtra">{{group.groupName}} ({{group.membersNum}})</div>
          <div class="btn-close" @click="handleToggleChat(false)"></div>

          <p class="user-tips" v-if="showLoginBtn" @click="handleLogin"><em>{{ $t('mini.server') }}</em></p>
          <a class="user-tips" v-else :class="[{'active':serverUnRead>0}]" :href="linkToCreator" target="meechatpc" @click="clearPmUnread(1)">
            <em>{{ $t('mini.server') }}</em>
          </a>

          <ul class="menu-extra" v-show="showMenuExtra">
            <div class="info clearfix" v-if="account && userInfo">
              <img class="avatar" :src="`${userInfo.cover_photo}?imageview/0/w/180`" v-if="userInfo.cover_photo">
              <span class="avatar avatar-bg" v-else>{{userInfo.nick_name.slice(0,2).toUpperCase() || userInfo.user_name.slice(0,2).toUpperCase()}}</span>
              <span class="account-info">
                <em>{{userInfo.nick_name || userInfo.user_name}}</em>
                <i class="login-out" href="javascript:void(0);" @click="handleLogout">{{ $t('mini.logout') }}</i>
              </span>
            </div>
            <li v-if="account && userInfo" @click="$showUserInfo"><a href="#">{{ $t('mini.accountSetting') }}</a></li>
            <li v-if="group.groupId"><a :href="`/#/group/${group.groupId}`" target="meechatpc" @click="clearPmUnread(2)">{{ $t('mini.openWeb') }}<em v-show="personUnRead>0">{{personUnRead}}</em></a></li>
            <li @click="changeLang"><a href="javascript:;">{{curLang=="en"?'中文':'English'}}</a></li>
            <li><a href="https://www.mee.chat/" target="_blank">
              Powered by <span>MeeChat</span>
            </a></li>
          </ul>
        </div>

        <chat-pin v-bind="pinMsg" @pinMsgClose="pinMsgClose" @scrollToView="scrollToView"></chat-pin>

        <div class="box-bd" ref="msgBox">
          <div ref="scrollWrap"
            @scroll.prevent="handleScroll"
            class="scroller"
          >
            <div ref="msgWrap" 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>
              <msg-item v-for="item in chatList"
                :key="item.hash"
                v-bind="item"
                :msgItem="item"
                :isMobile="isMobile"
                :isAdmin="isAdmin"
                @quoteMsg="quoteMsg"
                @deleteMsg="deleteMsg"
              ></msg-item>
            </div>
          </div>
          <at-me :atList="atList" class="mini" @scrollToMsg="scrollToMsg"></at-me>
          <div class="msg-unread"
            @click="doSetRead"
            v-if="unreadNums > 0 && enableScroll && !isBottom">
            <em><i class="el-icon-d-arrow-right"></i>{{unreadNums}}{{ $t('chat.unreadMsg') }}</em>
          </div>
        </div>

        <div class="box-ft">
          <chat-at
            ref="chatAt"
            v-if="atShow"
            @atperson="atPerson"
            :curInd="atInd"
            :filterList="filterMembers">
          </chat-at>
          <div class="input-ctrl" v-if="showLoginBtn">
            <span v-if="showLoginBtn === 'loading'">{{ $t('mini.logining') }}</span>
            <span v-else class="enable" @click="handleLogin">{{ $t('mini.login') }}</span>
          </div>
          <div class="input-con" v-else>
            <div class="more-icon" @click.stop="handleMoreClick"></div>
            <form class="input-wrap" @submit="handleSend">
              <textarea
                @keydown.up="handleUp"
                @keydown.down="handleDown"
                @keydown.left="handleLeft"
                @keydown.right="handleRight"
                @keydown.delete="handleDel"
                @keydown.esc="handleEsc"
                cols="1"
                ref="chatInput"
                rows="1"
                @keydown.enter="handleKeyDown"
                placeholder="Write a message"
                v-model="inputMsg"
                @focus="handleFocus"
                @blur="handleBlur"
                :style="{height:inputHeight}"
              />
            </form>
            <div class="emoji-icon" @click.stop="handleEmojiClick"></div>
            <div class="btn-send" @click="handleSend">{{ $t('chat.send') }}</div>
          </div>

          <toolbar ref="toolbar" :toolShow="toolShow" @handleFile="handleFile"></toolbar>

          <emoji @addEmoji="addEmoji" :emojiShow="showEmoji" v-show="showEmoji" @closeEmojiList="closeEmojiList"></emoji>
        </div>
      </div>
      <div class="pub-loading" v-show="isLoadingRoom"></div>
    </div>
    <div @click="handleToggleChat(true)" class="mini-control" v-show="!showChat">
      <i class="at-tip" v-show="atList.length">@</i>
      <ul v-if="unreadCounts > 0">
        <li class="msg-tips">
          <em>+{{unreadCounts}}</em>
        </li>
        <li class="user-tips">
          <em>{{group.membersNum}}</em>
        </li>
      </ul>
      <div class="meechat-icon" v-else>
        <i class="user-tips">
          <em>{{group.membersNum}}</em>
        </i>
      </div>
    </div>
    <transition name="msgbox-fade">
      <div class="pub-wrapper" v-if="loginBoxVisible">
        <div class="pub-mask" @click="loginBoxVisible=false"></div>
        <login-box @initMiniLoginCallback="initMiniLoginCallback"></login-box>
      </div>
    </transition>
  </div>
</template>

<script>
import chatMini from './chatMiniHandle.js'
export default chatMini
</script>

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