cfc/cfc-frontend/pages/promotion/index.vue

<template>
  <view class="page-wrapper">
    <scroll-view class="container" scroll-y scroll-with-animation>
    <!-- 家庭公共收益总览 -->
    <view class="family-earnings-card" v-if="familySummary">
      <view class="fe-header">
        <view class="fe-title-row">
          <text class="fe-title">🏠 家庭公共收益</text>
          <text class="fe-badge" v-if="isAdmin">管理员</text>
        </view>
        <text class="fe-subtitle">家庭成员共同努力的成果</text>
      </view>
      <view class="fe-grid">
        <view class="fe-item">
          <text class="fe-value orange">{{ fenToYuan(familySummary.totalEarned) }}</text>
          <text class="fe-label">累计推荐收入</text>
        </view>
        <view class="fe-item">
          <text class="fe-value blue">{{ fenToYuan(familySummary.availableAmount) }}</text>
          <text class="fe-label">可支配余额</text>
        </view>
        <view class="fe-item">
          <text class="fe-value green">{{ fenToYuan(familySummary.withdrawnAmount) }}</text>
          <text class="fe-label">已提现</text>
        </view>
        <view class="fe-item">
          <text class="fe-value purple">{{ fenToYuan(familySummary.distributedAmount) }}</text>
          <text class="fe-label">已分配</text>
        </view>
      </view>

      <!-- 管理员操作按钮（仅管理员可见） -->
      <view class="fe-actions" v-if="isAdmin">
        <button class="fe-btn fe-btn-distribute" @click="showDistributeSheet = true">分配收益</button>
      </view>
    </view>

    <!-- 成员贡献榜 -->
    <view class="members-card" v-if="members && members.length > 0">
      <view class="members-header">
        <text class="members-title">👥 成员贡献榜</text>
        <text class="members-toggle" @click="membersExpanded = !membersExpanded">
          {{ membersExpanded ? '收起' : '展开全部(' + members.length + ')' }}
        </text>
      </view>
      <view class="member-list">
        <view class="member-item" v-for="(m, idx) in displayMembers" :key="m.userId">
          <view class="member-rank">
            <text class="rank-num" v-if="idx < 3 && !showAllRanks">🏅</text>
            <text class="rank-num rank-plain" v-else>{{ idx + 1 }}</text>
          </view>
          <image v-if="m.avatar" class="member-avatar" :src="m.avatar" mode="aspectFill"></image>
          <text v-else class="member-avatar-placeholder">{{ m.nickname ? m.nickname.charAt(0) : '?' }}</text>
          <view class="member-info">
            <text class="member-name">{{ m.nickname || '用户' }}</text>
            <text class="member-role-tag" v-if="m.isAdmin">管理员</text>
            <text class="member-balance-tag" v-if="m.canUseFamilyBalance">池可用</text>
            <text class="member-balance-tag disabled-tag" v-else>池关闭</text>
          </view>
          <view class="member-amounts">
            <text class="member-amount allocated">+{{ fenToYuan(m.allocatedAmount) }}</text>
            <text class="member-amount consumed">-{{ fenToYuan(m.consumedAmount) }}</text>
            <text class="member-amount available">={{ fenToYuan(m.availableAmount) }}</text>
          </view>
          <!-- 管理员可切换成员池权限 -->
          <switch v-if="isAdmin && !m.isAdmin" class="member-switch" :checked="m.canUseFamilyBalance" @change="toggleMemberAccess(m)" color="#F97316"></switch>
        </view>
      </view>
    </view>

    <!-- 提现弹窗（暂屏蔽） -->
    <!-- <view class="sheet-mask" v-if="showWithdrawSheet" @click="showWithdrawSheet = false">
      <view class="sheet-content" @click.stop>
        <text class="sheet-title">家庭收益提现</text>
        <text class="sheet-hint">可提现余额: {{ fenToYuan(familySummary ? familySummary.availableAmount : 0) }}</text>
        <input class="sheet-input" type="digit" v-model="withdrawAmount" placeholder="输入提现金额（分）" />
        <view class="sheet-actions">
          <button class="sheet-cancel" @click="showWithdrawSheet = false">取消</button>
          <button class="sheet-confirm" @click="doWithdraw" :disabled="!withdrawAmount || withdrawAmount <= 0">确认提现</button>
        </view>
      </view>
    </view> -->

    <!-- 统计卡片 -->
    <view class="stats-cards">
      <view class="stat-card today-card">
        <text class="stat-value">{{ stats.todayCommission || 0 }}</text>
        <text class="stat-label">今日佣金(分)</text>
      </view>
      <view class="stat-card month-card">
        <text class="stat-value">{{ stats.monthCommission || 0 }}</text>
        <text class="stat-label">本月佣金(分)</text>
      </view>
      <view class="stat-card total-card">
        <text class="stat-value">{{ stats.totalCommission || 0 }}</text>
        <text class="stat-label">累计佣金(分)</text>
      </view>
    </view>

    <!-- 转化漏斗 -->
    <view class="funnel-section" v-if="funnelSteps && funnelSteps.length > 0">
      <text class="section-title">转化漏斗</text>
      <view class="funnel">
        <view class="funnel-step" v-for="(step, index) in funnelSteps" :key="index" :style="{width: step.width + '%'}">
          <text class="funnel-label">{{ step.label }}</text>
          <text class="funnel-count">{{ step.count }}</text>
        </view>
      </view>
    </view>

    <!-- 收益总览 -->
    <view class="earnings-card">
      <view class="earnings-header">
        <text class="earnings-title">收益总览</text>
      </view>
      <view class="earnings-body">
        <view class="earning-item">
          <text class="earning-label">累计佣金</text>
          <text class="earning-value orange" v-if="summary">{{ formatPriceWithSymbol(summary.totalCommission) }}</text>
          <text class="earning-value orange" v-else>{{ formatPriceWithSymbol(0) }}</text>
        </view>
        <view class="earning-divider"></view>
        <view class="earning-item">
          <text class="earning-label">可提现</text>
          <text class="earning-value blue" v-if="summary">{{ formatPriceWithSymbol(summary.availableAmount) }}</text>
          <text class="earning-value blue" v-else>{{ formatPriceWithSymbol(0) }}</text>
        </view>
        <view class="earning-divider"></view>
        <view class="earning-item">
          <text class="earning-label">待结算</text>
          <text class="earning-value green" v-if="summary">{{ formatPriceWithSymbol(summary.pendingAmount) }}</text>
          <text class="earning-value green" v-else>{{ formatPriceWithSymbol(0) }}</text>
        </view>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="menu-grid">
      <view class="menu-item" @click="goCommission">
        <view class="menu-icon-wrap icon-commission">
          <text class="menu-icon-text">📋</text>
        </view>
        <text class="menu-text">佣金明细</text>
      </view>
      <!-- 立即提现（暂屏蔽） -->
      <!-- <view class="menu-item" @click="goWithdraw" v-if="!isChild">
        <view class="menu-icon-wrap icon-withdraw">
          <text class="menu-icon-text">💰</text>
        </view>
        <text class="menu-text">立即提现</text>
      </view> -->
      <view class="menu-item" @click="goInvite">
        <view class="menu-icon-wrap icon-invite">
          <text class="menu-icon-text">👥</text>
        </view>
        <text class="menu-text">邀请好友</text>
      </view>
      <view class="menu-item" @click="shareToFriend">
        <view class="menu-icon-wrap icon-share">
          <text class="menu-icon-text">📤</text>
        </view>
        <text class="menu-text">分享给好友</text>
      </view>
      <view class="menu-item" @click="goTeam">
        <view class="menu-icon-wrap icon-team">
          <text class="menu-icon-text">🤝</text>
        </view>
        <text class="menu-text">推广团队</text>
      </view>
      <view class="menu-item" @click="goLeaderboard">
        <view class="menu-icon-wrap icon-leaderboard">
          <text class="menu-icon-text">🏆</text>
        </view>
        <text class="menu-text">推广排行榜</text>
      </view>
      <view class="menu-item" @click="goRecords" v-if="isAdmin">
        <view class="menu-icon-wrap icon-records">
          <text class="menu-icon-text">📊</text>
        </view>
        <text class="menu-text">家庭流水</text>
      </view>
    </view>

    <!-- 底部安全区 -->
    <view style="height:40rpx"></view>
    </scroll-view>

    <!-- iOS 修复：position: fixed 不能嵌套在 scroll-view 内，会导致固定定位失效。已移至 scroll-view 后 -->
    <view class="sheet-mask" v-if="showDistributeSheet" @click="showDistributeSheet = false">
      <view class="sheet-content" @click.stop>
        <text class="sheet-title">分配收益</text>
        <text class="sheet-hint">选择成员并输入分配金额（分）</text>
        <picker class="sheet-picker" mode="selector" :range="memberOptions" :value="distributeMemberIdx" @change="onDistributeMemberChange">
          <text>{{ distributeMemberIdx >= 0 ? memberOptions[distributeMemberIdx] : '选择成员' }}</text>
        </picker>
        <input class="sheet-input" type="digit" v-model="distributeAmount" placeholder="输入分配金额（分）" />
        <view class="sheet-actions">
          <button class="sheet-cancel" @click="showDistributeSheet = false">取消</button>
          <button class="sheet-confirm" @click="doDistribute" :disabled="distributeMemberIdx < 0 || !distributeAmount || distributeAmount <= 0">确认分配</button>
        </view>
      </view>
    </view>

    <SharePoster :show="showPoster" :referralCode="shareReferralCode" :qrCodeBase64="inviteQrCode" :nickname="shareNickname" :userAvatar="shareAvatar" :familyName="familyName" @close="showPoster = false" />
  </view>
