chat/_src/components/msgItem/redPackTip.vue

<template>
  <div class="msg-item-common tip-wrap">
    <i class="redpack-icon"></i>
    <span>{{info.to == userId ? $t('public.you') : toUser.nick_name }}</span>{{$t('redPacket.drawed')}}
    <span>{{info.from == userId ? $t('public.you') : fromUser.nick_name}}</span>{{$t('redPacket.whos')}}
    <span class="text" @click="$packetGet(packetGetInfo,true)">{{$t('chat.redpack')}}</span>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'redPackTip',
  props: ['info', 'msgItem'],
  data () {
    return ({
      fromUser: {},
      toUser: {}
    })
  },
  computed: {
    ...mapState([
      'userId',
      'group'
    ]),
    ...mapState({
      members: state => state.group.members
    }),
    packetGetInfo () {
      let packetGetInfo = {
        userId: this.info.from,
        content: {
          trxId: this.info.content.redpack_trx_id
        }
      }

      return packetGetInfo
    }
  },
  created () {
    this.fromUser = (this.members && this.members[parseInt(this.info.from)]) || {}
    this.toUser = (this.members && this.members[this.info.to]) || {}
  }
}
</script>

<style lang="scss" scoped>
.tip-wrap{
  text-align: center;
  font-size: 12px;
  color: #999999;
  line-height: 30px;
  .redpack-icon{
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
    background: url('../../assets/icon-packet.png') no-repeat;
    width: 21px;
    height: 21px;
    background-size: 100%;
  }
  span{
    display: inline-block;
    margin: 0 2px;
  }
  .text{
    color: #e99c57;
    font-weight: bold;
    cursor: pointer;
  }
}
</style>