CommunityApp/pagesM/comps/dt_coupon.vue

<template>
  <view class="dt-voucher">
    <block v-if="!isEnable">
      <!-- outdate -->
      <image v-if="dataDetail.status==1" class="outdate" src="http://139.9.103.171:1888/img/image/voucher_outdate.png" mode="widthFix"></image>

      <!-- used -->
      <image v-if="dataDetail.status==2" class="used" src="http://139.9.103.171:1888/img/image/voucher_used.png" mode="widthFix"></image>
    </block>
    <block v-else>
      <!-- receive -->
      <image v-if="!dataDetail.isReceive" class="unreceive" src="http://139.9.103.171:1888/img/image/unreceive.png" mode="widthFix"></image>
    </block>

    <!-- border -->
    <image class="bg-top-border" :src="borderSrc" mode="widthFix"></image>

    <view class="mn-wrap">
      <view class="left" :class="{'dis-able':!isEnable}">
        <block v-if="dataDetail.voucher_type == 1">
          <view class="worth">6.8<text class="suffix">折</text></view>
          <view class="type-name">折扣券</view>
        </block>
        <block v-else>
          <view class="worth"><text class="prefix">￥</text>{{dataDetail.amt}}</view>
          <view class="type-name">抵价券</view>
        </block>
      </view>
      <view class="mid">
        <view class="apply-to-name fn-text-row-two" :class="{'dis-able':!isEnable}">{{dataDetail.name}}</view>
        <view v-if="dataDetail.minimumPrice>0" class="apply-condition" :class="{'dis-able':!isEnable}">满 {{dataDetail.minimumPrice}} 元可使用</view>
      </view>
      <view v-if="isEnable" class="right">
        <button v-if="dataDetail.isReceive" class="dt-btn-submit get-btn" @tap="tapBack">立即使用</button>
        <button v-else class="dt-btn-submit get-btn" @tap="tapReceive">立即领取</button>
      </view>
    </view>
    <view class="ft-wrap">
      <view class="ft" @tap="$emit('visible')">
        <view class="des" :class="{'dis-able':!isEnable}">
          <text>详细信息</text>
          <image class="arrow-up" :class="{ 'active':!dataDetail.isShowDetail }" src="http://139.9.103.171:1888/img/image/arrow_up.png" mode="widthFix"></image>
        </view>
        <view class="date" :class="{'dis-able':!isEnable}">{{ dataDetail.beginDate| dateFormat('yyyy-MM-dd') }} 至 {{ dataDetail.endDate| dateFormat('yyyy-MM-dd') }}</view>
      </view>
    </view>
    <view v-if="dataDetail.isShowDetail" class="ext-wrap"><text v-if="dataDetail.minimumPrice>0">满{{dataDetail.minimumPrice}}元可使用；</text>不可叠加使用</view>
  </view>
</template>
<script>
import DtCheck from '../comps/dt_check.vue'
export default {
  components:{
    DtCheck
  },
  props: {
    isEnable: {// 是否可用优惠券
      type: Boolean,
      default: true
    },
    dataDetail: {
      type: Object,
      default: () => { }
    },
  },
  data() {
    return {
    }
  },
  computed: {
    borderSrc() {
      return this.isEnable ? 'http://139.9.103.171:1888/img/image/flowerborder.png' : 'http://139.9.103.171:1888/img/image/flowerborder_grey.png'
    }
  },
  methods: {
    tapReceive() {
      this.$emit('receive', this.dataDetail)
    },
    tapBack() {
      this.$emit('use')
    },
  }

}
</script>

<style lang="scss">
.fn-text-row-two {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dt-voucher {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 690upx;
  // min-height:220upx;
  box-sizing: border-box;
  border-radius: 10upx;
  font-size: 28upx;
  background-color: #fff;
  .dis-able {
    color: #999 !important;
  }
  .unreceive {
    position: absolute;
    top: 0;
    left: 0;
    width: 90upx;
    height: 90upx;
  }
  .outdate,
  .used {
    position: absolute;
    top: 0;
    right: 0;
    width: 165upx;
    height: 86upx;
  }
  .bg-top-border {
    width: 100%;
    height: 15upx;
  }
  .mn-wrap {
    display: flex;
    width: 100%;
    height: 154upx;
    margin: 0 30upx;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-width: 136upx;
      font-size: 22upx;
      color: #ff7171;

      .worth {
        font-size: 60upx;
        line-height: 1;
        .prefix {
          font-size: 30upx;
        }
        .suffix {
          font-size: 24upx;
        }
      }
      .type-name {
        text-align: center;
      }
    }
    .mid {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 30upx;

      .apply-to-name {
        max-height: 61upx;
        font-size: 26upx;
        line-height: 1.2;
        color: #333;
      }
      .apply-condition {
        padding-top: 20upx;
        color: #666666;
        font-size: 22upx;
      }
    }
    .get-btn {
      margin: 47upx 0;
      width: 160upx;
      height: 60upx;
      line-height: 60upx;
      border-radius: 6upx;
      font-size: 28upx;
      font-weight: 400;
      padding: 0;
      background-color: #ff7171;
      color: #fff;
    }
  }
  .ft-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 30upx;
    color: #666;
    .ft {
      position: relative;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 50upx;
      line-height: 50upx;
      font-size: 20upx;

      .des {
        .arrow-up {
          margin-left: 10upx;
          width: 18upx;
          height: 9upx;
        }
        .arrow-up.active {
          transform: rotate(180deg);
        }
      }
    }
    .ft:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1upx;
      border-top: 1upx dashed #cccccc;
      content: "";
    }
  }
  .ft-wrap:before,
  .ft-wrap:after {
    position: absolute;
    top: -14upx;
    width: 28upx;
    height: 28upx;
    border-radius: 50%;
    background-color: #f2f2f2;
    content: "";
  }
  .ft-wrap:before {
    left: -44upx;
  }
  .ft-wrap:after {
    right: -44upx;
  }
  .ext-wrap {
    padding: 0 30upx 20upx;
    width: 100%;
    color: #999;
    font-size: 20upx;
  }
}
</style>