WechatApp/pages/coupon/index.vue

<template>
  <!-- 优惠券页面 -->
  <view class="page">

    <!-- 标签页 -->
    <view class="tabs">
      <view v-for="(tab, index) in tabs" :key="index"
        :class="['tab-item', { 'tab-item--active': currentTab === index }]" @click="handleTabChange(index)">
        {{ tab }}
      </view>
    </view>

    <!-- 优惠券列表 -->
    <scroll-view class="content" scroll-y>
      <view class="coupon-list" v-if="filteredCoupons.length > 0">
        <view v-for="(coupon, index) in filteredCoupons" :key="coupon.id || index"
          :class="['coupon-card', getCouponCardClass(coupon)]">
          <image :src="getFileUrl('img/personal/coupon.png')" mode="widthFix" class="coupon-card-bg"></image>
          <image :src="getFileUrl('img/personal/couponLeft.png')" mode="heightFix" class="coupon-card-bgLeft"></image>
          <view class="coupon-card-content">
            <!-- 左侧金额区域 -->
            <view class="coupon-card__left">
              <view class="amount-wrapper">
                <text class="amount-number">{{ coupon.amount }}</text>
                <text class="amount-unit">元</text>
              </view>
              <text class="condition-text">满{{ coupon.minAmount }}可用</text>
            </view>

            <!-- 右侧信息区域 -->
            <view class="coupon-card__right">
              <view class="coupon-info">
                <text class="coupon-name">{{ coupon.name }}</text>
                <view class="coupon-rules" @click="handleShowRules(coupon)">
                  使用规则
                  <text class="arrow">›</text>
                </view>
                <text class="coupon-expire">{{ coupon.expireDate }}到期</text>
              </view>

              <!-- 操作按钮 -->
              <view class="coupon-action">
                <view v-if="coupon.status === 0" class="action-btn action-btn--use" hover-class="hover-active"
                  @click="handleUseCoupon(coupon)">
                  去使用
                </view>
                <view v-else-if="coupon.status === 1" class="action-btn action-btn--use" hover-class="hover-active"
                  @click="handleUseCoupon(coupon)">
                  去使用
                </view>
                <view v-else-if="coupon.status === 2" class="status-text status-text--used">
                  已使用
                </view>
                <view v-else class="status-text status-text--expired">
                  已过期
                </view>
              </view>
            </view>
          </view>

        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-else>
        <image :src="getFileUrl('img/icon/noCoupon.png')" mode="widthFix" class="empty-icon"></image>
        <text class="empty-text">暂无优惠券</text>
      </view>
    </scroll-view>

    <!-- 使用规则弹窗 -->
    <RulesModal v-model:open="showRulesModal" :couponData="selectedCoupon" @use="handleUseCoupon" />
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import { go } from "@/utils/utils.js";
import { getFileUrl } from "@/utils/file.js";
import RulesModal from "./components/RulesModal.vue";

// 标签页数据
const tabs = ['未使用', '即将过期', '已使用', '已过期'];
const currentTab = ref(0);

// 弹窗控制
const showRulesModal = ref(false);
const selectedCoupon = ref({
  amount: 0,
  minAmount: 0,
  name: '',
  expireDate: '',
  validDays: 90,
  description: '周一、周五不可用'
});

// 优惠券数据（模拟数据）
const couponList = ref([
  {
    id: 1,
    amount: 1000,
    minAmount: 2000,
    name: '美食必吃套餐专享券',
    expireDate: '2024/07/28',
    status: 0 // 0: 未使用, 1: 即将过期, 2: 已使用, 3: 已过期
  },
  {
    id: 2,
    amount: 38,
    minAmount: 158,
    name: '美食必吃套餐专享券',
    expireDate: '2024/07/28',
    status: 0
  },
  {
    id: 3,
    amount: 999,
    minAmount: 2000,
    name: '美食必吃套餐专享券',
    expireDate: '2024/07/28',
    status: 0
  },
  {
    id: 4,
    amount: 5,
    minAmount: 158,
    name: '美食必吃套餐专享券',
    expireDate: '2024/07/28',
    status: 0
  }
]);

// 根据当前标签页过滤优惠券
const filteredCoupons = computed(() => {
  return couponList.value.filter(coupon => {
    if (currentTab.value === 0) return coupon.status === 0;
    if (currentTab.value === 1) return coupon.status === 1;
    if (currentTab.value === 2) return coupon.status === 2;
    if (currentTab.value === 3) return coupon.status === 3;
    return true;
  });
});

// 切换标签页
const handleTabChange = (index) => {
  currentTab.value = index;
};

