marketing_mini_app/src/components/MkCouponCard.vue

<template>
  <view
    class="coupon-card"
    :class="{ 'coupon-card--dimmed': dimmed, 'coupon-card--clickable': clickable }"
    @click="handleClick"
  >
    <view class="coupon-card__left">
      <text class="coupon-card__amount">{{ amountText }}</text>
      <text class="coupon-card__unit">{{ unitText }}</text>
    </view>
    <view class="coupon-card__divider" />
    <view class="coupon-card__body">
      <view class="coupon-card__name-row">
        <text class="coupon-card__name">{{ name }}</text>
        <text v-if="couponType" class="coupon-card__type">{{ couponType }}</text>
      </view>
      <text v-if="meta" class="coupon-card__meta">{{ meta }}</text>
      <text v-if="subMeta" class="coupon-card__sub-meta">{{ subMeta }}</text>
      <view class="coupon-card__bottom">
        <view v-if="tag" class="coupon-card__tag">{{ tag }}</view>
        <text v-if="validPeriod" class="coupon-card__period">{{ validPeriod }}</text>
      </view>
    </view>
    <view v-if="$slots.action" class="coupon-card__action" @click.stop>
      <slot name="action" />
    </view>
    <view v-else-if="clickable" class="coupon-card__arrow">
      <text class="coupon-card__arrow-icon">›</text>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    name?: string
    meta?: string
    amountText?: string
    unitText?: string
    tag?: string
    dimmed?: boolean
    couponType?: string
    validPeriod?: string
    subMeta?: string
    clickable?: boolean
  }>(),
  {
    name: '优惠券',
    meta: '',
    amountText: '惠',
    unitText: '券',
    tag: '',
    dimmed: false,
    couponType: '',
    validPeriod: '',
    subMeta: '',
    clickable: false
  }
)

const emit = defineEmits<{ click: [] }>()

function handleClick() {
  if (props.clickable) emit('click')
}
</script>

<style scoped lang="scss">
.coupon-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 32rpx rgba(255, 107, 53, 0.1);
  margin-bottom: 24rpx;

  &--dimmed {
    box-shadow: 0 8rpx 24rpx rgba(44, 24, 16, 0.06);

    .coupon-card__left {
      background: linear-gradient(160deg, #c4b5a5, #a89888);
    }

    .coupon-card__name {
      color: #8c7b6a;
    }

    .coupon-card__tag {
      background: #f5f0ea;
      color: #a89888;
    }
  }

  &--clickable {
    cursor: pointer;

    &:active {
      opacity: 0.85;
    }
  }
}

.coupon-card__left {
  width: 168rpx;
  background: linear-gradient(160deg, #ff9a3c, #ff5722);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24rpx 12rpx;
}

.coupon-card__amount {
  font-size: 44rpx;
  font-weight: 800;
  line-height: 1.1;
}

.coupon-card__unit {
  margin-top: 6rpx;
  font-size: 22rpx;
  opacity: 0.92;
}

.coupon-card__divider {
  width: 0;
  border-left: 2rpx dashed rgba(255, 107, 53, 0.25);
  margin: 16rpx 0;
}

.coupon-card__body {
  flex: 1;
  padding: 20rpx 20rpx;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.coupon-card__name-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.coupon-card__name {
  font-size: 30rpx;
  font-weight: 700;
  color: #2c1810;
}

.coupon-card__type {
  flex-shrink: 0;
  padding: 2rpx 10rpx;
  border-radius: 6rpx;
  background: #fff3e6;
  color: #ff7a1a;
  font-size: 20rpx;
  font-weight: 600;
}

.coupon-card__meta {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #8c7b6a;
  line-height: 1.5;
}

.coupon-card__sub-meta {
  display: block;
  margin-top: 4rpx;
  font-size: 22rpx;
  color: #b5a89d;
  line-height: 1.4;
}

.coupon-card__bottom {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-top: 10rpx;
  flex-wrap: wrap;
}

.coupon-card__tag {
  display: inline-block;
  padding: 4rpx 14rpx;
  border-radius: 999rpx;
  background: #fff3e6;
  color: #ff7a1a;
  font-size: 22rpx;
}

.coupon-card__period {
  font-size: 22rpx;
  color: #b5a89d;
}

.coupon-card__action {
  display: flex;
  align-items: center;
  padding-right: 20rpx;
}

.coupon-card__arrow {
  display: flex;
  align-items: center;
  padding-right: 16rpx;
}

.coupon-card__arrow-icon {
  font-size: 36rpx;
  color: #c4b5a5;
  font-weight: 300;
}
</style>