xdd-uniapp-new/components/Coupons.vue

<template>
  <view class="components-coupons">
    <view class="image-wrap">
      <image
        :src="data.image"
        class="coupons__cover"
        mode="widthFix"
      />
      <view @click="selectCoupon" class="check-radio" :class="{'v12-primary': data.checked}">
        <radio
          v-if="radioModel && data.status === 0"
          :value="data.id"
          :checked="data.checked"
          color="#C52733"
          borderColor="#C52733"
        />
      </view>
    </view>
    <view class="coupons__section flex jc-between ai-center">
      <view>
        <text class="v12-dark-text v12-font-weight-500 v12-font-28">有效期至：</text>
        <text class='v12-primary-text v12-font-weight-500 v12-font-28'>{{ data.endTime }}</text>
      </view>
      <!-- status: 0-未使用，1-已使用，2-已过期 -->
      <view
        v-if="data.status === 2"
        class="coupons__tag coupons__tag-expire v12-font-24"
      >已到期</view>
      <view
        v-if="data.status === 0 && !radioModel"
        class="coupons__tag coupons__tag-expire  v12-font-24"
      >不可用</view>
      
    </view>
    <view class="coupons__rules">
      <view class="coupons__rules-title v12-font-22" @click="changeRules()">使用规则
        <image :class="{'open':isOpen}" :src="webUrl + '/20231125220409665027.png'" mode="scaleToFill"/>
      </view>
      <view
        :class="isOpen ? 'auto-height' : ''"
        class="coupon-html"
      >
        <rich-text class='v12-font-22 v12-dark1-text' :nodes="data.description" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Coupons",
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 是否显示选择框
    radioModel: {
      type: Boolean,
      default: false
    },
    checked: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      isOpen: false
    }
  },
  methods: {
    changeRules() {
      this.isOpen = !this.isOpen
    },
    selectCoupon() {
      if (!this.radioModel) return
      // 已选中则可以取消选中
      this.$emit('change', this.data.checked ? '' : this.data.id)
    }
  }
}
</script>

<style scoped lang="less">
.check-radio{
  position: absolute;
  bottom: 10px;
  right: 16px;
  height: 32rpx;
  width: 32rpx;
  border-radius: 50%;
  border: 2px solid #C52733;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  radio {
    margin-right: -6px;
  }
}
.image-wrap{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  border-radius: 20rpx;
  position: relative
}
.components-coupons {
  width: 686rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  overflow: hidden;
  background: #fff;
  image {
    vertical-align: middle;
  }

  .coupons__cover {
    width: 600rpx;
    height: 200rpx;
    border-radius: 20rpx;
  }

  .coupons__section {
    width: 100%;
    box-sizing: border-box;
    padding: 18rpx 20rpx 16rpx 50rpx;
    font-size: 32rpx;
    line-height: 1;

    text {
      color: #EA1C1C;
      font-weight: bold;
    }

    .coupons__tag {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 120rpx;
      height: 52rpx;
      box-sizing: border-box;
      border-radius: 8rpx;
      border: 2px solid #0DC5C5;
      color: #0DC5C5;
      font-size: 32rpx;
      line-height: 1;
    }

    .coupons__tag-expire {
      border: 2rpx solid #BFBFBF;
      color: #999999;
    }
  }

  .coupons__rules {
    padding: 0 20rpx 20rpx 50rpx;

    .coupons__rules-title {
      color: #999999;
      font-size: 28rpx;

      image {
        width: 26rpx;
        height: 26rpx;
        margin-left: 6rpx;
      }

      .open {
        transform: rotate(180deg);
      }
    }
    .coupon-html {
      overflow: hidden;
      transition: all .3s ease-in-out;
      height: 60rpx;
      &.auto-height {
        height: auto !important;
      }
    }
  }
}
</style>