321 lines
7.4 KiB
Vue
321 lines
7.4 KiB
Vue
<template>
|
|
<view :class="{'gray':store.isgray==1}">
|
|
<view class="logo f-col aic">
|
|
<image src="../../static/login/logo.png" mode=""></image>
|
|
</view>
|
|
<view class="form f-col aic">
|
|
<view class="box f-row aic">
|
|
<image src="../../static/login/phone.png" mode=""></image>
|
|
<input v-model="username" type="text" placeholder="请输入账号"
|
|
placeholder-style="font-size: 28rpx;color: #999999;" />
|
|
<!-- <view class="account_box" id="account" v-if="showAccount">
|
|
<view class="account">
|
|
<view class="" v-for="item,i in accountArr" :key="i" @click="chooseAccount(item.un)">
|
|
{{item.un}}
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="box f-row aic">
|
|
<image src="../../static/login/pwd.png" mode=""></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" mode="" @click="showpwd=!showpwd"></image>
|
|
<image v-else src="../../static/login/eye-off.png" mode="" @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" mode=""></image>
|
|
<image v-else src="../../static/login/checked.png" mode=""></image>
|
|
<text>记住密码</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="login f-col aic">
|
|
<view class="" @click="login">
|
|
登录
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
getCurrentInstance,
|
|
watch
|
|
} from 'vue';
|
|
import {
|
|
loginApi,
|
|
queryRoleApi
|
|
} from '@/network/api.js';
|
|
|
|
import Base64 from 'base-64';
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
useStore
|
|
} from '@/store'
|
|
const store = useStore()
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
|
|
/**是否明文显示密码*/
|
|
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: '登录中...'
|
|
});
|
|
loginApi({
|
|
username: un,
|
|
password: pw,
|
|
ip: getDeviceIp()
|
|
}).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)
|
|
|
|
// 跳转首页
|
|
|
|
uni.switchTab({
|
|
url: '/pages/tab/index'
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
}).catch((err) => {
|
|
console.log(err);
|
|
})
|
|
}
|
|
|
|
|
|
const showAccount = ref(false)
|
|
let localAccountArr = []
|
|
const accountArr = ref([])
|
|
// watch(username, (newVal, oldVal) => {
|
|
// if (!newVal) {
|
|
// showAccount.value = false
|
|
// password.value = ''
|
|
// return
|
|
// }
|
|
// let arr = localAccountArr.filter(item => item.un == newVal)
|
|
// let arr1 = localAccountArr.filter(item => item.un.indexOf(newVal) != -1)
|
|
// if (arr1.length) {
|
|
// accountArr.value = arr1
|
|
// showAccount.value = true
|
|
// } else {
|
|
// showAccount.value = false
|
|
// }
|
|
// if (arr.length) {
|
|
// password.value = arr[0].pw
|
|
// showAccount.value = false
|
|
// }
|
|
|
|
// });
|
|
const chooseAccount = (item) => {
|
|
showAccount.value = false
|
|
username.value = item
|
|
}
|
|
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 closeShowAccount = (e) => {
|
|
if (e.target.id !== "account") {
|
|
showAccount.value = false
|
|
}
|
|
}
|
|
|
|
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> |