integral-shop/single_uniapp22miao/pages/sub-pages/invite/index.vue

<template>
  <view class="invite-page">
    <!-- 顶部背景 -->
    <view class="header-bg"></view>
    
    <!-- 邀请卡片 -->
    <view class="invite-card">
      <view class="card-title">邀请好友  共享收益</view>
      
      <!-- 邀请码 -->
      <view class="invite-code-box">
        <view class="label">我的邀请码</view>
        <view class="code">{{ inviteCode }}</view>
        <button class="copy-btn" @click="copyCode">复制邀请码</button>
      </view>
      
      <!-- 分享按钮 -->
      <view class="share-actions">
        <button class="share-btn" open-type="share">
          <text class="icon">📱</text>
          <text>分享给好友</text>
        </button>
      </view>
    </view>
    
    <!-- 统计数据 -->
    <view class="stats-container">
      <view class="stats-item" @click="goToMyFans">
        <view class="stats-value">{{ stats.fans_count || 0 }}</view>
        <view class="stats-label">我的粉丝</view>
      </view>
      <view class="stats-item" @click="goToPromotePrize">
        <view class="stats-value">¥{{ stats.total_income || '0.00' }}</view>
        <view class="stats-label">累计收益</view>
      </view>
      <view class="stats-item">
        <view class="stats-value">{{ stats.team_count || 0 }}</view>
        <view class="stats-label">团队人数</view>
      </view>
    </view>
    
    <!-- 邀请规则 -->
    <view class="rules-container">
      <view class="rules-title">邀请规则</view>
      <view class="rules-list">
        <view class="rule-item">
          <text class="rule-icon">1️⃣</text>
          <text class="rule-text">分享邀请码或邀请链接给好友</text>
        </view>
        <view class="rule-item">
          <text class="rule-icon">2️⃣</text>
          <text class="rule-text">好友通过您的邀请码注册成功</text>
        </view>
        <view class="rule-item">
          <text class="rule-icon">3️⃣</text>
          <text class="rule-text">好友购买商品，您可获得对应分红</text>
        </view>
        <view class="rule-item">
          <text class="rule-icon">4️⃣</text>
          <text class="rule-text">三级分红制度，躺赚睡后收入</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inviteCode: '',
      stats: {}
    }
  },
  
  onLoad() {
    this.loadInviteInfo();
  },
  
  onShareAppMessage() {
    return {
      title: `【邀请码：${this.inviteCode}】邀请你一起赚钱！`,
      path: `/pages/sub-pages/login/register?invite_code=${this.inviteCode}`
    };
  },
  
  methods: {
    // 加载邀请信息
    async loadInviteInfo() {
      try {
        const res = await this.$http.get('/api/share/index');
        if (res.code === 0) {
          this.inviteCode = res.data.invite_code;
          this.stats = res.data.stats || {};
        }
      } catch (error) {
        console.error('加载邀请信息失败:', error);
      }
    },
    
    // 复制邀请码
    copyCode() {
      uni.setClipboardData({
        data: this.inviteCode,
        success: () => {
          uni.showToast({
            title: '邀请码已复制',
            icon: 'success'
          });
        }
      });
    },
    
    // 去我的粉丝
    goToMyFans() {
      uni.navigateTo({
        url: '/pages/sub-pages/my-fans/index'
      });
    },
    
    // 去推广奖励
    goToPromotePrize() {
      uni.navigateTo({
        url: '/pages/sub-pages/promote-prize/index'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.invite-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  padding-bottom: 40rpx;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.invite-card {
  position: relative;
  z-index: 1;
  margin: 30rpx;
  padding: 50rpx 40rpx;
  background-color: #fff;
  border-radius: 30rpx;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
  
  .card-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 50rpx;
  }
  
  .invite-code-box {
    text-align: center;
    padding: 40rpx;
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    
    .label {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 15rpx;
    }
    
    .code {
      font-size: 60rpx;
      font-weight: bold;
      color: #FF6B00;
      letter-spacing: 10rpx;
      margin-bottom: 20rpx;
    }
    
    .copy-btn {
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
      background-color: #FF6B00;
      color: #fff;
      border-radius: 30rpx;
      font-size: 26rpx;
      border: none;
    }
  }
  
  .share-actions {
    .share-btn {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      background: linear-gradient(90deg, #667eea, #764ba2);
      color: #fff;
      border-radius: 45rpx;
      font-size: 32rpx;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .icon {
        font-size: 36rpx;
        margin-right: 10rpx;
      }
    }
  }
}

.stats-container {
  display: flex;
  margin: 0 30rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  
  .stats-item {
    flex: 1;
    padding: 40rpx 20rpx;
    text-align: center;
    
    .stats-value {
      font-size: 40rpx;
      font-weight: bold;
      color: #FF4757;
      margin-bottom: 10rpx;
    }
    
    .stats-label {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.rules-container {
  margin: 0 30rpx;
  padding: 40rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  
  .rules-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }
  
  .rules-list {
    .rule-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 25rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .rule-icon {
        font-size: 32rpx;
        margin-right: 15rpx;
      }
      
      .rule-text {
        flex: 1;
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
    }
  }
}
</style>