kevin/ops2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
kevin
2026-04-14 21:17:45 +08:00
parent 2953172227
commit 9ecab34b15
11 changed files with 449 additions and 922 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/ops_uniapp/pages/login/login.vue
+42 -219
View File
@@ -1,67 +1,70 @@
<template>
<view class="login-container">
<view class="min-h-screen bg-gradient-to-br from-purple-500 to-purple-800 px-6" :style="{ paddingTop: statusBarHeight + 'px' }">
<!-- 语言切换 -->
<view class="lang-switch">
<view class="flex justify-center items-center py-4">
<text
class="lang-btn"
:class="{ active: locale === 'zh' }"
class="text-sm px-2"
:class="locale === 'zh' ? 'text-white font-semibold' : 'text-white/60'"
@click="switchLang('zh')"
>中文</text>
<text class="lang-divider">|</text>
<text class="text-white/40 mx-1">|</text>
<text
class="lang-btn"
:class="{ active: locale === 'en' }"
class="text-sm px-2"
:class="locale === 'en' ? 'text-white font-semibold' : 'text-white/60'"
@click="switchLang('en')"
>EN</text>
</view>
<!-- Logo 区域 -->
<view class="logo-section">
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
<text class="app-name">OPS</text>
<text class="app-desc">{{ t('login.title') }}</text>
<view class="flex flex-col items-center mb-16">
<image class="w-20 h-20 rounded-2xl bg-white shadow-lg" src="/static/logo.png" mode="aspectFit"></image>
<text class="text-4xl font-bold text-white mt-4 tracking-wider">OPS</text>
<text class="text-sm text-white/80 mt-2">{{ t('login.title') }}</text>
</view>
<!-- 登录表单 -->
<view class="form-section">
<view class="input-group">
<text class="input-label">{{ t('login.username') }}</text>
<view class="bg-white rounded-3xl p-8 shadow-xl">
<view class="mb-6">
<text class="block text-sm font-medium mb-3" style="color: #1f2937">{{ t('login.username') }}</text>
<input
class="input-field"
class="w-full h-11 rounded-xl px-4 text-base"
style="background: #f3f4f6; color: #1f2937"
type="text"
v-model="form.username"
:placeholder="t('login.usernamePlaceholder')"
placeholder-class="placeholder"
placeholder-class="placeholder-gray"
@confirm="handleLogin"
/>
</view>
<view class="input-group">
<text class="input-label">{{ t('login.password') }}</text>
<view class="mb-6 relative">
<text class="block text-sm font-medium mb-3" style="color: #1f2937">{{ t('login.password') }}</text>
<input
class="input-field"
class="w-full h-11 rounded-xl px-4 text-base pr-10"
style="background: #f3f4f6; color: #1f2937"
:type="showPassword ? 'text' : 'password'"
v-model="form.password"
:placeholder="t('login.passwordPlaceholder')"
placeholder-class="placeholder"
placeholder-class="placeholder-gray"
@confirm="handleLogin"
/>
<view class="password-toggle" @click="showPassword = !showPassword">
<view class="absolute right-3 bottom-2.5 text-xl" @click="showPassword = !showPassword">
<text>{{ showPassword ? '👁️' : '👁️‍🗨️' }}</text>
</view>
</view>
<view class="remember-row">
<view class="mb-8 flex items-center">
<checkbox-group @change="onRememberChange">
<label class="remember-label">
<checkbox value="1" :checked="form.remember" color="#007AFF" />
<text>{{ t('login.rememberMe') }}</text>
<label class="flex items-center text-sm" style="color: #6b7280">
<checkbox value="1" :checked="form.remember" color="#667eea" />
<text class="ml-2">{{ t('login.rememberMe') }}</text>
</label>
</checkbox-group>
</view>
<button
class="login-btn"
class="w-full h-12 rounded-full flex items-center justify-center font-semibold text-lg"
:style="{ background: 'linear-gradient(to right, #667eea, #764ba2)', color: '#fff' }"
:loading="loading"
:disabled="loading"
@click="handleLogin"
@@ -69,29 +72,27 @@
{{ loading ? t('login.logging') : t('login.loginBtn') }}
</button>
<view class="error-tip" v-if="errorMsg">
<text>{{ errorMsg }}</text>
<view class="mt-4 p-4 rounded-xl text-center" style="background: #fef2f2" v-if="errorMsg">
<text class="text-sm" style="color: #ef4444">{{ errorMsg }}</text>
</view>
</view>
<!-- 底部信息 -->
<view class="footer-section">
<text class="footer-text">{{ t('login.registerLink') }}</text>
<navigator url="/pages/register/register" class="link">{{ t('register.title') }}</navigator>
<view class="flex justify-center items-end pb-8 mt-8">
<text class="text-sm text-white/80">{{ t('login.registerLink') }}</text>
<navigator url="/pages/register/register" class="text-sm text-white font-semibold ml-1">{{ t('register.title') }}</navigator>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { setLocale, getCurrentLocale } from '../../locales/index.js'
const { t, locale } = useI18n()
// 响应式数据
const statusBarHeight = ref(20)
const form = reactive({
username: '',
password: '',
@@ -102,18 +103,15 @@ const showPassword = ref(false)
const loading = ref(false)
const errorMsg = ref('')
// 切换语言
const switchLang = (lang) => {
setLocale(lang)
locale.value = lang
}
// 记住密码勾选
const onRememberChange = (e) => {
form.remember = e.detail.value.length > 0
}
// 表单验证
const validate = () => {
if (!form.username.trim()) {
errorMsg.value = t('login.usernameRequired')
@@ -127,7 +125,6 @@ const validate = () => {
return true
}
// 登录处理
const handleLogin = () => {
if (!validate()) return
@@ -147,14 +144,10 @@ const handleLogin = () => {
},
success: (res) => {
if (res.data.code === 0 && res.data.data && res.data.data.cookie) {
// 登录成功
const cookie = res.data.data.cookie
// 保存 cookie 到本地
uni.setStorageSync('sessionCookie', cookie.Value)
uni.setStorageSync('userInfo', res.data.data)
// 处理记住密码
if (form.remember) {
uni.setStorageSync('savedUsername', form.username)
uni.setStorageSync('savedRemember', true)
@@ -169,14 +162,12 @@ const handleLogin = () => {
duration: 1500
})
// 跳转到首页
setTimeout(() => {
uni.switchTab({
url: '/pages/index/index'
})
}, 1500)
} else {
// 登录失败
const msgMap = {
userNameNoFund: t('login.usernameNotFound'),
userPassIncorrect: t('login.passwordIncorrect'),
@@ -196,12 +187,12 @@ const handleLogin = () => {
})
}
// 生命周期
onMounted(() => {
// 同步当前语言
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight || 20
locale.value = getCurrentLocale()
// 从本地存储读取记住的登录状态
const savedUsername = uni.getStorageSync('savedUsername')
const savedRemember = uni.getStorageSync('savedRemember')
if (savedUsername && savedRemember) {
@@ -209,7 +200,6 @@ onMounted(() => {
form.remember = true
}
// 监听语言切换
uni.$on('localeChanged', (lang) => {
locale.value = lang
})
@@ -220,175 +210,8 @@ onUnmounted(() => {
})
</script>
<style lang="scss" scoped>
.login-container {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 80rpx 60rpx;
display: flex;
flex-direction: column;
}
.lang-switch {
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx;
}
.lang-btn {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.6);
padding: 8rpx 16rpx;
&.active {
color: #fff;
font-weight: 600;
}
}
.lang-divider {
color: rgba(255, 255, 255, 0.4);
margin: 0 8rpx;
}
.logo-section {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 80rpx;
}
.logo {
width: 160rpx;
height: 160rpx;
border-radius: 32rpx;
background-color: #fff;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}
.app-name {
font-size: 56rpx;
font-weight: 700;
color: #fff;
margin-top: 24rpx;
letter-spacing: 4rpx;
}
.app-desc {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.8);
margin-top: 8rpx;
}
.form-section {
background-color: #fff;
border-radius: 24rpx;
padding: 48rpx 40rpx;
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
}
.input-group {
margin-bottom: 32rpx;
position: relative;
}
.input-label {
display: block;
font-size: 28rpx;
color: #333;
font-weight: 500;
margin-bottom: 16rpx;
}
.input-field {
width: 100%;
height: 88rpx;
background-color: #f5f5f5;
border-radius: 16rpx;
padding: 0 32rpx;
font-size: 30rpx;
color: #333;
}
.placeholder {
color: #999;
}
.password-toggle {
position: absolute;
right: 24rpx;
bottom: 24rpx;
font-size: 36rpx;
}
.remember-row {
margin-bottom: 40rpx;
}
.remember-label {
display: flex;
align-items: center;
font-size: 28rpx;
color: #666;
}
.login-btn {
width: 100%;
height: 96rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 34rpx;
font-weight: 600;
border-radius: 48rpx;
display: flex;
align-items: center;
justify-content: center;
border: none;
&::after {
border: none;
}
&:active {
opacity: 0.9;
}
&[disabled] {
opacity: 0.6;
}
}
.error-tip {
margin-top: 24rpx;
padding: 20rpx;
background-color: #fff5f5;
border-radius: 12rpx;
text-align: center;
text {
color: #e53935;
font-size: 26rpx;
}
}
.footer-section {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 40rpx;
}
.footer-text {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.8);
}
.link {
font-size: 28rpx;
color: #fff;
font-weight: 600;
margin-left: 8rpx;
<style>
.placeholder-gray {
color: #9ca3af;
}
</style>