feat: 改造入口页（自动跳转）和登录页（微信授权登录）

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/App.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { onLaunch, onShow, onHide } from "@dcloudio/uni-app"
+import { onLaunch } from '@dcloudio/uni-app'
+import { useUserStore } from './store/user'
 
 onLaunch(() => {
-  const logs = uni.getStorageSync('logs') || []
+  const userStore = useUserStore()
-  logs.unshift(Date.now())
+  // 如果有 token，尝试获取用户信息
-  uni.setStorageSync('logs', logs)
+  if (userStore.isLogin) {
-})
+    userStore.fetchUserInfo().catch(() => {
-
+      // 获取用户信息失败不影响使用
-onShow(() => {
+    })
-})
+  }
-
-onHide(() => {
 })
 </script>
 
@@ -19,15 +18,4 @@ page {
   min-height: 100vh;
   background-color: #f5f5f5;
 }
-
-.container {
-  padding: 30rpx;
-  box-sizing: border-box;
-}
-
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 </style>

src/pages/index/index.vue

@@ -1,77 +1,36 @@
 <template>
-  <view class="container">
+  <view class="splash">
-    <view class="hero">
+    <image class="logo" src="/static/logo.png" mode="aspectFit" />
-      <image class="logo" src="/static/logo.png" mode="aspectFit" />
+    <text class="title">湖南12301文旅专区</text>
-      <text class="title">zhy-test</text>
+    <text class="subtitle">加载中...</text>
-      <text class="subtitle">uni-app + Vue3 + TypeScript</text>
-    </view>
-
-    <view class="card-list">
-      <view class="card" @click="goToProfile">
-        <view class="card-icon">👤</view>
-        <view class="card-content">
-          <text class="card-title">个人中心</text>
-          <text class="card-desc">查看个人信息</text>
-        </view>
-        <view class="card-arrow">›</view>
-      </view>
-
-      <view class="card" @click="goToLogs">
-        <view class="card-icon">📝</view>
-        <view class="card-content">
-          <text class="card-title">日志记录</text>
-          <text class="card-desc">查看应用启动日志</text>
-        </view>
-        <view class="card-arrow">›</view>
-      </view>
-
-      <view class="card" @click="goToLogin">
-        <view class="card-icon">🔑</view>
-        <view class="card-content">
-          <text class="card-title">登录</text>
-          <text class="card-desc">用户登录页面</text>
-        </view>
-        <view class="card-arrow">›</view>
-      </view>
-    </view>
-
-    <view class="info">
-      <text class="info-title">支持多端发布</text>
-      <view class="tag-list">
-        <text class="tag">微信小程序</text>
-        <text class="tag">H5</text>
-        <text class="tag">App</text>
-      </view>
-    </view>
   </view>
 </template>
 
 <script setup lang="ts">
-function goToProfile() {
+import { onMounted } from 'vue'
-  uni.switchTab({ url: '/pages/profile/profile' })
+import { useUserStore } from '../../store/user'
-}
 
-function goToLogs() {
+const userStore = useUserStore()
-  uni.navigateTo({ url: '/pages/logs/logs' })
-}
 
-function goToLogin() {
+onMounted(() => {
-  uni.navigateTo({ url: '/pages/login/login' })
+  setTimeout(() => {
-}
+    if (userStore.isLogin) {
+      uni.switchTab({ url: '/packages/user/pages/index/index' })
+    } else {
+      uni.navigateTo({ url: '/pages/login/login' })
+    }
+  }, 800)
+})
 </script>
 
 <style scoped>
