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

<template>
  <scroll-view class="container" scroll-y>
    <!-- 邀请码区域 -->
    <view class="invite-card">
      <view class="code-section">
        <text class="code-label">我的邀请码</text>
        <view class="code-value" @click="copyCode">
          <text class="code-text">{{ referralCode || '加载中...' }}</text>
          <text class="copy-icon">⎘</text>
        </view>
        <text class="code-hint">点击复制邀请码，分享给好友</text>
      </view>
      <button class="share-btn" @click="shareCard">分享邀请卡</button>
    </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">
        <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="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>

    <SharePoster :show="showPoster" :referralCode="referralCode" :qrCodeBase64="qrCodeBase64" :nickname="userNickname" :userAvatar="userAvatar" @close="showPoster = false" />

  </scroll-view>
</template>

<script>
import { getReferralCode, getReferralSummary, getCommissionSummary, getInviteQrCode } from '../../utils/api.js'
import SharePoster from '@/components/SharePoster.vue'

export default {
  components: { SharePoster },
  data() {
    return {
      referralCode: '',
      totalEarnings: '0.00',
      availableAmount: '0.00',
      summary: null,
      showPoster: false,
      qrCodeBase64: '',
      userAvatar: '',
      userNickname: '',
      stats: {},
      funnelData: {},
      funnelSteps: []
    }
  },
  computed: {
    isLoggedIn() {
      return !!uni.getStorageSync('token')
    }
  },
  onLoad() {
    this.loadData()
  },
  onShow() {
    this.loadStats()
    this.loadFunnelData()
  },
  onShareAppMessage() {
    var code = this.referralCode || ''
    var path = '/pages/invite/join'
    if (code) {
      path = path + '?inviteCode=' + code
    }
    return {
      title: '我在浠艾福发现了好用的家庭成长工具，快来加入！',
      path: path,
      imageUrl: ''
    }
  },
  methods: {
    async loadData() {
      try {
        const codeRes = await getReferralCode()
        if (codeRes.data) {
          this.referralCode = codeRes.data.referralCode || codeRes.data.code || ''
        }
      } catch (e) {
        console.error('获取邀请码失败', e)
      }
      try {
        const summaryRes = await getReferralSummary()
        if (summaryRes.data) {
          this.totalEarnings = summaryRes.data.totalEarnings || '0.00'
        }
      } catch (e) {
        console.error('获取邀请统计失败', e)
      }
      try {
        const comRes = await getCommissionSummary()
        if (comRes.data) {
          this.summary = comRes.data
          this.availableAmount = comRes.data.availableAmount || '0.00'
        }
      } catch (e) {
        console.error('获取佣金总览失败', e)
      }
    },
    loadStats: function() {
      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: function() {
      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: function() {
      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) }
      ]
    },
    copyCode() {
      if (!this.referralCode) return
      uni.setClipboardData({
        data: this.referralCode,
        success: function() {
          uni.showToast({ title: '邀请码已复制', icon: 'success' })
        }
      })
    },
    async shareCard() {
      try {
        uni.showLoading({ title: '生成中...' })
        var res = await getInviteQrCode()
        if (res.data) {
          this.qrCodeBase64 = res.data.qrCodeBase64 || ''
          this.userNickname = uni.getStorageSync('nickname') || ''
          this.userAvatar = uni.getStorageSync('avatar') || ''
          this.showPoster = true
        }
      } catch (e) {
        uni.showToast({ title: '生成失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    goCommission() {
      uni.navigateTo({ url: '/pages/promotion/commission' })
    },
    goWithdraw() {
      uni.navigateTo({ url: '/pages/promotion/withdraw' })
    },
    goInvite() {
      uni.navigateTo({ url: '/pages/promotion/invite' })
    },
    goTeam() {
      uni.navigateTo({ url: '/pages/promotion/team' })
    },
    goLeaderboard() {
      uni.navigateTo({ url: '/pages/promotion/leaderboard' })
    }
  }
}
</script>

<style scoped>
.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; }

/* ===== 统计卡片 ===== */
.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: 50%;
  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-team { background: #FCE7F3; }
.icon-leaderboard { background: #FFF3CD; }
.menu-icon-text {
  font-size: 36rpx;
}
.menu-text {
  font-size: 26rpx;
  color: #1E293B;
  font-weight: 500;
}
</style>