cxc-szcx-uniapp/pages/login/login.vue

321 lines
7.2 KiB
Vue

<template>
<view :class="{'gray':store.isgray==1}">
<view class="logo f-col aic">
<image src="@/static/login/logo.png"></image>
</view>
<view class="form f-col aic">
<view class="box f-row aic">
<image src="@/static/login/phone.png"></image>
<input v-model="username" type="text" placeholder="请输入统一身份认证"
placeholder-style="font-size: 28rpx;color: #999999;" />
</view>
<view class="box f-row aic">
<image src="@/static/login/pwd.png"></image>
<input v-model="password" :type="!showpwd?'password':'text'" placeholder="请输入密码"
placeholder-style="font-size: 28rpx;color: #999999;" />
<image v-if="showpwd" src="@/static/login/eye.png" @click="showpwd = !showpwd"></image>
<image v-else src="@/static/login/eye-off.png" @click="showpwd = !showpwd"></image>
</view>
</view>
<view class="pwd f-row aic">
<view style="display: inline-block;" @click="check = !check">
<view class="f-row aic">
<image v-if="!check" src="@/static/login/nocheck.png"></image>
<image v-else src="@/static/login/checked.png"></image>
<text>记住密码</text>
</view>
</view>
</view>
<view class="login f-col aic">
<view @click="login">
登录
</view>
</view>
<view class="login f-col aic">
<text style="font-size: 10px;">Copyright (c) 2024 天然气产销厂</text>
<text style="font-size: 10px;">版本号:{{systemInfo.appWgtVersion}}</text>
</view>
</view>
</template>
<script setup>
import {
ref,
getCurrentInstance,
watch
} from 'vue';
import {
loginApi,
localLoginApi,
queryRoleApi
} from '@/api/login.js';
import {
taskListApi
} from '@/api/api.js';
import Base64 from 'base-64';
import {
onLoad
} from '@dcloudio/uni-app'
import {
useStore
} from '@/store'
const store = useStore()
const {
proxy
} = getCurrentInstance()
/** 系统信息 */
const systemInfo = uni.getSystemInfoSync()
/**是否明文显示密码*/
const showpwd = ref(false)
/**用于用户缓存账号和密码*/
let localObj = {}
/**记住账号和密码*/
const savePwd = () => {
let localObj = {
un: username.value
}
if (check.value) {
localObj.pw = password.value
}
uni.setStorageSync('accountObj', JSON.stringify(localObj))
}
/**是否选中记住密码*/
const check = ref(true);
/**账号*/
const username = ref('')
/**密码*/
const password = ref('')
const login = () => {
if (!username.value.trim()) return proxy.$toast('请输入账号')
if (!password.value.trim()) return proxy.$toast('请输入密码')
let un = Base64.encode(encodeURIComponent(username.value))
let pw = Base64.encode(encodeURIComponent(password.value))
uni.showLoading({
title: '登录中...'
});
/*生产环境 begin */
loginApi({
username: un,
password: pw,
ip: getDeviceIp()
/*生产环境 end */
/*开发环境 begin */
// localLoginApi({
// username: username.value,
// password: password.value,
// captcha: 'app'
/*开发环境 end */
}).then((loginres) => {
if (loginres.success) {
uni.setStorageSync('token', loginres.result.token)
store.setToken(loginres.result.token)
savePwd()
queryRoleApi({
roles: loginres.result.userInfo.roles
}).then((roleres) => {
//登录时间
uni.setStorageSync('logintime', Date.now())
// 登录人的角色
uni.setStorageSync('role', roleres)
store.setRole(roleres)
// 登录人信息
uni.setStorageSync('user', JSON.stringify(loginres.result
.userInfo))
store.setUserInfo(loginres.result.userInfo)
//获取任务列表角标
loadBadge()
// 跳转首页
uni.switchTab({
url: '/pages/tab/index'
})
})
}
}).catch((err) => {
console.log(err);
})
}
let localAccountArr = []
const accountArr = ref([])
onLoad(() => {
if (uni.getStorageSync('accountObj')) {
let obj = JSON.parse(uni.getStorageSync('accountObj'))
username.value = obj.un ? obj.un : ''
password.value = obj.pw ? obj.pw : ''
}
// localAccountArr = uni.getStorageSync('accountArr') ? JSON.parse(uni.getStorageSync('accountArr')) : []
// accountArr.value = localAccountArr
})
const loadBadge = () => {
taskListApi().then((res) => {
if (res.success) {
if (res.result.total > 0) {
uni.setTabBarBadge({
index: '1',
text: res.result.total // 角标内容
});
} else {
uni.removeTabBarBadge({ // 移除角标
index: '1',
});
}
}
})
}
function getDeviceIp() {
// #ifdef APP-PLUS
let deviceIp
if (plus.os.name == "Android") {
let Context = plus.android.importClass('android.content.Context')
let main = plus.android.runtimeMainActivity()
let cm = main.getSystemService(Context.CONNECTIVITY_SERVICE)
plus.android.importClass(cm)
let linkProperties = cm.getLinkProperties(cm.getActiveNetwork())
let linkAddrs = plus.android.invoke(linkProperties, 'getLinkAddresses')
plus.android.importClass(linkAddrs)
for (var i = 0; i < linkAddrs.size(); i++) {
let inetAddr = plus.android.invoke(linkAddrs.get(i), 'getAddress')
deviceIp = plus.android.invoke(inetAddr, 'getHostAddress')
}
//再看有没有wifi
if (deviceIp == '') {
var wifiManager = plus.android.runtimeMainActivity().getSystemService(Context.WIFI_SERVICE);
var wifiInfo = plus.android.invoke(wifiManager, "getConnectionInfo");
var ipAddress = plus.android.invoke(wifiInfo, "getIpAddress");
if (ipAddress != 0) {
deviceIp = ((ipAddress & 0xff) + "." + (ipAddress >> 8 & 0xff) + "." + (ipAddress >> 16 &
0xff) + "." + (ipAddress >> 24 & 0xff));
}
}
}
return deviceIp;
// #endif
}
</script>
<style lang="scss" scoped>
:deep(.uni-select) {
border: none;
padding-left: 0;
height: 88rpx;
}
:deep(.uni-select__input-placeholder) {
font-size: 28rpx;
color: #999999;
}
:deep(.uni-icons) {
display: none;
}
.logo {
padding-top: 184rpx;
image {
width: 475rpx;
height: 199rpx;
}
}
.form {
margin-top: 60rpx;
.box {
width: 570rpx;
height: 88rpx;
background: #F8F8F8;
border-radius: 44rpx;
padding: 0 30rpx;
margin-top: 40rpx;
position: relative;
.account_box {
position: absolute;
top: 100rpx;
left: 90rpx;
width: 500rpx;
background-color: #fff;
box-shadow: 0px 0px 3px 1px #dfdfdf;
z-index: 99;
border-radius: 10rpx;
// &::after {
// position: absolute;
// content: ' ';
// border: 15rpx solid;
// border-color: transparent transparent #fff transparent;
// top: -30rpx;
// left: 30rpx;
// z-index: 999;
// }
.account {
max-height: 200rpx;
overflow-y: auto;
view {
padding: 10rpx;
}
}
}
image {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
input {
height: 100%;
flex: 1;
}
}
}
.pwd {
image {
width: 34rpx;
height: 34rpx;
margin-right: 4rpx;
}
justify-content: flex-end;
margin-top: 20rpx;
margin-right: 60rpx;
font-size: 24rpx;
color: #01508B;
}
.login {
margin-top: 63rpx;
view {
width: 630rpx;
height: 88rpx;
background: #4e74fb;
border-radius: 44rpx;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 88rpx;
}
}
</style>