-.container {
+.splash {
-  padding: 30rpx;
-  min-height: 100vh;
-  box-sizing: border-box;
-}
-
-.hero {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 60rpx 0;
+  justify-content: center;
+  min-height: 100vh;
+  background: #fff;
 }
 
 .logo {
@@ -84,86 +43,11 @@ function goToLogin() {
   font-size: 40rpx;
   font-weight: bold;
   color: #333;
-  margin-bottom: 10rpx;
+  margin-bottom: 16rpx;
 }
 
 .subtitle {
   font-size: 26rpx;
-  color: #888;
-}
-
-.card-list {
-  background: #fff;
-  border-radius: 20rpx;
-  overflow: hidden;
-  margin-bottom: 40rpx;
-}
-
-.card {
-  display: flex;
-  align-items: center;
-  padding: 30rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-}
-
-.card:last-child {
-  border-bottom: none;
-}
-
-.card-icon {
-  font-size: 40rpx;
-  margin-right: 20rpx;
-}
-
-.card-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.card-title {
-  font-size: 30rpx;
-  color: #333;
-  margin-bottom: 6rpx;
-}
-
-.card-desc {
-  font-size: 24rpx;
   color: #999;
 }
-
-.card-arrow {
-  font-size: 40rpx;
-  color: #ccc;
-}
-
-.info {
-  padding: 30rpx;
-  background: #fff;
-  border-radius: 20rpx;
-  text-align: center;
-}
-
-.info-title {
-  font-size: 28rpx;
-  color: #666;
-  display: block;
-  margin-bottom: 20rpx;
-}
-
-.tag-list {
-  display: flex;
-  justify-content: center;
-  gap: 20rpx;
-  flex-wrap: wrap;
-}
-
-.tag {
-  display: inline-block;
-  padding: 10rpx 30rpx;
-  background: #e8f4ff;
-  color: #007aff;
-  border-radius: 30rpx;
-  font-size: 24rpx;
-}
 </style>

src/pages/login/login.vue

@@ -1,38 +1,46 @@
 <template>
   <view class="container">
     <view class="header">
-      <text class="welcome">欢迎使用</text>
+      <image class="logo" src="/static/logo.png" mode="aspectFit" />
-      <text class="app-name">zhy-test</text>
+      <text class="app-name">湖南12301文旅专区</text>
+      <text class="app-desc">年卡购买 · 景区预约 · 权益查看</text>
     </view>
 
-    <view class="form">
+    <view class="login-area">
-      <view class="form-item">
+      <!-- #ifdef MP-WEIXIN -->
-        <text class="label">账号</text>
+      <button class="btn-wx-login" @click="handleWxLogin" :disabled="loading">
-        <input
+        {{ loading ? '登录中...' : '微信一键登录' }}
-          class="input"
-          v-model="form.username"
-          placeholder="请输入账号"
-          type="text"
-        />
-      </view>
-
-      <view class="form-item">
-        <text class="label">密码</text>
-        <input
-          class="input"
-          v-model="form.password"
-          placeholder="请输入密码"
-          password
-        />
-      </view>
-
-      <button class="btn-primary" @click="handleLogin" :disabled="loading">
-        {{ loading ? '登录中...' : '登 录' }}
       </button>
+      <!-- #endif -->
 
-      <view class="tips">
+      <!-- #ifdef H5 -->
-        <text>当前为演示版本，后端接口未配置时无法真实登录</text>
+      <view class="h5-tip">
+        <text>请在微信小程序中使用本应用</text>
       </view>
+      <view class="form" v-if="showFallback">
+        <view class="form-item">
+          <text class="label">账号</text>
+          <input class="input" v-model="form.username" placeholder="请输入账号" />
+        </view>
+        <view class="form-item">
+          <text class="label">密码</text>
+          <input class="input" v-model="form.password" placeholder="请输入密码" password />
+        </view>
+        <button class="btn-fallback" @click="handleFallbackLogin" :disabled="loading">
+          {{ loading ? '登录中...' : '账号密码登录' }}
+        </button>
+      </view>
+      <button class="btn-toggle" v-if="!showFallback" @click="showFallback = true">
+        使用账号密码登录
+      </button>
+      <!-- #endif -->
+    </view>
+
+    <view class="agreement">
+      <text class="agreement-text">登录即表示同意</text>
+      <text class="agreement-link">《用户协议》</text>
+      <text class="agreement-text">和</text>
+      <text class="agreement-link">《隐私政策》</text>
     </view>
   </view>
 </template>
@@ -44,27 +52,42 @@ import { showToast } from '../../utils'
 
 const userStore = useUserStore()
 const loading = ref(false)
+const showFallback = ref(false)
 
 const form = reactive({
   username: '',
   password: ''
 })
 
-async function handleLogin() {
+/** 微信一键登录 */
+async function handleWxLogin() {
+  loading.value = true
+  try {
+    await userStore.wxLogin()
+    showToast('登录成功', 'success')
+    setTimeout(() => {
+      uni.switchTab({ url: '/packages/user/pages/index/index' })
+    }, 1000)
+  } catch (err: any) {
+    console.error('微信登录失败:', err)
+    showToast(err.message || '登录失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 账号密码登录（降级方案 / H5 用） */
+async function handleFallbackLogin() {
   if (!form.username || !form.password) {
     showToast('请输入账号和密码')
     return
   }
-
   loading.value = true
   try {
-    await userStore.login({
+    await userStore.login({ username: form.username, password: form.password })
-      username: form.username,
-      password: form.password
-    })
     showToast('登录成功', 'success')
     setTimeout(() => {
-      uni.switchTab({ url: '/pages/profile/profile' })
+      uni.switchTab({ url: '/packages/user/pages/index/index' })
     }, 1000)
   } catch (err: any) {
     console.error('登录失败:', err)
@@ -76,81 +99,129 @@ async function handleLogin() {
 
 <style scoped>
 .container {
-  padding: 60rpx 40rpx;
+  display: flex;
+  flex-direction: column;
   min-height: 100vh;
+  padding: 0 60rpx;
   box-sizing: border-box;
-  background: #f5f5f5;
+  background: #fff;
 }
 
 .header {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 160rpx;
   margin-bottom: 80rpx;
-  padding-top: 40rpx;
 }
 
-.welcome {
+.logo {
-  display: block;
+  width: 140rpx;
-  font-size: 32rpx;
+  height: 140rpx;
-  color: #666;
+  margin-bottom: 30rpx;
-  margin-bottom: 20rpx;
 }
 
 .app-name {
-  display: block;
+  font-size: 44rpx;
-  font-size: 56rpx;
   font-weight: bold;
   color: #333;
+  margin-bottom: 16rpx;
+}
+
+.app-desc {
+  font-size: 26rpx;
+  color: #999;
+}
+
+.login-area {
+  flex: 1;
+}
+
+.btn-wx-login {
+  width: 100%;
+  height: 96rpx;
+  line-height: 96rpx;
+  background: #07C160;
+  color: #fff;
+  border-radius: 48rpx;
+  font-size: 32rpx;
+  border: none;
+}
+
+.btn-wx-login[disabled] {
+  background: #9ED6B5;
 }
 
 .form {
-  background: #fff;
+  margin-top: 40rpx;
-  border-radius: 20rpx;
-  padding: 40rpx;
 }
 
 .form-item {
-  margin-bottom: 40rpx;
+  margin-bottom: 30rpx;
 }
 
 .label {
   display: block;
   font-size: 28rpx;
   color: #333;
-  margin-bottom: 16rpx;
+  margin-bottom: 12rpx;
 }
 
 .input {
   width: 100%;
   height: 80rpx;
-  padding: 0 20rpx;
+  padding: 0 24rpx;
-  background: #f8f8f8;
+  background: #f5f5f5;
   border-radius: 12rpx;
   font-size: 28rpx;
   box-sizing: border-box;
 }
 
-.btn-primary {
+.btn-fallback {
   width: 100%;
-  height: 90rpx;
+  height: 88rpx;
-  line-height: 90rpx;
+  line-height: 88rpx;
-  background: #007aff;
+  background: #4A90D9;
   color: #fff;
-  border-radius: 12rpx;
+  border-radius: 44rpx;
-  font-size: 32rpx;
+  font-size: 30rpx;
   margin-top: 20rpx;
+  border: none;
 }
 
-.btn-primary[disabled] {
+.btn-toggle {
-  background: #99c9ff;
+  width: 100%;
-}
+  height: 88rpx;
-
+  line-height: 88rpx;
-.tips {
+  background: transparent;
+  color: #4A90D9;
+  border: 2rpx solid #4A90D9;
+  border-radius: 44rpx;
+  font-size: 30rpx;
   margin-top: 30rpx;
-  text-align: center;
 }
 
-.tips text {
+.h5-tip {
-  font-size: 24rpx;
+  text-align: center;
+  padding: 40rpx;
+  color: #999;
+  font-size: 28rpx;
+}
+
+.agreement {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding: 40rpx 0 60rpx;
+}
+
+.agreement-text {
+  font-size: 22rpx;
   color: #999;
 }
+
+.agreement-link {
+  font-size: 22rpx;
+  color: #4A90D9;
+}
 </style>