|
|
|
|
@ -1,45 +1,60 @@
|
|
|
|
|
<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 class="scroll-container">
|
|
|
|
|
<view class="login-container">
|
|
|
|
|
|
|
|
|
|
<!-- Logo区域 -->
|
|
|
|
|
<view class="logo-section">
|
|
|
|
|
<view class="logo-wrapper">
|
|
|
|
|
<image :src="globalConfig.appInfo.logo" mode="aspectFit" class="logo-img"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</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 class="background-decoration">
|
|
|
|
|
<view class="wave-bg"></view>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="captchaEnabled" class="input-item flex align-center" style="width: 60%;margin: 0px;">
|
|
|
|
|
<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 class="login-content">
|
|
|
|
|
<!-- 欢迎文案 -->
|
|
|
|
|
<view class="welcome-section">
|
|
|
|
|
<text class="welcome-title">欢迎来到必硕数字化平台</text>
|
|
|
|
|
<text class="welcome-subtitle">登录以实现您的需求</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 登录表单 -->
|
|
|
|
|
<view class="form-section">
|
|
|
|
|
<!-- 账号输入 -->
|
|
|
|
|
<up-input v-model="loginForm.username" placeholder="请输入账号" :maxlength="30" border="bottom" clearable
|
|
|
|
|
class="form-input" />
|
|
|
|
|
|
|
|
|
|
<!-- 密码输入 -->
|
|
|
|
|
<up-input v-model="loginForm.password" type="password" placeholder="请输入密码" :maxlength="20" border="bottom"
|
|
|
|
|
clearable class="form-input password-input" />
|
|
|
|
|
|
|
|
|
|
<!-- 忘记密码 -->
|
|
|
|
|
<view class="forgot-password">
|
|
|
|
|
<text class="forgot-link">忘记密码？</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 登录按钮 -->
|
|
|
|
|
<view class="login-btn-wrapper">
|
|
|
|
|
<button @click="handleLogin" class="login-btn">登录</button>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="action-btn">
|
|
|
|
|
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import modal from '@/plugins/modal'
|
|
|
|
|
import { getCodeImg } from '@/api/login'
|
|
|
|
|
import { ref } from "vue";
|
|
|
|
|
import config from '@/config.js'
|
|
|
|
|
import useUserStore from '@/store/modules/user'
|
|
|
|
|
import { getWxCode } from '@/utils/geek';
|
|
|
|
|
import { wxLogin } from '@/api/oauth';
|
|
|
|
|
import { setToken } from '@/utils/auth';
|
|
|
|
|
|
|
|
|
|
const userStore = useUserStore()
|
|
|
|
|
const codeUrl = ref("");
|
|
|
|
|
const captchaEnabled = ref(false); // 是否开启验证码
|
|
|
|
|
const captchaEnabled = ref(false);
|
|
|
|
|
|
|
|
|
|
const globalConfig = ref(config);
|
|
|
|
|
const loginForm = ref({
|
|
|
|
|
@ -52,7 +67,6 @@ const loginForm = ref({
|
|
|
|
|
uuid: ''
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 获取图形验证码
|
|
|
|
|
function getCode() {
|
|
|
|
|
getCodeImg().then(res => {
|
|
|
|
|
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
|
|
|
|
@ -62,7 +76,7 @@ function getCode() {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// getCode();
|
|
|
|
|
|
|
|
|
|
async function handleLogin() {
|
|
|
|
|
if (loginForm.value.username === "") {
|
|
|
|
|
modal.msgError("请输入您的账号")
|
|
|
|
|
@ -74,8 +88,8 @@ async function handleLogin() {
|
|
|
|
|
modal.loading("登录中，请耐心等待...")
|
|
|
|
|
pwdLogin()
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
// 密码登录
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function pwdLogin() {
|
|
|
|
|
userStore.login(loginForm.value).then(() => {
|
|
|
|
|
modal.closeLoading()
|
|
|
|
|
@ -86,90 +100,146 @@ async function pwdLogin() {
|
|
|
|
|
getCode()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function loginSuccess(result) {
|
|
|
|
|
// 设置用户信息
|
|
|
|
|
userStore.getInfo().then(res => {
|
|
|
|
|
uni.switchTab({
|
|
|
|
|
url: '/pages/index'
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
page {
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.normal-login-container {
|
|
|
|
|
.scroll-container {
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
.logo-content {
|
|
|
|
|
.login-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding-top: 15%;
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-form-content {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
margin-top: 15%;
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
|
|
|
|
.input-item {
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
background-color: #f5f6f7;
|
|
|
|
|
height: 45px;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
font-size: 38rpx;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input {
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
position: relative;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 50rpx;
|
|
|
|
|
|
|
|
|
|
/* 顶部装饰背景 */
|
|
|
|
|
.background-decoration {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 20rpx;
|
|
|
|
|
left: -9.2%;
|
|
|
|
|
right: -9.2%;
|
|
|
|
|
width: 118.4%;
|
|
|
|
|
height: 400rpx;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.wave-bg {
|
|
|
|
|
width: 100%;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-image: url(@/assets/img/backgroundshadow1.png);
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-btn {
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
height: 45px;
|
|
|
|
|
/* Logo区域 */
|
|
|
|
|
.logo-section {
|
|
|
|
|
padding-top: 40rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.logo-wrapper {
|
|
|
|
|
width: 160rpx;
|
|
|
|
|
height: 160rpx;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
border-radius: 40rpx;
|
|
|
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.logo-img {
|
|
|
|
|
width: 80rpx;
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.xieyi {
|
|
|
|
|
color: #333;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
/* 登录内容区 */
|
|
|
|
|
.login-content {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 110rpx;
|
|
|
|
|
|
|
|
|
|
.login-code {
|
|
|
|
|
height: 38px;
|
|
|
|
|
float: right;
|
|
|
|
|
/* 欢迎文案 */
|
|
|
|
|
.welcome-section {
|
|
|
|
|
text-align: left;
|
|
|
|
|
margin-top: 10rpx;
|
|
|
|
|
|
|
|
|
|
.welcome-title {
|
|
|
|
|
font-size: 44rpx;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #333333;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.welcome-subtitle {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #999999;
|
|
|
|
|
margin-top: 16rpx;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-code-img {
|
|
|
|
|
height: 38px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
width: 200rpx;
|
|
|
|
|
/* 表单区域 */
|
|
|
|
|
.form-section {
|
|
|
|
|
margin-top: 80rpx;
|
|
|
|
|
|
|
|
|
|
.form-input {
|
|
|
|
|
margin-bottom: 32rpx;
|
|
|
|
|
|
|
|
|
|
&.password-input {
|
|
|
|
|
margin-bottom: 24rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 忘记密码 */
|
|
|
|
|
.forgot-password {
|
|
|
|
|
text-align: right;
|
|
|
|
|
margin-bottom: 48rpx;
|
|
|
|
|
|
|
|
|
|
.forgot-link {
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
color: #666666;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 登录按钮 */
|
|
|
|
|
.login-btn-wrapper {
|
|
|
|
|
margin-bottom: 60rpx;
|
|
|
|
|
|
|
|
|
|
.login-btn {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 88rpx;
|
|
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
border: none;
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
黄伟杰
