num/client/pages/login/index.vue

<template>
  <view class="page-login">
    <view class="login-card">
      <view class="logo-area">
        <text class="logo-icon">🔮</text>
        <text class="logo-title">数字能量学</text>
        <text class="logo-desc">AI 智能命理分析</text>
      </view>

      <view class="features">
        <view class="feature-item">
          <text class="feature-icon">✅</text>
          <text class="feature-text">一键微信登录，无需注册</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🔒</text>
          <text class="feature-text">已通过微信安全认证</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">📊</text>
          <text class="feature-text">同步分析记录至云端</text>
        </view>
      </view>

      <button class="wechat-btn" @click="onWechatLogin">
        <text>微信一键登录</text>
      </button>

      <text class="agreement">登录即表示同意《用户协议》和《隐私政策》</text>
    </view>

    <!-- US-6.2 §10: Profile completion overlay for first-time users -->
    <view v-if="showProfileForm" class="profile-overlay" @touchmove.prevent>
      <view class="profile-card">
        <text class="profile-card__title">完善个人资料</text>
        <text class="profile-card__subtitle">以下信息帮助提供更精准的分析</text>

        <view class="profile-card__field">
          <text class="profile-card__label">昵称</text>
          <input class="profile-card__input" v-model="profileForm.nickname" placeholder="输入昵称" maxlength="20" />
        </view>
        <view class="profile-card__field">
          <text class="profile-card__label">性别</text>
          <view class="profile-card__radio-group">
            <text class="profile-card__radio" :class="{ active: profileForm.gender === 1 }" @click="profileForm.gender = 1">男</text>
            <text class="profile-card__radio" :class="{ active: profileForm.gender === 2 }" @click="profileForm.gender = 2">女</text>
          </view>
        </view>
        <view class="profile-card__field">
          <text class="profile-card__label">出生日期</text>
          <text class="profile-card__prefilled">已填写：{{ profileForm.birthDate || '未填写' }}</text>
        </view>

        <view class="profile-card__actions">
          <text class="profile-card__btn profile-card__btn--skip" @click="onSkipProfile">跳过</text>
          <text class="profile-card__btn profile-card__btn--save" @click="onSaveProfile">保存</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { profileApi } from '@/utils/api'

const userStore = useUserStore()

// Params passed from index page (US-6.2 §9)
const queryName = ref('')
const queryBirthday = ref('')
const queryQuestions = ref('')
const redirectUrl = ref('')

// Profile completion overlay
const showProfileForm = ref(false)
const profileForm = ref({
  nickname: '',
  gender: 0,
  birthDate: ''
})

onLoad((options) => {
  queryName.value = options.name || ''
  queryBirthday.value = options.birthday || ''
  queryQuestions.value = options.questions || ''
  redirectUrl.value = options.redirect_to || ''

  // Pre-fill profile form from consultation page
  profileForm.value.nickname = queryName.value
  profileForm.value.birthDate = queryBirthday.value
})

async function onWechatLogin() {
  uni.showLoading({ title: '登录中...' })
  try {
    // Step 1: Get login code from WeChat
    const loginRes = await new Promise((resolve, reject) => {
      uni.login({
        provider: 'weixin',
        success: resolve,
        fail: reject
      })
    })

    if (!loginRes.code) {
      throw new Error('获取微信登录凭证失败')
    }

    // Step 2: Try to get user profile (nickname, avatar)
    let nickname = ''
    let avatarUrl = ''
    try {
      const profileRes = await new Promise((resolve, reject) => {
        uni.getUserProfile({
          desc: '用于展示用户信息',
          success: resolve,
          fail: () => reject(new Error('skip'))
        })
      })
      nickname = profileRes.userInfo?.nickName || ''
      avatarUrl = profileRes.userInfo?.avatarUrl || ''
    } catch (e) {
      // User declined profile permission - still login with code only
    }

    // Step 2.5: Capture pending referrer from index page (US-6.2)
    const pendingReferrer = uni.getStorageSync('pending_referrer') || null

    // Step 3: Send code to backend
    await userStore.wechatLogin(loginRes.code, nickname, avatarUrl, pendingReferrer)

    // Clear pending referrer after using it (US-6.2 §6: login success → clear)
    if (pendingReferrer) {
      uni.removeStorageSync('pending_referrer')
    }

    uni.hideLoading()
    uni.showToast({ title: '登录成功', icon: 'success' })

    // US-6.2 §10: First-time user → show profile completion overlay
    if (userStore.profileIncomplete) {
      showProfileForm.value = true
      return // wait for user action (save/skip) before continuing
    }

    // Existing user → continue to chart
    continueToChart()
  } catch (e) {
    uni.hideLoading()
    uni.showToast({ title: e.message || '登录失败', icon: 'none' })
    // US-6.2 §7: Login interrupted → keep pending_referrer
  }
}

