<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" titleIcon="person" title="账号" placeholder="请输入账号" inputType="text" optIcon="bottom" />
|
<My-input class="my-input" 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>
|
<!-- <view class="button" @click="login" :loading="load.loading">
|
{{load.btnText}}
|
</view> -->
|
<button class="button" @click="onLogin()" :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" style="height: 23vh;touch-action: none;">
|
<view style="margin: 4px; color: #606266;font-size: 12px; " v-for="net in network">
|
<text style="font-size: 14px;">{{net.name}}</text>
|
<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 md5 from '../../static/js/md5.js'
|
export default {
|
data() {
|
return {
|
version: '',
|
remberPassword: true,
|
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: '登录'
|
},
|
}
|
},
|
mounted() {
|
uni.getSystemInfo({
|
success(res) {
|
// console.log(res);
|
}
|
})
|
// 手机端版本号
|
// #ifdef APP-PLUS
|
var that = this
|
plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
|
that.version = wgtinfo.version
|
});
|
// #endif
|
},
|
methods: {
|
remberChange() {
|
|
},
|
settings() {
|
this.$refs.settings.open()
|
},
|
cancel() {
|
console.log(uni.getStorageSync('Network'));
|
this.$refs.settings.close()
|
},
|
confirm() {
|
uni.setStorageSync('Network', this.network);
|
this.$refs.settings.close()
|
},
|
onLogin() {
|
let _this = this,path = 'demo',network = uni.getStorageSync('Network');
|
if(!network) {
|
uni.showToast({
|
icon: 'error',
|
title: '请配置网络信息'
|
})
|
}
|
path = network[0].address
|
path = path.substring(0, path.length - 3);
|
let baseUrl = `http://${network[0].ip}:${network[0].port}/${network[0].address}`
|
uni.request({
|
url: `${baseUrl}/login.action`,
|
data: {
|
username: 'super',
|
password: md5.hex_md5('xltys1995')
|
},
|
success(res) {
|
res = res.data
|
if (res.code === 200) {
|
_this.load.loading = true;
|
_this.load.btnText = '登录中';
|
uni.setStorageSync('token', res.data.token);
|
_this.load.btnText = '登录中';
|
setTimeout(() => {
|
uni.showToast({
|
title: '登录成功'
|
})
|
setTimeout(() => {
|
uni.reLaunch({
|
url: `/pages/project/${path}/home/home`,
|
});
|
}, 300)
|
}, 700)
|
}
|
// uni.navigateTo({
|
// url: `/pages/project/${path}/home/home`,
|
// fail(res) {
|
// console.log(`没有${path}项目,请联系管理元`);
|
// }
|
|
// })
|
}
|
})
|
}
|
}
|
}
|
</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: 40%;
|
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-input1 {
|
border: 1px solid #dcdfe6;
|
flex: 2;
|
margin: 2px;
|
padding: 4px;
|
border-radius: 4px;
|
}
|
.settings-input2 {
|
border: 1px solid #dcdfe6;
|
flex: 1;
|
margin: 2px;
|
padding: 4px;
|
border-radius: 4px;
|
}
|
.settings-input3 {
|
border: 1px solid #dcdfe6;
|
flex: 2;
|
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>
|
