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

<template>
  <view class="container">
    <!-- 邀请统计 -->
    <view class="stats-card">
      <view class="stats-item">
        <text class="stats-num" v-if="summary">{{ summary.totalInvited || 0 }}</text>
        <text class="stats-num" v-else>0</text>
        <text class="stats-label">已邀请</text>
      </view>
      <view class="stats-divider"></view>
      <view class="stats-item">
        <text class="stats-num" v-if="summary">{{ summary.activeCount || 0 }}</text>
        <text class="stats-num" v-else>0</text>
        <text class="stats-label">活跃</text>
      </view>
      <view class="stats-divider"></view>
      <view class="stats-item">
        <text class="stats-num" v-if="summary">{{ formatPriceWithSymbol(summary.totalEarnings) }}</text>
        <text class="stats-num" v-else>{{ formatPriceWithSymbol(0) }}</text>
        <text class="stats-label">总收益</text>
      </view>
    </view>

    <!-- 邀请里程碑 -->
    <view class="milestone-card" v-if="milestones.length > 0">
      <text class="milestone-title">邀请里程碑</text>
      <view class="milestone-item" v-for="item in milestones" :key="item.id">
        <view class="milestone-header">
          <text class="milestone-name">{{ milestoneName(item.milestone) }}</text>
          <text class="milestone-reward">+{{ item.rewardPoints || 0 }}积分</text>
        </view>
        <view class="milestone-bar-wrap">
          <view class="milestone-bar-bg">
            <view class="milestone-bar-fill" :style="'width:' + milestonePercent(item) + '%'"></view>
          </view>
          <text class="milestone-count">{{ item.currentCount || 0 }}/{{ item.targetCount || 0 }}</text>
        </view>
        <view class="milestone-action" v-if="item.status === 'PENDING'">
          <button class="claim-btn" @click="claimReward(item)">领取</button>
        </view>
        <view class="milestone-action" v-if="item.status === 'CLAIMED'">
          <text class="claimed-badge">✓ 已领取</text>
        </view>
      </view>
    </view>

    <!-- 邀请码展示 -->
    <view class="code-card">
      <text class="code-title">我的邀请码</text>
      <text class="code-value">{{ referralCode || '加载中...' }}</text>
      <view class="code-actions">
        <button class="action-btn" @click="copyCode">复制邀请码</button>
        <button class="action-btn share" @click="shareInvite">分享给好友</button>
      </view>
    </view>

    <!-- 绑定推荐人 -->
    <view class="bind-card">
      <text class="bind-title">我有推荐人</text>
      <view class="bind-row">
        <input v-model="bindCode" type="text" placeholder="输入推荐人的邀请码" class="bind-input" />
        <button class="bind-btn" @click="bindReferral">绑定</button>
      </view>
    </view>

    <!-- 已邀请列表 -->
    <view class="list-section">
      <text class="section-title">已邀请好友 ({{ total || 0 }})</text>
      <view class="empty-state" v-if="!loading && list.length === 0">
        <text>还没有邀请好友，快去分享吧</text>
      </view>
      <view class="invite-item" v-for="item in list" :key="item.id">
        <view class="invite-avatar-wrap">
          <text class="invite-avatar">{{ item.avatar ? '' : '👤' }}</text>
        </view>
        <view class="invite-info">
          <text class="invite-name">{{ item.nickname || '好友' }}</text>
          <text class="invite-time">{{ formatTime(item.createdAt) }}</text>
        </view>
      </view>
      <view class="loading-state" v-if="loading">
        <text>加载中...</text>
      </view>
    </view>

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

  </view>
</template>

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

