wanmeiyizhan/components/card.vue

<template>
  <!-- <div class="coupon-list"> -->
  <div class="coupon-card">
    <div class="coupon-top">
      <image
        class="coupon-img"
        :src="
          props.CouponImgUrl || 'https://eshangtech.com/ShopICO/no-picture.png'
        "
      />
      <div style="width: 362rpx">
        <div class="coupon-name">{{ props.CouponName }}</div>
        <div class="coupon-type-text">{{ props.CouponTypeText }}</div>
        <div class="coupon-center">
          <span class="coupon-date" v-if="props.CouponSendId"
            >有效期至{{ props.EndTime }}</span
          >
          <span class="coupon-date" v-else>活动至{{ props.EndTime }}</span>
        </div>
      </div>
      <div class="coupon-left">
        <span v-if="props.CouponType === 2000"
          ><span class="coupon-price">{{ props.UseAmount * 10 }}</span
          >折</span
        >
        <span v-else
          >￥<span class="coupon-price">{{ props.UseAmount }}</span></span
        >
        <div v-if="!props.CouponSendId && props.CouponPoint" class="span24">
          {{ props.CouponPoint }}积分兑换
        </div>
        <div v-else class="span24">
          {{
            props.WithAmount > 0
              ? "满" + props.WithAmount + "可用"
              : "无门槛使用"
          }}
        </div>
      </div>
    </div>
    <div class="coupon-bottom">
      <div class="coupon-des">
        {{ props.CouponInstructions || " 具体使用规则详询店内工作人员" }}
      </div>
      <div v-if="type === 1">
        <span class="coupon-use-door" v-if="props.usedState" @click="drop()"
          >已兑换</span
        >
        <span class="coupon-use-door" v-else @click="drop()"
          >去兑换</span
        >
        <!-- <span class="coupon-use-door" v-if="!props.CouponSendId" @click="drop()">去兑换</span>
          <span class="coupon-use-door" @click="drop()" v-else-if="props.CouponState==0">立即使用</span>
          <span class="coupon-door" v-else>{{props.CouponStateText}}</span> -->
      </div>
      <div v-else>
        <!-- calcTakeState true 是领了 -->
        <span class="coupon-use-door" v-if="!props.CouponSendId" @click="drop()"
          >去兑换</span
        >
        <span
          class="coupon-use-door"
          @click="drop()"
          v-else-if="props.CouponState == 0"
          >立即使用</span
        >
        <span class="coupon-door" v-else>{{ props.CouponStateText }}</span>
      </div>
    </div>
  </div>

  <!-- </div> -->
</template>

<script>
export default {
  props: ["props", "type"],
  methods: {
    drop(event) {
      // let el = event.currentTarget
      this.$emit("drop", this.props);
    },
  },
};
</script>

<style scoped lang="stylus">
.coupon-card {
  background: url('https://eshangtech.com/ShopICO/icos/coup-bg.png') no-repeat center; // eshangtech.com/ShopICO/icos/coup-bg.png) no-repeat center
  background-size: contain;
  height: 263rpx;
  width: 708rpx;
  padding: 12rpx 30rpx;
  margin: 0rpx auto 0rpx auto;
  box-sizing: border-box;
  font-size: 24rpx;

  .coupon-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 164rpx;
  }

  .coupon-left {
    text-align: center;
    color: #E94B43;
    width: 130rpx;
  }

  .coupon-price {
    color: #E94B43;
    font-size: 46rpx;
    font-weight: bolder;
    font-family: 'San Francisco Display Medium';
    line-height: 46rpx;
  }

  .coupon-manjian {
    margin-top: 20rpx;
  }

  .coupon-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin-top 16rpx
  }

  .coupon-img {
    width: 110rpx;
    height: 110rpx;
    border-radius: 10rpx;
    background: #eee;
  }

  .coupon-zx {
    display: inline-block;
    padding: 6rpx 10rpx;
    color: #be6f6b;
    border: 2rpx solid #edd0cc;
    background: #fef4f3;
    border-radius: 6rpx;
    margin: 6rpx 0;
  }

  .coupon-name {
    color: #333;
    font-size: 26rpx;
    margin-bottom: 12rpx;
  }

  .coupon-type-text {
    color: #5A5B56;
    font-size: 20rpx;
    border: 1rpx solid #E9E9E9;
    margin-bottom: 12rpx;
    display: inline-block;
    padding: 1rpx 4rpx;
    border-radius: 1rpx;
    line-height: 20rpx;
  }

  .coupon-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20rpx;
  }

  .coupon-use-door {
    background-image: linear-gradient(to right, #E53B3E, #E96455);
    border-radius: 6rpx;
    color: #ffffff;
    text-align: center;
    display: inline-block;
    width: 106rpx;
    height: 38rpx;
    line-height: 36rpx;
    font-size: 20rpx;
  }

  .coupon-door {
    display: inline-block;
    background: #f2f2f2;
    color: #999;
    padding: 6rpx 30rpx;
    border-radius: 6rpx;
    font-size: 20rpx;
  }

  .coupon-date {
    color: #6A6A6A;
    font-size: 22rpx;
  }

  .coupon-des {
    color: #999997;
    font-size: 20rpx;
  }

  .span24 {
    margin-top: 8rpx;
    color: #6A6A6A;
    font-size: 20rpx;
  }

  .coupon-bottom {
    display: flex;
    justify-content: space-between;
    height: 76rpx;
    align-items: center;
  }
}
</style>