</template>

<script>
import { getReferralSummary, getCommissionSummary, getFamilyEarningsSummary, getFamilyEarningsMembers, getFamilyEarningsRecords, distributeToMember, toggleMemberBalance, withdrawFamilyEarnings, getInviteQrCode, getFamilyMembers, getReferralCode } from '../../utils/api.js'
import SharePoster from '@/components/SharePoster.vue'

export default {
  components: { SharePoster },
  data() {
    return {
      totalEarnings: '0.00',
      availableAmount: '0.00',
      summary: null,
      stats: {},
      funnelData: {},
      funnelSteps: [],
      // 家庭收益
      familySummary: null,
      members: [],
      membersExpanded: false,
      showAllRanks: false,
      // 弹窗
      showWithdrawSheet: false,
      showDistributeSheet: false,
      withdrawAmount: '',
      distributeAmount: '',
      distributeMemberIdx: -1,
      memberOptions: [],
      // 分享海报
      showPoster: false,
      inviteQrCode: '',
      familyName: '',
      shareNickname: '',
      shareAvatar: '',
      shareReferralCode: ''
    }
  },
  computed: {
    isLoggedIn() {
      return !!uni.getStorageSync('token')
    },
    role() {
      return uni.getStorageSync('role') || ''
    },
    isAdmin() {
      // 管理员 = parent 或 teacher 角色
      var r = this.role
      return r === 'parent' || r === 'teacher'
    },
    isChild() {
      return this.role === 'child'
    },
    displayMembers() {
      if (this.membersExpanded || this.showAllRanks) {
        return this.members
      }
      return this.members.slice(0, 5)
    }
  },
  onLoad() {
    this.loadData()
  },
  onShow() {
    this.loadStats()
    this.loadFunnelData()
    this.loadFamilyData()
  },
  onShareAppMessage() {
    var path = '/pages/invite/join'
    return {
      title: '我在浠艾福发现了好用的家庭成长工具，快来加入！',
      path: path,
      imageUrl: ''
    }
  },
  methods: {
    async loadData() {
      try {
        var summaryRes = await getReferralSummary()
        if (summaryRes.data) {
          this.totalEarnings = summaryRes.data.totalEarnings || '0.00'
        }
      } catch (e) {
        console.error('获取邀请统计失败', e)
      }
      try {
        var comRes = await getCommissionSummary()
        if (comRes.data) {
          this.summary = comRes.data
          this.availableAmount = comRes.data.availableAmount || '0.00'
        }
      } catch (e) {
        console.error('获取佣金总览失败', e)
      }
    },
    async loadFamilyData() {
      if (this.isChild) {
        // 孩子只读：仅加载概要，不加载管理员功能
        try {
          var sRes = await getFamilyEarningsSummary()
          if (sRes.data) {
            this.familySummary = sRes.data
            this.members = sRes.data.members || []
          }
        } catch (e) {
          console.error('获取家庭收益概览失败', e)
        }
        return
      }
      try {
        var sRes = await getFamilyEarningsSummary()
        if (sRes.data) {
          this.familySummary = sRes.data
          this.members = sRes.data.members || []
          // 构建picker选项
          var opts = []
          var arr = this.members
          for (var i = 0; i < arr.length; i++) {
            opts.push((arr[i].nickname || '用户' + arr[i].userId) + ' (余额:' + this.fenToYuan(arr[i].availableAmount) + ')')
          }
          this.memberOptions = opts
        }
      } catch (e) {
        console.error('获取家庭收益概览失败', e)
      }
    },
    loadStats() {
      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/commission/stats',
        method: 'POST',
        header: { 'Authorization': 'Bearer ' + token },
        success: function(res) {
          if (res.data && res.data.code === 200) {
            self.stats = res.data.data || {}
          }
        }
      })
    },
    loadFunnelData() {
      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/commission/funnel',
        method: 'POST',
        header: { 'Authorization': 'Bearer ' + token },
        success: function(res) {
          if (res.data && res.data.code === 200) {
            self.funnelData = res.data.data || {}
            self.buildFunnelSteps()
          }
        }
      })
    },
    buildFunnelSteps() {
      var data = this.funnelData
      var max = Math.max(data.invites || 1, data.registered || 0, data.purchased || 0, data.repeatPurchased || 0, data.totalOrders || 0)
      if (max < 1) max = 1
      this.funnelSteps = [
        { label: '邀请', count: data.invites || 0, width: 100 },
        { label: '注册', count: data.registered || 0, width: Math.round(((data.registered || 0) / max) * 100) },
        { label: '首购', count: data.purchased || 0, width: Math.round(((data.purchased || 0) / max) * 100) },
        { label: '复购', count: data.repeatPurchased || 0, width: Math.round(((data.repeatPurchased || 0) / max) * 100) },
        { label: '订单', count: data.totalOrders || 0, width: Math.round(((data.totalOrders || 0) / max) * 100) }
      ]
    },
    fenToYuan(fen) {
      if (fen === null || fen === undefined) return '0.00'
      var num = Number(fen)
      if (isNaN(num)) return '0.00'
      return (num / 100).toFixed(2)
    },
    formatPriceWithSymbol(val) {
      if (!val && val !== 0) return '¥0.00'
      var num = Number(val)
      if (isNaN(num)) return '¥0.00'
      // val 已经是元单位（后端返回的 commission summary 是元）
      return '¥' + Number(num).toFixed(2)
    },
    // 管理员操作
    toggleMemberAccess(m) {
      var self = this
      var enabled = !m.canUseFamilyBalance
      uni.showLoading({ title: '操作中...' })
      toggleMemberBalance({ userId: m.userId, enabled: enabled }).then(function(res) {
        uni.hideLoading()
        if (res.code === 200) {
          m.canUseFamilyBalance = enabled
          uni.showToast({ title: '操作成功', icon: 'success' })
        } else {
          uni.showToast({ title: res.message || '操作失败', icon: 'none' })
        }
      }).catch(function(e) {
        uni.hideLoading()
        uni.showToast({ title: '操作失败', icon: 'none' })
      })
    },
    onDistributeMemberChange(e) {
      this.distributeMemberIdx = e.detail.value
    },
    doDistribute() {
      var idx = this.distributeMemberIdx
      if (idx < 0 || !this.members[idx]) {
        uni.showToast({ title: '请选择成员', icon: 'none' })
        return
      }
      var amount = Number(this.distributeAmount)
      if (!amount || amount <= 0) {
        uni.showToast({ title: '请输入有效金额', icon: 'none' })
        return
      }
      var self = this
      uni.showLoading({ title: '分配中...' })
      distributeToMember({ userId: this.members[idx].userId, amount: amount }).then(function(res) {
        uni.hideLoading()
        if (res.code === 200) {
          uni.showToast({ title: '分配成功', icon: 'success' })
          self.showDistributeSheet = false
          self.distributeAmount = ''
          self.distributeMemberIdx = -1
          self.loadFamilyData()
        } else {
          uni.showToast({ title: res.message || '分配失败', icon: 'none' })
        }
      }).catch(function(e) {
        uni.hideLoading()
        uni.showToast({ title: '分配失败', icon: 'none' })
      })
    },
    doWithdraw() {
      var amount = Number(this.withdrawAmount)
      if (!amount || amount <= 0) {
        uni.showToast({ title: '请输入有效金额', icon: 'none' })
        return
      }
      var self = this
      uni.showLoading({ title: '提现中...' })
      withdrawFamilyEarnings({ amount: amount }).then(function(res) {
        uni.hideLoading()
        if (res.code === 200) {
          uni.showToast({ title: '提现申请已提交', icon: 'success' })
          self.showWithdrawSheet = false
          self.withdrawAmount = ''
          self.loadFamilyData()
        } else {
          uni.showToast({ title: res.message || '提现失败', icon: 'none' })
        }
      }).catch(function(e) {
        uni.hideLoading()
        uni.showToast({ title: '提现失败', icon: 'none' })
      })
    },
    goRecords() {
      uni.navigateTo({ url: '/pages/promotion/records' })
    },
    goCommission() {
      uni.navigateTo({ url: '/pages/promotion/commission' })
    },
    goWithdraw() {
      uni.navigateTo({ url: '/pages/promotion/withdraw' })
    },
    goInvite() {
      uni.navigateTo({ url: '/pages/promotion/invite' })
    },
    async shareToFriend() {
      uni.showLoading({ title: '生成中...' })
      try {
        if (!this.shareReferralCode) {
          try {
            var codeRes = await getReferralCode()
            if (codeRes && codeRes.data) {
              this.shareReferralCode = codeRes.data.referralCode || codeRes.data.code || ''
            }
          } catch (e) {}
        }
        var qrRes = await getInviteQrCode()
        if (qrRes && qrRes.data) {
          this.inviteQrCode = qrRes.data.qrCodeBase64 || ''
        }
        if (!this.familyName) {
          try {
            var famRes = await getFamilyMembers()
            if (famRes.code === 200 && famRes.data && famRes.data.familyName) {
              this.familyName = famRes.data.familyName
            }
          } catch (e) {}
        }
        this.shareNickname = uni.getStorageSync('nickname') || ''
        this.shareAvatar = uni.getStorageSync('avatar') || ''
        this.showPoster = true
      } catch (e) {
        uni.showToast({ title: '生成失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    goTeam() {
      uni.navigateTo({ url: '/pages/promotion/team' })
    },
    goLeaderboard() {
      uni.navigateTo({ url: '/pages/promotion/leaderboard' })
    },
    closePoster() {
      this.showPoster = false
    }
  }
}
</script>

<style scoped>
.page-wrapper { min-height: 100vh; }
.container {
  padding: 30rpx;
  min-height: 100vh;
  background: #FFF7ED;
}
.invite-card {
  background: linear-gradient(135deg, #F97316, #EA580C);
  border-radius: 20rpx;
  padding: 40rpx;
  color: #fff;
  margin-bottom: 30rpx;
}
.code-section {
  margin-bottom: 30rpx;
}
.code-label {
  font-size: 24rpx;
  opacity: 0.85;
}
.code-value {
  display: flex;
  align-items: center;
  margin-top: 12rpx;
}
.code-text {
  font-size: 44rpx;
  font-weight: bold;
  letter-spacing: 6rpx;
}
.copy-icon {
  font-size: 36rpx;
  margin-left: 16rpx;
  opacity: 0.9;
}
.code-hint {
  font-size: 22rpx;
  opacity: 0.7;
  margin-top: 8rpx;
  display: block;
}
.share-btn {
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 28rpx;
  border-radius: 40rpx;
  height: 72rpx;
  line-height: 72rpx;
  border: 1rpx solid rgba(255,255,255,0.3);
}
.share-btn::after { border: none; }
.share-btn:active { opacity: 0.8; }

/* ===== 家庭公共收益卡 ===== */
.family-earnings-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
  border-left: 6rpx solid #F97316;
}
.fe-header {
  margin-bottom: 24rpx;
}
.fe-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fe-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1E293B;
}
.fe-badge {
  font-size: 20rpx;
  color: #F97316;
  background: #FFF7ED;
  padding: 4rpx 14rpx;
  border-radius: 20rpx;
}
.fe-subtitle {
  font-size: 22rpx;
  color: #94A3B8;
  margin-top: 6rpx;
  display: block;
}
.fe-grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}
.fe-item {
  width: 50%;
  text-align: center;
  padding: 16rpx 0;
}
.fe-value {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
}
.fe-value.orange { color: #F97316; }
.fe-value.blue { color: #0EA5E9; }
.fe-value.green { color: #10B981; }
.fe-value.purple { color: #8B5CF6; }
.fe-label {
  font-size: 22rpx;
  color: #94A3B8;
  margin-top: 6rpx;
  display: block;
}
.fe-actions {
  display: flex;
  gap: 20rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #FED7AA;
}
.fe-btn {
  flex: 1;
  height: 64rpx;
  line-height: 64rpx;
  font-size: 26rpx;
  border-radius: 32rpx;
  text-align: center;
}
.fe-btn::after { border: none; }
.fe-btn-withdraw {
  background: #F97316;
  color: #fff;
}
.fe-btn-distribute {
  background: #FFF7ED;
  color: #F97316;
  border: 1rpx solid #FED7AA;
}

/* ===== 成员贡献榜 ===== */
.members-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.members-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.members-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1E293B;
}
.members-toggle {
  font-size: 24rpx;
  color: #F97316;
}
.member-list {
  display: flex;
  flex-direction: column;
}
.member-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #FFF7ED;
}
.member-item:last-child {
  border-bottom: none;
}
.member-rank {
  width: 48rpx;
  flex-shrink: 0;
  text-align: center;
}
.rank-num {
  font-size: 28rpx;
}
.rank-plain {
  font-size: 24rpx;
  color: #94A3B8;
  font-weight: 500;
}
.member-avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  flex-shrink: 0;
  background: #FEF3C7;
}
.member-avatar-placeholder {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  flex-shrink: 0;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #F97316;
  text-align: center;
  line-height: 56rpx;
}
.member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8rpx;
}
.member-name {
  font-size: 26rpx;
  color: #1E293B;
  font-weight: 500;
  max-width: 140rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-role-tag {
  font-size: 18rpx;
  color: #fff;
  background: #F97316;
  padding: 2rpx 10rpx;
  border-radius: 12rpx;
}
.member-balance-tag {
  font-size: 18rpx;
  color: #10B981;
  background: #D1FAE5;
  padding: 2rpx 10rpx;
  border-radius: 12rpx;
}
.member-balance-tag.disabled-tag {
  color: #94A3B8;
  background: #F1F5F9;
}
.member-amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 12rpx;
  flex-shrink: 0;
}
.member-amount {
  font-size: 20rpx;
  line-height: 1.6;
}
.member-amount.allocated { color: #10B981; }
.member-amount.consumed { color: #EF4444; }
.member-amount.available { color: #F97316; font-weight: 600; }
.member-switch {
  transform: scale(0.7);
  flex-shrink: 0;
}

/* ===== 弹窗 ===== */
.sheet-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet-content {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  padding: 40rpx 32rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 750rpx;
  box-sizing: border-box;
}
.sheet-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1E293B;
  display: block;
  margin-bottom: 12rpx;
}
.sheet-hint {
  font-size: 24rpx;
  color: #94A3B8;
  display: block;
  margin-bottom: 24rpx;
}
.sheet-input {
  height: 80rpx;
  border: 1rpx solid #FED7AA;
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #1E293B;
  margin-bottom: 24rpx;
}
.sheet-picker {
  height: 80rpx;
  border: 1rpx solid #FED7AA;
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 26rpx;
  color: #1E293B;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
}
.sheet-actions {
  display: flex;
  gap: 20rpx;
}
.sheet-cancel {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  background: #F1F5F9;
  color: #64748B;
  font-size: 28rpx;
  border-radius: 36rpx;
}
.sheet-cancel::after { border: none; }
.sheet-confirm {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  background: #F97316;
  color: #fff;
  font-size: 28rpx;
  border-radius: 36rpx;
}
.sheet-confirm::after { border: none; }
.sheet-confirm[disabled] {
  opacity: 0.5;
}

/* ===== 统计卡片 ===== */
.stats-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}
.stat-card {
  flex: 1;
  margin: 0 10rpx;
  border-radius: 16rpx;
  padding: 24rpx 0;
  text-align: center;
  color: #fff;
}
.stat-card:first-child { margin-left: 0; }
.stat-card:last-child { margin-right: 0; }
.today-card { background: linear-gradient(135deg, #F97316, #FB923C); }
.month-card { background: linear-gradient(135deg, #0EA5E9, #38BDF8); }
.total-card { background: linear-gradient(135deg, #10B981, #34D399); }
.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
}
.stat-label {
  font-size: 22rpx;
  opacity: 0.9;
  margin-top: 8rpx;
  display: block;
}

/* ===== 转化漏斗 ===== */
.funnel-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 20rpx;
  display: block;
}
.funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.funnel-step {
  background: linear-gradient(90deg, #F97316, #FB923C);
  border-radius: 12rpx;
  padding: 20rpx 0;
  margin-bottom: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 24rpx;
  padding-right: 24rpx;
  min-width: 60%;
  transition: all 0.3s ease;
}
.funnel-label {
  font-size: 26rpx;
  color: #fff;
  font-weight: 500;
}
.funnel-count {
  font-size: 28rpx;
  color: #fff;
  font-weight: bold;
}

/* ===== 收益总览 ===== */
.earnings-card {
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
  overflow: hidden;
}
.earnings-header {
  padding: 24rpx 32rpx 0;
}
.earnings-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
}
.earnings-body {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx 32rpx;
}
.earning-item {
  flex: 1;
  text-align: center;
}
.earning-label {
  font-size: 22rpx;
  color: #94A3B8;
  display: block;
  margin-bottom: 8rpx;
}
.earning-value {
  font-size: 36rpx;
  font-weight: bold;
}
.earning-value.orange { color: #F97316; }
.earning-value.blue { color: #0EA5E9; }
.earning-value.green { color: #10B981; }
.earning-divider {
  width: 1rpx;
  height: 64rpx;
  background: #FED7AA;
}

/* ===== 功能入口 ===== */
.menu-grid {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 0;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.menu-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 0;
  box-sizing: border-box;
}
.menu-icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
}
.icon-commission { background: #FEF3C7; }
.icon-withdraw { background: #DBEAFE; }
.icon-invite { background: #D1FAE5; }
.icon-share { background: #E0F2FE; }
.icon-team { background: #FCE7F3; }
.icon-leaderboard { background: #FFF3CD; }
.icon-records { background: #EDE9FE; }
.menu-icon-text {
  font-size: 36rpx;
}
.menu-text {
  font-size: 26rpx;
  color: #1E293B;
  font-weight: 500;
}
</style>