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