ai_uniapp_v2/pages/invite/landing.vue

<template>
  <view class="landing-page">
    <view class="invite-card">
      <view class="avatar-wrap">
        <image v-if="inviter.avatar" class="avatar" :src="inviter.avatar" mode="aspectFill" />
        <text v-else class="avatar-text">AI</text>
      </view>
      <text class="from-text">{{ inviter.user_name || '你的好友' }} 邀请你</text>
      <text class="title">{{ config.landing_title || '一起体验 AI ONLINE' }}</text>
      <text class="desc">{{ config.landing_desc || '登录后领取点数奖励，AI取名、动漫头像、证件照等功能都能使用。' }}</text>

      <view class="gift-row">
        <view class="gift-item">
          <text class="gift-num">{{ config.invitee_points || 0 }}</text>
          <text class="gift-label">你可领取点数</text>
        </view>
        <view class="gift-item">
          <text class="gift-num">{{ config.inviter_points || 0 }}</text>
          <text class="gift-label">好友获得点数</text>
        </view>
      </view>

      <view class="claim-btn" @click="claim">{{ userStore.isLogin ? '进入 AI ONLINE' : '登录并领取' }}</view>
      <text class="rule-text">{{ config.rule_text || '好友通过你的邀请登录注册成功后，你和好友都可获得点数奖励。' }}</text>
    </view>
  </view>
</template>

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

const userStore = useUserStore()
const { toast } = useApp()
const config = ref({})
const inviter = ref({})
const inviteCode = ref('')

onLoad((options = {}) => {
  userStore.restore()
  inviteCode.value = options.invite_code || options.invite_open_id || parseInviteScene(options.scene || '')
  if (inviteCode.value) uni.setStorageSync('invite_code', inviteCode.value)
  if (options.source) uni.setStorageSync('source', options.source)
  loadConfig(options.scene || '')
})

onShareAppMessage(() => ({
  title: config.value.share_title || '邀请你体验 AI ONLINE',
  path: `/pages/invite/landing?invite_code=${inviteCode.value}`,
  imageUrl: config.value.share_image || ''
}))

function parseInviteScene(scene) {
  if (!scene) return ''
  let text = ''
  try {
    text = decodeURIComponent(scene)
  } catch (e) {
    text = scene
  }
  const match = text.match(/(?:^|[&?])i=([^&]+)/) || text.match(/(?:^|[&?])i_([^&]+)/)
  if (match) return match[1]
  if (text.indexOf('i_') === 0) return text.slice(2)
  return text
}

async function loadConfig(scene) {
  try {
    const res = await inviteApi.getConfig({
      invite_code: inviteCode.value,
      scene
    })
    config.value = res.data.config || {}
    inviter.value = res.data.inviter || {}
    if (res.data.invite_code) {
      inviteCode.value = res.data.invite_code
      uni.setStorageSync('invite_code', inviteCode.value)
    }
  } catch (e) {
    toast(e.msg || '邀请信息加载失败')
  }
}

function claim() {
  if (userStore.isLogin) {
    uni.switchTab({ url: '/pages/toolbox/toolbox' })
    return
  }
  uni.navigateTo({ url: '/pages/login/login' })
}
</script>

<style lang="scss" scoped>
.landing-page {
  min-height: 100vh;
  padding: 44rpx 24rpx;
  background: linear-gradient(180deg, #eef7ff 0%, #f7f9fc 42%, #ffffff 100%);
  box-sizing: border-box;
}

.invite-card {
  min-height: calc(100vh - 88rpx);
  padding: 52rpx 34rpx 38rpx;
  border-radius: 34rpx;
  background: #ffffff;
  box-shadow: 0 20rpx 50rpx rgba(30, 66, 120, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.avatar-wrap {
  width: 124rpx;
  height: 124rpx;
  border-radius: 50%;
  background: #eaf5ff;
  box-shadow: 0 10rpx 24rpx rgba(11, 140, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar {
  width: 100%;
  height: 100%;
}

.avatar-text {
  color: #0b8cff;
  font-size: 34rpx;
  font-weight: 900;
}

.from-text {
  margin-top: 24rpx;
  color: #7f8896;
  font-size: 25rpx;
  line-height: 1;
}

.title {
  margin-top: 28rpx;
  color: #172033;
  font-size: 46rpx;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.desc {
  margin-top: 20rpx;
  color: #687386;
  font-size: 28rpx;
  line-height: 1.55;
  text-align: center;
}

.gift-row {
  width: 100%;
  margin-top: 42rpx;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18rpx;
}

.gift-item {
  height: 176rpx;
  border-radius: 26rpx;
  background: #f3f9ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gift-num {
  color: #0b8cff;
  font-size: 54rpx;
  font-weight: 900;
  line-height: 1;
}

.gift-label {
  margin-top: 14rpx;
  color: #687386;
  font-size: 23rpx;
}

.claim-btn {
  width: 100%;
  height: 92rpx;
  margin-top: auto;
  border-radius: 999rpx;
  color: #ffffff;
  background: #0b8cff;
  font-size: 30rpx;
  font-weight: 900;
  line-height: 92rpx;
  text-align: center;
  box-shadow: 0 14rpx 28rpx rgba(11, 140, 255, 0.22);
}

.rule-text {
  margin-top: 22rpx;
  color: #9aa4b2;
  font-size: 23rpx;
  line-height: 1.45;
  text-align: center;
}
</style>