<template>
|
<view class="zai-box">
|
|
<scroll-view scroll-y class="page">
|
|
<view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
|
<image src="../../static/logo.png" mode='aspectFit' class="zai-logo" @longtap='longpressImg'></image>
|
</view>
|
<view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
|
<block v-if="loginWay==1">
|
<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
|
<view class="title-login"><text class="cuIcon-people margin-right-xs"></text></view>
|
<input placeholder="Пожалуйста, введите имя пользователя" name="input" v-model="userName"></input>
|
</view>
|
<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
|
<view class="title-login"><text class="cuIcon-lock margin-right-xs"></text></view>
|
<input class="uni-input" placeholder="Пожалуйста, введите пароль" :password="!showPassword" v-model="password" />
|
<view class="action text-lg">
|
<text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changePassword"></text>
|
</view>
|
</view>
|
<view class="flex margin-xs justify-between">
|
<checkbox-group class="rember">
|
<label>
|
<checkbox value="cb" :checked="rember" @tap="rember = !rember" style="transform:scale(0.7)" /><text>Запомнить пароль</text>
|
</label>
|
</checkbox-group>
|
<!-- <text class="changeIP" @click="changeIP()">设置IP</text> -->
|
<text class="changeIP" @click="config()">Запомнить пароль</text>
|
</view>
|
<view class="flex padding justify-center margin-top">
|
<button class="cu-btn bg-blue lg shadow" :loading="loading" :class="[shape=='round'?'round':'']"
|
@tap="onLogin"><text space="emsp">{{loading ? "登录中...":" Вход "}}</text>
|
</button>
|
</view>
|
</block>
|
|
<!-- #ifdef APP-PLUS -->
|
<view class="padding flex flex-direction text-center" style="position: fixed;width: 80%;bottom: 0;text-align: center;">
|
当前版本:{{version}}
|
</view>
|
<!-- #endif -->
|
|
</view>
|
</scroll-view>
|
|
<view>
|
<uni-popup ref="popup" type="right">
|
<view class="config">
|
<view class="config-title"><text >Конфигурация</text></view>
|
<view class="config-item">
|
<text>IP-адрес：</text>
|
<input v-model="IP" type="text" placeholder="192.168.1.1" placeholder-style="font-size:16rpx;text-indent: 10rpx;">
|
</view>
|
<view class="config-item">
|
<text>Номер порта：</text>
|
<input v-model="PORT" type="text" placeholder="8080" placeholder-style="font-size:16rpx;text-indent: 10rpx;">
|
</view>
|
<view class="config-item">
|
<text>Проект：</text>
|
<input v-model="PROJECT" type="text" placeholder="elswms" placeholder-style="font-size:16rpx;text-indent: 10rpx;">
|
</view>
|
<view class="flex justify-around">
|
<button class="cu-btn bg-blue lg" @click="configConfirm">Сохранить</button>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
|
|
|
|
<!-- 登录加载弹窗 -->
|
<view class="cu-load load-modal" v-if="loading">
|
<!-- <view class="cuIcon-emojifill text-orange"></view> -->
|
<image src="../../static/logo1.png" mode="aspectFit" class="round"></image>
|
<view class="gray-text">登录中...</view>
|
</view>
|
<view>
|
<uni-popup ref="inputDialog" type="dialog">
|
<uni-popup-dialog ref="inputClose" mode="input" title="设置IP" v-model="IP"
|
placeholder="请输入服务器IP" @confirm="dialogInputConfirm">
|
</uni-popup-dialog>
|
</uni-popup>
|
</view>
|
<view style="margin-top: 10rpx;">
|
<uni-popup ref="serverPort" type="dialog">
|
<uni-popup-dialog ref="inputClose" mode="input" title="设置端口" v-model="PORT"
|
placeholder="请输入服务器端口号" @confirm="serverPortConfirm">
|
</uni-popup-dialog>
|
</uni-popup>
|
</view>
|
</view>
|
|
</template>
|
|
<script>
|
// import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
|
import { mapActions } from "vuex"
|
import md5 from '../../common/md5.js'
|
// import configService from '@/common/service/config.service.js';
|
|
export default {
|
data() {
|
return {
|
shape:'',//round 圆形
|
loading: false,
|
phoneNo: '',
|
smsCode: '',
|
showPassword: false, //是否显示明文
|
loginWay: 1, //1: 账密，2：验证码
|
smsCountDown: 0,
|
smsCountInterval: null,
|
toggleDelay: false,
|
version:'',
|
//第三方登录相关信息
|
thirdType:"",
|
thirdLoginInfo:"",
|
thirdLoginState:false,
|
bindingPhoneModal:false,
|
thirdUserUuid:'',
|
url: {
|
bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
|
},
|
type:'',
|
userName:'',
|
password:'',
|
rember:true,
|
IP:'10.20.192.200',
|
PORT:'',// 默认端口号
|
PROJECT:''
|
};
|
},
|
mounted() {
|
let that = this;
|
//缓存的账号
|
const HCuname = uni.getStorageSync('HCuname');
|
//缓存的密码
|
const HCpassw = uni.getStorageSync('HCpassw');
|
//有缓存就赋值给文本没有就清空
|
if (HCuname && HCpassw) {
|
that.userName = HCuname;
|
that.password = HCpassw;
|
} else {
|
that.userName = '';
|
that.password = '';
|
}
|
const UIP = uni.getStorageSync('UIP');
|
if (UIP) {
|
that.IP = UIP;
|
that.baseIP = UIP;
|
} else {
|
that.IP = '';
|
}
|
|
const UPORT = uni.getStorageSync('UPORT');
|
if (UPORT) {
|
that.PORT = UPORT;
|
that.basePORT = UPORT;
|
} else {
|
that.PORT = '';
|
}
|
const PROJ = uni.getStorageSync('UPROJ');
|
this.PROJECT = PROJ;
|
this.baseUrl = PROJ
|
},
|
onLoad:function(){
|
// #ifdef APP-PLUS
|
var that=this
|
plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
|
that.version=wgtinfo.version
|
});
|
// #endif
|
|
},
|
computed: {
|
isSendSMSEnable() {
|
return this.smsCountDown <= 0 && this.phoneNo.length > 4;
|
},
|
getSendBtnText() {
|
if (this.smsCountDown > 0) {
|
return this.smsCountDown + '秒后发送';
|
} else {
|
return '发送验证码';
|
}
|
},
|
canSMSLogin() {
|
return this.userName.length > 4 && this.smsCode.length > 4;
|
},
|
canPwdLogin() {
|
return this.userName.length > 4 && this.password.length > 4;
|
},
|
},
|
methods: {
|
// 配置 URL PORT 项目(jkwms)
|
config() {
|
this.$refs.popup.open("center")
|
},
|
// 确认配置
|
configConfirm() {
|
this.baseIP = this.IP
|
uni.setStorageSync('UIP',this.baseIP)
|
this.basePORT = this.PORT
|
uni.setStorageSync('UPORT',this.basePORT)
|
this.baseUrl = this.PROJECT
|
uni.setStorageSync('UPROJ',this.baseUrl)
|
this.$refs.popup.close()
|
},
|
longpressImg() { // 长按图片
|
this.$refs.serverPort.open()
|
},
|
serverPortConfirm(type) {
|
this.basePORT = type
|
// 存入本地缓存
|
this.PORT = type
|
uni.setStorageSync('UPORT',this.basePORT)
|
},
|
changeIP(){
|
this.$refs.inputDialog.open()
|
},
|
dialogInputConfirm(type){
|
this.baseIP = type
|
// 存入本地缓存
|
this.IP = type;
|
uni.setStorageSync('UIP',this.baseIP)
|
},
|
checkboxChange: function(e) {
|
if (e.detail.value.length == 1) {
|
|
//获取缓存的账号
|
uni.getStorageSync('HCuname',this.userName);
|
uni.getStorageSync('HCpassw',this.password);
|
} else {
|
uni.removeStorageSync('HCuname');
|
uni.removeStorageSync('HCpassw');
|
}
|
},
|
onLogin: function (){
|
if(!this.userName || this.userName.length==0){
|
uni.showToast({title: 'Пожалуйста, введите имя пользователя',icon: "none"})
|
return;
|
}
|
if(!this.password || this.password.length==0){
|
uni.showToast({title: 'Пожалуйста, введите пароль',icon: "none"})
|
return;
|
}
|
if(this.baseIP == undefined || this.baseIP == '' ) {
|
uni.showToast({
|
title:'Сначала настройте IP',
|
icon:'none'
|
})
|
return;
|
}
|
if(this.basePORT == undefined) {
|
uni.showToast({
|
title:'长按图片输入端口号',
|
icon:'none'
|
})
|
return;
|
}
|
uni.showLoading();
|
setTimeout(function(){
|
uni.hideLoading();
|
// uni.showToast({
|
// title: '登录超时',
|
// position: 'bottom',
|
// duration: 1000
|
// });
|
},6000)
|
uni.request({
|
url: this.baseHttp + this.baseIP + ':' +this.basePORT +"/" +this.baseUrl + '/login.action',
|
data: {
|
username:this.userName,
|
password:md5.hex_md5(this.password)
|
},
|
header: {
|
"content-type": "application/json"
|
},
|
success: (result) => {
|
let res = result.data;
|
uni.hideLoading();
|
if (res.code == 200) {
|
uni.showToast({
|
title: 'Успешный вход',
|
position: 'bottom',
|
duration: 1000
|
});
|
if(this.rember){
|
uni.setStorageSync('HCuname', this.userName);
|
uni.setStorageSync('HCpassw', this.password);
|
}else{
|
uni.removeStorageSync('HCuname');
|
uni.removeStorageSync('HCpassw');
|
}
|
uni.setStorageSync('token', res.data.token);
|
setTimeout(() => {
|
// uni.navigateBack(); // 小程序用这个 把首页路由放第一个
|
uni.reLaunch({
|
url: '../index/index'
|
});
|
}, 1000);
|
} else {
|
uni.showToast({
|
title: res.msg,
|
icon: "none",
|
position: 'top'
|
})
|
}
|
|
}
|
});
|
},
|
saveClientId(){
|
var info = plus.push.getClientInfo();
|
var cid = info.clientid;
|
this.$http.get("/sys/user/saveClientId",{params:{clientId:cid}}).then(res=>{
|
this.$tip.success('Успешный вход!')
|
this.$Router.replaceAll({name:'index'})
|
})
|
},
|
changePassword() {
|
this.showPassword = !this.showPassword;
|
},
|
loginSuccess() {
|
// 登陆成功，重定向到主页
|
this.$Router.replace({name:'index'})
|
},
|
requestFailed(err) {
|
this.$message.warning("登录失败")
|
},
|
},
|
beforeDestroy() {
|
if (this.smsCountInterval) {
|
clearInterval(this.smsCountInterval);
|
}
|
},
|
|
|
}
|
</script>
|
|
<style>
|
@import "../../colorui/main.css";
|
@import "../../colorui/icon.css";
|
@import "../../colorui/animation.css";
|
|
.config {
|
width: 500rpx;
|
height: 500rpx;
|
background-color: #fff;
|
}
|
.config-title {
|
height: 100rpx;
|
font-size: 32rpx;
|
text-align: center;
|
line-height: 100rpx;
|
}
|
.config-item {
|
height: 100rpx;
|
}
|
.config-item text {
|
display: inline-block;
|
float: left;
|
text-indent: 1em;
|
}
|
.config-item input {
|
display: inline-block;
|
float: right;
|
margin-right: 50rpx;
|
width: 300rpx;
|
height: 50rpx;
|
border: 1px solid #aaaaaa;
|
border-radius: 10rpx;
|
font-size: 16rpx;
|
text-indent: 10rpx;
|
|
}
|
.login-paddingtop {
|
padding-top: 50upx;
|
}
|
|
.zai-box {
|
padding: 0 20upx;
|
padding-top: 100upx;
|
position: relative;
|
}
|
|
.zai-logo {
|
width: 600upx;
|
height: 150px;
|
}
|
|
.zai-title {
|
font-size: 58upx;
|
color: #000000;
|
text-align: center;
|
}
|
|
.input-placeholder, .zai-input {
|
color: #94afce;
|
}
|
|
.zai-label {
|
padding: 60upx 0;
|
text-align: center;
|
font-size: 30upx;
|
color: #a7b6d0;
|
}
|
|
.zai-btn {
|
background: #ff65a3;
|
color: #fff;
|
border: 0;
|
border-radius: 100upx;
|
font-size: 36upx;
|
}
|
|
.zai-btn:after {
|
border: 0;
|
}
|
|
/*按钮点击效果*/
|
.zai-btn.button-hover {
|
transform: translate(1upx, 1upx);
|
}
|
.changeBox {
|
margin-top: 20upx;
|
}
|
.rember {
|
display: inline-block;
|
}
|
.changeIP {
|
float: right;
|
margin-right: 15upx;
|
}
|
</style>
|