export default {
  components: { SharePoster },
  data() {
    return {
      referralCode: '',
      bindCode: '',
      list: [],
      total: 0,
      page: 1,
      loading: false,
      hasMore: true,
      summary: null,
      showPoster: false,
      qrCodeBase64: '',
      userAvatar: '',
      userNickname: '',
      milestones: [],
      milestonesLoading: false
    }
  },
  onLoad() {
    this.loadCode()
    this.loadSummary()
    this.loadList()
    this.loadMilestones()
  },
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.page++
      this.loadList()
    }
  },
  onShareAppMessage() {
    var code = this.referralCode || ''
    var path = '/pages/invite/join'
    if (code) {
      path = path + '?inviteCode=' + code
    }
    return {
      title: '我在浠艾福发现了好用的家庭成长工具，快来加入！',
      path: path,
      imageUrl: ''
    }
  },
  methods: {
    async loadCode() {
      try {
        const res = await getReferralCode()
        if (res.data) {
          this.referralCode = res.data.referralCode || res.data.code || ''
        }
      } catch (e) {
        console.error('获取邀请码失败', e)
      }
    },
    async loadSummary() {
      try {
        const res = await getReferralSummary()
        if (res.data) {
          this.summary = res.data
        }
      } catch (e) {
        console.error('获取邀请统计失败', e)
      }
    },
    async loadList() {
      this.loading = true
      try {
        const res = await getReferralList(this.page)
        if (res.data) {
          if (res.data.records) {
            this.list = this.page === 1 ? res.data.records : this.list.concat(res.data.records)
          }
          this.total = res.data.total || 0
          if (res.data.records) {
            this.hasMore = res.data.records.length >= 10
          } else {
            this.hasMore = false
          }
        }
      } catch (e) {
        console.error('获取邀请列表失败', e)
      }
      this.loading = false
    },
    copyCode() {
      if (!this.referralCode) return
      uni.setClipboardData({
        data: this.referralCode,
        success: function() {
          uni.showToast({ title: '已复制邀请码', icon: 'success' })
        }
      })
    },
    async shareInvite() {
      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()
      }
    },
    async bindReferral() {
      if (!this.bindCode) {
        uni.showToast({ title: '请输入邀请码', icon: 'none' })
        return
      }
      if (this.bindCode === this.referralCode) {
        uni.showToast({ title: '不能绑定自己的邀请码', icon: 'none' })
        return
      }
      try {
        await bindReferral(this.bindCode)
        uni.showToast({ title: '绑定成功', icon: 'success' })
        this.bindCode = ''
      } catch (e) {
        uni.showToast({ title: e.message || '绑定失败', icon: 'none' })
      }
    },
    async loadMilestones() {
      this.milestonesLoading = true
      try {
        var res = await getInviteMilestones()
        if (res.data) {
          this.milestones = Array.isArray(res.data) ? res.data : []
        }
      } catch (e) {
        console.error('获取里程碑失败', e)
      }
      this.milestonesLoading = false
    },
    async claimReward(item) {
      try {
        uni.showLoading({ title: '领取中...' })
        await claimInviteMilestone(item.milestone)
        uni.showToast({ title: '领取成功', icon: 'success' })
        this.loadMilestones()
      } catch (e) {
        uni.showToast({ title: e.message || '领取失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    milestoneName(key) {
      var names = {
        INVITE_3: '邀请3人',
        INVITE_5: '邀请5人',
        INVITE_10: '邀请10人'
      }
      return names[key] || key
    },
    milestonePercent(item) {
      if (!item.targetCount) return 0
      var pct = Math.round((item.currentCount || 0) / item.targetCount * 100)
      return Math.min(pct, 100)
    },
    formatTime(time) {
      if (!time) return ''
      var t = new Date(time)
      return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0')
    }
  }
}
</script>

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

/* ===== 邀请统计 ===== */
.stats-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx 24rpx;
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.stats-item {
  flex: 1;
  text-align: center;
}
.stats-num {
  font-size: 36rpx;
  font-weight: bold;
  color: #F97316;
  display: block;
}
.stats-label {
  font-size: 22rpx;
  color: #94A3B8;
  margin-top: 4rpx;
  display: block;
}
.stats-divider {
  width: 1rpx;
  height: 48rpx;
  background: #FED7AA;
}

/* ===== 邀请里程碑 ===== */
.milestone-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.milestone-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  display: block;
  margin-bottom: 24rpx;
}
.milestone-item {
  margin-bottom: 24rpx;
}
.milestone-item:last-child {
  margin-bottom: 0;
}
.milestone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}
.milestone-name {
  font-size: 26rpx;
  color: #1E293B;
  font-weight: 500;
}
.milestone-reward {
  font-size: 22rpx;
  color: #F97316;
}
.milestone-bar-wrap {
  display: flex;
  align-items: center;
}
.milestone-bar-bg {
  flex: 1;
  height: 20rpx;
  background: #FED7AA;
  border-radius: 10rpx;
  overflow: hidden;
}
.milestone-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #F97316, #EA580C);
  border-radius: 10rpx;
}
.milestone-count {
  font-size: 22rpx;
  color: #94A3B8;
  margin-left: 12rpx;
  min-width: 50rpx;
  text-align: right;
}
.milestone-action {
  margin-top: 12rpx;
  text-align: right;
}
.claim-btn {
  background: #F97316;
  color: #fff;
  font-size: 24rpx;
  border-radius: 30rpx;
  height: 52rpx;
  line-height: 52rpx;
  padding: 0 28rpx;
  display: inline-block;
}
.claim-btn::after {
  border: none;
}
.claim-btn:active {
  opacity: 0.9;
}
.claimed-badge {
  font-size: 24rpx;
  color: #10B981;
}

.code-card {
  background: linear-gradient(135deg, #F97316, #EA580C);
  border-radius: 20rpx;
  padding: 40rpx;
  text-align: center;
  color: #fff;
  margin-bottom: 24rpx;
}
.code-title {
  font-size: 24rpx;
  opacity: 0.85;
}
.code-value {
  font-size: 48rpx;
  font-weight: bold;
  letter-spacing: 8rpx;
  margin: 20rpx 0 30rpx;
  display: block;
}
.code-actions {
  display: flex;
  gap: 20rpx;
}
.action-btn {
  flex: 1;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 26rpx;
  border-radius: 40rpx;
  height: 64rpx;
  line-height: 64rpx;
  border: 1rpx solid rgba(255,255,255,0.3);
}
.action-btn::after { border: none; }
.action-btn:active { opacity: 0.8; }

.bind-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.bind-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  display: block;
  margin-bottom: 16rpx;
}
.bind-row {
  display: flex;
  gap: 20rpx;
}
.bind-input {
  flex: 1;
  border: 1rpx solid #CBD5E1;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
}
.bind-btn {
  background: #F97316;
  color: #fff;
  font-size: 26rpx;
  border-radius: 12rpx;
  height: 64rpx;
  line-height: 64rpx;
  padding: 0 30rpx;
  font-weight: 500;
}
.bind-btn::after { border: none; }
.bind-btn:active { opacity: 0.9; }

.list-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  display: block;
  margin-bottom: 20rpx;
}
.invite-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #FED7AA;
}
.invite-item:last-child { border-bottom: none; }
.invite-avatar-wrap {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}
.invite-avatar {
  font-size: 32rpx;
}
.invite-info { flex: 1; }
.invite-name {
  font-size: 28rpx;
  color: #1E293B;
  display: block;
}
.invite-time {
  font-size: 22rpx;
  color: #94A3B8;
  margin-top: 4rpx;
}
.empty-state, .loading-state {
  text-align: center;
  padding: 60rpx;
  color: #94A3B8;
  font-size: 28rpx;
}
</style>