<template>
|
<view class="main">
|
<!-- 设置按钮 -->
|
<uni-icons type="gear" size="30" color="#b1b3b8" class="setting" @click="settings"></uni-icons>
|
<view class="left">
|
<!-- logo -->
|
<view class="logo-box">
|
<image src="../../static/img/logo.png" mode="aspectFit"></image>
|
</view>
|
</view>
|
<view class="right">
|
<view class="input-box">
|
<My-input class="my-input" v-model="user.username" titleIcon="person" title="账号" placeholder="请输入账号"
|
inputType="text" optIcon="bottom" />
|
<My-input class="my-input" v-model="user.password" titleIcon="locked" title="密码" placeholder="请输入密码"
|
inputType="password" optIcon="eye" optIconShow />
|
<view class="rember-password">
|
<view class="text">记住密码</view>
|
<switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange" />
|
</view>
|
</view>
|
<button class="button" @click="login()" :loading="load.loading">{{load.btnText}}</button>
|
</view>
|
<!-- 设置弹窗区域 -->
|
<uni-popup ref="settings" type="dialog">
|
<view class="popup">
|
<!-- 标题 -->
|
<view class="title">网 络 配 置</view>
|
<scroll-view scroll-y="true" class="settings-scroll">
|
<view class="scroll-item" v-for="net in network">
|
<view class="item-title" style="">{{net.name}}</view>
|
<view style="display: flex;align-items: center;">
|
<input class="settings-input1" type="text" v-model="net.ip">
|
<text style="font-weight: 900;">:</text>
|
<input class="settings-input2" type="text" v-model="net.port">
|
<text style="font-weight: 900;">/</text>
|
<input class="settings-input3" type="text" v-model="net.address">
|
</view>
|
</view>
|
</scroll-view>
|
<view class="operate">
|
<view class="operate-cancel" @click="cancel">
|
取消
|
</view>
|
<view class="operate-confirm" @click="confirm">
|
确认
|
</view>
|
</view>
|
</view>
|
</uni-popup>
|
|
<!-- 版本号 -->
|
<!-- #ifdef APP-PLUS -->
|
<view class="version">
|
当前版本:{{version}}
|
</view>
|
<!-- #endif -->
|
</view>
|
</template>
|
|
<script>
|
// import { data } from 'jquery'
|
import {
|
mapState
|
} from 'vuex' //引入mapState
|
import md5 from '../../static/js/md5.js'
|
import common from '../api/common/common.js'
|
export default {
|
data() {
|
return {
|
version: '',
|
remberPassword: true,
|
user: {
|
username: '',
|
password: ''
|
},
|
network: [{
|
name: 'wms',
|
ip: '192.168.1.1',
|
port: '8080',
|
address: 'pswms'
|
},
|
{
|
name: 'wcs',
|
ip: '192.168.1.1',
|
port: '9090',
|
address: 'pswcs'
|
}
|
],
|
load: {
|
loading: false,
|
btnText: '登录'
|
},
|
}
|
},
|
computed: mapState({
|
project: state => state.project
|
}),
|
onShow() {
|
|
},
|
mounted() {
|
uni.getSystemInfo({
|
success(res) {
|
// console.log(res);
|
}
|
})
|
if (uni.getStorageSync('user')) {
|
this.user = uni.getStorageSync('user')
|
}
|
// 手机端版本号
|
// #ifdef APP-PLUS
|
var _this = this
|
plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
|
_this.version = wgtinfo.version
|
});
|
// #endif
|
},
|
methods: {
|
remberChange() {
|
this.remberPassword = !this.remberPassword
|
|
},
|
settings() {
|
if (uni.getStorageSync('Network')) {
|
this.network = uni.getStorageSync('Network')
|
}
|
this.$refs.settings.open()
|
},
|
cancel() {
|
this.$refs.settings.close()
|
},
|
confirm() {
|
uni.setStorageSync('Network', this.network);
|
this.$refs.settings.close()
|
},
|
async login() {
|
if (!uni.getStorageSync('Network')) {
|
uni.showToast({ icon: 'error', title: '请配置网络信息' })
|
return
|
}
|
if (!this.user.username ) {
|
uni.showToast({ icon: 'none', title: '请输入账号' })
|
return
|
}
|
if (!this.user.password ) {
|
uni.showToast({ icon: 'none', title: '请输入密码' })
|
return
|
}
|
this.load.loading = true;
|
this.load.btnText = '登录中';
|
let res = await common.onLogin(this.user)
|
if (res.code === 200) {
|
setTimeout(() => {
|
uni.showToast({
|
title: '登录成功'
|
})
|
setTimeout(() => {
|
uni.reLaunch({
|
url: `/pages/home/home`,
|
});
|
}, 300)
|
if (!this.remberPassword) {
|
this.user.password = ''
|
}
|
uni.setStorageSync('user', this.user);
|
}, 700)
|
} else if (res.code === 0) {
|
this.load.loading = false;
|
this.load.btnText = '登录';
|
uni.showToast({
|
icon: 'none',
|
title: '连接失败，请检查网络'
|
})
|
} else {
|
this.load.loading = false;
|
this.load.btnText = '登录';
|
uni.showToast({
|
icon: 'none',
|
title: `${this.user.username} ${res.msg}`
|
})
|
}
|
},
|
// end
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.setting {
|
position: absolute;
|
top: 8px;
|
right: 8px;
|
border-radius: 10px;
|
box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .3),
|
inset -2px -2px 2px rgba(255, 255, 255, .7),
|
-2px -2px 2px rgba(0, 0, 0, .4);
|
}
|
|
.main {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
background-color: #ECF0F1;
|
position: absolute;
|
}
|
|
.left {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.logo-box {
|
background-color: #ECF0F1;
|
border-radius: 15px;
|
box-shadow: inset 8px 8px 8px rgba(0, 0, 0, .3),
|
inset -8px -8px 8px rgba(255, 255, 255, .7),
|
-8px -8px 10px rgba(0, 0, 0, .4);
|
}
|
|
image {
|
height: 100%;
|
width: 100%;
|
}
|
|
.right {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
}
|
|
.input-box {
|
width: 100%;
|
}
|
|
.my-input {
|
width: 80%;
|
margin: 16px 10% 16px 10%;
|
}
|
|
.rember-password {
|
width: 78%;
|
margin: 0 11% 0 11%;
|
display: flex;
|
justify-content: space-between;
|
|
.text {
|
font-size: 12px;
|
color: #606266;
|
line-height: 1;
|
}
|
}
|
|
.button {
|
width: 40%;
|
margin: 0 auto;
|
height: 50px;
|
text-align: center;
|
line-height: 50px;
|
font-size: 20px;
|
background-color: #409EFF;
|
color: #ECF0F1;
|
border-radius: 7px;
|
box-shadow: inset 4px 4px 4px rgba(0, 0, 0, .3),
|
inset -4px -4px 4px rgba(255, 255, 255, .4),
|
-4px -4px 5px rgba(0, 0, 0, .4);
|
}
|
|
.button:active {
|
transform: translateY(5px) scale(0.99, 0.99);
|
box-shadow: inset 4px 4px 4px rgba(0, 0, 0, .3),
|
inset -4px -4px 8px rgba(255, 255, 255, .7),
|
-5px -5px 5px rgba(0, 0, 0, .3);
|
}
|
|
@media screen and (orientation: portrait) {
|
|
/* 竖屏 */
|
.main {
|
flex-direction: column;
|
}
|
|
.left {
|
height: 40%;
|
width: 100%;
|
}
|
|
.right {
|
height: 50%;
|
width: 100%;
|
}
|
|
.logo-box {
|
height: 60%;
|
width: 80%;
|
}
|
}
|
|
@media screen and (orientation: landscape) {
|
|
/* 横屏 */
|
.main {
|
display: flex;
|
}
|
|
.left {
|
height: 100%;
|
width: 50%;
|
}
|
|
.right {
|
height: 100%;
|
width: 50%;
|
}
|
|
.logo-box {
|
height: 60%;
|
width: 80%;
|
}
|
}
|
|
.version {
|
position: fixed;
|
width: 100%;
|
bottom: 0;
|
text-align: center;
|
font-size: 10px;
|
color: #909399;
|
}
|
|
.popup {
|
width: 90vw;
|
height: 40vh;
|
background-color: #fff;
|
border-radius: 16px;
|
}
|
|
.title {
|
height: 10vh;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24px;
|
color: #a8abb2;
|
}
|
|
.settings-scroll {
|
height: 23vh;
|
touch-action: none;
|
}
|
|
.scroll-item {
|
margin: 4px 16px;
|
color: #606266;
|
font-size: 12px;
|
}
|
|
.item-title {
|
font-size: 14px;
|
width: 100%;
|
text-align: center;
|
}
|
|
.settings-input1 {
|
border: 1px solid #dcdfe6;
|
flex: 5;
|
margin: 2px;
|
padding: 4px;
|
border-radius: 4px;
|
}
|
|
.settings-input2 {
|
border: 1px solid #dcdfe6;
|
flex: 3;
|
margin: 2px;
|
padding: 4px;
|
border-radius: 4px;
|
}
|
|
.settings-input3 {
|
border: 1px solid #dcdfe6;
|
flex: 3;
|
margin: 2px;
|
padding: 4px;
|
border-radius: 4px;
|
|
}
|
|
.operate {
|
height: 7vh;
|
display: flex;
|
text-align: center;
|
border-top: 1px solid #dcdfe6;
|
font-size: 16px;
|
}
|
|
.operate-cancel {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #606266;
|
}
|
|
.operate-confirm {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-left: 1px solid #dcdfe6;
|
color: #00aeec;
|
}
|
</style>
|
