fengketrade/frontend/pages/user/invite-code.vue

<template>
  <s-layout title="我的邀请码" navbar="inner">
    <view class="invite-page">
      <!-- 邀请码卡片 -->
      <view class="invite-card">
        <view class="card-title">我的邀请码</view>
        <view class="code-display" @tap="onCopyCode">
          <text class="code-text">{{ state.inviteCode || '加载中...' }}</text>
          <text class="copy-icon ss-iconfont uicon-copy"></text>
        </view>
        <view class="share-text">{{ state.shareText }}</view>
        <button class="copy-btn" @tap="onCopyCode">
          <text class="ss-iconfont uicon-copy"></text> 复制邀请码
        </button>
      </view>

      <!-- 邀请统计 -->
      <view class="stats-card">
        <view class="stat-item">
          <view class="stat-num">{{ state.inviteCount }}</view>
          <view class="stat-label">已邀请人数</view>
        </view>
      </view>

      <!-- 邀请记录 -->
      <view class="invite-list" v-if="state.inviteList.length > 0">
        <view class="list-title">邀请记录</view>
        <view
          v-for="item in state.inviteList"
          :key="item.id"
          class="invite-item ss-flex ss-col-center"
        >
          <image :src="sheep.$url.cdn(item.avatar)" class="avatar"></image>
          <view class="info ss-flex-1">
            <view class="nickname">{{ item.nickname }}</view>
            <view class="time">{{ sheep.$helper.timeFormat(item.jointime) }}</view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else class="empty-box">
        <view class="empty-text">还没有邀请记录</view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { reactive, onMounted } from 'vue';
  import sheep from '@/sheep';

  const state = reactive({
    inviteCode: '',
    inviteCount: 0,
    shareText: '',
    inviteList: [],
  });

  // 获取邀请码
  async function getInviteCode() {
    const { code, data } = await sheep.$api.invite.myCode();
    if (code === 1) {
      state.inviteCode = data.invite_code;
      state.inviteCount = data.invite_count;
      state.shareText = data.share_text;
    }
  }

  // 获取邀请列表
  async function getInviteList() {
    const { code, data } = await sheep.$api.invite.myInvites({ list_rows: 20 });
    if (code === 1) {
      state.inviteList = data.data || [];
    }
  }

  // 复制邀请码
  function onCopyCode() {
    if (!state.inviteCode) {
      sheep.$helper.toast('邀请码加载中...');
      return;
    }
    sheep.$helper.copyText(state.inviteCode);
    sheep.$helper.toast('邀请码已复制到剪贴板');
  }

  onMounted(() => {
    getInviteCode();
    getInviteList();
  });
</script>

<style lang="scss" scoped>
  .invite-page {
    padding: 20rpx;
    min-height: 100vh;
    background: #f7f8fa;
  }

  .invite-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);

    .card-title {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 30rpx;
      text-align: center;
    }

    .code-display {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2rpx solid rgba(255, 255, 255, 0.3);

      .code-text {
        font-size: 64rpx;
        font-weight: bold;
        color: #fff;
        letter-spacing: 8rpx;
        margin-right: 20rpx;
      }

      .copy-icon {
        font-size: 40rpx;
        color: #fff;
      }
    }

    .share-text {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.9);
      text-align: center;
      margin-bottom: 30rpx;
      line-height: 40rpx;
    }

    .copy-btn {
      background: rgba(255, 255, 255, 0.95);
      color: #667eea;
      border-radius: 40rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      font-weight: bold;
      border: none;

      &::after {
        border: none;
      }

      .ss-iconfont {
        margin-right: 10rpx;
      }
    }
  }

  .stats-card {
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 20rpx;

    .stat-item {
      text-align: center;

      .stat-num {
        font-size: 64rpx;
        font-weight: bold;
        color: #667eea;
        line-height: 1;
        margin-bottom: 10rpx;
      }

      .stat-label {
        font-size: 28rpx;
        color: #999;
      }
    }
  }

  .invite-list {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;

    .list-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 30rpx;
    }

    .invite-item {
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .info {
        .nickname {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
        }

        .time {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }

  .empty-box {
    background: #fff;
    border-radius: 20rpx;
    padding: 100rpx 0;
    text-align: center;

    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }
</style>