englishread-front/subPages/user/discount.vue

<template>
  <view class="discount-container">
    <!-- 顶部tab切换 -->
    <uv-subsection 
      :list="tabList" 
      :current="currentTab" 
      @change="onTabChange"
      :activeColor="tabStyle.activeColor"
      :inactiveColor="tabStyle.inactiveColor"
      
      :fontSize="tabStyle.fontSize"
      :height="tabStyle.height"
      custom-style="height: 80rpx;border-radius: 70rpx;position: sticky; left: 0; top: 0;right: 0;zIndex: 999" 
      custom-item-style="border-radius: 60rpx;" 
    ></uv-subsection>
    
    <!-- 优惠券列表 -->
    <view class="coupon-list">
      <view 
        v-for="(coupon, index) in currentCoupons" 
        :key="index" 
        class="coupon-item"
        :class="{
          'used-coupon': coupon.status === 'used',
          'expired-coupon': coupon.status === 'expired'
        }"
      >
        <!-- 左侧金额区域 -->
        <view class="coupon-left">
          <text class="coupon-symbol">¥</text>
          <text class="coupon-amount">{{ coupon.amount }}</text>
          <!-- 状态盖章 -->
          <image 
            v-if="coupon.status !== 'available'"
            class="status-stamp"
            :src="coupon.status === 'used' ? '/static/已使用盖章.png' : '/static/已过期盖章.png'"
            mode="aspectFit"
          ></image>
        </view>
        
        <!-- 右侧信息区域 -->
        <view class="coupon-right">
          <view class="coupon-title">{{ coupon.title }}</view>
          <view class="coupon-expire">有效期至 {{ coupon.expireDate }}</view>
          
          <!-- 使用按钮或状态 -->
          <view class="coupon-action">
            <uv-button 
              v-if="coupon.status === 'available'"
              :customStyle="buttonStyle"
              text="去使用"
              @click="useCoupon(coupon)"
            ></uv-button>
            <view 
              v-else 
              class="coupon-status"
              :class="{
                'used-status': coupon.status === 'used',
                'expired-status': coupon.status === 'expired'
              }"
            >
              {{ coupon.status === 'used' ? '已使用' : '已过期' }}
            </view>
          </view>
          
          
        </view>
      </view>
      
      <!-- 空状态 -->
      <uv-empty 
        v-if="currentCoupons.length === 0"
        text="暂无优惠券"
        :textColor="emptyStyle.textColor"
        :textSize="emptyStyle.textSize"
        :marginTop="emptyStyle.marginTop"
      ></uv-empty>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabList: [
        { name: '待使用' },
        { name: '已使用' },
        { name: '已过期' }
      ],
      
      // tab样式配置
      tabStyle: {
        activeColor: '#06DADC',
        inactiveColor: '#999',
        bgColor: '#f8f8f8',
        fontSize: '28rpx',
        height: '80rpx'
      },
      
      // 按钮样式配置
      buttonStyle: {
        backgroundColor: '#06DADC',
        borderRadius: '99rpx',
        width: '140rpx',
        height: '60rpx',
        fontSize: '30rpx',
        color: '#fff'
      },
      
      // 空状态样式配置
      emptyStyle: {
        textColor: '#999',
        textSize: '28rpx',
        marginTop: '200rpx'
      },
      
      // 优惠券数据
      coupons: {
        available: [
          {
            id: 1,
            title: '专属福利】20元红包',
            amount: 20,
            expireDate: '2026-04-28',
            status: 'available'
          },
          {
            id: 2,
            title: '专属福利】400元红包',
            amount: 400,
            expireDate: '2026-04-28',
            status: 'available'
          },
          {
            id: 3,
            title: '专属福利】400元红包',
            amount: 400,
            expireDate: '2026-04-28',
            status: 'available'
          },
          {
            id: 1,
            title: '专属福利】20元红包',
            amount: 20,
            expireDate: '2026-04-28',
            status: 'available'
          },
          {
            id: 2,
            title: '专属福利】400元红包',
            amount: 400,
            expireDate: '2026-04-28',
            status: 'available'
          },
          {
            id: 3,
            title: '专属福利】400元红包',
            amount: 400,
            expireDate: '2026-04-28',
            status: 'available'
          },
        ],
        used: [
          {
            id: 4,
            title: '专属福利】20元红包',
            amount: 20,
            expireDate: '2026-04-28',
            status: 'used'
          }
        ],
        expired: [
          {
            id: 5,
            title: '专属福利】20元红包',
            amount: 20,
            expireDate: '2026-04-28',
            status: 'expired'
          }
        ]
      }
    }
  },
  
  computed: {
    currentCoupons() {
      const statusMap = ['available', 'used', 'expired']
      return this.coupons[statusMap[this.currentTab]] || []
    }
  },
  
  methods: {
    onTabChange(index) {
      this.currentTab = index
    },
    
    useCoupon(coupon) {
      uni.showToast({
        title: '跳转到使用页面',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.discount-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 50rpx;
  .coupon-list {
    padding: 40rpx 30rpx;
    
    .coupon-item {
      display: flex;
      background-color: #fff;
      border-radius: 24rpx;
      margin-bottom: 24rpx;
      overflow: hidden;
      position: relative;
      padding: 8rpx;
      // box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
      
      &.used-coupon,
      &.expired-coupon {
        .coupon-left {
          background-color: #E3E3E3;
          
          .coupon-symbol,
          .coupon-amount {
            color: #FBFBFB;
          }
        }
        

      }
      
      .coupon-left {
        width: 180rpx;
        background-color: #FFF2F2;
        display: flex;
        // flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 16rpx;
        position: relative;
        .coupon-symbol {
          font-size: 24rpx;
          color: #FF4800;
          font-weight: bold;
          margin-bottom: 10rpx;
        }
        
        .coupon-amount {
          font-size: 48rpx;
          color: #FF4800;
          font-weight: 500;
          line-height: 1.4;
        }

        .status-stamp {
          position: absolute;
          bottom: 0rpx;
          right: 0rpx;
          width: 100rpx;
          height: 100rpx;
          
          // opacity: 0.8;
        }
      }
      
      .coupon-right {
        flex: 1;
        margin-left: 20rpx;
        padding: 40rpx 30rpx 20rpx;
        position: relative;
        width: 0px;

        border-left: 2rpx dashed #DADADA;
        .coupon-title {
          font-size: 32rpx;
          color: #181818;
          font-weight: bold;
          margin-bottom: 16rpx;
        }
        
        .coupon-expire {
          font-size: 28rpx;
          color: #9B9B9B;
          margin-bottom: 16rpx;
        }
        
        .coupon-action {
          display: flex;
          justify-content: flex-start;
          
          .coupon-status {
            padding: 10rpx 30rpx;
            border-radius: 40rpx;
            font-size: 30rpx;
            text-align: center;
            
            &.used-status {
              background-color: #E3E3E3;
              color: #fff;
            }
            
            &.expired-status {
              background-color: #E3E3E3;
              color: #fff;
            }
          }
        }
        

      }
    }
  }
}
</style>