cfc/cfc-frontend/pages/membership/benefits.vue

<template>
  <scroll-view class="container" scroll-y :style="{ '--font-scale': fontScale }">
    <view class="header">
      <text class="header-title">我的权益</text>
      <text class="header-subtitle">Subscription Benefits</text>
    </view>

    <view class="subscription-status" v-if="subscription && subscription.level">
      <view class="status-badge" :class="'level-' + subscription.level.toLowerCase()">
        <text class="badge-icon">{{ levelIcon }}</text>
        <text class="badge-text">{{ levelName }}</text>
      </view>
      <view class="status-info" v-if="subscription.expireTime">
        <text class="expire-label">有效期至</text>
        <text class="expire-value">{{ formatDate(subscription.expireTime) }}</text>
      </view>
    </view>

    <view class="benefits-tabs">
      <view 
        class="tab-item" 
        :class="activeTab === 'available' ? 'tab-active' : ''"
        @click="activeTab = 'available'"
      >
        <text>可用权益</text>
        <text class="tab-count">{{ availableCount }}</text>
      </view>
      <view 
        class="tab-item" 
        :class="activeTab === 'used' ? 'tab-active' : ''"
        @click="activeTab = 'used'"
      >
        <text>已使用</text>
        <text class="tab-count">{{ usedCount }}</text>
      </view>
    </view>

    <view class="benefits-list" v-if="activeTab === 'available'">
      <view class="benefit-card" v-for="(item, idx) in availableBenefits" :key="idx">
        <view class="benefit-header">
          <view class="benefit-icon-wrap" :style="'background:' + item.bg">
            <text class="benefit-emoji">{{ item.icon }}</text>
          </view>
          <view class="benefit-info">
            <text class="benefit-name">{{ item.name }}</text>
            <text class="benefit-desc">{{ item.desc }}</text>
          </view>
          <view class="benefit-status available">
            <text>可用</text>
          </view>
        </view>
        <view class="benefit-detail" v-if="item.detail">
          <text class="detail-text">{{ item.detail }}</text>
        </view>
      </view>
      
      <view class="empty-state" v-if="availableBenefits.length === 0">
        <text class="empty-icon">📦</text>
        <text class="empty-text">暂无可用权益</text>
        <text class="empty-hint">开通会员解锁更多权益</text>
      </view>
    </view>

    <view class="benefits-list" v-if="activeTab === 'used'">
      <view class="benefit-card used" v-for="(item, idx) in usedBenefits" :key="idx">
        <view class="benefit-header">
          <view class="benefit-icon-wrap" :style="'background:' + item.bg">
            <text class="benefit-emoji">{{ item.icon }}</text>
          </view>
          <view class="benefit-info">
            <text class="benefit-name">{{ item.name }}</text>
            <text class="benefit-desc">{{ item.desc }}</text>
          </view>
          <view class="benefit-status used">
            <text>已使用</text>
          </view>
        </view>
        <view class="benefit-used-info">
          <text class="used-time">使用时间：{{ formatDate(item.usedAt) }}</text>
        </view>
      </view>
      
      <view class="empty-state" v-if="usedBenefits.length === 0">
        <text class="empty-icon">✅</text>
        <text class="empty-text">暂无使用记录</text>
      </view>
    </view>

    <view class="benefits-summary">
      <text class="summary-title">权益使用统计</text>
      <view class="summary-stats">
        <view class="stat-item">
          <text class="stat-value">{{ totalBenefits }}</text>
          <text class="stat-label">总权益数</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{ availableCount }}</text>
          <text class="stat-label">可用</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{ usedCount }}</text>
          <text class="stat-label">已用</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { getMyMembership, getMembershipBenefits } from '../../utils/api.js'
import { parseDate } from '../../utils/format.js'
import fontScaleMixin from '../../mixins/font-scale.js'

