2 changed files with 243 additions and 227 deletions
@ -1,233 +1,249 @@ |
|||
<template> |
|||
<view class="normal-login-container"> |
|||
<view class="logo-img"> |
|||
<u-icon name="close" size="40" class="icon" @click="$tab.reLaunch('/pages/index')"></u-icon> |
|||
<view class="logo-title"> |
|||
<view>智慧设备管理综合系统</view> |
|||
<view>让设备管理更智能、更高效</view> |
|||
</view> |
|||
<image src="../static/images/banner/logo-banner.png" mode="widthFix"></image> |
|||
</view> |
|||
<view class="box"> |
|||
<view class="box-shadow"> |
|||
|
|||
</view> |
|||
<view class="logo-content"> |
|||
<text class="title">您好,欢迎登录</text> |
|||
</view> |
|||
<view class="login-form-content"> |
|||
<view class="input-item-label">登录账号</view> |
|||
<view class="input-item flex align-center"> |
|||
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" |
|||
style="height: 100%;" /> |
|||
</view> |
|||
<view class="input-item-label">登录密码</view> |
|||
<view class="input-item flex align-center"> |
|||
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" |
|||
style="height: 100%;" /> |
|||
</view> |
|||
<view class="action-btn"> |
|||
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg ">登录</button> |
|||
</view> |
|||
</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> |
|||
</view> |
|||
<view class="normal-login-container"> |
|||
<view class="logo-img"> |
|||
<u-icon name="close" size="40" class="icon" @click="$tab.reLaunch('/pages/index')"></u-icon> |
|||
<view class="logo-title"> |
|||
<view>智慧设备管理综合系统</view> |
|||
<view>让设备管理更智能、更高效</view> |
|||
</view> |
|||
<image src="../static/images/banner/logo-banner.png" mode="widthFix"></image> |
|||
</view> |
|||
<view class="box"> |
|||
<view class="box-shadow"> </view> |
|||
<view class="logo-content"> |
|||
<text class="title">您好,欢迎登录</text> |
|||
</view> |
|||
<view class="login-form-content"> |
|||
<view class="input-item-label">登录账号</view> |
|||
<view class="input-item flex align-center"> |
|||
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" style="height: 100%" /> |
|||
</view> |
|||
<view class="input-item-label">登录密码</view> |
|||
<view class="input-item flex align-center"> |
|||
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" style="height: 100%" /> |
|||
</view> |
|||
<view class="action-btn"> |
|||
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg">登录</button> |
|||
</view> |
|||
</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="" style="text-align: center; margin-top: 20rpx; margin-bottom: 20rpx"> 版本: {{ version }} </view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import * as loginApi from "@/api/login" |
|||
import { |
|||
ref, |
|||
getCurrentInstance |
|||
} from 'vue' |
|||
const { proxy } = getCurrentInstance() |
|||
import { storeToRefs } from 'pinia' |
|||
import { useCountStore } from '@/store' |
|||
|
|||
let loginForm = ref({ |
|||
tenantName: "闻荫源码", |
|||
username: "", |
|||
password: "", |
|||
captchaVerification: "", |
|||
rememberMe: false, |
|||
code: '1', |
|||
uuid: "APP", |
|||
cid:uni.getStorageSync('cid') |
|||
}) |
|||
console.log(import.meta.env) |
|||
if( import.meta.env.VITE_USER_NODE_ENV == 'development'){ |
|||
loginForm.value = { |
|||
tenantName: "闻荫源码", |
|||
username: "admin", |
|||
password: "123456", |
|||
captchaVerification: "", |
|||
rememberMe: false, |
|||
code: '1', |
|||
uuid: "APP", |
|||
cid:uni.getStorageSync('cid') |
|||
} |
|||
} |
|||
// 获取自定义的store |
|||
const store = useCountStore() |
|||
async function handleLogin(params) { |
|||
if (loginForm.value.username === "") { |
|||
proxy.$modal.msgError("请输入您的账号") |
|||
} else if (loginForm.value.password === "") { |
|||
proxy.$modal.msgError("请输入您的密码") |
|||
} else { |
|||
await pwdLogin() |
|||
} |
|||
} |
|||
async function pwdLogin() { |
|||
proxy.$modal.loading("登录中,请耐心等待...") |
|||
// 执行登录 |
|||
store.Login(loginForm.value).then(async (res) => { |
|||
proxy.$modal.closeLoading() |
|||
await loginSuccess() |
|||
}).catch(() => { }) |
|||
} |
|||
// 登录成功后,处理函数 |
|||
async function loginSuccess(result) { |
|||
await store.GetPermissionInfo().then(res => { |
|||
}).catch(() => {}) |
|||
await store.GetInfo().then(res => { |
|||
proxy.$tab.reLaunch('/pages/index') |
|||
}).catch(() => {}) |
|||
} |
|||
|
|||
import { ref, getCurrentInstance } from 'vue' |
|||
import { storeToRefs } from 'pinia' |
|||
import { onLoad } from '@dcloudio/uni-app' |
|||
import * as loginApi from '@/api/login' |
|||
import { useCountStore } from '@/store' |
|||
|
|||
const { proxy } = getCurrentInstance() |
|||
const version = ref() |
|||
|
|||
onLoad(() => { |
|||
getAppVersion() |
|||
}) |
|||
|
|||
const loginForm = ref({ |
|||
tenantName: '闻荫源码', |
|||
username: '', |
|||
password: '', |
|||
captchaVerification: '', |
|||
rememberMe: false, |
|||
code: '1', |
|||
uuid: 'APP', |
|||
cid: uni.getStorageSync('cid') |
|||
}) |
|||
console.log(import.meta.env) |
|||
if (import.meta.env.VITE_USER_NODE_ENV == 'development') { |
|||
loginForm.value = { |
|||
tenantName: '闻荫源码', |
|||
username: 'admin', |
|||
password: '123456', |
|||
captchaVerification: '', |
|||
rememberMe: false, |
|||
code: '1', |
|||
uuid: 'APP', |
|||
cid: uni.getStorageSync('cid') |
|||
} |
|||
} |
|||
// 获取自定义的store |
|||
const store = useCountStore() |
|||
async function handleLogin(params) { |
|||
if (loginForm.value.username === '') { |
|||
proxy.$modal.msgError('请输入您的账号') |
|||
} else if (loginForm.value.password === '') { |
|||
proxy.$modal.msgError('请输入您的密码') |
|||
} else { |
|||
await pwdLogin() |
|||
} |
|||
} |
|||
async function pwdLogin() { |
|||
proxy.$modal.loading('登录中,请耐心等待...') |
|||
// 执行登录 |
|||
store |
|||
.Login(loginForm.value) |
|||
.then(async (res) => { |
|||
proxy.$modal.closeLoading() |
|||
await loginSuccess() |
|||
}) |
|||
.catch(() => {}) |
|||
} |
|||
// 登录成功后,处理函数 |
|||
async function loginSuccess(result) { |
|||
await store |
|||
.GetPermissionInfo() |
|||
.then((res) => {}) |
|||
.catch(() => {}) |
|||
await store |
|||
.GetInfo() |
|||
.then((res) => { |
|||
proxy.$tab.reLaunch('/pages/index') |
|||
}) |
|||
.catch(() => {}) |
|||
} |
|||
|
|||
function getAppVersion() { |
|||
const systemInfo = uni.getSystemInfoSync() |
|||
// #ifdef H5 |
|||
version.value = systemInfo.appVersion |
|||
console.log(systemInfo.appVersion, '版本号') |
|||
// #endif |
|||
|
|||
// #ifdef APP-PLUS |
|||
version.value = systemInfo.appWgtVersion |
|||
// #endif |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.normal-login-container { |
|||
width: 100%; |
|||
|
|||
.logo-content { |
|||
width: 100%; |
|||
font-size: 40rpx; |
|||
padding: 50rpx 80rpx 0rpx; |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
color: #000000; |
|||
|
|||
} |
|||
} |
|||
|
|||
.box { |
|||
position: relative; |
|||
} |
|||
|
|||
.box-shadow { |
|||
box-shadow: 0px -10rpx 16rpx rgba(64, 158, 254, 0.5); |
|||
width: 100%; |
|||
position: absolute; |
|||
height: 30rpx; |
|||
border-radius: 30rpx 30rpx 0px 0px; |
|||
} |
|||
|
|||
.logo-img { |
|||
background-color: #fafcff; |
|||
height: calc(var(--status-bar-height) + 400rpx); |
|||
position: relative; |
|||
|
|||
.icon { |
|||
position: absolute; |
|||
top: calc(var(--status-bar-height) + 20rpx); |
|||
left: 40rpx; |
|||
} |
|||
|
|||
.logo-title { |
|||
position: absolute; |
|||
left: 50rpx; |
|||
top: calc(var(--status-bar-height) + 80rpx); |
|||
z-index: 11; |
|||
|
|||
view { |
|||
&:nth-child(1) { |
|||
color: #409eff; |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
} |
|||
|
|||
&:nth-child(2) { |
|||
color: #999999; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
image { |
|||
width: 75%; |
|||
display: block; |
|||
position: absolute; |
|||
bottom: 0px; |
|||
right: 0px; |
|||
} |
|||
} |
|||
|
|||
.login-form-content { |
|||
margin: 40rpx auto; |
|||
width: 80%; |
|||
|
|||
.input-item-label { |
|||
font-size: 30rpx; |
|||
// font-weight: bold; |
|||
color: #888888; |
|||
} |
|||
|
|||
.input-item { |
|||
margin: 20rpx auto 40rpx; |
|||
border: 1px solid #E4E4E4; |
|||
padding: 0px 20rpx; |
|||
height: 90rpx; |
|||
|
|||
.icon { |
|||
font-size: 38rpx; |
|||
margin-left: 20rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.input { |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
text-align: left; |
|||
} |
|||
|
|||
} |
|||
|
|||
.login-btn { |
|||
margin-top: 80rpx; |
|||
height: 80rpx; |
|||
background: #409eff; |
|||
color: white; |
|||
} |
|||
|
|||
} |
|||
|
|||
.xieyi { |
|||
color: #333; |
|||
margin-top: 40rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.easyinput { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.login-code-img { |
|||
height: 90rpx; |
|||
} |
|||
</style> |
|||
page { |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.normal-login-container { |
|||
width: 100%; |
|||
|
|||
.logo-content { |
|||
width: 100%; |
|||
font-size: 40rpx; |
|||
padding: 50rpx 80rpx 0rpx; |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.box { |
|||
position: relative; |
|||
} |
|||
|
|||
.box-shadow { |
|||
box-shadow: 0px -10rpx 16rpx rgba(64, 158, 254, 0.5); |
|||
width: 100%; |
|||
position: absolute; |
|||
height: 30rpx; |
|||
border-radius: 30rpx 30rpx 0px 0px; |
|||
} |
|||
|
|||
.logo-img { |
|||
background-color: #fafcff; |
|||
height: calc(var(--status-bar-height) + 400rpx); |
|||
position: relative; |
|||
|
|||
.icon { |
|||
position: absolute; |
|||
top: calc(var(--status-bar-height) + 20rpx); |
|||
left: 40rpx; |
|||
} |
|||
|
|||
.logo-title { |
|||
position: absolute; |
|||
left: 50rpx; |
|||
top: calc(var(--status-bar-height) + 80rpx); |
|||
z-index: 11; |
|||
|
|||
view { |
|||
&:nth-child(1) { |
|||
color: #409eff; |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
} |
|||
|
|||
&:nth-child(2) { |
|||
color: #999999; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
image { |
|||
width: 75%; |
|||
display: block; |
|||
position: absolute; |
|||
bottom: 0px; |
|||
right: 0px; |
|||
} |
|||
} |
|||
|
|||
.login-form-content { |
|||
margin: 40rpx auto; |
|||
width: 80%; |
|||
|
|||
.input-item-label { |
|||
font-size: 30rpx; |
|||
// font-weight: bold; |
|||
color: #888888; |
|||
} |
|||
|
|||
.input-item { |
|||
margin: 20rpx auto 40rpx; |
|||
border: 1px solid #e4e4e4; |
|||
padding: 0px 20rpx; |
|||
height: 90rpx; |
|||
|
|||
.icon { |
|||
font-size: 38rpx; |
|||
margin-left: 20rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.input { |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
text-align: left; |
|||
} |
|||
} |
|||
|
|||
.login-btn { |
|||
margin-top: 80rpx; |
|||
height: 80rpx; |
|||
background: #409eff; |
|||
color: white; |
|||
} |
|||
} |
|||
|
|||
.xieyi { |
|||
color: #333; |
|||
margin-top: 40rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.easyinput { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.login-code-img { |
|||
height: 90rpx; |
|||
} |
|||
</style> |
|||
|
Loading…
Reference in new issue