chat/_src/components/msgItem/redPacket.vue

<template>
  <div class="red-packet" :class="info.userId == userId ? 'me' : 'you'">
    <slot></slot>
    <div class="top"
      :class="{'lose-bg': isLoseBg, 'unopen': info.ext.grabbed == 0}">
      <i class="red-packet-icon"></i>
      <div class="word">
        <p>{{info.content.title}}</p>
        <p class="bot-text" v-if="info.ext.grabbed == 1">{{$t('redPacket.received')}}</p>
        <p class="bot-text" v-else-if="info.ext.redpack_status == 1">{{$t('redPacket.lootAll')}}</p>
        <p class="bot-text" v-else-if="info.ext.redpack_status == 2">{{$t('redPacket.expired')}}</p>
      </div>
    </div>
    <div class="bot">
      {{info.content.tokenType || 'EOS'}}{{$t('chat.redpack')}}
    </div>
  </div>
</template>

<script>

export default {
  name: 'redPacket',
  props: ['info'],
  computed: {
    userId () {
      return this.$store.state.userId
    },
    isLoseBg () {
      return this.info.ext.redpack_status != 0 || this.info.ext.grabbed == 1
    }
  }
}
</script>

<style lang="scss" scoped>
.red-packet{
  width: 210px;
  border-radius: 6px;
  margin: 3px 0;
  overflow: hidden;
  cursor: pointer;
  .top{
    height: 70px;
    line-height: 70px;
    font-size: 14px;
    padding-left: 14px;
    background-color: #e99c57;
    .word{
      color: #ffffff;
      display: inline-block;
      width: 140px;
      vertical-align: middle;
      p{
        @include ellipsis();
        line-height: 1.2;
        &:first-child{
          margin-bottom: 6px;
        }
      }
    }
  }
  .unopen {
    background-color: #e99c57;
    .red-packet-icon {
      background: url('./img/unopen-packet.png') no-repeat;
      width: 36px;
      height: 44px;
      background-size: 100%;
    }
  }
  .lose-bg{
    background-color: #f6d7bc !important;
    .red-packet-icon{
      background: url('./img/open-packet.png') no-repeat;
      width: 36px;
      height: 51px;
      background-size: 100%;
    }
  }
  .bot{
    background-color: #ffffff;
    color: #999999;
    padding-left: 14px;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
  }
  &.you{
    float: left;
  }
  &.me{
    float: right;
    .top{
      text-align: left;
    }
    .bot{
      text-align: left;
    }
  }
  .tips{
    display: inline-block;
  }
  .red-packet-icon{
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
  }
}
.bot-text{
  font-size: 12px;
}
</style>