69 lines
2.4 KiB
Vue
69 lines
2.4 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view class="header">
|
|
<text class="logo">🏭</text>
|
|
<text class="title">Track</text>
|
|
<text class="version">T1.0.0</text>
|
|
</view>
|
|
|
|
<view class="form">
|
|
<input v-model="username" class="input" placeholder="用户名" />
|
|
<input v-model="password" class="input" type="password" placeholder="密码" />
|
|
<button class="login-btn" @tap="handleLogin" :disabled="loading">
|
|
{{ loading ? '登录中...' : '登 录' }}
|
|
</button>
|
|
<text v-if="error" class="error">{{ error }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import { post } from "../../utils/request";
|
|
|
|
const username = ref("");
|
|
const password = ref("");
|
|
const loading = ref(false);
|
|
const error = ref("");
|
|
|
|
async function handleLogin() {
|
|
if (!username.value || !password.value) {
|
|
error.value = "请输入用户名和密码";
|
|
return;
|
|
}
|
|
loading.value = true;
|
|
error.value = "";
|
|
try {
|
|
const res = await post("/auth/login", {
|
|
username: username.value,
|
|
password: password.value,
|
|
});
|
|
// 保存 Token + 用户信息
|
|
uni.setStorageSync("token", res.access_token);
|
|
uni.setStorageSync("user", JSON.stringify(res.user));
|
|
uni.showToast({ title: "登录成功", icon: "success" });
|
|
// 跳转到扫码页
|
|
setTimeout(() => {
|
|
uni.switchTab({ url: "/pages/scan/index" });
|
|
}, 500);
|
|
} catch {
|
|
// request.js 已弹 toast
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; background: #f3f4f6; }
|
|
.header { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; }
|
|
.logo { font-size: 64px; }
|
|
.title { font-size: 20px; font-weight: 700; color: #1f2937; margin-top: 12px; }
|
|
.version { font-size: 12px; color: #9ca3af; margin-top: 4px; }
|
|
.form { width: 100%; max-width: 320px; }
|
|
.input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 15px; background: #fff; margin-bottom: 12px; box-sizing: border-box; }
|
|
.login-btn { width: 100%; height: 48px; background: #2563EB; color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; line-height: 48px; }
|
|
.login-btn[disabled] { opacity: 0.6; }
|
|
.error { display: block; text-align: center; color: #dc2626; font-size: 13px; margin-top: 12px; }
|
|
</style>
|