feat(login): 登录页调整
This commit is contained in:
woody
parent
c13e46855d
commit
10f51a2ff1
|
|
@ -4,27 +4,11 @@
|
|||
# @Author: 王三华
|
||||
# @Date: 2023-09-19 10:23:40
|
||||
###
|
||||
~# just a flag
|
||||
|
||||
ENV = 'development'
|
||||
|
||||
# base api
|
||||
#辉
|
||||
VUE_APP_BASE_API = 'http://192.168.31.141:8080'
|
||||
|
||||
#敬
|
||||
VUE_APP_BASE_API = 'http://192.168.31.137:8080'
|
||||
|
||||
#曹
|
||||
# VUE_APP_BASE_API = 'http://192.168.31.209:8080'
|
||||
|
||||
#开发
|
||||
VUE_APP_BASE_API = 'http://p1.hzs413.com/inter-api'
|
||||
# VUE_APP_BASE_API = 'https://m.hzs413.com/prod-api'
|
||||
|
||||
#隋
|
||||
#VUE_APP_BASE_API = 'http://192.168.31.159:8080'
|
||||
#VUE_APP_BASE_API = '/prod-api'
|
||||
VUE_APP_BASE_API = '/prod-api'
|
||||
|
||||
|
||||
#超
|
||||
# VUE_APP_BASE_API = 'http://192.168.31.243:8080'
|
||||
|
|
|
|||
|
|
@ -17,15 +17,9 @@ export const countryQx = (params) => http.get('system/manage/user-country/list',
|
|||
export const countryList = (params) => http.get('/system/api/country/list', { params })
|
||||
// 切换结算国
|
||||
export const changeList = (id) => http.post('/system/manage/user-country/change/' + id)
|
||||
//获取语言下拉
|
||||
export const getLanguages = (params) => http.get('/system/pub/enums/get-languages', { params })
|
||||
|
||||
// 退出登录
|
||||
export const logout = () => http.delete('/system/auth/manage/logout')
|
||||
|
||||
//获取菜单路由
|
||||
export const getRouters = (params) => http.get('/system/manage/menu/get-routers', { params })
|
||||
|
||||
//管理员是否登录短信验证
|
||||
export const userCheck = (params) => http.get('/system/auth/manage/user-sms-check', { params })
|
||||
//管理员登录发送验证码
|
||||
export const userSend = (params) => http.get('/system/auth/manage/user-sms-send', { params })
|
||||
|
|
@ -1,15 +1,4 @@
|
|||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: 王三华
|
||||
* @Date: 2023-10-09 11:34:58
|
||||
-->
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: kBank
|
||||
* @Date: 2022-05-27 16:01:41
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view id="_drag_button"
|
||||
|
|
@ -29,29 +18,14 @@
|
|||
<u-transition :show="isShow"
|
||||
duration="1000"
|
||||
mode="fade">
|
||||
<view class="qiu1"
|
||||
<view class="menu_item"
|
||||
@click.stop.prevent="openMenu">菜单</view>
|
||||
<view class="qiu2"
|
||||
@click.stop.prevent="openCountry">切换国家</view>
|
||||
<view class="qiu3"
|
||||
@click.stop.prevent="openLanguage">切换语言</view>
|
||||
|
||||
</u-transition>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选择国家 -->
|
||||
<u-picker :show="isCountry"
|
||||
:defaultIndex="defaultIndex"
|
||||
@cancel="isCountry = false"
|
||||
@confirm="sureCountry"
|
||||
:columns="countryList"
|
||||
keyName="label"></u-picker>
|
||||
<!-- 选择语言 -->
|
||||
<u-picker :show="isLanguage"
|
||||
:defaultIndex="defaultIndex1"
|
||||
@cancel="isLanguage = false"
|
||||
@confirm="sureLanguage"
|
||||
:columns="languageList"
|
||||
keyName="label"></u-picker>
|
||||
|
||||
<!-- 侧边菜单 -->
|
||||
<u-popup :show="isMenu"
|
||||
mode="left"
|
||||
|
|
@ -235,50 +209,7 @@ export default {
|
|||
uni.setStorageSync('name', item.name)
|
||||
uni.redirectTo({ url: item.path })
|
||||
},
|
||||
sureLanguage(e) {
|
||||
const { value } = e
|
||||
uni.setStorageSync('lang', value[0].field)
|
||||
this.$i18n.locale = value[0].field
|
||||
window.location.reload()
|
||||
},
|
||||
openLanguage() {
|
||||
api.getLanguages().then((res) => {
|
||||
let data = res.data.map((item) => {
|
||||
return {
|
||||
field: item.field,
|
||||
id: item.value,
|
||||
label: item.label,
|
||||
}
|
||||
})
|
||||
this.languageList = [data]
|
||||
this.languageList[0].forEach((item, index) => {
|
||||
if (item.field == uni.getStorageSync('lang')) {
|
||||
this.defaultIndex1 = [index]
|
||||
}
|
||||
})
|
||||
if (
|
||||
uni.getStorageSync('lang') == undefined ||
|
||||
uni.getStorageSync('lang') == 'undefined' ||
|
||||
uni.getStorageSync('lang') == ''
|
||||
) {
|
||||
uni.setStorageSync('lang', 'zh-CN')
|
||||
}
|
||||
this.isLanguage = true
|
||||
})
|
||||
},
|
||||
sureCountry(e) {
|
||||
const { value } = e
|
||||
api.changeList(value[0].id).then((res) => {
|
||||
api.getInfo().then((response) => {
|
||||
const data = response
|
||||
uni.setStorageSync('buttons', JSON.stringify(data.buttons))
|
||||
uni.setStorageSync('userInfo', JSON.stringify(data.user))
|
||||
uni.setStorageSync('userAll', JSON.stringify(data))
|
||||
window.location.reload()
|
||||
})
|
||||
})
|
||||
this.isCountry = false
|
||||
},
|
||||
|
||||
openCountry() {
|
||||
api.countryQx().then((res) => {
|
||||
let data = res.data.map((item) => {
|
||||
|
|
@ -369,7 +300,7 @@ export default {
|
|||
.qiu {
|
||||
position: relative;
|
||||
}
|
||||
.qiu1 {
|
||||
.menu_item {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #009b58;
|
||||
|
|
@ -383,42 +314,10 @@ export default {
|
|||
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
top: 0;
|
||||
left: -26px;
|
||||
top: -26px;
|
||||
}
|
||||
.qiu2 {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #ffad41;
|
||||
box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
|
||||
border-radius: 50%;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
// line-height: 30px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -40px;
|
||||
padding: 5px;
|
||||
}
|
||||
.qiu3 {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #269efe;
|
||||
box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
|
||||
border-radius: 50%;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
// line-height: 30px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 35px;
|
||||
top: -40px;
|
||||
|
||||
padding: 5px;
|
||||
}
|
||||
.img {
|
||||
border-radius: 50%;
|
||||
height: 70px;
|
||||
|
|
|
|||
|
|
@ -317,7 +317,6 @@
|
|||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/settlementCenter/placementData",
|
||||
"style": {
|
||||
|
|
@ -419,7 +418,7 @@
|
|||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "全球一体化系统管理平台",
|
||||
"navigationBarTitleText": "系统管理平台",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: 王三华
|
||||
* @Date: 2023-09-15 10:32:33
|
||||
-->
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="header_a">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: 王三华
|
||||
* @Date: 2023-10-09 15:37:13
|
||||
-->
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="header_a">
|
||||
|
|
@ -812,6 +806,9 @@ export default {
|
|||
this.getAll([0])
|
||||
},
|
||||
methods: {
|
||||
getColumnVisible(columnName) {
|
||||
return this.menuList.find(item => item.prop === columnName)?.checked
|
||||
},
|
||||
isLocalSymbol,
|
||||
isLocals,
|
||||
// 设置默认日期，最大值为今天，最小值为去年今天
|
||||
|
|
|
|||
|
|
@ -6,19 +6,17 @@
|
|||
-->
|
||||
<template>
|
||||
<view class="contain">
|
||||
<view class="formed">
|
||||
<view class="methods">
|
||||
<view class="tit1">密码登录</view>
|
||||
<!-- <view>短信登录</view> -->
|
||||
<view class="particles">
|
||||
<view class="particle" v-for="i in 30" :key="i"></view>
|
||||
</view>
|
||||
<view class="formed">
|
||||
<u-form :model="loginForm" labelWidth="auto" :rules="rules" ref="uForm">
|
||||
<u-form-item label="" prop="username">
|
||||
<u-input
|
||||
v-model="loginForm.username"
|
||||
@blur="getCheck"
|
||||
class="border-color"
|
||||
clearable
|
||||
:placeholder="'会员编号'"
|
||||
:placeholder="'用户账号'"
|
||||
>
|
||||
</u-input>
|
||||
</u-form-item>
|
||||
|
|
@ -47,26 +45,11 @@
|
|||
/>
|
||||
</u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label="" prop="smsCode" v-if="ismsgCode">
|
||||
<u-input
|
||||
v-model="loginForm.smsCode"
|
||||
class="border-color1"
|
||||
clearable
|
||||
placeholder="短信验证码"
|
||||
>
|
||||
<view
|
||||
slot="suffix"
|
||||
class="hqyzm1"
|
||||
:class="isSend ? 'hui' : ''"
|
||||
@click="submitForm"
|
||||
>{{ getCode }}</view
|
||||
>
|
||||
</u-input>
|
||||
</u-form-item>
|
||||
|
||||
<u-button
|
||||
class="btn"
|
||||
@click="handleLogin"
|
||||
color="#C8161D"
|
||||
color="#007AFF"
|
||||
shape="circle"
|
||||
:text="'登录'"
|
||||
></u-button>
|
||||
|
|
@ -76,7 +59,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { captchaImage, login, userCheck, userSend } from "@/api/login";
|
||||
import { captchaImage, login } from "@/api/login";
|
||||
import { setToken } from "@/config/auth.js";
|
||||
|
||||
export default {
|
||||
|
|
@ -120,7 +103,6 @@ export default {
|
|||
],
|
||||
},
|
||||
ismsgCode: false,
|
||||
isSend: false,
|
||||
beginTime: 60,
|
||||
getCode: '获取验证码',
|
||||
timer: "",
|
||||
|
|
@ -130,47 +112,6 @@ export default {
|
|||
this.getVerifyCode();
|
||||
},
|
||||
methods: {
|
||||
getCheck() {
|
||||
userCheck({
|
||||
userName: this.loginForm.username,
|
||||
}).then((res) => {
|
||||
if (res.data == 0) {
|
||||
this.ismsgCode = true;
|
||||
} else {
|
||||
this.ismsgCode = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
if (!this.isSend) {
|
||||
userSend({
|
||||
userName: this.loginForm.username,
|
||||
}).then((res) => {
|
||||
this.startTime();
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
startTime() {
|
||||
if (this.isSend) return;
|
||||
this.isSend = true;
|
||||
this.getCode = this.beginTime + "s后重新发送";
|
||||
let that = this;
|
||||
this.timer = setInterval(() => {
|
||||
this.beginTime--;
|
||||
this.getCode = this.beginTime + "s后重新发送";
|
||||
if (this.beginTime < 0) {
|
||||
clearInterval(this.timer);
|
||||
this.getCode = '获取验证码';
|
||||
this.beginTime = 60;
|
||||
this.isSend = false;
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
getVerifyCode() {
|
||||
captchaImage().then((res) => {
|
||||
this.codeUrl = "data:image/gif;base64," + res.img;
|
||||
|
|
@ -198,12 +139,6 @@ export default {
|
|||
url: "/pages/index/index",
|
||||
});
|
||||
});
|
||||
// const data = response
|
||||
// uni.setStorageSync('buttons', JSON.stringify(data.buttons))
|
||||
// uni.setStorageSync('userInfo', JSON.stringify(data.user))
|
||||
// uni.setStorageSync('userAll', JSON.stringify(data))
|
||||
|
||||
// })
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -211,11 +146,98 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.contain {
|
||||
background: url("@/assets/images/login.png") no-repeat;
|
||||
background-size: cover;
|
||||
background-color: #000C1E; /* 深蓝黑色背景 */
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
.formed {
|
||||
overflow: hidden; /* 隐藏溢出的伪元素动画 */
|
||||
}
|
||||
|
||||
.contain::before, /* 第一个旋转光晕 */
|
||||
.contain::after { /* 第二个旋转光晕 */
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
min-width: 300vw;
|
||||
min-height: 300vw;
|
||||
/* 显著增加光晕的不透明度 */
|
||||
background-color: rgba(0, 100, 200, 0.25); /* 调整光晕颜色和透明度，使其更明显 */
|
||||
animation-name: rotate;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
z-index: 0; /* 确保光晕在最底层 */
|
||||
}
|
||||
|
||||
.contain::before {
|
||||
bottom: 15vh;
|
||||
border-radius: 45%;
|
||||
animation-duration: 25s; /* 略微调整动画速度 */
|
||||
}
|
||||
|
||||
.contain::after {
|
||||
bottom: 12vh;
|
||||
/* 直接使用 background-color 的 alpha，移除这里的 opacity 属性，避免双重透明度导致过于透明 */
|
||||
/* opacity: .3; */
|
||||
border-radius: 47%;
|
||||
animation-duration: 22s; /* 略微调整动画速度 */
|
||||
background-color: rgba(0, 120, 220, 0.2); /* 第二个光晕也可以有略微不同的颜色/透明度 */
|
||||
}
|
||||
|
||||
/* 流动的粒子效果 */
|
||||
.particles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none; /* 不阻挡下方元素交互 */
|
||||
z-index: 1; /* 确保在背景光晕之上，但在表单之下 */
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 180, 255, 0.6); /* 粒子颜色更明显一些 */
|
||||
border-radius: 50%;
|
||||
/* 移除这里的 base opacity:0，依赖 nth-child 和 animation keyframes */
|
||||
animation: float 20s infinite linear;
|
||||
}
|
||||
|
||||
@for $i from 1 through 30 { /* 生成30个粒子 */
|
||||
.particle:nth-child(#{$i}) {
|
||||
$size: random(3) + 2px; /* 随机大小 2-4px，让粒子稍大一点 */
|
||||
width: $size;
|
||||
height: $size;
|
||||
left: random(100) * 1%;
|
||||
top: random(100) * 1%;
|
||||
animation-delay: random(20000) * -1ms; /* 随机延迟，使动画错开 */
|
||||
animation-duration: (random(20) + 15) * 1s; /* 随机动画时长 15-35s */
|
||||
opacity: random(40) / 100 + 0.3; /* 初始随机透明度 0.3-0.7 */
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0vh) translateX(0);
|
||||
opacity: inherit; /* 继承 nth-child 设置的初始透明度 */
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8; /* 动画中途可以更亮 */
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100vh) translateX(random(100) - 50px); /* 向上漂浮并略微左右移动 */
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.formed {
|
||||
width: 60%;
|
||||
position: absolute;
|
||||
top: 32%;
|
||||
|
|
@ -223,7 +245,7 @@ export default {
|
|||
left: 50%;
|
||||
right: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
z-index: 2; /* 确保表单在粒子效果之上 */
|
||||
}
|
||||
.methods {
|
||||
display: flex;
|
||||
|
|
@ -273,5 +295,6 @@ export default {
|
|||
}
|
||||
::v-deep .u-form-item__body__right__message {
|
||||
margin-left: 0 !important;
|
||||
color: #ff5555; /* 错误提示颜色调整为更显眼 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,16 @@ module.exports = {
|
|||
transpileDependencies: ['uview-ui'],
|
||||
devServer: {
|
||||
open: true,
|
||||
port: 8099,
|
||||
proxy: {
|
||||
'/prod-api': {
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/prod-api': ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
configureWebpack: {
|
||||
externals: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue