chat/_src/components/chatRoomMiniWap/roomToolbar.vue

<template>
  <div class="box-ft">
    <chat-at
      ref="chatAt"
      v-if="atShow"
      @atperson="atPerson"
      :curInd="atInd"
      :filterList="filterMembers">
    </chat-at>
    <div class="input-con">
      <div class="more-icon" @click.stop="handleMoreClick"></div>
      <form class="input-wrap" @submit="handleSend">
        <textarea
          @input="handleInput"
          @keydown.up.prevent="handleUp"
          @keydown.down.prevent="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="emojiShow" v-show="emojiShow" @closeEmojiList="closeEmojiList"></emoji>
  </div>
</template>

<script>
import backBar from '@/components/backBar'
import msgItem from '@/components/msgItem'
import emoji from '@/components/emoji'
import chatAt from '@/components/chatAt'
import atMe from '@/components/chatAt/atme'
import chatPin from '@/components/chatPin'
import toolbar from '@/components/chatInput/toolbar'
import { chatAtMixin, chatInputMixin, changeLangMixin } from '@/mixins'
import { accountLoginMixin } from '@/mixins/login'
import { chatMixin, inputMixin } from '@/mixins/chat'
import { isMobile, getMeechatType } from '@/util/util.js'
import { mapState } from 'vuex'
import { Message } from 'element-ui'
import API from '@/api'

export default {
  name: 'chatRoomMiniWap',
  mixins: [accountLoginMixin, chatAtMixin, chatInputMixin, chatMixin, inputMixin, changeLangMixin],
  components: {
    msgItem,
    emoji,
    chatAt,
    chatPin,
    atMe,
    backBar,
    toolbar
  },
  props: {
    showMiniChat: {
      type: Boolean
    }
  },
  data () {
    return {
      emojiShow: false,
      toolShow: false,
      inputHeight: 18,
      meechatType: getMeechatType(),
      isMobile: isMobile(),
      // mini
      showMenuExtra: false, // 显示左上角菜单
      showLoginBtn: true, // 显示登录按钮
      personUnRead: 0, // 私聊未读
      serverUnRead: 0 // 客服未读
    }
  },
  computed: {
    ...mapState([
      'account'
    ])
  },
  watch: {
    inputMsg (val, newval) {
      let ele = this.$refs.chatInput
      this.inputHeight = 'auto'

      this.$nextTick(() => {
        this.inputHeight = Math.max(18, Math.min(ele.scrollHeight, 75)) + 'px'
      })
    },
    showMiniChat (val) {
      if (val) this.resizeToBottom()
    }
  },
  methods: {
    handleEmojiClick () {
      this.toolShow = false
      this.emojiShow = !this.emojiShow

      this.checkNeedToBottom()
    },
    handleMoreClick () {
      this.emojiShow = false
      this.toolShow = !this.toolShow

      this.checkNeedToBottom()
    },
    checkNeedToBottom () {
      if (!this.isBottom) return

      this.$nextTick(() => {
        this.resizeToBottom()
      })
    },
    /**
     * @des 引用某条消息
     */
    quoteMsg (msg) {
      this.inputMsg = msg
    },
    /**
     * --------------for mini-------------------
     */
    getPmUnRead () {
      API.session.getMiniUnRead().then(({ data }) => {
        this.personUnRead = data.data['0']
        this.serverUnRead = data.data[this.groupId] || 0
      })
    },
    /**
     * 清空私聊未读
     * @param {type} 1.客服2.私聊
     **/
    clearPmUnread (type) {
      if (type == 1) this.serverUnRead = 0
      else this.personUnRead = 0
    },
    /**
     * 登录处理
     */
    async handleLogin () {
      // 设置登录按钮状态
      this.showLoginBtn = 'loading'
      if (self !== top) {
        this.handleParentLogin()
      } else {
        // 连接scatter
        this.scatterConnect()
      }
    },
    async scatterConnect () {
      await this.loginEos()
    },
    /**
     * @des 调用父级页面getIdentity
    */
    async getParentIdentity () {
      if (self !== top) {
        try {
          let response = await this.postMessager.send({ action: 'meechat:getIdentity' })
          let account = response.accounts.find(x => x.blockchain === 'eos')
          localStorage.setItem('account', JSON.stringify(account))
          this.setAccount(account)
        } catch (error) {
          this.showLoginBtn = true
        }
      }
    },
    /**
     * @des 调用父级页面登录
     */
    async handleParentLogin () {
      try {
        // scatter登录
        await this.getParentIdentity()
        if (!this.account) return
        // 合约登录
        await this.doContractLogin()
        location.replace(location.href.replace('show=false', 'show=true'))
      } catch (msg) {
        if (msg.type) {
          // scatter报错的情况
        } else {
          let json = JSON.parse(msg)
          let details = json.error.details
          Message({
            message: details[0].message,
            type: 'error'
          })
        }
        this.showLoginBtn = true
      }
    },
    async handleLogout () {
      this.doScatterLogout()
      this.showLoginBtn = true

      if (self !== top) {
        localStorage.removeItem('account')
        this.postMessager.send({
          action: 'meechat:logout'
        })
      }

      // 初始vuex数据
      this.$store.commit('setUserInfo', null)
      this.$store.commit('initChatData')
      this.$store.commit('initGroupData')

      // 注销后，刷新页面
      location.replace(location.href.replace('show=false', 'show=true'))
    },
    async handleLogout2 () {
      this.doScatterLogout()
      this.showLoginBtn = true
    }
  }
}
</script>

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