applet/components/couponInfo/couponInfo.vue

<template>
  <view class="item" :class="item.useStatus ? 'item-disabled' : ''">
    <view class="top" :class="show ? 'checked' : ''">
      <view class="left">
        <view class="tag" v-if="props.types == 'select' || isMyCoupon">{{
          item.couponVo.businessId ? item.couponVo.businessName || "店铺卷" : "平台卷"
        }}</view>
        <view class="tag" v-else>{{
          item.businessId ? item.businessName || "店铺卷" : "平台卷"
        }}</view>
        <text class="face-price"
          >￥<text class="num">{{
            item.faceValue || item.couponVo.faceValue || 0
          }}</text></text
        >
      </view>
      <view class="right">
        <view class="tip" v-if="item.name">{{ item.name }}</view>
        <view class="tip" v-if="!item.name && item.couponVo">{{
          item.couponVo.name
        }}</view>
        <view class="flex-box">
          <view>
            <text
              v-if="
                item.hasThreshold ||
                (item.couponVo && item.couponVo.hasThreshold)
              "
              class="condition"
              >满￥{{
                item.threshold || (item.couponVo && item.couponVo.threshold)
              }}可用</text
            >
            <text v-else class="condition">无门槛</text>

            <view v-if="isMyCoupon || isCheck" class="tip2"
              >{{ item.expireTime }}到期</view
            >
            <!-- <view v-else class="tip2">{{ item.endTime }}到期</view> -->
          </view>
          <template v-if="props.types == 'select'">
            <button v-if="!props.select" @click="$emit('useTickets', item)">
              使用
            </button>
            <button v-else class="no-have">已选择</button>
          </template>
          <template v-else>
            <button
              v-if="isMyCoupon && !item.useStatus"
              @click="$emit('useTickets', item.id)"
            >
              去使用
            </button>
            <button v-if="isMyCoupon && item.useStatus" class="no-have">
              已使用
            </button>
            <button
              v-if="!isMyCoupon"
              @click="$emit('grabTickets', item.id)"
              class="no-have"
            >
              立即抢
            </button>
          </template>
        </view>
      </view>
    </view>
    <view class="bottom" @click="$set(item, 'isOpen', !item.isOpen)">
      <text class="time"
        >领券后{{
          item.expiredDay || (item.couponVo && item.couponVo.expiredDay)
        }}天有效，记得及时使用噢</text
      >
      <text class="iconfont" :class="item.isOpen ? 'open' : ''">&#xe671;</text>
    </view>
    <view v-if="item.isOpen" class="desc">
      <text>{{ item.content || item.couponVo?.content }}</text>
    </view>
  </view>
</template>

<script setup name="couponInfo">
import { ref, watch } from "vue";

const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
  show: {
    type: Boolean,
    default: false,
  },
  isMyCoupon: {
    type: Boolean,
    default: false,
  },
  isCheck: {
    type: Boolean,
    default: false,
  },
  select: {
    type: Boolean,
    default: false,
  },
  types: {
    type: String,
    default: "list", // list：页面使用, select：弹窗选择使用
  },
});
const item = ref(props.item || {});
const show = ref(props.show);
const modeList = ref([
  {
    text: "平台券",
  },
  {
    text: "店铺券",
  },
]);

watch(
  () => props.show,
  (newValue) => {
    show.value = newValue;
  }
);
watch(
  () => props.item,
  (newValue) => {
    item.value = newValue;
  }
);
</script>

<style lang="scss" scoped>
.item-disabled {
  opacity: 0.6;
}
.item {
  position: relative;
  width: 690rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin: 40rpx auto 0 auto;
  box-sizing: border-box;
  // background-image: url('/static/couponCenter/card.png');
  // background-size: 100% 100%;
  // background-position: top;
  // background-repeat: no-repeat;
  padding-bottom: 19rpx;
  filter: drop-shadow(1px 2px 4px rgba(26, 58, 70, 0.1));

  &.checked {
    background: #fff8e1;

    button {
      background: #eb5153 !important;
      border-color: #eb5153 !important;
    }
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed #cccccc;
    padding: 63rpx 0 19rpx 0;
    width: calc(100% - 60rpx);
    margin: 0 30rpx;
  }

  .tag {
    position: absolute;
    top: 0;
    left: 0;
    height: 45rpx;
    line-height: 45rpx;
    padding: 0 30rpx;
    background: #eb5153;
    border-radius: 16rpx 0px 16rpx 0px;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #fff;
  }

  .left {
    margin-right: 26rpx;

    .face-price {
      font-size: 42rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: left;
      color: #eb5153;

      .num {
        font-size: 54rpx;
      }
    }
  }

  .right {
    flex: 1;

    .flex-box {
      display: flex;
      align-items: self-end;
      justify-content: space-between;

      button {
        display: flex;
        align-items: center;
        width: fit-content;
        height: 56rpx;
        line-height: 56rpx;
        padding: 0 28rpx;
        border-radius: 28rpx;
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        border: 1px solid #eb5153;
        color: #eb5153;
        white-space: nowrap;
        margin: 0;
        &.no-have {
          background: #eb5153;
          color: white;
          border: 1px solid #eb5153;
        }
      }

      .condition {
        vertical-align: middle;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #808080;
        line-height: 28rpx;
      }

      .tip {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
        line-height: 28rpx;
        margin-top: 5rpx;
      }

      .tip2 {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        line-height: 28rpx;
        color: #666666;
        margin-top: 5rpx;
      }
    }
  }

  .bottom {
    padding: 17rpx 30rpx 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .time {
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #666666;
    }

    .iconfont {
      transition: all 0.3s;
      transform: rotate(-90deg);

      &.open {
        transform: rotate(90deg);
      }
    }
  }

  .desc {
    padding: 10rpx 30rpx 0 30rpx;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #666666;
  }
}
</style>