<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">
|
登录
|
</view>
|
</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>
|
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'}
|
],
|
url: {
|
ip: '',
|
port: '',
|
project: ''
|
},
|
}
|
},
|
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()
|
},
|
login() {
|
let _this = this
|
let path = 'demo'
|
if(uni.getStorageSync('Network')) {
|
path = uni.getStorageSync('Network')[0].address
|
}
|
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);
|
}
|
@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>
|
