<template>
|
<view class="uni-page-login" style="width: 100vw;height: 64vh;">
|
<div id="headr" class="mui-bar mui-bar-nav">
|
<image class="logo" src="../../images/login/mobox_log_200.png"></image>
|
</div>
|
<div class="mui-content">
|
<form id='login-form' class="mui-input-group">
|
|
<a href="javascript:;" class="SetServer" @click="inputDialogToggle">{{translateSys('set')}}</a>
|
<a href="javascript:;" class="SetServer" @click="clickSetLanguage">{{translateSys('language')}}</a>
|
|
<!-- <div class="mui-input-row">
|
<label class="la_icon"><image class="logo_input" src="../../images/login/svr_30.png"></image></label>
|
<input type="text" class="mui-input" v-model="userServer" placeholder="服务器地址">
|
<label class="mui-navigate-right" id="sersel"><image class="logo_icon" src="../../images/login/sel_left.png" ></image></label>
|
</div> -->
|
<div class="mui-input-row">
|
<label class="la_icon">
|
<image class="logo_input" src="../../images/login/person_30.png"></image>
|
</label>
|
<input type="text" class="mui-input" v-model="userName" :placeholder="translateSys('input_login')">
|
<!-- <label class="mui-navigate-right" id="namsel"><image class="logo_icon" src="../../images/login/user-photo.png</image></label> -->
|
</div>
|
<div class="mui-input-row">
|
<label class="la_icon">
|
<image class="logo_input" src="../../images/login/lock_30.png"></image>
|
</label>
|
<input type="password" class="mui-input" v-model="userPwd"
|
:placeholder="translateSys('input_password')">
|
</div>
|
<checkbox-group class="check_rememberPwd" @change="rememberPwd">
|
<label>
|
<checkbox value="1" :checked="ischecked" />
|
<text>{{translateSys('remember_password')}}</text>
|
</label>
|
</checkbox-group>
|
</form>
|
<button id='login' type="default" @tap="logind" class="btn_login">{{translateSys("start_login")}}</button>
|
<p style="float:right; margin: 10px 10px;color:#c8c7cc">
|
<span>{{translateSys('version')}}：</span>
|
<span>{{version}}</span>
|
</p>
|
<div class=""
|
style="text-align: center;background: white;border-top: 0px solid #C0C0C0;color: #7cd0f8;position: absolute;bottom: 0;width: 100%;height: 24px;padding-top:3px;font-size: 11px;">
|
</div>
|
</div>
|
<view>
|
<!-- 输入框示例 -->
|
<uni-popup ref="inputDialog" type="dialog">
|
<uni-popup-dialog ref="inputClose" mode="input" :title="translateSys('set')" :value="userServer"
|
:placeholder="translate('input_server')" @confirm="dialogInputConfirm"></uni-popup-dialog>
|
</uni-popup>
|
<!-- 版本升级弹窗开始 -->
|
<uni-popup ref="promotion" type="center">
|
<view class="promotion" style="width: 700rpx;padding:20rpx 40rpx; background: white;font-size: 36rpx;">
|
<view class="operates" v-if="showBtns==true">
|
<view style="text-align: center;padding-top:20rpx;padding-bottom: 40rpx;">
|
{{translate('tip_app_update')}}
|
</view>
|
<text @click="cancel"
|
style="display: inline-block;color: #7cd0f8;width: 50%; text-align: center;">{{translateSys('cancel')}}</text>
|
<text @click="sure"
|
style="display: inline-block;color: #7cd0f8;width: 50%; text-align: center;">{{translateSys('confirm')}}</text>
|
</view>
|
<view class="operates" v-else>
|
<cmd-progress :percent="percentage" stroke-color="linear-gradient(to right, #ef32d9, #89fffd)">
|
</cmd-progress>
|
</view>
|
</view>
|
</uni-popup>
|
<!-- 版本升级弹窗结束 -->
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
|
import {
|
showModal,
|
showToast,
|
showLoading,
|
hideLoading
|
} from "@/js/Page.js"
|
import {
|
isMobox3Web,
|
login,
|
getApkVersionInfo
|
} from "@/api/index.js"
|
|
import utils from "@/js/utils.js"
|
export default {
|
components: {
|
cmdProgress
|
},
|
data() {
|
//获取全局参数：url-服务器地址
|
return {
|
userServer: utils.session.getValue('server'),
|
userName: utils.session.getValue('account'),
|
userPwd: utils.session.getValue('password'),
|
ischecked: false,
|
version: "1.0.0",
|
downloadUrl: "", //安卓app下载链接
|
percentage: 0, //下载进度
|
showBtns: true,
|
}
|
},
|
onShow() {
|
this.query(); //版本升级
|
},
|
watch: {
|
//监听进度条
|
percentage(e) {
|
// console.log(e);
|
if (e >= 100) {
|
this.$refs.promotion.close();
|
}
|
}
|
},
|
// computed: mapState({
|
// // 从state中拿到数据 箭头函数可使代码更简练
|
// hasLogin: state => state.hasLogin,
|
// loginprovider: state => state.loginProvider,
|
// appinfo:state=>state.appInfo
|
// }),
|
methods: {
|
//查询当前版本号
|
query() {
|
// #ifdef APP-PLUS
|
plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
|
console.log(wgtinfo);
|
var version = wgtinfo.version; //客户端版本号
|
// var versionCode = parseInt(wgtinfo.versionCode); //客户端版本号编码
|
this.check(version) //检测是否需要更新
|
})
|
//#endif
|
},
|
//检测是否需要更新
|
async check(version) {
|
try {
|
if (!this.userServer) {
|
uni.showModal({
|
title: this.translateSys("tip"),
|
content: this.translate("tip_no_web_server"),
|
showCancel: false,
|
confirmText: this.translateSys('cancel')
|
});
|
return;
|
}
|
// var ser = this.userServer.toLowerCase().split('/');
|
const res = await getApkVersionInfo(this.userServer)
|
this.downloadUrl = res.dldUrl || ""
|
var isver = this.compare(res.verNum, version);
|
if (isver) {
|
this.$refs.promotion.open();
|
} else {
|
console.log('当前已是最新版本')
|
}
|
} catch (ex) {
|
// console.log(ex);
|
let exStr = JSON.stringify(ex)
|
if (exStr == "{}")
|
exStr = ex
|
let tip = typeof ex.errMsg == "string" ? ex.errMsg : exStr
|
uni.showModal({
|
title: this.translateSys("error"),
|
content: tip,
|
showCancel: false,
|
confirmText: this.translateSys("cancel")
|
});
|
}
|
|
|
},
|
compare(curV, reqV) {
|
var arr1 = curV.toString().split('.');
|
var arr2 = reqV.toString().split('.');
|
//将两个版本号拆成数字
|
var minL = Math.min(arr1.length, arr2.length);
|
var pos = 0; //当前比较位
|
var diff = 0; //当前为位比较是否相等
|
var flag = false;
|
//逐个比较如果当前位相等则继续比较下一位
|
while (pos < minL) {
|
diff = parseInt(arr1[pos]) - parseInt(arr2[pos]);
|
if (diff == 0) {
|
pos++;
|
continue;
|
} else if (diff > 0) {
|
flag = true;
|
break;
|
} else {
|
flag = false;
|
break;
|
}
|
}
|
return flag;
|
},
|
//确认更新
|
sure() {
|
//关闭按钮
|
this.showBtns = false;
|
let sys = uni.getSystemInfoSync().platform //检查系统
|
if (sys == "ios") {
|
// this.getIosInfo()
|
} else if (sys == "android") {
|
this.updateAPP() // 调用下载方法app内下载
|
}
|
},
|
//取消更新
|
cancel() {
|
this.$refs.promotion.close();
|
},
|
//链接苹果商店下载
|
// getIosInfo() {
|
// let appleId = "你的appid"
|
// plus.runtime.launchApplication({
|
// action: "itms-apps://itunes.apple.com/cn/app/id" + appleId + "?mt=8"
|
// }, function(e) {
|
// console.log('Open system default browser failed: ' + e.message);
|
// });
|
// },
|
//安卓更新
|
updateAPP() {
|
let _this = this;
|
let url = this.downloadUrl;
|
// 官方API
|
var dtask = plus.downloader.createDownload(url, {}, function(d, status) {
|
//d为下载的文件对象
|
if (status == 200) {
|
//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
|
var fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
|
plus.runtime.openFile(d.filename); //选择软件打开文件
|
uni.showToast({
|
icon: 'none',
|
title: this.translate('update_success')
|
});
|
_this.$refs.promotion.close();
|
} else {
|
//下载失败
|
plus.downloader.clear(); //清除下载任务
|
uni.showToast({
|
icon: 'none',
|
title: this.translate('update_fail')
|
});
|
_this.showBtns = false;
|
}
|
})
|
//开始下载
|
dtask.start();
|
//监听下载进度
|
dtask.addEventListener('statechanged', function(task) {
|
_this.percentage = parseInt(
|
(parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) * 100);
|
if (_this.percentage == 100) {
|
_this.$refs.promotion.close();
|
}
|
console.log('下载进度：' + _this.percentage);
|
});
|
},
|
// ...mapMutations({
|
// mutatLogin:'login'
|
// }),
|
// ...mapActions({
|
// actionLogin:'login'
|
// }),
|
inputDialogToggle() {
|
// this.$refs.inputDialog.open()
|
const $this = this
|
uni.navigateTo({
|
url: "./set",
|
events: {
|
exitSetEvent(val) {
|
$this.userServer = val;
|
$this.query(); //版本升级
|
}
|
}
|
})
|
},
|
clickSetLanguage() {
|
uni.navigateTo({
|
url: './language'
|
});
|
},
|
|
dialogInputConfirm(val) {
|
// console.log(val);
|
// uni.showLoading({
|
// title: '3秒后会关闭'
|
// })
|
// setTimeout(() => {
|
// uni.hideLoading();
|
this.userServer = val;
|
utils.session.setValue('server', val);
|
// this.value = val
|
// 关闭窗口后，恢复默认内容
|
this.$refs.inputDialog.close();
|
|
this.query(); //版本升级
|
// }, 3000)
|
// }, 3000)
|
},
|
rememberPwd(e) { //记住密码
|
console.log(e.target);
|
utils.session.setValue('account', '');
|
utils.session.setValue('password', '');
|
if (e.target.value[0] == '1') {
|
utils.session.setValue('account', this.userName);
|
utils.session.setValue('password', this.userPwd);
|
}
|
},
|
// getCookie(key){
|
// if(document.cookie.length>0){
|
// var start = document.cookie.indexOf(key +'=');
|
// if(start !== -1){
|
// start = start+key.length+1;
|
// var end = document.cookie.indexOf(';',start);
|
// if(end === -1) end=document.cookie.length;
|
// return document.cookie.substring(start,end);
|
// }
|
// }
|
// return '';
|
// },
|
// setCookie(cName,value,expiredays){
|
// var exdate = new Date();
|
// exdate.setDate(exdate.getDate(),expiredays)
|
// document.cookie = cName+'='+ documentURLComponent(value)+
|
// ((expiredays==null)?'':';expires='+exdate.toGMTString());
|
|
// },
|
async logind() {
|
try {
|
if (!this.userServer) {
|
uni.showModal({
|
title: this.translateSys('tip'),
|
content: this.translate('tip_no_web_server'),
|
showCancel: false,
|
confirmText: this.translateSys('cancel')
|
});
|
return;
|
}
|
if (!this.userName) {
|
uni.showModal({
|
title: this.translateSys('tip'),
|
content: this.translate('tip_no_user_account'),
|
showCancel: false,
|
confirmText: this.translateSys('cancel')
|
});
|
return;
|
}
|
if (!this.userPwd) {
|
uni.showModal({
|
title: this.translateSys('tip'),
|
content: this.translate('tip_no_user_password'),
|
showCancel: false,
|
confirmText: this.translateSys('cancel')
|
});
|
return;
|
}
|
var rootUrl = 'http://' + this.userServer
|
if (this.userServer.includes("://")) {
|
rootUrl = this.userServer
|
}
|
showLoading("loading......")
|
const res = await login(rootUrl, this.userName, this.userPwd)
|
//设置全局参数：user-用户信息
|
utils.session.setValue('server', rootUrl);
|
utils.session.setValue('account', this.userName);
|
utils.session.setValue('password', this.userPwd);
|
const app = getApp()
|
app.globalData.sessionId = res.session_id
|
app.globalData.loginUser = {
|
id: this.userName,
|
name: res.name,
|
pwd: this.userPwd
|
}
|
hideLoading()
|
|
uni.navigateTo({
|
url: '../index/index?args=9999999999'
|
})
|
|
} catch (ex) {
|
hideLoading()
|
let exStr = JSON.stringify(ex)
|
if (exStr == "{}")
|
exStr = ex
|
let tip = typeof ex.errMsg == "string" ? ex.errMsg : exStr
|
uni.showModal({
|
title: this.translateSys("error"),
|
content: tip,
|
showCancel: false,
|
confirmText: this.translateSys("cancel")
|
});
|
}
|
|
},
|
translate(t) {
|
if (typeof this.$t == "function") return this.$t(`page.${t}`)
|
else return t;
|
},
|
translateSys(t) {
|
if (typeof this.$t == "function") return this.$t(`sys.${t}`)
|
else return t;
|
},
|
},
|
onLoad() {
|
//获取mac地址
|
var url = utils.session.getValue('server');
|
var username = utils.session.getValue('account');
|
var userpwd = utils.session.getValue('password');
|
|
var ischecked = false;
|
if (!this.userServer)
|
this.userServer = url;
|
if (!this.userName)
|
this.userName = username;
|
if (this.userName && this.userPwd)
|
ischecked = true;
|
this.ischecked = ischecked
|
var net = plus.android.importClass("java.net.NetworkInterface");
|
var wl0 = net.getByName('wlan0');
|
var macByte = wl0.getHardwareAddress();
|
var deviceId = ''
|
//下面这段代码来自网络
|
for (var i = 0; i < macByte.length; i++) {
|
var tmp = "";
|
var num = macByte[i];
|
if (num < 0) {
|
tmp = (255 + num + 1).toString(16);
|
} else {
|
tmp = num.toString(16);
|
}
|
if (tmp.length == 1) {
|
tmp = "0" + tmp;
|
}
|
deviceId += tmp;
|
}
|
getApp().globalData.deviceId = deviceId
|
getApp().globalData.cname = plus.device.model
|
//78b8d67511ca
|
console.log('Android设备的deviceId:', deviceId);
|
plus.runtime.getProperty(plus.runtime.appid, (info) => {
|
// console.log(info);
|
this.$data.version = info.version;
|
});
|
}
|
}
|
</script>
|
<style lang="scss">
|
.uni-page-login {
|
input::-webkit-input-placeholder {
|
font-size: 12rpx;
|
}
|
|
#headr {
|
background: #434343;
|
/* width: 375px; */
|
height: 250rpx;
|
text-align: center;
|
background-color: #438EB9;
|
/* background-image: url(../../images/login/root.png) !important;
|
background-size: cover !important;
|
background-repeat: no-repeat !important; */
|
}
|
|
.SetServer {
|
float: left;
|
margin-left: 20rpx;
|
}
|
|
.check_rememberPwd {
|
margin-top: 20rpx;
|
margin-left: 20rpx;
|
}
|
|
.logo {
|
height: 180rpx;
|
width: 180rpx;
|
margin-top: 170rpx;
|
}
|
|
.logo_input {
|
height: 40rpx;
|
width: 40rpx;
|
margin-left: 40rpx;
|
}
|
|
.logo_icon {
|
height: 50rpx;
|
width: 50rpx;
|
margin-left: 15rpx;
|
margin-top: 20rpx;
|
}
|
|
.mui-content {
|
height: 100%;
|
padding-top: 140rpx;
|
background: #FFFFFF;
|
z-index: 1;
|
}
|
|
.mui-input-group .la_icon {
|
width: 100rpx;
|
text-align: center;
|
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
line-height: 1.5;
|
float: left;
|
padding: 7px 13px;
|
}
|
|
.mui-input-group .mui-input-row {
|
height: 85rpx;
|
position: relative;
|
clear: left;
|
overflow: hidden;
|
}
|
|
.mui-input-row:first-child {
|
border-top: 1px solid #c8c7cc;
|
}
|
|
.mui-input-row:last-child {
|
border-bottom: 1px solid #c8c7cc;
|
}
|
|
.mui-input-group .mui-input-row:last-child:after {
|
background-color: #fff;
|
}
|
|
.mui-input-group .mui-input-row:after {
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
left: 15px;
|
height: 1px;
|
content: '';
|
transform: scaleY(.5);
|
background-color: #c8c7cc;
|
}
|
|
.mui-input-row input {
|
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
font-size: 15px;
|
width: 480rpx;
|
/* float: right; */
|
margin-bottom: 0;
|
padding-left: 20rpx;
|
/* padding-right: 10rpx; */
|
/* line-height: 30rpx; */
|
height: 85rpx;
|
/* padding: 7px 40px 7px 0px; */
|
-webkit-user-select: text;
|
/* border: 0; */
|
/* border-radius: 0; */
|
box-shadow: none;
|
outline: 0;
|
background: 0 0;
|
-webkit-appearance: none;
|
}
|
|
.mui-input-group label.mui-navigate-right {
|
font-size: 25px;
|
float: right;
|
padding: 0;
|
width: 80rpx;
|
margin-right: 5rpx;
|
margin-top: -88rpx;
|
display: inline-block;
|
}
|
|
button.btn_login {
|
margin-top: 50rpx;
|
padding: 20rpx;
|
line-height: 1.5;
|
background: #27A6E1;
|
border: none;
|
color: #fff;
|
}
|
}
|
</style>
|
