chat/_src/components/msgItem/redPackTip.vue

<template>
  <div class="tip-wrap">
    <i class="redpack-icon"></i>
    <template v-if="isMe">
      <span>{{group.members[info.to].nick_name}}</span>领取了你的<span @click="$packetGet(info)" class="text">红包</span>
    </template>
    <template v-else>
      你领取了<span>{{group.members[info.from].nick_name}}</span>的<span @click="$packetGet(info)" class="text">红包</span>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'redPackTip',
  props: ['info'],
  computed: {
    ...mapState([
      'userId',
      'group'
    ]),
    isMe () {
      return this.info.from == this.userId
    }
  }
}
</script>

<style lang="scss" scoped>
.tip-wrap{
  text-align: center;
  font-size: 14px;
  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>