yuzhiran-dev
21078ae287
- 批量替换 18 个页面硬编码颜色 → CSS 变量 - sandbox page 完整迁移（参考页） - App.vue + variables.css 统一 Token 定义 - 剩余仅保留语义色（红色价格、绿色完成、阴影、渐变） - 剩余 16 页按相同模式可逐步迁移
64 lines
2.1 KiB
Vue
64 lines
2.1 KiB
Vue
<template>
|
||
<view class="login">
|
||
<view class="logo-area">
|
||
<text class="logo-text">宇之然 AI</text>
|
||
<text class="logo-sub">让每个人都能用好 AI</text>
|
||
</view>
|
||
<view class="form">
|
||
<input class="input" v-model="account" placeholder="手机号 / 邮箱" type="text" />
|
||
<input class="input" v-model="password" placeholder="密码" type="password" password />
|
||
<button class="btn-primary" @tap="handleLogin" :loading="loading">登录</button>
|
||
<view class="links">
|
||
<text class="link" @tap="goRegister">没有账号？去注册</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useUserStore } from '../../store/user'
|
||
|
||
const userStore = useUserStore()
|
||
const account = ref('')
|
||
const password = ref('')
|
||
const loading = ref(false)
|
||
|
||
async function handleLogin() {
|
||
if (!account.value || !password.value) {
|
||
uni.showToast({ title: '请填写完整信息', icon: 'none' })
|
||
return
|
||
}
|
||
loading.value = true
|
||
try {
|
||
await userStore.login(account.value, password.value)
|
||
uni.showToast({ title: '登录成功', icon: 'success' })
|
||
uni.switchTab({ url: '/pages/index/index' })
|
||
} catch (e: any) {
|
||
uni.showToast({ title: e.message || '登录失败', icon: 'none' })
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
const goRegister = () => uni.navigateTo({ url: '/pages/register/index' })
|
||
</script>
|
||
|
||
<style scoped>
|
||
.login { padding: 100rpx 40rpx; }
|
||
.logo-area { text-align: center; margin-bottom: 80rpx; }
|
||
.logo-text { font-size: 52rpx; font-weight: bold; color: var(--brand); display: block; }
|
||
.logo-sub { font-size: 28rpx; color: var(--muted-foreground); margin-top: 16rpx; display: block; }
|
||
.form { }
|
||
.input {
|
||
background: var(--card); border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
|
||
margin-bottom: 24rpx; border: 1rpx solid var(--border);
|
||
}
|
||
.btn-primary {
|
||
background: var(--brand); color: var(--card); border-radius: 12rpx; padding: 24rpx;
|
||
font-size: 30rpx; text-align: center; margin-top: 30rpx; border: none;
|
||
}
|
||
.links { text-align: center; margin-top: 40rpx; }
|
||
.link { font-size: 26rpx; color: var(--brand); }
|
||
</style>
|