chat/_src/components/msgItem/index.vue

<template>
  <div v-if="repealMsg" class="msg-repeal-item">
    {{repealStr}}
  </div>
  <redPack-tip
    v-else-if="msgItem && msgItem.redPackTip"
    :info="msgItem">
  </redPack-tip>
  <div class="msg-item clearfix" :class="type" v-else>
    <msg-time :timestamp="timestamp" v-if="timeMsg"></msg-time>
    <img v-if="avatar" class="user-avatar avatar" :src="avatar" @click="$showOtherInfo(userId)" alt>
    <div
      v-else
      class="avatar"
      :class="'avatar_bg' + userId % 9"
      :data-name="name && name.slice(0,2).toUpperCase()"
      @click="$showOtherInfo(userId)"
    ></div>
    <div class="content">
      <div class="metabar">
        <span class="name">{{name}}</span>
        <span class="admin" v-if="creator == userId">
          <i class="icon-creator" v-if="type === 'me'"></i>
          群主
          <i class="icon-creator" v-if="type === 'you'"></i>
        </span>
        <span class="admin" v-else-if="adminList.includes(Number(userId))">
          <i class="el-icon-star-on" v-if="type === 'me'"></i>
          管理员
          <i class="el-icon-star-on" v-if="type === 'you'"></i>
        </span>
        <span class="time">{{timestamp|formatTimestamp}}</span>
      </div>
      <red-packet
        v-if="msg_type == 4 && msgItem"
        @click.native="$packetGet(msgItem)"
        :info="msgItem">
      </red-packet>
      <template v-else-if="isMobile">
        <div class="bubble disabled" :class="{focus:showToolbar}" @contextmenu.prevent @touchstart="onTouchStartToolBtn" @touchend="onTouchEndToolBtn">
          <i class="loading-icon" v-if="loading"></i>
          <i class="error-icon" v-if="fail" @click="reSend"></i>
          <img
            @click="$showImgPreview(content)"
            class="img-msg"
            v-if="msg_type == 1"
            :style="{width:width,height:height}"
            :src="content"
            @load="imgLoad"
          >
          <video
            class="video-msg"
            :class="{'limit-height': msg_type == 3}"
            controls="controls"
            preload="meta"
            v-else-if="msg_type == 2 || msg_type == 3"
            :src="content"
          ></video>
          <pre class="text" v-else-if="msg_type == 10" v-html="content"></pre>
          <pre class="text" v-else>{{content}}</pre>
          <ul
            class="pub-pop-toolbar"
            v-show="showToolbar"
            :style="{left:toolBarX,top:toolBarY,bottom:toolBarBottom}"
          >
            <li @click="handleQuote" v-if="msg_type == 0 || msg_type == 4">引用</li>
            <li @click="handleCopy">复制</li>
            <!-- <li @click="handleDel">删除</li> -->
            <li class="split-line" v-if="(isAdmin && type === 'you') || (isAdmin || revoke)"></li>
            <li @click="handlePingMsg" v-if="isAdmin">置顶</li>
            <li @click="handleBlock" v-if="isAdmin && type === 'you'">{{block?'解禁':'禁言'}}</li>
            <li @click="handleRevoke" v-if="isAdmin || revoke">撤回</li>
          </ul>
        </div>
      </template>
      <template v-else>
        <div class="bubble" :class="{focus:showToolbar}" @contextmenu.prevent="onToolBtn">
          <i class="loading-icon" v-if="loading"></i>
          <i class="error-icon" v-if="fail" @click="reSend"></i>
          <img
            @click="$showImgPreview(content)"
            class="img-msg"
            v-if="msg_type == 1"
            :style="{width:width,height:height}"
            :src="content"
            @load="imgLoad"
          >
          <video
            class="video-msg"
            :class="{'limit-height': msg_type == 3}"
            controls="controls"
            preload="meta"
            v-else-if="msg_type == 2 || msg_type == 3"
            :src="content"
          ></video>
          <pre class="text" v-else-if="msg_type == 10" v-html="content"></pre>
          <pre class="text" v-else>{{content}}</pre>
          <ul
            class="pub-pop-toolbar"
            v-show="showToolbar"
            :style="{left:toolBarX,top:toolBarY,bottom:toolBarBottom}"
          >
            <li @click="handleQuote" v-if="msg_type == 0 || msg_type == 4">引用</li>
            <li @click="handleCopy">复制</li>
            <!-- <li @click="handleDel">删除</li> -->
            <li class="split-line" v-if="(isAdmin && type === 'you') || (isAdmin || revoke)"></li>
            <li @click="handlePingMsg" v-if="isAdmin">置顶</li>
            <li @click="handleBlock" v-if="isAdmin && type === 'you'">{{block?'解禁':'禁言'}}</li>
            <li @click="handleRevoke" v-if="isAdmin || revoke">撤回</li>
          </ul>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import msgTime from '@/components/msgItem/time'
