chat/_src/components/msgItem/redPackTip.vue

<template>
  <div class="tip-wrap">
    <i class="redpack-icon"></i>
    <template v-if="grabType==1">
      <span>{{$t('public.you')}}</span>{{$t('redPacket.received')}}<span @click="$packetGet(info)" class="text">{{$t('chat.redpack')}}</span>
    </template>
    <template  v-else-if="grabType==2">
      <span>{{group.members[info.to].nick_name}}</span>{{$t('redPacket.drawYour')}}<span @click="$packetGet(info)" class="text">{{$t('chat.redpack')}}</span>
    </template>
    <template v-else>
      {{$t('redPacket.youDraw')}}<span>{{group.members[info.from].nick_name}}</span>{{$t('redPacket.whos')}}<span @click="$packetGet(info)" class="text">{{$t('chat.redpack')}}</span>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'redPackTip',
  props: ['info'],
  computed: {
    ...mapState([
      'userId',
      'group'
    ]),
    grabType () {
      if (this.info.from == this.userId && this.info.to == this.userId) {
        return 1
      } else if (this.info.from == this.userId) {
        return 2
      } else {
        return 3
      }
    }
  }
}
</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>