chat/_src/components/chatRoomMiniWap/roomMsg.vue

<template>
  <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, key) in group.chatList"
          :key="key"
          :isMobile="true"
          :isAdmin="isAdmin"
          v-bind="item"
          :msgItem="item"
          @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-show="unreadNums > 0 && enableScroll && !isBottom">
      <em><i class="el-icon-d-arrow-right"></i>{{unreadNums}}{{ $t('chat.unreadMsg') }}</em>
    </div>
  </div>
</template>

<script>
import msgItem from '@/components/msgItem'
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: {
  },
  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>