sc
This commit is contained in:
qsh
@@ -10,9 +10,9 @@ VITE_APP_PHONE = 18056811878
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 寻驾/开发环境
|
||||
VITE_APP_BASE_API = 'https://cloud.ahduima.com/'
|
||||
# VITE_APP_BASE_API = 'https://cloud.ahduima.com/'
|
||||
# VITE_APP_BASE_API = 'https://xj.ahduima.com/'
|
||||
# VITE_APP_BASE_API = 'http://localhost:8889/'
|
||||
VITE_APP_BASE_API = 'http://localhost:48080'
|
||||
#
|
||||
VITE_WEB_BASE_URL = 'https://xj.ahduima.com'
|
||||
# VITE_WEB_BASE_URL = 'https://xj.ahduima.com'
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
import request from '@/utils/request'
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 登录方法
|
||||
export function login(username, password, code, uuid) {
|
||||
export function login(username, password) {
|
||||
const data = {
|
||||
username,
|
||||
password,
|
||||
code,
|
||||
uuid
|
||||
}
|
||||
password
|
||||
};
|
||||
return request({
|
||||
'url': '/login',
|
||||
url: '/system/auth/login',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
'method': 'post',
|
||||
'data': data
|
||||
})
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
// 注册方法
|
||||
@@ -27,33 +25,33 @@ export function register(data) {
|
||||
},
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 获取用户详细信息
|
||||
export function getInfo() {
|
||||
return request({
|
||||
'url': '/getInfo',
|
||||
'method': 'get'
|
||||
})
|
||||
url: '/system/auth/get-permission-info',
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
// 退出方法
|
||||
export function logout() {
|
||||
return request({
|
||||
'url': '/logout',
|
||||
'method': 'post'
|
||||
})
|
||||
url: '/logout',
|
||||
method: 'post'
|
||||
});
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
export function getCodeImg() {
|
||||
return request({
|
||||
'url': '/captchaImage',
|
||||
url: '/captchaImage',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
method: 'get',
|
||||
timeout: 20000
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,26 +1,13 @@
|
||||
// 应用全局配置
|
||||
export default {
|
||||
baseUrl: 'https://vue.ruoyi.vip/prod-api',
|
||||
// baseUrl: 'http://localhost:8080',
|
||||
baseUrl: import.meta.env.VITE_APP_BASE_API + '/admin-api',
|
||||
// 应用信息
|
||||
appInfo: {
|
||||
// 应用名称
|
||||
name: '小程序管理后台',
|
||||
// 应用版本
|
||||
version: '1.2.0',
|
||||
version: '1.0.0',
|
||||
// 应用logo
|
||||
logo: '/static/logo.png',
|
||||
// 官方网站
|
||||
// 政策协议
|
||||
agreements: [
|
||||
{
|
||||
title: '隐私政策',
|
||||
url: 'https://ruoyi.vip/protocol.html'
|
||||
},
|
||||
{
|
||||
title: '用户服务协议',
|
||||
url: 'https://ruoyi.vip/protocol.html'
|
||||
}
|
||||
]
|
||||
logo: '/static/logo.png'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,213 +1,582 @@
|
||||
<template>
|
||||
<view class="normal-login-container">
|
||||
<view class="logo-content align-center justify-center flex">
|
||||
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
|
||||
</image>
|
||||
<text class="title">寻驾小程序管理</text>
|
||||
</view>
|
||||
<view class="login-form-content">
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-user icon"></view>
|
||||
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
|
||||
</view>
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-password icon"></view>
|
||||
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
|
||||
</view>
|
||||
<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
|
||||
<view class="iconfont icon-code icon"></view>
|
||||
<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
|
||||
<view class="login-code">
|
||||
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action-btn">
|
||||
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
|
||||
</view>
|
||||
<view class="reg text-center" v-if="register">
|
||||
<text class="text-grey1">没有账号？</text>
|
||||
<text @click="handleUserRegister" class="text-blue">立即注册</text>
|
||||
</view>
|
||||
<view class="xieyi text-center">
|
||||
<text class="text-grey1">登录即代表同意</text>
|
||||
<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
|
||||
<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
|
||||
</view>
|
||||
<view class="login-container">
|
||||
<!-- 背景装饰 -->
|
||||
<view class="background-decoration">
|
||||
<view class="bg-circle bg-circle-1"></view>
|
||||
<view class="bg-circle bg-circle-2"></view>
|
||||
<view class="bg-circle bg-circle-3"></view>
|
||||
</view>
|
||||
|
||||
<!-- 登录卡片 -->
|
||||
<view class="login-card">
|
||||
<!-- logo和标题 -->
|
||||
<view class="logo-section">
|
||||
<view class="logo-wrapper">
|
||||
<text class="car-icon">🚗</text>
|
||||
</view>
|
||||
<view class="title-section">
|
||||
<text class="app-title">小程序管理系统</text>
|
||||
<text class="app-subtitle">欢迎回来，请登录您的账号</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<view class="form-section">
|
||||
<!-- 账号输入 -->
|
||||
<view class="form-group">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">
|
||||
<text class="icon">👤</text>
|
||||
</view>
|
||||
<input
|
||||
v-model="loginForm.username"
|
||||
class="form-input"
|
||||
type="text"
|
||||
placeholder="请输入账号"
|
||||
placeholder-class="input-placeholder"
|
||||
maxlength="30"
|
||||
@focus="onInputFocus('username')"
|
||||
@blur="onInputBlur('username')"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 密码输入 -->
|
||||
<view class="form-group">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">
|
||||
<text class="icon">🔒</text>
|
||||
</view>
|
||||
<input
|
||||
v-model="loginForm.password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
class="form-input"
|
||||
placeholder="请输入密码"
|
||||
placeholder-class="input-placeholder"
|
||||
maxlength="20"
|
||||
@focus="onInputFocus('password')"
|
||||
@blur="onInputBlur('password')"
|
||||
/>
|
||||
<view class="password-toggle" @click="togglePasswordVisibility">
|
||||
<text class="icon">{{ showPassword ? '👁️' : '👁️🗨️' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 记住密码 -->
|
||||
<view class="form-options">
|
||||
<view class="remember-password">
|
||||
<checkbox
|
||||
:checked="rememberPassword"
|
||||
@change="handleCheckboxChange"
|
||||
class="checkbox"
|
||||
/>
|
||||
<text class="checkbox-label">记住密码</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<view class="action-section">
|
||||
<button
|
||||
@click="handleLogin"
|
||||
class="login-btn"
|
||||
:disabled="isLoggingIn"
|
||||
>
|
||||
<text v-if="!isLoggingIn">登录</text>
|
||||
<text v-else>登录中...</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 注册链接 -->
|
||||
<view class="register-section" v-if="register">
|
||||
<text class="register-text">
|
||||
没有账号？
|
||||
<text @click="handleUserRegister" class="register-link">立即注册</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 版权信息 -->
|
||||
<view class="copyright-section">
|
||||
<text class="copyright-text">© 2026 寻驾小程序管理系统</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, getCurrentInstance } from "vue"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
import { ref, getCurrentInstance, onMounted } from "vue"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { getCodeImg } from '@/api/login'
|
||||
import { useConfigStore, useUserStore } from '@/store'
|
||||
import { useUserStore } from '@/store'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const globalConfig = useConfigStore().config
|
||||
const codeUrl = ref("")
|
||||
// 验证码开关
|
||||
const captchaEnabled = ref(true)
|
||||
// 用户注册开关
|
||||
const register = ref(false)
|
||||
|
||||
// 表单状态
|
||||
const loginForm = ref({
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
code: "",
|
||||
uuid: ""
|
||||
username: "17318531354",
|
||||
password: "888888"
|
||||
})
|
||||
|
||||
// UI状态
|
||||
const register = ref(false)
|
||||
const showPassword = ref(false)
|
||||
const rememberPassword = ref(false)
|
||||
const isLoggingIn = ref(false)
|
||||
const focusedInput = ref('')
|
||||
|
||||
// 输入框聚焦
|
||||
function onInputFocus(inputName) {
|
||||
focusedInput.value = inputName
|
||||
}
|
||||
|
||||
// 输入框失焦
|
||||
function onInputBlur(inputName) {
|
||||
focusedInput.value = ''
|
||||
}
|
||||
|
||||
// 切换密码可见性
|
||||
function togglePasswordVisibility() {
|
||||
showPassword.value = !showPassword.value
|
||||
}
|
||||
|
||||
// 处理复选框变化
|
||||
function handleCheckboxChange(e) {
|
||||
rememberPassword.value = e.detail.value
|
||||
}
|
||||
|
||||
// 用户注册
|
||||
function handleUserRegister() {
|
||||
proxy.$tab.redirectTo(`/pages/register`)
|
||||
}
|
||||
|
||||
// 隐私协议
|
||||
function handlePrivacy() {
|
||||
let site = globalConfig.appInfo.agreements[0]
|
||||
proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
|
||||
}
|
||||
|
||||
// 用户协议
|
||||
function handleUserAgrement() {
|
||||
let site = globalConfig.appInfo.agreements[1]
|
||||
proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
|
||||
}
|
||||
|
||||
// 获取图形验证码
|
||||
function getCode() {
|
||||
getCodeImg().then(res => {
|
||||
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
||||
if (captchaEnabled.value) {
|
||||
codeUrl.value = 'data:image/gif;base64,' + res.img
|
||||
loginForm.value.uuid = res.uuid
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 登录方法
|
||||
async function handleLogin() {
|
||||
// 表单验证
|
||||
if (loginForm.value.username === "") {
|
||||
proxy.$modal.msgError("请输入账号")
|
||||
} else if (loginForm.value.password === "") {
|
||||
proxy.$modal.msgError("请输入密码")
|
||||
} else if (loginForm.value.code === "" && captchaEnabled.value) {
|
||||
proxy.$modal.msgError("请输入验证码")
|
||||
} else {
|
||||
proxy.$modal.loading("登录中，请耐心等待...")
|
||||
pwdLogin()
|
||||
uni.showToast({
|
||||
title: "请输入账号",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (loginForm.value.password === "") {
|
||||
uni.showToast({
|
||||
title: "请输入密码",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 开始登录
|
||||
isLoggingIn.value = true
|
||||
|
||||
try {
|
||||
// 调用登录接口
|
||||
await useUserStore().login(loginForm.value)
|
||||
|
||||
// 登录成功，获取用户信息
|
||||
await useUserStore().getInfo()
|
||||
|
||||
// 保存密码
|
||||
if (rememberPassword.value) {
|
||||
uni.setStorageSync('savedUser', {
|
||||
username: loginForm.value.username,
|
||||
password: loginForm.value.password
|
||||
})
|
||||
} else {
|
||||
uni.removeStorageSync('savedUser')
|
||||
}
|
||||
|
||||
// 跳转到首页
|
||||
proxy.$tab.reLaunch('/pages/index')
|
||||
} catch (error) {
|
||||
// 登录失败
|
||||
uni.showToast({
|
||||
title: error.message || "登录失败，请重试",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
} finally {
|
||||
// 结束登录状态
|
||||
isLoggingIn.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 密码登录
|
||||
async function pwdLogin() {
|
||||
useUserStore().login(loginForm.value).then(() => {
|
||||
proxy.$modal.closeLoading()
|
||||
loginSuccess()
|
||||
}).catch(() => {
|
||||
if (captchaEnabled.value) {
|
||||
getCode()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 登录成功后，处理函数
|
||||
function loginSuccess(result) {
|
||||
// 设置用户信息
|
||||
useUserStore().getInfo().then(res => {
|
||||
proxy.$tab.reLaunch('/pages/index')
|
||||
})
|
||||
}
|
||||
|
||||
// 页面加载
|
||||
onLoad(() => {
|
||||
//#ifdef H5
|
||||
if (getToken()) {
|
||||
proxy.$tab.switchTab('/pages/index')
|
||||
}
|
||||
//#endif
|
||||
|
||||
// 读取本地存储的密码
|
||||
const savedUser = uni.getStorageSync('savedUser')
|
||||
if (savedUser) {
|
||||
loginForm.value.username = savedUser.username || ''
|
||||
loginForm.value.password = savedUser.password || ''
|
||||
rememberPassword.value = true
|
||||
}
|
||||
})
|
||||
|
||||
getCode()
|
||||
// 页面挂载
|
||||
onMounted(() => {
|
||||
// 可以在这里添加一些页面加载时的动画效果
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 全局样式 */
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
background-color: #f8f9fa;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.normal-login-container {
|
||||
/* 登录容器 */
|
||||
.login-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.logo-content {
|
||||
width: 100%;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
padding-top: 15%;
|
||||
/* 背景装饰 */
|
||||
.background-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.bg-circle-1 {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
background-color: #409eff;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.bg-circle-2 {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background-color: #67c23a;
|
||||
top: 60%;
|
||||
right: 15%;
|
||||
animation: float 8s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
.bg-circle-3 {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
background-color: #e6a23c;
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation: float 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20rpx) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 登录卡片 */
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 700rpx;
|
||||
min-height: 1200rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.1);
|
||||
padding: 80rpx 50rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(40rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Logo部分 */
|
||||
.logo-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 24rpx;
|
||||
background-color: #ecf5ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
.car-icon {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 表单部分 */
|
||||
.form-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f9f9f9;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
height: 90rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input-wrapper:focus-within {
|
||||
border-color: #409eff;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 0 8rpx rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 表单选项 */
|
||||
.form-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.remember-password {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 26rpx;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 操作部分 */
|
||||
.action-section {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #409eff;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 16rpx;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
background-color: #66b1ff;
|
||||
}
|
||||
|
||||
.login-btn:active {
|
||||
background-color: #3a8ee6;
|
||||
transform: translateY(2rpx);
|
||||
}
|
||||
|
||||
.login-btn:disabled {
|
||||
background-color: #a0cfff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 注册部分 */
|
||||
.register-section {
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.register-text {
|
||||
font-size: 24rpx;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
/* 协议部分 */
|
||||
.agreement-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 20rpx;
|
||||
color: #909399;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.agreement-link {
|
||||
color: #409eff;
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
|
||||
/* 版权信息 */
|
||||
.copyright-section {
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
font-size: 20rpx;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.login-card {
|
||||
padding: 48rpx 32rpx;
|
||||
}
|
||||
|
||||
.login-form-content {
|
||||
text-align: center;
|
||||
margin: 20px auto;
|
||||
margin-top: 15%;
|
||||
width: 80%;
|
||||
.app-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.input-item {
|
||||
margin: 20px auto;
|
||||
background-color: #f5f6f7;
|
||||
height: 45px;
|
||||
border-radius: 20px;
|
||||
.app-subtitle {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 38rpx;
|
||||
margin-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
.input-wrapper {
|
||||
height: 84rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.login-btn {
|
||||
height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.login-card {
|
||||
max-width: 700rpx;
|
||||
padding: 160rpx 60rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 40px;
|
||||
height: 45px;
|
||||
}
|
||||
.app-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.reg {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.app-subtitle {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
color: #333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.input-wrapper {
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.login-code {
|
||||
height: 38px;
|
||||
float: right;
|
||||
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
.login-btn {
|
||||
height: 104rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -161,6 +161,9 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from "vue"
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 用户信息
|
||||
const name = ref('张教练')
|
||||
@@ -241,9 +244,10 @@
|
||||
content: '确定要退出当前账号吗？',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
// 实际项目中应清除登录状态
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/index'
|
||||
userStore.logOut().then(() => {}).finally(()=>{
|
||||
uni.reLaunch({
|
||||
url: '/pages/login'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,106 +1,110 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import config from '@/config'
|
||||
import storage from '@/utils/storage'
|
||||
import constant from '@/utils/constant'
|
||||
import { isHttp, isEmpty } from "@/utils/validate"
|
||||
import { getInfo, login, logout } from '@/api/login'
|
||||
import { getToken, removeToken, setToken } from '@/utils/auth'
|
||||
import defAva from '@/static/images/profile.jpg'
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref } from 'vue';
|
||||
import config from '@/config';
|
||||
import storage from '@/utils/storage';
|
||||
import constant from '@/utils/constant';
|
||||
import { isHttp, isEmpty } from '@/utils/validate';
|
||||
import { getInfo, login, logout } from '@/api/login';
|
||||
import { getToken, removeToken, setToken } from '@/utils/auth';
|
||||
import defAva from '@/static/images/profile.jpg';
|
||||
|
||||
const baseUrl = config.baseUrl
|
||||
const baseUrl = config.baseUrl;
|
||||
|
||||
export const useUserStore = defineStore('user', () => {
|
||||
const token = ref(getToken())
|
||||
const id = ref(storage.get(constant.id))
|
||||
const name = ref(storage.get(constant.name))
|
||||
const avatar = ref(storage.get(constant.avatar))
|
||||
const roles = ref(storage.get(constant.roles))
|
||||
const permissions = ref(storage.get(constant.permissions))
|
||||
const token = ref(getToken());
|
||||
const id = ref(storage.get(constant.id));
|
||||
const name = ref(storage.get(constant.name));
|
||||
const avatar = ref(storage.get(constant.avatar));
|
||||
const roles = ref(storage.get(constant.roles));
|
||||
const permissions = ref(storage.get(constant.permissions));
|
||||
|
||||
const SET_TOKEN = (val) => {
|
||||
token.value = val
|
||||
}
|
||||
const SET_ID = (val) => {
|
||||
id.value = val
|
||||
storage.set(constant.id, val)
|
||||
}
|
||||
const SET_NAME = (val) => {
|
||||
name.value = val
|
||||
storage.set(constant.name, val)
|
||||
}
|
||||
const SET_AVATAR = (val) => {
|
||||
avatar.value = val
|
||||
storage.set(constant.avatar, val)
|
||||
}
|
||||
const SET_ROLES = (val) => {
|
||||
roles.value = val
|
||||
storage.set(constant.roles, val)
|
||||
}
|
||||
const SET_PERMISSIONS = (val) => {
|
||||
permissions.value = val
|
||||
storage.set(constant.permissions, val)
|
||||
}
|
||||
const SET_TOKEN = val => {
|
||||
token.value = val;
|
||||
};
|
||||
const SET_ID = val => {
|
||||
id.value = val;
|
||||
storage.set(constant.id, val);
|
||||
};
|
||||
const SET_NAME = val => {
|
||||
name.value = val;
|
||||
storage.set(constant.name, val);
|
||||
};
|
||||
const SET_AVATAR = val => {
|
||||
avatar.value = val;
|
||||
storage.set(constant.avatar, val);
|
||||
};
|
||||
const SET_ROLES = val => {
|
||||
roles.value = val;
|
||||
storage.set(constant.roles, val);
|
||||
};
|
||||
const SET_PERMISSIONS = val => {
|
||||
permissions.value = val;
|
||||
storage.set(constant.permissions, val);
|
||||
};
|
||||
|
||||
// 登录
|
||||
const loginAction = (userInfo) => {
|
||||
const username = userInfo.username.trim()
|
||||
const password = userInfo.password
|
||||
const code = userInfo.code
|
||||
const uuid = userInfo.uuid
|
||||
const loginAction = userInfo => {
|
||||
const username = userInfo.username.trim();
|
||||
const password = userInfo.password;
|
||||
return new Promise((resolve, reject) => {
|
||||
login(username, password, code, uuid).then(res => {
|
||||
setToken(res.token)
|
||||
SET_TOKEN(res.token)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
login(username, password)
|
||||
.then(res => {
|
||||
setToken(res.data.accessToken);
|
||||
SET_TOKEN(res.data.accessToken);
|
||||
resolve();
|
||||
})
|
||||
.catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 获取用户信息
|
||||
const getInfoAction = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
getInfo().then(res => {
|
||||
const user = res.user
|
||||
let avatar = user.avatar || ""
|
||||
if (!isHttp(avatar)) {
|
||||
avatar = (isEmpty(avatar)) ? defAva : baseUrl + avatar
|
||||
}
|
||||
const userid = (isEmpty(user) || isEmpty(user.userId)) ? "" : user.userId
|
||||
const username = (isEmpty(user) || isEmpty(user.userName)) ? "" : user.userName
|
||||
if (res.roles && res.roles.length > 0) {
|
||||
SET_ROLES(res.roles)
|
||||
SET_PERMISSIONS(res.permissions)
|
||||
} else {
|
||||
SET_ROLES(['ROLE_DEFAULT'])
|
||||
}
|
||||
SET_ID(userid)
|
||||
SET_NAME(username)
|
||||
SET_AVATAR(avatar)
|
||||
resolve(res)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
getInfo()
|
||||
.then(res => {
|
||||
const user = res.data.user;
|
||||
let avatar = user.avatar || '';
|
||||
if (!isHttp(avatar)) {
|
||||
avatar = isEmpty(avatar) ? defAva : baseUrl + avatar;
|
||||
}
|
||||
const userid = isEmpty(user) || isEmpty(user.userId) ? '' : user.userId;
|
||||
const username = isEmpty(user) || isEmpty(user.userName) ? '' : user.userName;
|
||||
if (res.data.roles && res.data.roles.length > 0) {
|
||||
SET_ROLES(res.data.roles);
|
||||
SET_PERMISSIONS(res.data.permissions);
|
||||
} else {
|
||||
SET_ROLES(['ROLE_DEFAULT']);
|
||||
}
|
||||
SET_ID(userid);
|
||||
SET_NAME(username);
|
||||
SET_AVATAR(avatar);
|
||||
resolve(res);
|
||||
})
|
||||
.catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 退出系统
|
||||
const logOutAction = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
logout(token.value).then(() => {
|
||||
SET_TOKEN('')
|
||||
SET_ROLES([])
|
||||
SET_PERMISSIONS([])
|
||||
removeToken()
|
||||
storage.clean()
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
logout(token.value)
|
||||
.then(() => {
|
||||
SET_TOKEN('');
|
||||
SET_ROLES([]);
|
||||
SET_PERMISSIONS([]);
|
||||
removeToken();
|
||||
storage.clean();
|
||||
resolve();
|
||||
})
|
||||
.catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
token,
|
||||
@@ -113,5 +117,5 @@ export const useUserStore = defineStore('user', () => {
|
||||
login: loginAction,
|
||||
getInfo: getInfoAction,
|
||||
logOut: logOutAction
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
|
||||
@@ -1,68 +1,74 @@
|
||||
import config from '@/config'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import errorCode from '@/utils/errorCode'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { toast, showConfirm, tansParams } from '@/utils/common'
|
||||
import config from '@/config';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import errorCode from '@/utils/errorCode';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { toast, showConfirm, tansParams } from '@/utils/common';
|
||||
|
||||
let timeout = 10000
|
||||
const baseUrl = config.baseUrl
|
||||
let timeout = 10000;
|
||||
const baseUrl = config.baseUrl;
|
||||
|
||||
const request = config => {
|
||||
// 是否需要设置 token
|
||||
const isToken = (config.headers || {}).isToken === false
|
||||
config.header = config.header || {}
|
||||
const isToken = (config.headers || {}).isToken === false;
|
||||
config.header = config.header || {};
|
||||
config.header['tenant-id'] = 10001;
|
||||
config.header['instance-id'] = 1038;
|
||||
if (getToken() && !isToken) {
|
||||
config.header['Authorization'] = 'Bearer ' + getToken()
|
||||
config.header['Authorization'] = 'Bearer ' + getToken();
|
||||
}
|
||||
// get请求映射params参数
|
||||
if (config.params) {
|
||||
let url = config.url + '?' + tansParams(config.params)
|
||||
url = url.slice(0, -1)
|
||||
config.url = url
|
||||
let url = config.url + '?' + tansParams(config.params);
|
||||
url = url.slice(0, -1);
|
||||
config.url = url;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
uni
|
||||
.request({
|
||||
method: config.method || 'get',
|
||||
timeout: config.timeout || timeout,
|
||||
timeout: config.timeout || timeout,
|
||||
url: config.baseUrl || baseUrl + config.url,
|
||||
data: config.data,
|
||||
header: config.header,
|
||||
dataType: 'json'
|
||||
}).then(response => {
|
||||
const res = response
|
||||
const code = res.data.code || 200
|
||||
const msg = errorCode[code] || res.data.msg || errorCode['default']
|
||||
})
|
||||
.then(response => {
|
||||
const res = response;
|
||||
const code = res.data.code || 200;
|
||||
const msg = errorCode[code] || res.data.msg || errorCode['default'];
|
||||
if (code === 401) {
|
||||
showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
|
||||
if (res.confirm) {
|
||||
useUserStore().logOut().then(res => {
|
||||
uni.reLaunch({ url: '/pages/login' })
|
||||
})
|
||||
useUserStore()
|
||||
.logOut()
|
||||
.then(res => {
|
||||
uni.reLaunch({ url: '/pages/login' });
|
||||
});
|
||||
}
|
||||
})
|
||||
reject('无效的会话，或者会话已过期，请重新登录。')
|
||||
});
|
||||
reject('无效的会话，或者会话已过期，请重新登录。');
|
||||
} else if (code === 500) {
|
||||
toast(msg)
|
||||
reject('500')
|
||||
toast(msg);
|
||||
reject('500');
|
||||
} else if (code !== 200) {
|
||||
toast(msg)
|
||||
reject(code)
|
||||
toast(msg);
|
||||
reject(code);
|
||||
}
|
||||
resolve(res.data)
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(error => {
|
||||
let { message } = error
|
||||
let { message } = error;
|
||||
if (message === 'Network Error') {
|
||||
message = '后端接口连接异常'
|
||||
message = '后端接口连接异常';
|
||||
} else if (message.includes('timeout')) {
|
||||
message = '系统接口请求超时'
|
||||
message = '系统接口请求超时';
|
||||
} else if (message.includes('Request failed with status code')) {
|
||||
message = '系统接口' + message.substr(message.length - 3) + '异常'
|
||||
message = '系统接口' + message.substr(message.length - 3) + '异常';
|
||||
}
|
||||
toast(message)
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
toast(message);
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export default request
|
||||
export default request;
|
||||
|
||||
Reference in New Issue
Block a user