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

<template>
  <scroll-view class="container" scroll-y>
    <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>
        <button class="btn-use" v-if="item.canUse" @click="useBenefit(item)">立即使用</button>
      </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 { getMySubscription, checkBenefit } from '../../utils/api.js'

export default {
  data() {
    return {
      subscription: null,
      activeTab: 'available',
      benefits: [
        { 
          code: 'AI_CHAT_UNLIMITED', 
          name: 'AI 健康顾问', 
          desc: '7×24 小时不限次数问答',
          icon: '🤖', 
          bg: '#DBEAFE',
          canUse: true,
          used: false,
          usedAt: null,
          detail: '支持文字/语音提问，报告智能解读'
        },
        { 
          code: 'FAMILY_MEMBERS', 
          name: '家庭档案管理', 
          desc: '管理最多 10 位家庭成员',
          icon: '👨‍👩‍👧‍👦', 
          bg: '#D1FAE5',
          canUse: true,
          used: false,
          usedAt: null,
          detail: '查看全家健康数据，统一规划'
        },
        { 
          code: 'HEALTH_PLAN', 
          name: '月度健康计划', 
          desc: '个性化健康改善方案',
          icon: '📋', 
          bg: '#FEF3C7',
          canUse: true,
          used: false,
          usedAt: null,
          detail: '基于家庭健康画像自动生成'
        },
        { 
          code: 'REPORT_READING', 
          name: '报告智能解读', 
          desc: '体检/菌群/测评报告 AI 解读',
          icon: '📊', 
          bg: '#FCE7F3',
          canUse: true,
          used: false,
          usedAt: null,
          detail: '通俗易懂的解读 + 行动建议'
        },
        { 
          code: 'MANAGER_SERVICE', 
          name: '专属管家服务', 
          desc: '认证健康管家月度随访',
          icon: '👨‍🏫', 
          bg: '#FFEDD5',
          canUse: true,
          used: false,
          usedAt: null,
          detail: '15-20 分钟电话随访 + 在线答疑'
        },
        { 
          code: 'PRODUCT_DISCOUNT', 
          name: '商品会员折扣', 
          desc: '全场商品 8-9 折优惠',
          icon: '🛒', 
          bg: '#E0E7FF',
          canUse: true,
          used: false,
          usedAt: null,
          detail: '结算时自动享受会员价'
        }
      ]
    }
  },
  computed: {
    levelIcon() {
      if (!this.subscription || !this.subscription.level) return '○'
      if (this.subscription.level === 'L2') return '💎'
      if (this.subscription.level === 'L1') return '❤️'
      return '○'
    },
    levelName() {
      if (!this.subscription || !this.subscription.level) return '未订阅'
      if (this.subscription.level === 'L2') return '久久一生'
      if (this.subscription.level === 'L1') return '一生一世'
      return '注册会员'
    },
    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: {
    async loadData() {
      try {
        const res = await getMySubscription()
        if (res.data) {
          this.subscription = res.data
        }
      } catch (e) {
        console.error('获取订阅信息失败', e)
      }
      this.loadBenefits()
    },
    loadBenefits() {
      var self = this
      var token = uni.getStorageSync('token')
      var baseUrl = ''
      try {
        var config = require('../../config.js')
        baseUrl = config.default.baseUrl || config.baseUrl || ''
      } catch (e) {
        baseUrl = ''
      }
      uni.request({
        url: baseUrl + '/api/subscription/benefits/my',
        method: 'POST',
        header: { 'Authorization': 'Bearer ' + token },
        success: function(res) {
          if (res.data && res.data.code === 200) {
            var data = res.data.data || []
            data.forEach(function(b) {
              var benefit = self.benefits.find(function(bf) { return bf.code === b.code })
              if (benefit) {
                benefit.used = b.used
                benefit.usedAt = b.usedAt
              }
            })
          }
        }
      })
    },
    useBenefit(item) {
      var self = this
      uni.showModal({
        title: '使用权益',
        content: '确认使用「' + item.name + '」？',
        success: function(res) {
          if (res.confirm) {
            self.doUseBenefit(item)
          }
        }
      })
    },
    doUseBenefit(item) {
      var self = this
      var data = { benefitCode: item.code }
      checkBenefit(data).then(function(res) {
        if (res.data && res.data.success) {
          item.used = true
          item.usedAt = new Date()
          uni.showToast({ title: '使用成功', icon: 'success' })
        } else {
          uni.showToast({ title: res.data.message || '使用失败', icon: 'none' })
        }
      }).catch(function(e) {
        uni.showToast({ title: e.message || '使用失败', icon: 'none' })
      })
    },
    formatDate(date) {
      if (!date) return ''
      var d = new Date(date)
      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: 40rpx;
  font-weight: bold;
  color: #1E293B;
  display: block;
}
.header-subtitle {
  font-size: 24rpx;
  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: 26rpx;
  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: 28rpx;
  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>