ai_uniapp_v2/pages/invite/invite.vue

<template>
  <view class="invite-page">
    <view class="hero">
      <view class="hero-copy">
        <text class="eyebrow">INVITE FRIENDS</text>
        <text class="hero-title">{{ config.share_title || '邀请好友一起用 AI ONLINE' }}</text>
        <text class="hero-desc">{{ config.share_desc || '好友注册成功后，你和好友都能获得点数奖励。' }}</text>
      </view>
      <view class="reward-box">
        <view class="reward-item">
          <text class="reward-num">{{ config.inviter_points || 0 }}</text>
          <text class="reward-label">你获得</text>
        </view>
        <view class="reward-divider"></view>
        <view class="reward-item">
          <text class="reward-num">{{ config.invitee_points || 0 }}</text>
          <text class="reward-label">好友获得</text>
        </view>
      </view>
    </view>

    <view class="stats-row">
      <view class="stat-card">
        <text class="stat-num">{{ stats.success || 0 }}</text>
        <text class="stat-label">成功邀请</text>
      </view>
      <view class="stat-card">
        <text class="stat-num">{{ stats.inviter_points || 0 }}</text>
        <text class="stat-label">累计奖励</text>
      </view>
    </view>

    <view class="action-panel">
      <button class="primary-action" open-type="share">
        <up-icon class="action-icon" name="share" size="28rpx" color="#ffffff"></up-icon>
        <text>分享小程序</text>
      </button>
      <view class="secondary-actions">
        <view class="secondary-action" @click="openQr">
          <up-icon class="action-icon" name="scan" size="28rpx" color="#0b8cff"></up-icon>
          <text>二维码分享</text>
        </view>
        <view class="secondary-action" @click="goList">
          <up-icon class="action-icon" name="order" size="28rpx" color="#0b8cff"></up-icon>
          <text>邀请记录</text>
        </view>
      </view>
    </view>

    <view class="rule-card">
      <view class="rule-title">活动规则</view>
      <text class="rule-text">{{ config.rule_text || '好友通过你的邀请登录注册成功后，你和好友都可获得点数奖励。' }}</text>
      <view class="rule-steps">
        <view class="step">
          <text class="step-no">01</text>
          <text>分享给好友</text>
        </view>
        <view class="step">
          <text class="step-no">02</text>
          <text>好友登录注册</text>
        </view>
        <view class="step">
          <text class="step-no">03</text>
          <text>点数自动到账</text>
        </view>
      </view>
    </view>

    <view v-if="qrVisible" class="qr-mask" @click="closeQr">
      <view class="qr-sheet" @click.stop>
        <view class="sheet-head">
          <text class="sheet-title">二维码分享</text>
          <text class="sheet-close" @click="closeQr">×</text>
        </view>
        <view class="qr-card">
          <image v-if="qrcodeUrl" class="qr-img" :src="qrcodeUrl" mode="aspectFit" />
          <view v-else class="qr-loading">{{ qrLoading ? '生成中...' : '暂无二维码' }}</view>
          <text class="qr-tip">好友微信扫码即可进入邀请页</text>
        </view>
        <view class="sheet-actions">
          <view class="ghost-btn" @click="copyPath">复制路径</view>
          <view class="save-btn" @click="saveQr">保存图片</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onShareAppMessage, onShow } from '@dcloudio/uni-app'
import { inviteApi } from '@/api/index.js'
import { useUserStore } from '@/store/user.js'
import { useApp } from '@/utils/useApp.js'
import { buildShareOptions } from '@/utils/share.js'

const userStore = useUserStore()
const { toast } = useApp()
const config = ref({})
const stats = ref({})
const share = ref({})
const qrcodeUrl = ref('')
const qrVisible = ref(false)
const qrLoading = ref(false)

const sharePath = computed(() => (share.value && share.value.path) || `/pages/invite/landing?invite_code=${userStore.userInfo.open_id || ''}`)

onShow(() => {
  userStore.restore()
  if (!userStore.isLogin) {
    uni.navigateTo({ url: '/pages/login/login' })
    return
  }
  loadData()
})

onShareAppMessage(() => buildShareOptions({
  title: (share.value && share.value.title) || config.value.share_title || '邀请你体验 AI ONLINE',
  path: sharePath.value,
  imageUrl: (share.value && share.value.image) || config.value.share_image || '',
  source: 'share_invite'
}))

async function loadData() {
  try {
    const res = await inviteApi.getMy()
    config.value = res.data.config || {}
    stats.value = res.data.stats || {}
    share.value = res.data.share || {}
  } catch (e) {
    toast(e.msg || '邀请信息加载失败')
  }
}

async function openQr() {
  qrVisible.value = true
  if (qrcodeUrl.value || qrLoading.value) return
  qrLoading.value = true
  try {
    const res = await inviteApi.getQrcode()
    qrcodeUrl.value = res.data.qrcode_url || ''
  } catch (e) {
    toast(e.msg || '二维码生成失败')
  } finally {
    qrLoading.value = false
  }
}

function closeQr() {
  qrVisible.value = false
}

function copyPath() {
  uni.setClipboardData({ data: sharePath.value })
}