async function onSaveProfile() {
  uni.showLoading({ title: '保存中...' })
  try {
    await profileApi.complete({
      nickname: profileForm.value.nickname,
      gender: profileForm.value.gender,
      birthDate: profileForm.value.birthDate,
      // birthday and name are pre-filled from consultation page
      hasExternalBirthday: !!queryBirthday.value,
      externalName: queryName.value
    })
    userStore.profileIncomplete = false
    uni.hideLoading()
    uni.showToast({ title: '保存成功', icon: 'success' })
  } catch (e) {
    uni.hideLoading()
    uni.showToast({ title: e.message || '保存失败', icon: 'none' })
    return
  }
  showProfileForm.value = false
  continueToChart()
}

function onSkipProfile() {
  showProfileForm.value = false
  uni.showToast({ title: '已跳过，可随时在个人中心完善', icon: 'none' })
  continueToChart()
}

function continueToChart() {
  // Check redirect_to param
  const redirectTarget = redirectUrl.value || ''

  if (redirectTarget) {
    setTimeout(() => {
      uni.redirectTo({ url: redirectTarget })
    }, 500)
  } else if (queryName.value || queryBirthday.value) {
    // Navigate to chart with the consultation params from index
    setTimeout(() => {
      const params = new URLSearchParams({
        name: queryName.value,
        birthday: queryBirthday.value,
        questions: queryQuestions.value
      })
      uni.redirectTo({ url: `/pages/chart/index?${params.toString()}` })
    }, 500)
  } else {
    setTimeout(() => {
      uni.switchTab({ url: '/pages/index/index' })
    }, 500)
  }
}
</script>

<style scoped lang="scss">
.page-login {
  min-height: 100vh;
  background: linear-gradient(180deg, #F8F9FF 0%, #EEF2FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.login-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 28px 32px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  width: 100%;
  max-width: 360px;
}
.logo-area {
  text-align: center;
  margin-bottom: 32px;
}
.logo-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 8px;
}
.logo-title {
  font-size: 22px;
  font-weight: 700;
  color: #1F2937;
  display: block;
}
.logo-desc {
  font-size: 13px;
  color: #9CA3AF;
  display: block;
  margin-top: 4px;
}
.features {
  margin-bottom: 28px;
}
.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.feature-icon {
  font-size: 16px;
  margin-right: 8px;
}
.feature-text {
  font-size: 14px;
  color: #6B7280;
}
.wechat-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #4A148C, #7B2DC8);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  line-height: 48px;
  text-align: center;
}
.agreement {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 16px;
}

/* US-6.2 §10: Profile completion overlay */
.profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.profile-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px 24px 24px;
  width: 100%;
  max-width: 360px;
}
.profile-card__title {
  font-size: 20px;
  font-weight: 700;
  color: #1F2937;
  display: block;
  text-align: center;
}
.profile-card__subtitle {
  font-size: 13px;
  color: #9CA3AF;
  display: block;
  text-align: center;
  margin-top: 4px;
  margin-bottom: 24px;
}
.profile-card__field {
  margin-bottom: 16px;
}
.profile-card__label {
  font-size: 13px;
  color: #6B7280;
  display: block;
  margin-bottom: 6px;
}
.profile-card__input {
  height: 44px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  color: #1F2937;
}
.profile-card__prefilled {
  font-size: 14px;
  color: #6B7280;
  line-height: 44px;
}
.profile-card__radio-group {
  display: flex;
  gap: 12px;
}
.profile-card__radio {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-size: 15px;
  color: #6B7280;
}
.profile-card__radio.active {
  border-color: #7C3AED;
  color: #7C3AED;
  background: #F5F3FF;
}
.profile-card__actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.profile-card__btn {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
}
.profile-card__btn--skip {
  background: #F3F4F6;
  color: #6B7280;
}
.profile-card__btn--save {
  background: linear-gradient(135deg, #4A148C, #7B2DC8);
  color: #fff;
}
</style>