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>
  </view>
</template>

<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

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 3: Send code to backend
    await userStore.wechatLogin(loginRes.code, nickname, avatarUrl)

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

    // Check redirect_to param (US-6.6: "登录后开通" flow)
    const pages = getCurrentPages()
    const page = pages[pages.length - 1]
    const params = page?.options || {}
    const redirectTo = params.redirect_to || ''

    // US-5.1 §8: Redirect to registration completion if profile incomplete
    if (userStore.profileIncomplete) {
      setTimeout(() => {
        uni.redirectTo({ url: '/pages/register/index' })
      }, 500)
    } else if (redirectTo) {
      setTimeout(() => {
        uni.redirectTo({ url: redirectTo })
      }, 500)
    } else {
      setTimeout(() => {
        uni.switchTab({ url: '/pages/index/index' })
      }, 500)
    }
  } catch (e) {
    uni.hideLoading()
    uni.showToast({ title: e.message || '登录失败', icon: 'none' })
  }
}
</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;
}
</style>