function saveQr() {
  if (!qrcodeUrl.value) return toast('二维码还没有生成')
  uni.downloadFile({
    url: qrcodeUrl.value,
    success: (res) => {
      if (res.statusCode !== 200) return toast('图片下载失败')
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => toast('已保存到相册'),
        fail: () => toast('保存失败，请检查相册权限')
      })
    },
    fail: () => toast('图片下载失败')
  })
}

function goList() {
  uni.navigateTo({ url: '/pages/invite/list' })
}
</script>

<style lang="scss" scoped>
.invite-page {
  min-height: 100vh;
  padding: 24rpx 24rpx calc(46rpx + env(safe-area-inset-bottom));
  background: #f4f7fb;
  box-sizing: border-box;
}

.hero {
  border-radius: 30rpx;
  padding: 34rpx 30rpx 30rpx;
  color: #ffffff;
  background: linear-gradient(135deg, #0b8cff 0%, #18c2ff 100%);
  overflow: hidden;
}

.hero-copy {
  display: flex;
  flex-direction: column;
}

.eyebrow {
  opacity: 0.72;
  font-size: 22rpx;
  font-weight: 800;
  line-height: 1;
}

.hero-title {
  margin-top: 18rpx;
  font-size: 42rpx;
  font-weight: 900;
  line-height: 1.22;
}

.hero-desc {
  width: 92%;
  margin-top: 16rpx;
  opacity: 0.86;
  font-size: 26rpx;
  line-height: 1.45;
}

.reward-box {
  margin-top: 30rpx;
  border-radius: 24rpx;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  padding: 24rpx 0;
}

.reward-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reward-num {
  font-size: 50rpx;
  font-weight: 900;
  line-height: 1;
}

.reward-label {
  margin-top: 10rpx;
  font-size: 23rpx;
  opacity: 0.82;
}

.reward-divider {
  width: 1rpx;
  height: 58rpx;
  background: rgba(255, 255, 255, 0.35);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18rpx;
  margin-top: 20rpx;
}

.stat-card,
.action-panel,
.rule-card {
  border-radius: 24rpx;
  background: #ffffff;
  box-shadow: 0 12rpx 30rpx rgba(30, 66, 120, 0.06);
}

.stat-card {
  padding: 24rpx;
}

.stat-num {
  color: #172033;
  font-size: 38rpx;
  font-weight: 900;
  line-height: 1;
}

.stat-label {
  display: block;
  margin-top: 12rpx;
  color: #7f8896;
  font-size: 24rpx;
}

.action-panel {
  margin-top: 20rpx;
  padding: 24rpx;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: normal;
}

button::after {
  border: 0;
}

.primary-action {
  height: 88rpx;
  border-radius: 999rpx;
  color: #ffffff;
  background: #0b8cff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  font-size: 29rpx;
  font-weight: 900;
}

.secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16rpx;
  margin-top: 16rpx;
}

.secondary-action {
  height: 78rpx;
  border-radius: 999rpx;
  color: #0b8cff;
  background: #edf7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  font-size: 26rpx;
  font-weight: 800;
}

.action-icon {
  flex-shrink: 0;
}

.rule-card {
  margin-top: 20rpx;
  padding: 28rpx;
}

.rule-title {
  color: #172033;
  font-size: 30rpx;
  font-weight: 900;
}

.rule-text {
  display: block;
  margin-top: 14rpx;
  color: #687386;
  font-size: 25rpx;
  line-height: 1.5;
}

.rule-steps {
  margin-top: 22rpx;
  display: flex;
  flex-direction: column;
  gap: 14rpx;
}

.step {
  height: 58rpx;
  border-radius: 16rpx;
  background: #f5f9ff;
  display: flex;
  align-items: center;
  padding: 0 18rpx;
  color: #39445a;
  font-size: 25rpx;
  font-weight: 700;
}

.step-no {
  margin-right: 16rpx;
  color: #0b8cff;
  font-size: 21rpx;
  font-weight: 900;
}

.qr-mask {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(9, 16, 28, 0.45);
  display: flex;
  align-items: flex-end;
}

.qr-sheet {
  width: 100%;
  padding: 28rpx 28rpx calc(30rpx + env(safe-area-inset-bottom));
  border-radius: 34rpx 34rpx 0 0;
  background: #ffffff;
  box-sizing: border-box;
}

.sheet-head,
.sheet-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sheet-title {
  color: #172033;
  font-size: 32rpx;
  font-weight: 900;
}

.sheet-close {
  width: 58rpx;
  height: 58rpx;
  border-radius: 50%;
  color: #7f8896;
  background: #f4f7fb;
  font-size: 38rpx;
  line-height: 54rpx;
  text-align: center;
}

.qr-card {
  margin: 26rpx auto 24rpx;
  width: 430rpx;
  min-height: 500rpx;
  border-radius: 28rpx;
  background: #f6f9fd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.qr-img {
  width: 360rpx;
  height: 360rpx;
}

.qr-loading,
.qr-tip {
  color: #7f8896;
  font-size: 24rpx;
}

.qr-tip {
  margin-top: 18rpx;
}

.ghost-btn,
.save-btn {
  flex: 1;
  height: 82rpx;
  border-radius: 999rpx;
  font-size: 27rpx;
  font-weight: 900;
  line-height: 82rpx;
  text-align: center;
}

.ghost-btn {
  margin-right: 18rpx;
  color: #0b8cff;
  background: #edf7ff;
}

.save-btn {
  color: #ffffff;
  background: #0b8cff;
}
</style>