peixue-dev/peidu/uniapp/user-package/pages/user/timecard.vue

<template>
  <view class="timecard-page">
    <!-- 时卡统计 -->
    <view class="card-statistics">
      <view class="stat-item">
        <text class="label">总时长</text>
        <text class="value">{{ statistics.totalHours || 0 }}<text class="unit">小时</text></text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="label">已使用</text>
        <text class="value">{{ statistics.usedHours || 0 }}<text class="unit">小时</text></text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="label">剩余</text>
        <text class="value primary">{{ statistics.remainingHours || 0 }}<text class="unit">小时</text></text>
      </view>
    </view>
    
    <!-- 标签筛选 -->
    <view class="filter-tabs">
      <view 
        v-for="tab in tabs" 
        :key="tab.value" 
        class="tab-item"
        :class="{ active: currentTab === tab.value }"
        @click="changeTab(tab.value)">
        {{ tab.label }}
      </view>
    </view>
    
    <!-- 时卡列表 -->
    <view class="card-list">
      <view v-if="cardList.length === 0" class="empty-state">
        <text class="empty-icon">📭</text>
        <text class="empty-text">暂无时卡</text>
        <button class="btn-purchase" @click="goPurchase">购买时卡</button>
      </view>
      
      <view v-else>
        <view 
          v-for="card in cardList" 
          :key="card.id" 
          class="card-item" 
          @click="goDetail(card.id)">
          <view class="card-header">
            <view class="card-left">
              <text class="card-name">{{ card.cardName }}</text>
              <text class="card-type">{{ card.cardTypeName }}</text>
            </view>
            <view class="card-status" :class="'status-' + card.status">
              {{ card.statusName }}
            </view>
          </view>
          
          <view class="card-progress">
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: getProgress(card) + '%' }"></view>
            </view>
            <text class="progress-text">{{ getProgress(card) }}%</text>
          </view>
          
          <view class="card-info">
            <view class="info-item">
              <text class="info-label">总时长</text>
              <text class="info-value">{{ card.totalHours }}小时</text>
            </view>
            <view class="info-item">
              <text class="info-label">已使用</text>
              <text class="info-value">{{ card.usedHours }}小时</text>
            </view>
            <view class="info-item">
              <text class="info-label">剩余</text>
              <text class="info-value primary">{{ card.remainingHours }}小时</text>
            </view>
          </view>
          
          <view class="card-footer">
            <text class="expire-date">有效期至：{{ card.expireDate }}</text>
            <text class="card-no">{{ card.cardNo }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 购买按钮 -->
    <view class="bottom-bar">
      <button class="btn-purchase-fixed" @click="goPurchase">购买时卡</button>
    </view>
  </view>
</template>

<script>
import { timecardApi } from '@/api/index.js'

export default {
  data() {
    return {
      statistics: {},
      cardList: [],
      currentTab: null,
      tabs: [
        { label: '全部', value: null },
        { label: '进行中', value: 1 },
        { label: '已完成', value: 2 },
        { label: '已过期', value: 3 }
      ],
      page: 1,
      size: 10,
      loading: false
    }
  },
  
  onLoad() {
    this.loadStatistics()
    this.loadCardList()
  },
  
  methods: {
    async loadStatistics() {
      try {
        uni.showLoading({ title: '加载中...' })
        const res = await timecardApi.getStatistics()
        // request.js 响应拦截器直接返回 res.data，所以这里 res 就是 data
        if (res) {
          this.statistics = res
        }
      } catch (e) {
        console.error('加载统计失败', e)
        // 设置默认值避免页面报错
        this.statistics = { totalHours: 0, usedHours: 0, remainingHours: 0 }
      } finally {
        uni.hideLoading()
      }
    },
    
    async loadCardList() {
      if (this.loading) return
      this.loading = true
      
      try {
        const params = {
          page: this.page,
          size: this.size
        }
        if (this.currentTab !== null) {
          params.status = this.currentTab
        }
        
        const res = await timecardApi.getList(params)
        // request.js 响应拦截器直接返回 res.data
        if (res) {
          this.cardList = res.records || []
        }
      } catch (e) {
        console.error('加载列表失败', e)
        this.cardList = []
      } finally {
        this.loading = false
      }
    },
    
    changeTab(value) {
      this.currentTab = value
      this.page = 1
      this.cardList = []
      this.loadCardList()
    },
    
    getProgress(card) {
      if (!card.totalHours || card.totalHours === 0) return 0
      const progress = (card.usedHours / card.totalHours) * 100
      return Math.round(progress)
    },
    
    goDetail(id) {
      uni.showToast({
        title: '详情功能开发中',
        icon: 'none'
      })
    },
    
    goPurchase() {
      uni.showToast({
        title: '购买功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';

.timecard-page {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 120rpx;
}

.card-statistics {
  background: linear-gradient(135deg, #4a9b9f 0%, #3d8185 100%);
  padding: 60rpx 40rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  
  .stat-item {
    flex: 1;
    text-align: center;
    
    .label {
      display: block;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 16rpx;
    }
    
    .value {
      display: block;
      font-size: 48rpx;
      font-weight: bold;
      color: #fff;
      
      &.primary {
        color: #ffd700;
      }
      
      .unit {
        font-size: 24rpx;
        font-weight: normal;
        margin-left: 8rpx;
      }
    }
  }
  
  .stat-divider {
    width: 2rpx;
    height: 80rpx;
    background: rgba(255, 255, 255, 0.3);
  }
}

.filter-tabs {
  display: flex;
  background: #fff;
  padding: 20rpx 30rpx;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    font-size: 28rpx;
    color: #666;
    border-radius: 8rpx;
    transition: all 0.3s;
    
    &.active {
      color: #4a9b9f;
      background: rgba(74, 155, 159, 0.1);
      font-weight: bold;
    }
  }
}

.card-list {
  padding: 20rpx 30rpx;
}

.empty-state {
  text-align: center;
  padding: 120rpx 0;
  
  .empty-image {
    width: 300rpx;
    height: 300rpx;
    margin-bottom: 40rpx;
  }
  
  .empty-text {
    display: block;
    font-size: 28rpx;
    color: #999;
    margin-bottom: 40rpx;
  }
  
  .btn-purchase {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #4a9b9f;
    color: #fff;
    border-radius: 40rpx;
    font-size: 28rpx;
  }
}

.card-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24rpx;
    
    .card-left {
      flex: 1;
      
      .card-name {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .card-type {
        display: inline-block;
        font-size: 24rpx;
        color: #4a9b9f;
        background: rgba(74, 155, 159, 0.1);
        padding: 4rpx 12rpx;
        border-radius: 4rpx;
      }
    }
    
    .card-status {
      padding: 8rpx 16rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
      
      &.status-0 {
        background: #f0f0f0;
        color: #999;
      }
      
      &.status-1 {
        background: rgba(74, 155, 159, 0.1);
        color: #4a9b9f;
      }
      
      &.status-2 {
        background: #f0f0f0;
        color: #999;
      }
      
      &.status-3 {
        background: #fff3f3;
        color: #ff4d4f;
      }
    }
  }
  
  .card-progress {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    
    .progress-bar {
      flex: 1;
      height: 12rpx;
      background: #f0f0f0;
      border-radius: 6rpx;
      overflow: hidden;
      margin-right: 16rpx;
      
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #4a9b9f 0%, #5fb3b7 100%);
        border-radius: 6rpx;
        transition: width 0.3s;
      }
    }
    
    .progress-text {
      font-size: 24rpx;
      color: #4a9b9f;
      font-weight: bold;
      min-width: 80rpx;
      text-align: right;
    }
  }
  
  .card-info {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    border-top: 1rpx solid #f0f0f0;
    border-bottom: 1rpx solid #f0f0f0;
    margin-bottom: 20rpx;
    
    .info-item {
      flex: 1;
      text-align: center;
      
      .info-label {
        display: block;
        font-size: 24rpx;
        color: #999;
        margin-bottom: 8rpx;
      }
      
      .info-value {
        display: block;
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        
        &.primary {
          color: #4a9b9f;
        }
      }
    }
  }
  
  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .expire-date {
      font-size: 24rpx;
      color: #999;
    }
    
    .card-no {
      font-size: 24rpx;
      color: #ccc;
    }
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .btn-purchase-fixed {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: linear-gradient(135deg, #4a9b9f 0%, #3d8185 100%);
    color: #fff;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: bold;
    border: none;
  }
}
</style>