WechatApp/pages/coupon/components/RulesModal.vue

<template>
  <BasicModal type="bottom" v-model:open="getOpen" :is-mack="true">
    <view class="rules-modal">
      <!-- 标题栏 -->
      <view class="rules-modal__header">
        <text class="header-title">使用规则</text>
        <view class="close-btn" @click="handleClose">
          <view class="close-icon" />
        </view>
      </view>

      <view class="rules-modal__body">
        <!-- 券摘要卡片：左金额区 + 右名称/到期 -->
        <view class="card card--summary">
          <view class="summary-left">
            <view class="amount-line">
              <text class="amount-num">{{ couponData?.amount ?? 0 }}</text>
              <text class="amount-unit">{{ couponData?.amountUnit || '元' }}</text>
            </view>
            <text class="summary-condition">{{ conditionLine }}</text>
          </view>
          <view class="summary-right">
            <text class="summary-name">{{ couponData?.name || '优惠券' }}</text>
            <text class="summary-expire">{{ expireLine }}</text>
          </view>
        </view>

        <!-- 使用须知 -->
        <view class="card card--notice">
          <text class="card-title">使用须知</text>
          <view class="notice-row">
            <text class="notice-label">有效期</text>
            <text class="notice-value">{{ validityText }}</text>
          </view>
          <view class="notice-row">
            <text class="notice-label">补充说明</text>
            <text class="notice-value">{{ supplementText }}</text>
          </view>
        </view>
      </view>
    </view>
  </BasicModal>
</template>

<script setup>
import { computed } from 'vue';
import BasicModal from '@/components/Modal/BasicModal.vue';

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  couponData: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['update:open']);

const getOpen = computed({
  get: () => props.open,
  set: (val) => emit('update:open', val)
});

const conditionLine = computed(() => {
  const c = props.couponData;
  if (c?.conditionText) return c.conditionText;
  const m = Number(c?.minAmount) || 0;
  return m > 0 ? `满${m}可用` : '无门槛';
});

const expireLine = computed(() => {
  const c = props.couponData;
  if (Number(c?.longTermValid) === 1) return '长期有效';
  const d = c?.expirationTime ?? c?.expireDate;
  if (d == null || String(d).trim() === '') return '';
  return `${String(d).trim()}到期`;
});

/** 从 specifiedDay / validDays 解析天数，用于「领取后*天有效」 */
function parseReceiveValidDays(c) {
  const s = c?.specifiedDay ?? c?.validDays;
  if (s == null || String(s).trim() === '') return null;
  const str = String(s).trim();
  const m1 = str.match(/领取后\s*(\d+)\s*天/);
  if (m1) {
    const n = Number(m1[1]);
    return !Number.isNaN(n) && n > 0 ? n : null;
  }
  const m2 = str.match(/(\d+)\s*天/);
  if (m2) {
    const n = Number(m2[1]);
    return !Number.isNaN(n) && n > 0 ? n : null;
  }
  const n = Number(str);
  if (!Number.isNaN(n) && n > 0) return n;
  return null;
}

const validityText = computed(() => {
  const c = props.couponData;
  if (Number(c?.longTermValid) === 1) return '长期有效';
  const days = parseReceiveValidDays(c);
  if (days != null) return `领取后${days}天有效`;
  return '—';
});

const supplementText = computed(() => {
  const t = props.couponData?.supplementaryInstruction;
  if (t != null && String(t).trim() !== '') return String(t).trim();
  return '暂无说明';
});

function handleClose() {
  getOpen.value = false;
}
</script>

<style lang="scss" scoped>
.rules-modal {
  width: 100%;
  background: #f5f5f5;
  border-radius: 24rpx 24rpx 0 0;
  padding: 28rpx 0 calc(28rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  max-height: 85vh;
}

.rules-modal__header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
  padding: 0 30rpx;
  position: relative;

  .header-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #151515;
  }

  .close-btn {
    position: absolute;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 56rpx;
    height: 56rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .close-icon {
    width: 28rpx;
    height: 28rpx;
    position: relative;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 28rpx;
      height: 3rpx;
      background: #999999;
      top: 50%;
      left: 50%;
      transform-origin: center;
    }

    &::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    &::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }
}

.rules-modal__body {
  padding: 0 24rpx;
  box-sizing: border-box;
}

.card {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-sizing: border-box;

  &:last-child {
    margin-bottom: 0;
  }
}

.card-title {
  display: block;
  font-size: 30rpx;
  font-weight: bold;
  color: #151515;
  margin-bottom: 20rpx;
}

/* 券摘要 */
.card--summary {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 168rpx;
  padding: 0;
}

.summary-left {
  width: 220rpx;
  flex-shrink: 0;
  background: #fff4e6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24rpx 16rpx;
  box-sizing: border-box;
}

.amount-line {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 10rpx;
}

.amount-num {
  font-size: 56rpx;
  font-weight: bold;
  color: #f47d1f;
  line-height: 1;
}

.amount-unit {
  font-size: 28rpx;
  color: #f47d1f;
  margin-left: 4rpx;
}

.summary-condition {
  font-size: 22rpx;
  color: #f47d1f;
}

.summary-right {
  flex: 1;
  min-width: 0;
  padding: 28rpx 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
}

.summary-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #151515;
  line-height: 1.4;
  margin-bottom: 12rpx;
}

.summary-expire {
  font-size: 24rpx;
  color: #999999;
}

/* 使用须知 */
.card--notice {
  padding: 28rpx 24rpx 32rpx;
}

.notice-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  line-height: 1.5;

  &:last-child {
    margin-bottom: 0;
  }
}

.notice-label {
  color: #888888;
  flex-shrink: 0;
  margin-right: 24rpx;
}

.notice-value {
  flex: 1;
  text-align: right;
  color: #151515;
  word-break: break-all;
}
</style>