export default {
  mixins: [fontScaleMixin],
  data() {
    return {
      subscription: null,
      activeTab: 'available',
      benefits: []
    }
  },
  computed: {
    levelIcon() {
      if (!this.subscription || !this.subscription.level) return '○'
      var map = { BASIC: '🧡', FAMILY: '👑', PREMIUM: '💎', LIFETIME: '🌟' }
      return map[this.subscription.level] || '○'
    },
    levelName() {
      if (!this.subscription || !this.subscription.level) return '未开通'
      var map = { FREE: '免费用户', BASIC: '体验会员', FAMILY: '家庭会员', PREMIUM: '高级会员', LIFETIME: '终身会员' }
      return map[this.subscription.level] || this.subscription.level
    },
    availableBenefits() {
      return this.benefits.filter(function(b) { return !b.used })
    },
    usedBenefits() {
      return this.benefits.filter(function(b) { return b.used })
    },
    availableCount() {
      return this.availableBenefits.length
    },
    usedCount() {
      return this.usedBenefits.length
    },
    totalBenefits() {
      return this.benefits.length
    }
  },
  onLoad() {
    this.loadData()
  },
  methods: {
    // 读取当前用户实际有效会员等级（getMyMembership 返回 memberLevel=个人与家庭身份取高者），
    // 免费用户展示体验会员权益（与会员中心 index.vue 一致）。
    loadData() {
      var self = this
      getMyMembership().then(function(res) {
        var m = res.data || {}
        var levelCode = m.memberLevel || m.levelCode || 'FREE'
        if (levelCode !== 'FREE') {
          self.subscription = {
            level: levelCode,
            expireTime: m.memberExpireTime || (m.membership && m.membership.endDate) || null
          }
          self.loadBenefits(levelCode)
        } else {
          self.subscription = { level: 'FREE', expireTime: null }
          self.loadBenefits('BASIC')
        }
      }).catch(function() {
        self.subscription = { level: 'FREE', expireTime: null }
        self.loadBenefits('BASIC')
      })
    },
    loadBenefits: function(levelCode) {
      var self = this
      getMembershipBenefits(levelCode).then(function(res) {
        var benefitsData = (res && res.data) || []
        if (benefitsData.length > 0) {
          self.benefits = benefitsData.map(function(b) {
            return {
              code: b.benefitCode,
              name: b.benefitName,
              desc: b.benefitDesc || '',
              icon: b.icon || '🎁',
              bg: b.bgColor || '#E0E7FF',
              canUse: false, // membership_benefits 为展示型权益，无单独使用入口
              used: false,
              usedAt: null,
              detail: b.benefitDesc || ''
            }
          }).filter(function(b) { return b.code !== 'NO_BENEFIT' && b.code !== 'UPGRADE_HINT' })
        } else {
          self.benefits = []
        }
      }).catch(function(e) {
        console.error('加载权益失败', e)
        self.benefits = []
      })
    },
    formatDate(date) {
      if (!date) return ''
      var d = parseDate(date)
      if (!d) return ''
      var year = d.getFullYear()
      var month = String(d.getMonth() + 1).padStart(2, '0')
      var day = String(d.getDate()).padStart(2, '0')
      var hour = String(d.getHours()).padStart(2, '0')
      var minute = String(d.getMinutes()).padStart(2, '0')
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  background: #FFF7ED;
}

.header {
  text-align: center;
  padding: 40rpx 0 30rpx;
}
.header-title {
  font-size: calc(40rpx * var(--font-scale, 1));
  font-weight: bold;
  color: #1E293B;
  display: block;
}
.header-subtitle {
  font-size: calc(24rpx * var(--font-scale, 1));
  color: #94A3B8;
  margin-top: 8rpx;
  display: block;
}

.subscription-status {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.status-badge {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.2);
  padding: 12rpx 24rpx;
  border-radius: 9999rpx;
}
.badge-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}
.badge-text {
  font-size: calc(26rpx * var(--font-scale, 1));
  color: #fff;
  font-weight: 600;
}
.status-info {
  text-align: right;
}
.expire-label {
  font-size: 22rpx;
  color: rgba(255,255,255,0.8);
  display: block;
}
.expire-value {
  font-size: 26rpx;
  color: #FEF3C7;
  font-weight: 600;
}

.benefits-tabs {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 8rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16rpx 0;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #64748B;
}
.tab-active {
  background: #F97316;
  color: #fff;
  font-weight: 600;
}
.tab-count {
  margin-left: 8rpx;
  font-size: 22rpx;
  background: rgba(255,255,255,0.3);
  padding: 2rpx 10rpx;
  border-radius: 9999rpx;
}

.benefits-list {
  margin-bottom: 30rpx;
}

.benefit-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.benefit-card.used {
  opacity: 0.7;
}

.benefit-header {
  display: flex;
  align-items: center;
}
.benefit-icon-wrap {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.benefit-emoji {
  font-size: 36rpx;
}
.benefit-info {
  flex: 1;
  margin-right: 16rpx;
}
.benefit-name {
  font-size: calc(28rpx * var(--font-scale, 1));
  font-weight: 600;
  color: #1E293B;
  display: block;
  margin-bottom: 6rpx;
}
.benefit-desc {
  font-size: 24rpx;
  color: #94A3B8;
  display: block;
}
.benefit-status {
  padding: 8rpx 20rpx;
  border-radius: 9999rpx;
  font-size: 22rpx;
  font-weight: 600;
}
.benefit-status.available {
  background: #D1FAE5;
  color: #059669;
}
.benefit-status.used {
  background: #E5E7EB;
  color: #6B7280;
}

.benefit-detail {
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #F1F5F9;
}
.detail-text {
  font-size: 24rpx;
  color: #64748B;
  line-height: 1.6;
  display: block;
}

.benefit-used-info {
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #F1F5F9;
}
.used-time {
  font-size: 22rpx;
  color: #94A3B8;
  display: block;
}

.btn-use {
  margin-top: 16rpx;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: #fff;
  font-size: 26rpx;
  font-weight: 600;
  padding: 16rpx 0;
  border-radius: 12rpx;
  border: none;
}
.btn-use::after {
  border: none;
}

.empty-state {
  text-align: center;
  padding: 80rpx 0;
}
.empty-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #64748B;
  display: block;
  margin-bottom: 12rpx;
}
.empty-hint {
  font-size: 24rpx;
  color: #94A3B8;
  display: block;
}

.benefits-summary {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.summary-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  display: block;
  margin-bottom: 24rpx;
}
.summary-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.stat-item {
  text-align: center;
  flex: 1;
}
.stat-value {
  font-size: 44rpx;
  font-weight: bold;
  color: #F97316;
  display: block;
}
.stat-label {
  font-size: 22rpx;
  color: #94A3B8;
  margin-top: 8rpx;
  display: block;
}
.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background: #F1F5F9;
}
</style>