// 获取优惠券卡片样式类
const getCouponCardClass = (coupon) => {
  if (coupon.status === 2) return 'coupon-card--used';
  if (coupon.status === 3) return 'coupon-card--expired';
  return '';
};

// 使用优惠券
const handleUseCoupon = (coupon) => {
  console.log('使用优惠券:', coupon);
  // 跳转到点餐页面
  go('/pages/orderFood/index');
};

// 查看使用规则
const handleShowRules = (coupon) => {
  selectedCoupon.value = {
    ...coupon,
    validDays: 90,
    description: '周一、周五不可用'
  };
  showRulesModal.value = true;
};

onLoad(() => {
  // 页面加载时获取优惠券列表
  // TODO: 调用API获取真实数据
});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #F5F5F5;
  display: flex;
  flex-direction: column;
}

.header {
  background: #FFFFFF;
  padding: 20rpx 30rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));

  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #151515;
    text-align: center;
  }
}

.tabs {
  background: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 0 30rpx;

  .tab-item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666666;
    padding: 28rpx 0;
    position: relative;
    transition: all 0.3s;

    &--active {
      color: #151515;
      font-weight: bold;

      &::after {
        content: '';
        position: absolute;
        bottom: 20rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 6rpx;
        background: linear-gradient(90deg, #FF8A57 0%, #F47D1F 100%);
        border-radius: 3rpx;
      }
    }
  }
}

.content {
  flex: 1;
  padding: 24rpx 30rpx;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.coupon-list {
  position: relative;

  .coupon-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .coupon-card-bgLeft {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 190rpx;
    z-index: 1;
  }

  .coupon-card-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
  }

  .coupon-card {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    position: relative;
    z-index: 3;

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

    &__left {
      width: 200rpx;
      padding: 32rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .amount-wrapper {
        display: flex;
        align-items: baseline;
        margin-bottom: 8rpx;

        .amount-number {
          font-size: 64rpx;
          font-weight: bold;
          color: #F47D1F;
          line-height: 1;
        }

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

      .condition-text {
        font-size: 22rpx;
        color: #F47D1F;
      }
    }

    &__divider {
      width: 2rpx;
      height: 100%;
      position: relative;

      .dash-line {
        width: 2rpx;
        height: 100%;
        // background-image: linear-gradient(to bottom, #FFD9C2 0%, #FFD9C2 50%, transparent 50%, transparent 100%);
        background-size: 2rpx 12rpx;
        background-repeat: repeat-y;
      }
    }

    &__right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 24rpx;

      .coupon-info {
        flex: 1;
        display: flex;
        flex-direction: column;

        .coupon-name {
          font-size: 28rpx;
          font-weight: bold;
          color: #151515;
          margin-bottom: 12rpx;
        }

        .coupon-rules {
          font-size: 22rpx;
          color: #999999;
          margin-bottom: 12rpx;
          display: flex;
          align-items: center;

          .arrow {
            font-size: 28rpx;
            margin-left: 4rpx;
          }
        }

        .coupon-expire {
          font-size: 22rpx;
          color: #999999;
        }
      }

      .coupon-action {
        margin-left: 20rpx;

        .action-btn {
          width: 120rpx;
          height: 56rpx;
          border-radius: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          font-weight: 500;

          &--use {
            // background: linear-gradient(135deg, #FF8A57 0%, #F47D1F 100%);
            background: #F47D1F;
            color: #FFFFFF;
            // box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(255, 107, 53, 0.3);
          }
        }

        .status-text {
          font-size: 24rpx;
          padding: 8rpx 16rpx;

          &--used {
            color: #999999;
          }

          &--expired {
            color: #CCCCCC;
          }
        }
      }
    }

    // 已使用状态
    &--used {
      background: #F8F8F8;

      .coupon-card__left {

        .amount-number,
        .amount-unit,
        .condition-text {
          color: #CCCCCC;
        }
      }

      .coupon-card__right {
        .coupon-info {

          .coupon-name,
          .coupon-rules,
          .coupon-expire {
            color: #CCCCCC;
          }
        }
      }
    }

    // 已过期状态
    &--expired {
      background: #F8F8F8;

      .coupon-card__left {

        .amount-number,
        .amount-unit,
        .condition-text {
          color: #CCCCCC;
        }
      }

      .coupon-card__right {
        .coupon-info {

          .coupon-name,
          .coupon-rules,
          .coupon-expire {
            color: #CCCCCC;
          }
        }
      }
    }
  }
}

.hover-active {
  opacity: 0.8;
  transform: scale(0.98);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;

  .empty-icon {
    width: 300rpx;
    height: 280rpx;
    margin-bottom: 40rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #AAAAAA;
  }
}
</style>