WechatApp/pages/orderFood/components/CouponModal.vue

<template>
  <BasicModal type="bottom" v-model:open="getOpen" :isMack="true">
    <view class="coupon-modal">
      <!-- 顶部标题栏 -->
      <view class="coupon-modal__header">
        <text class="header-title">优惠券</text>
        <view class="header-close" @click="handleClose">
          <image :src="getFileUrl('img/icon/close.png')" mode="aspectFill" class="close-icon"></image>
        </view>
      </view>

      <!-- 优惠券列表 -->
      <scroll-view class="coupon-modal__list" scroll-y v-if="couponList.length > 0">
        <view v-for="(coupon, index) in couponList" :key="coupon.id || index"
          :class="['coupon-card', { 'coupon-card--received': coupon.isReceived }]">
          <!-- 左侧金额信息 -->
          <view class="coupon-card__left">
            <text class="amount-text">{{ coupon.amount }}元</text>
            <text class="condition-text">满{{ coupon.minAmount }}可用</text>
          </view>

          <!-- 中间信息 -->
          <view class="coupon-card__center">
            <text class="name-text">{{ coupon.name }}</text>
            <text class="expire-text">{{ formatExpireDate(coupon.expireDate) }}到期</text>
          </view>

          <!-- 右侧操作区域 -->
          <view class="coupon-card__right">
            <!-- 未领取：显示领取按钮 -->
            <view v-if="!coupon.isReceived" class="receive-btn" @click="handleReceive(coupon, index)"
              hover-class="hover-active">
              领取
            </view>
            <!-- 已领取：显示已领取标记 -->
            <image :src="getFileUrl('img/icon/ylq.png')" mode="widthFix" v-else class="received-mark-img"></image>
          </view>
        </view>
      </scroll-view>

      <!-- 没有优惠券 -->
      <view class="no-coupon-tip" v-if="couponList.length === 0">
        <image :src="getFileUrl('img/icon/noCoupon.png')" mode="widthFix" class="no-coupon-tip-img"></image>
        <view class="no-coupon-tip-text">暂无优惠券</view>
        <view class="no-coupon-tip-url">您可以去
          <text
            class="no-coupon-tip-url-text" @click='copyUrl'>http:https://modao.cc/proto/KQv3fh5Kt7fy7tfvLMTCx/sharing?view_mode=read_only</text>
          进行下载领取优惠券
        </view>
      </view>


    </view>
  </BasicModal>
</template>

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

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  couponList: {
    type: Array,
    default: () => []
  }
});

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

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

// 格式化到期日期
const formatExpireDate = (date) => {
  if (!date) return '';
  // 如果是字符串格式的日期，转换为 YYYY/MM/DD 格式
  if (typeof date === 'string') {
    const d = new Date(date);
    if (!isNaN(d.getTime())) {
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      return `${year}/${month}/${day}`;
    }
    // 如果已经是 YYYY/MM/DD 格式，直接返回
    if (date.includes('/')) {
      return date;
    }
  }
  return date;
};

// 处理关闭
const handleClose = () => {
  getOpen.value = false;
  emit('close');
};

// 处理领取
const handleReceive = (coupon, index) => {
  emit('receive', { coupon, index });
};

const copyUrl = () => {
  uni.setClipboardData({
    data: 'http:https://modao.cc/proto/KQv3fh5Kt7fy7tfvLMTCx/sharing?view_mode=read_only',
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'none'
      });
    }
  });
};
</script>

<style scoped lang="scss">
.coupon-modal {
  width: 100%;
  background: #F2F4F8;
  border-radius: 24rpx 24rpx 0 0;
  padding: 0;
  box-sizing: border-box;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;


  &__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;
    background: #F2F4F8;

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

    .header-close {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .close-icon {
        width: 26rpx;
        height: 26rpx;
      }
    }
  }

  &__list {
    flex: 1;
    padding: 24rpx 30rpx;
    padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
    overflow-y: auto;
    min-height: 0;
  }
}

.coupon-card {
  height: 191rpx;
  background: #FEF2F2;
  border: 1rpx solid #FFFFFF;
  display: flex;
  align-items: center;
  border-radius: 24rpx;
  padding: 28rpx 24rpx;
  margin-bottom: 22rpx;
  box-sizing: border-box;
  position: relative;

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

  &__left {
    display: flex;
    flex-direction: column;
    // align-items: flex-start;
    margin-right: 24rpx;
    min-width: 120rpx;
    text-align: center;

    .amount-text {
      font-size: 50rpx;
      font-weight: 600;
      color: #F47D1F;
      line-height: 1.2;
      margin-bottom: 8rpx;
    }

    .condition-text {
      font-size: 24rpx;
      color: #F47D1F;
      line-height: 1.2;
    }
  }

  &__center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 20rpx;

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

    .expire-text {
      font-size: 22rpx;
      color: #666666;
      line-height: 1.4;
      margin-top: 20rpx;
    }
  }

  &__right {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100rpx;

    .receive-btn {
      width: 100rpx;
      height: 56rpx;
      background: #FF6B35;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #FFFFFF;
      font-weight: 500;
      transition: all 0.3s;

      &:active {
        opacity: 0.8;
        transform: scale(0.95);
      }
    }

    .received-mark {
      width: 100rpx;
      height: 100rpx;
      border: 2rpx dashed #CCCCCC;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.6);
      position: relative;
      opacity: 0.7;

      .received-text {
        font-size: 22rpx;
        color: #999999;
        transform: rotate(-15deg);
        font-weight: 400;
      }
    }
  }

  .received-mark-img {
    width: 114rpx;
    height: 114rpx;
  }

  &--received {
    background: #FFFFFF;
  }
}

.no-coupon-tip {
  height: 700rpx;
  text-align: center;
  padding-top: 40rpx;

  .no-coupon-tip-img {
    width: 343rpx;
    height: 322rpx;
  }

  .no-coupon-tip-text {
    font-size: 27rpx;
    color: #AAAAAA;
    margin-top: -100rpx;
  }

  .no-coupon-tip-url {
    width: 100%;
    padding: 0 80rpx;
    font-size: 27rpx;
    color: #AAAAAA;
    margin-top: 20rpx;
    text-align: left;
    .no-coupon-tip-url-text {
      color: #6C8FF8;
    }
  }
}
</style>