index.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <template>
  2. <view class="page-login">
  3. <view class="login-card">
  4. <view class="logo-area">
  5. <text class="logo-icon">🔮</text>
  6. <text class="logo-title">数字能量学</text>
  7. <text class="logo-desc">AI 智能命理分析</text>
  8. </view>
  9. <view class="features">
  10. <view class="feature-item">
  11. <text class="feature-icon">✅</text>
  12. <text class="feature-text">一键微信登录,无需注册</text>
  13. </view>
  14. <view class="feature-item">
  15. <text class="feature-icon">🔒</text>
  16. <text class="feature-text">已通过微信安全认证</text>
  17. </view>
  18. <view class="feature-item">
  19. <text class="feature-icon">📊</text>
  20. <text class="feature-text">同步分析记录至云端</text>
  21. </view>
  22. </view>
  23. <button class="wechat-btn" @click="onWechatLogin">
  24. <text>微信一键登录</text>
  25. </button>
  26. <text class="agreement">登录即表示同意《用户协议》和《隐私政策》</text>
  27. </view>
  28. </view>
  29. </template>
  30. <script setup>
  31. import { useUserStore } from '@/stores/user'
  32. const userStore = useUserStore()
  33. async function onWechatLogin() {
  34. uni.showLoading({ title: '登录中...' })
  35. try {
  36. // Step 1: Get login code from WeChat
  37. const loginRes = await new Promise((resolve, reject) => {
  38. uni.login({
  39. provider: 'weixin',
  40. success: resolve,
  41. fail: reject
  42. })
  43. })
  44. if (!loginRes.code) {
  45. throw new Error('获取微信登录凭证失败')
  46. }
  47. // Step 2: Try to get user profile (nickname, avatar)
  48. let nickname = ''
  49. let avatarUrl = ''
  50. try {
  51. const profileRes = await new Promise((resolve, reject) => {
  52. uni.getUserProfile({
  53. desc: '用于展示用户信息',
  54. success: resolve,
  55. fail: () => reject(new Error('skip'))
  56. })
  57. })
  58. nickname = profileRes.userInfo?.nickName || ''
  59. avatarUrl = profileRes.userInfo?.avatarUrl || ''
  60. } catch (e) {
  61. // User declined profile permission - still login with code only
  62. }
  63. // Step 2.5: Capture pending referrer from index page (US-6.2)
  64. const pendingReferrer = uni.getStorageSync('pending_referrer') || null
  65. // Step 3: Send code to backend
  66. await userStore.wechatLogin(loginRes.code, nickname, avatarUrl, pendingReferrer)
  67. // Clear pending referrer after using it
  68. if (pendingReferrer) {
  69. uni.removeStorageSync('pending_referrer')
  70. }
  71. uni.hideLoading()
  72. uni.showToast({ title: '登录成功', icon: 'success' })
  73. // Check redirect_to param (US-6.6: "登录后开通" flow)
  74. const pages = getCurrentPages()
  75. const page = pages[pages.length - 1]
  76. const params = page?.options || {}
  77. const redirectTo = params.redirect_to || ''
  78. // US-5.1 §8: Redirect to registration completion if profile incomplete
  79. if (userStore.profileIncomplete) {
  80. setTimeout(() => {
  81. uni.redirectTo({ url: '/pages/register/index' })
  82. }, 500)
  83. } else if (redirectTo) {
  84. setTimeout(() => {
  85. uni.redirectTo({ url: redirectTo })
  86. }, 500)
  87. } else {
  88. setTimeout(() => {
  89. uni.switchTab({ url: '/pages/index/index' })
  90. }, 500)
  91. }
  92. } catch (e) {
  93. uni.hideLoading()
  94. uni.showToast({ title: e.message || '登录失败', icon: 'none' })
  95. }
  96. }
  97. </script>
  98. <style scoped lang="scss">
  99. .page-login {
  100. min-height: 100vh;
  101. background: linear-gradient(180deg, #F8F9FF 0%, #EEF2FF 100%);
  102. display: flex;
  103. align-items: center;
  104. justify-content: center;
  105. padding: 0 24px;
  106. }
  107. .login-card {
  108. background: #fff;
  109. border-radius: 20px;
  110. padding: 40px 28px 32px;
  111. box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  112. width: 100%;
  113. max-width: 360px;
  114. }
  115. .logo-area {
  116. text-align: center;
  117. margin-bottom: 32px;
  118. }
  119. .logo-icon {
  120. font-size: 48px;
  121. display: block;
  122. margin-bottom: 8px;
  123. }
  124. .logo-title {
  125. font-size: 22px;
  126. font-weight: 700;
  127. color: #1F2937;
  128. display: block;
  129. }
  130. .logo-desc {
  131. font-size: 13px;
  132. color: #9CA3AF;
  133. display: block;
  134. margin-top: 4px;
  135. }
  136. .features {
  137. margin-bottom: 28px;
  138. }
  139. .feature-item {
  140. display: flex;
  141. align-items: center;
  142. margin-bottom: 12px;
  143. }
  144. .feature-icon {
  145. font-size: 16px;
  146. margin-right: 8px;
  147. }
  148. .feature-text {
  149. font-size: 14px;
  150. color: #6B7280;
  151. }
  152. .wechat-btn {
  153. width: 100%;
  154. height: 48px;
  155. background: linear-gradient(135deg, #4A148C, #7B2DC8);
  156. color: #fff;
  157. border: none;
  158. border-radius: 12px;
  159. font-size: 17px;
  160. font-weight: 600;
  161. line-height: 48px;
  162. text-align: center;
  163. }
  164. .agreement {
  165. display: block;
  166. text-align: center;
  167. font-size: 12px;
  168. color: #9CA3AF;
  169. margin-top: 16px;
  170. }
  171. </style>