import redPacket from '@/components/msgItem/redPacket'
import redPackTip from '@/components/msgItem/redPackTip'
import { mapMutations, mapActions, mapState } from 'vuex'
import { isMobile } from '@/util/util.js'

export default {
  name: 'msgItem',
  components: {
    msgTime,
    redPacket,
    redPackTip
  },
  props: {
    msgItem: Object,
    isPrivate: Boolean,
    repealMsg: Boolean,
    from: [String, Number],
    timeMsg: Boolean,
    avatar: {
      type: String
    },
    name: {
      type: String
    },
    timestamp: [String, Number],
    hash: String,
    content: {
      type: [String, Number, Object]
    },
    userId: [String, Number],
    /**
     * 消息来源 {me: 我发的, you: 其他人发的}
     */
    type: {
      type: String
    },
    /**
     * 消息种类 (1 => 图片, 2 => 视频, 3 => 音频, 4 => 链接, 5 => 红包)
     */
    msg_type: {
      type: [Number, String]
    },
    createTime: [Number],
    loading: [Boolean],
    fail: [Boolean],
    res: [File]
  },
  data () {
    return {
      isMobile: isMobile(),
      toolBarX: 0,
      toolBarY: 0,
      toolBarBottom: 0,
      showToolbar: false,
      revoke: false,
      block: false,
      revokeTimeAllow: false,
      width: 'auto',
      height: 'auto',
      longTapTimer: null
    }
  },
  computed: {
    ...mapState({
      myId: state => state.userId,
      userInfo: state => state.group.userInfo,
      blockList: state => state.group.blockList,
      adminList: state => state.group.adminList,
      members: state => state.group.members,
      creator: state => state.group.creator
    }),
    isAdmin () {
      return this.adminList && this.adminList.some(id => id == this.myId)
    },
    repealStr () {
      if (this.repealMsg) {
        if (this.from == this.userId) {
          return `${this.type == 'me' ? '你' : this.name}撤回了一条消息`
        } else {
          if (this.userId == this.myId) {
            let admin = this.members[this.from]
            let adminName = '管理员'
            if (admin) {
              adminName = admin.nick_name
            }
            return `${adminName}撤回了${this.name}的一条消息`
          } else {
            return ''
          }
        }
      } else {
        return ''
      }
    }
  },
  mounted () {
    if (this.msg_type == 1) {
      let rect = /_size([0-9]+)x([0-9]+)/.exec(this.content)
      if (rect) {
        let originalWidth = parseInt(rect[1])
        let originalHeight = parseInt(rect[2])
        let holderWidth = (document.body.offsetWidth - 35) * 0.84
        let scaleX =
          originalWidth > holderWidth ? holderWidth / originalWidth : 1
        let scaleY = originalHeight > 250 ? 250 / originalHeight : 1
        let scale = Math.min(scaleX, scaleY)
        this.width = scale * originalWidth + 'px'
        this.height = scale * originalHeight + 'px'
      }
    }
  },
  created () {},
  methods: {
    ...mapMutations(['updateChatInputFocus', 'reSendChatItem']),
    ...mapActions([
      'doRepealPersonMsg',
      'doRepealGroupMsg',
      'doBlockUser',
      'doUnBlockUser',
      'doPinMsg',
      'doSendMsg',
      'doSendFile'
    ]),
    imgLoad (e) {
      this.width = 'auto'
      this.height = 'auto'
    },
    hideToolbar (event) {
      if (this.showToolbar !== false) {
        this.showToolbar = false
        document.body.removeEventListener('click', this.hideToolbar, false)
        document.body.removeEventListener('contextmenu', this.hideToolbar, false)
      }
    },
    onToolBtn (event) {
      if (this.showToolbar) {
        this.hideToolbar(event)
        return
      }

      let winWidth = window.innerWidth
      let winHeight = window.innerHeight
      let clientX, clientY

      if (event instanceof MouseEvent) {
        clientX = event.clientX
        clientY = event.clientY
        this.toolBarX = event.layerX + 20
        this.toolBarY = event.layerY

        setTimeout(() => {
          document.body.addEventListener('click', this.hideToolbar, false)
          document.body.addEventListener('contextmenu', this.hideToolbar, false)
        }, 0)
      } else {
        let touch = event.touches[0] || event.changedTouches[0]
        clientX = touch.clientX
        clientY = touch.clientY
        let rect = event.target.getBoundingClientRect()
        this.toolBarX = touch.pageX + 20 - rect.left
        this.toolBarY = touch.pageY - rect.top
        // 校正局部坐标
        let target = event.target
        while (!target.classList.contains('bubble')) {
          this.toolBarX += target.offsetLeft
          target = target.parentNode
        }
      }
      if (clientX > winWidth * 0.66) {
        this.toolBarX = this.toolBarX - 120
      }
      this.toolBarX += 'px'

      if (clientY > winHeight / 2) {
        this.toolBarBottom = this.toolBarY + 'px'
        this.toolBarY = 'auto'
      } else {
        this.toolBarBottom = 'auto'
        this.toolBarY += 'px'
      }

      this.showToolbar = true
      this.block = this.blockList.some(id => id == this.userId)

      this.revokeTimeAllow =
        Date.now() - parseInt(this.timestamp) < 1e3 * 60 * 3
      this.revoke = this.type === 'me' && this.revokeTimeAllow
    },
    onTouchStartToolBtn (event) {
      clearTimeout(this.longTapTimer)

      this.longTapTimer = setTimeout(() => {
        this.onToolBtn(event)
      }, 800)
    },
    onTouchEndToolBtn (event) {
      clearTimeout(this.longTapTimer)

      setTimeout(() => {
        document.body.addEventListener('click', this.hideToolbar, false)
      }, 0)
    },
    handleQuote () {
      let { name, content } = this
      let quoteStr = `「${name}：${content}」\n- - - - - - - - - - - - - - -\n`
      this.$emit('quoteMsg', quoteStr)
      this.$nextTick(() => {
        this.updateChatInputFocus(true)
      })
    },
    handleCopy () {
      let userSelection
      let selectedText = ''
      if (window.getSelection) { // 现代浏览器
        userSelection = window.getSelection()
        selectedText = userSelection.toString()
      } else if (document.selection) { // IE浏览器 考虑到Opera，应该放在后面
        userSelection = document.selection.createRange()
        selectedText = userSelection.text
      }

      let copyTxt = selectedText || this.content
      this.$copyText(copyTxt).then(
        e => {
          this.updateChatInputFocus(true)
        },
        e => {
          console.log('Can not copy')
        }
      )
    },
    handleShare () {
      this.$showInvite(this.content)
    },
    handleDel () {
      this.$emit('deleteMsg', this.hash)
    },
    handlePingMsg () {
      this.doPinMsg({ hash: this.hash })
    },
    handleRevoke () {
      if (this.isPrivate) {
        console.log('撤回')
        this.doRepealPersonMsg({ hash: this.hash })
      } else {
        this.doRepealGroupMsg({ hash: this.hash })
      }
    },
    handleBlock () {
      if (this.block) {
        this.doUnBlockUser({ id: this.userId })
      } else {
        this.doBlockUser({ id: this.userId })
      }
    },
    reSend () {
      if (this.msg_type == 0 || this.msg_type == 4) {
        let opt = {
          type: 0,
          msg: this.content,
          createTime: this.createTime
        }
        this.reSendChatItem({ createTime: this.createTime })
        this.doSendMsg(opt)
      } else {
        let opt = {
          res: this.res,
          createTime: this.createTime
        }
        this.reSendChatItem({ createTime: this.createTime })

        this.doSendFile(opt)
      }
    }
  },
  filters: {
    formatTimestamp (val) {
      if (!val) return ''
      return dayjs(val * 1).format('HH:mm')
    }
  }
}
</script>

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