<template>
  <div class="coupon-list">
    <div class="list-img">
        <img :src="`${constant.imgUrl}/retail/coupon/no-check.png`" alt mode="widthFix" />
    </div>
    <div class="list-det">
      <div class="list-det-left">
        <div class="price-wrap">
          <span>￥</span>
          <span class="price">{{ item.amount}}</span>
        </div>
        <div class="full-reduc app-size-28">满{{ item.miniCost}}可使用</div>
      </div>
      <div class="list-det-right">
        <div class="coupon-message">
          <div class="app-color-2">优惠券</div>
          <div>适用：全品类</div>
          <div>有效至：{{ item.endTime.substr(0, 10)}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "coupon-sel",
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      constant: this.$constant,
    }
  }
};
</script>

<style lang="scss" scoped>
// 优惠券
.coupon-list {
  position: relative;
  margin-bottom: 6px;
  .list-det {
    width: 100%;
    @include disFlex(center, space-between);
    position: absolute;
    top: 0;
    left: 0;
    .list-det-left {
      padding: 20px 0 20px 36px;
      width: 210px;
      color: #efefef;
      .price-wrap {
        margin-bottom: 6px;
        font-size: 26upx;
        .price {
          font-size: 60upx;
          font-weight: bold;
          line-height: 1;
        }
      }
    }
    .list-det-right {
      width: calc(100% - 280px);
      margin-left: 22px;
      @include disFlex(center, space-between);
      padding: 20px 26px 20px 0;
      .coupon-message {
        color: $fontColor3;
        & > div {
          margin: 6px 0;
        }
      }
    }
  }
}
// 修改uni-app组件
/deep/.uni-radio-input-checked {
  background-color: $mainColor !important;
  border-color: $mainColor !important;
}
</style>