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--voucher">
          <text class="card-title">使用凭证</text>
          <view class="qr-wrap">
            <image
              v-if="qrImageSrc"
              :src="qrImageSrc"
              mode="aspectFit"
              class="qr-image"
              :style="{ width: qrBoxRpx + 'rpx', height: qrBoxRpx + 'rpx' }"
            />
            <view
              v-else-if="qrMatrix.length"
              class="qr-grid"
              :style="{ width: qrBoxRpx + 'rpx', height: qrBoxRpx + 'rpx' }"
            >
              <view
                v-for="(row, ri) in qrMatrix"
                :key="ri"
                class="qr-row"
                :style="{ height: qrCellRpx + 'rpx' }"
              >
                <view
                  v-for="(dark, ci) in row"
                  :key="ci"
                  class="qr-cell"
                  :style="{ width: qrCellRpx + 'rpx', height: qrCellRpx + 'rpx' }"
                  :class="{ 'qr-cell--dark': dark }"
                />
              </view>
            </view>
            <view v-else class="qr-placeholder">暂无核销码</view>
          </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, ref, watch } from 'vue';
import BasicModal from '@/components/Modal/BasicModal.vue';
import { getFileUrl } from '@/utils/file.js';
import UQRCodeModule from 'uqrcodejs';
const UQRCode = UQRCodeModule?.default || UQRCodeModule;

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 qrMatrix = ref([]);
/** 二维码展示边长（rpx），约卡片宽 30%～40%，与设计稿一致 */
const qrBoxRpx = 220;

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 d = props.couponData?.expireDate;
  if (!d) return '';
  return `${d} 到期`;
});

const validityText = computed(() => {
  const s = props.couponData?.specifiedDay;
  if (s == null || s === '') return '—';
  const str = String(s).trim();
  if (str.includes('天')) return str;
  const n = Number(str);
  if (!Number.isNaN(n) && str !== '') return `${n}天`;
  return str;
});

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

const qrImageSrc = computed(() => {
  const raw = props.couponData?.qrCodeUrl ?? props.couponData?.qrcodeUrl ?? '';
  if (!raw) return '';
  if (typeof raw === 'string' && (raw.startsWith('http') || raw.startsWith('//'))) return raw;
  return getFileUrl(raw);
});

const qrPayload = computed(() => {
  const c = props.couponData || {};
  const id = c.id ?? c.userCouponId ?? c.couponId ?? '';
  const code = c.verificationCode ?? c.couponCode ?? '';
  const sid = uni.getStorageSync('currentStoreId') || '';
  if (code) return String(code);
  if (id) return `coupon:${id}:${sid}`;
  return 'coupon';
});

const qrCellRpx = computed(() => {
  const n = qrMatrix.value.length;
  if (!n) return 0;
  return qrBoxRpx / n;
});

function buildQrMatrix(text) {
  try {
    const qr = new UQRCode();
    qr.data = String(text || ' ');
    qr.size = 200;
    qr.make();
    const n = qr.moduleCount;
    const mods = qr.modules;
    if (!n || !mods) return [];
    const rows = [];
    for (let r = 0; r < n; r++) {
      const row = [];
      for (let c = 0; c < n; c++) {
        const cell = mods[r][c];
        const dark =
          typeof cell === 'object' && cell !== null ? !!cell.isBlack : !!cell;
        row.push(dark);
      }
      rows.push(row);
    }
    return rows;
  } catch (e) {
    console.warn('生成二维码失败:', e);
    return [];
  }
}

watch(
  () => ({
    open: props.open,
    id: props.couponData?.id,
    qrUrl: props.couponData?.qrCodeUrl ?? props.couponData?.qrcodeUrl,
    payload: qrPayload.value
  }),
  ({ open }) => {
    if (!open) {
      qrMatrix.value = [];
      return;
    }
    if (qrImageSrc.value) {
      qrMatrix.value = [];
      return;
    }
    qrMatrix.value = buildQrMatrix(qrPayload.value);
  },
  { flush: 'post', deep: true }
);

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--voucher {
  padding: 28rpx 24rpx 32rpx;
}

.qr-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx 0 4rpx;
}

.qr-image {
  display: block;
}

.qr-grid {
  background: #ffffff;
  overflow: hidden;
}

.qr-row {
  display: flex;
  flex-direction: row;
}

.qr-cell {
  flex-shrink: 0;
  box-sizing: border-box;
  background: #ffffff;

  &--dark {
    background: #151515;
  }
}

.qr-placeholder {
  font-size: 26rpx;
  color: #aaaaaa;
}

/* 使用须知 */
.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>