362 lines
8.7 KiB
Vue
362 lines
8.7 KiB
Vue
<template>
|
||
<view class="bg-image">
|
||
<navigator url="../config/config" hover-class="navigator-hover">
|
||
<image class="logo" src="/static/logo.png"></image>
|
||
</navigator>
|
||
|
||
<view class="text-area">
|
||
<text class="title">{{title}}</text>
|
||
</view>
|
||
|
||
<view style="margin-top:90rpx;margin-bottom: 90rpx;">
|
||
<view class="diy-flex-column">
|
||
<view class="diy-flex-row">
|
||
<view style="flex: 5;"></view>
|
||
<view style="flex: 15;">用 户 名：</view>
|
||
<view style="flex: 20;" class="uni-input-wrapper">
|
||
<input class="uni-input" style="font-size: 50rpx;" placeholder="请输入用户名"
|
||
v-model="userName"></input>
|
||
</view>
|
||
<view style="flex: 5;"></view>
|
||
</view>
|
||
<view class="diy-flex-row">
|
||
<view style="flex: 5;"></view>
|
||
<view style="flex: 15;">密 码：</view>
|
||
<view style="flex: 20;" class="uni-input-wrapper">
|
||
<input class="uni-input" style="font-size: 50rpx;" placeholder="请输入密码" :password="showPassword"
|
||
v-model="passWord"></input>
|
||
</view>
|
||
<view style="flex: 5;"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="margin-top:70rpx;margin-bottom: 20rpx;">
|
||
<button @click="login" style="margin-left: 90rpx;margin-right: 90rpx;" type="default"
|
||
plain="true">登 录</button>
|
||
</view>
|
||
|
||
|
||
|
||
<view style="margin-top:70rpx;margin-bottom: 20rpx;text-align: center;">
|
||
<view>{{serverIPAndPort}}</view>
|
||
<view>{{version}}</view>
|
||
</view>
|
||
|
||
<view style="margin-top:20rpx;margin-bottom: 20rpx;text-align: center;" v-if="showProgressBar">
|
||
<progress :percent="downloadProgress" show-info stroke-width="10" />
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
recive
|
||
} from '../../src/libs/Broadcast.js';
|
||
|
||
import {
|
||
unregisterReceiver
|
||
} from '../../src/libs/Broadcast.js';
|
||
|
||
import {
|
||
getConfig
|
||
} from '@/config.js';
|
||
|
||
import {
|
||
getServerIPAndPort
|
||
} from '@/config.js';
|
||
|
||
import {
|
||
saveConfig
|
||
} from '@/config.js';
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: '登录',
|
||
showPassword: true,
|
||
userName: '',
|
||
passWord: '',
|
||
serverIPAndPort: '',
|
||
version: 'V1.4',
|
||
downloadProgress: 0, // 下载进度
|
||
showProgressBar: false, // 控制进度条是否显示
|
||
}
|
||
},
|
||
onShow: function() {
|
||
this.serverIPAndPort = getServerIPAndPort();
|
||
if(this.showProgressBar)
|
||
{
|
||
return;
|
||
}
|
||
//获取最新版的APP接口
|
||
uni.request({
|
||
url: 'http://' + this.serverIPAndPort + '/fileDownload/getLatestAppVersion', // 请求的接口地址
|
||
method: 'GET ', // 设置请求方式为 POST
|
||
header: {
|
||
'Content-Type': 'application/json', // 如果需要以JSON格式发送数据
|
||
},
|
||
success: (res) => {
|
||
// 请求成功的回调函数
|
||
if (res.statusCode === 200) {
|
||
//接口返回数据为200 表示获取成功！
|
||
if (res.data.code == 200) {
|
||
if (this.version != res.data.data.version)
|
||
|
||
uni.showModal({
|
||
title: '版本更新',
|
||
content: `发现新版本 ${res.data.data.version}，是否立即更新？`,
|
||
success: (res1) => {
|
||
if (res1.confirm) {
|
||
var downloadUrl = 'http://' + this.serverIPAndPort +
|
||
'/fileDownload/downloadApp?fileName=' + res.data
|
||
.data.appName;
|
||
// 用户点击了确定，开始下载
|
||
this.downloadApk(downloadUrl);
|
||
} else if (res.cancel) {
|
||
// 用户点击了取消
|
||
console.log('用户取消了更新');
|
||
}
|
||
}
|
||
});
|
||
// uni.showToast({
|
||
// title: '获取到版本号' + res.data.data.version + '\r\n' + '当前版本' + this.version,
|
||
// icon: 'none',
|
||
// duration: 2000
|
||
// });
|
||
//拼凑下载地址
|
||
|
||
} else {
|
||
|
||
}
|
||
} else {
|
||
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
// 请求失败的回调函数
|
||
uni.showToast({
|
||
title: '请求失败:' + '请检查网络连接',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
},
|
||
complete: (event) => {
|
||
|
||
}
|
||
});
|
||
},
|
||
onLoad: function() {
|
||
//加载上一次的用户名
|
||
//FOR DEBUG
|
||
this.userName = getConfig('userName', 'admin');
|
||
this.passWord = getConfig('passWord', 'admin123');
|
||
},
|
||
onUnload: function() {
|
||
unregisterReceiver()
|
||
},
|
||
methods: {
|
||
//下载APK文件
|
||
downloadApk(url) {
|
||
const task = uni.downloadFile({
|
||
url: url,
|
||
success: (res) => {
|
||
if (res.statusCode === 200) {
|
||
const tempFilePath = res.tempFilePath;
|
||
this.installApk(tempFilePath);
|
||
} else {
|
||
uni.showToast({
|
||
title: '下载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('下载APK失败', err);
|
||
uni.showToast({
|
||
title: '下载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
this.showProgressBar = true;
|
||
// 监听下载进度
|
||
task.onProgressUpdate((res) => {
|
||
console.log('下载进度', res.progress);
|
||
// 更新下载进度
|
||
this.downloadProgress = res.progress;
|
||
});
|
||
},
|
||
//安装APK文件
|
||
installApk(filePath) {
|
||
if (uni.getSystemInfoSync().platform === 'android') {
|
||
console.log(plus);
|
||
if (plus) {
|
||
uni.showToast({
|
||
title: '当前平台不支持安装！',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
console.log(plus);
|
||
console.log(plus);
|
||
plus.runtime.install(filePath, {}, (e) => {
|
||
if (e.code === 0) {
|
||
// 安装成功
|
||
uni.showToast({
|
||
title: '安装成功',
|
||
icon: 'success'
|
||
});
|
||
// 可以在这里退出应用或跳转到其他页面
|
||
} else {
|
||
// 安装失败
|
||
uni.showToast({
|
||
title: '安装失败：' + e.message,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '当前平台不支持直接安装APK',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
login() {
|
||
var serverIPAndPort = getServerIPAndPort();
|
||
console.log('http://' + serverIPAndPort + '/user/userLogin');
|
||
uni.request({
|
||
url: 'http://' + serverIPAndPort + '/user/userLogin', // 请求的接口地址
|
||
method: 'POST', // 设置请求方式为 POST
|
||
data: {
|
||
"username": this.userName,
|
||
"password": this.passWord,
|
||
"deviceType": "PDA"
|
||
},
|
||
header: {
|
||
'Content-Type': 'application/json', // 如果需要以JSON格式发送数据
|
||
},
|
||
success: (res) => {
|
||
// 请求成功的回调函数
|
||
if (res.statusCode === 200) {
|
||
//接口返回数据为200 表示获取成功！
|
||
if (res.data.code == 200) {
|
||
uni.showToast({
|
||
title: '登录成功!',
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
//保存本次登录使用的用户名 密码
|
||
saveConfig('userName', this.userName);
|
||
saveConfig('passWord', this.passWord);
|
||
|
||
console.log(res.data.data.getRoles[0].authNames);
|
||
saveConfig('roleName', res.data.data.getRoles[0].authNames);
|
||
|
||
//重定向 直接就不能返回这个页面了
|
||
uni.redirectTo({
|
||
url: '/pages/main/main'
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '获取设备基本信息失败:' + res.data.message,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
|
||
} else {
|
||
this.text = '服务器返回错误状态码' + res.statusCode;
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
// 请求失败的回调函数
|
||
uni.showToast({
|
||
title: '请求失败:' + err.errMsg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
},
|
||
complete: (event) => {
|
||
// 请求完成的回调函数（无论成功或失败都会调用）
|
||
console.log('请求完成', event);
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.uni-input {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
padding: 0px;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.uni-input-wrapper {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.diy-flex-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-top: 15rpx;
|
||
margin-bottom: 15rpx;
|
||
font-size: 50rpx;
|
||
}
|
||
|
||
.diy-flex-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.bg-image {
|
||
background-image: url('/static/background.png');
|
||
/* 背景图片路径 */
|
||
background-size: cover;
|
||
/* 背景图片覆盖整个元素 */
|
||
background-position: center;
|
||
/* 背景图片居中 */
|
||
height: 100%;
|
||
/* 视图高度设置为100% */
|
||
width: 100%;
|
||
/* 视图宽度设置为100% */
|
||
position: fixed;
|
||
/* 视图定位为固定 */
|
||
top: 0;
|
||
left: 0;
|
||
/* z-index: -1; */
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
justify-content: center;
|
||
height: 200rpx;
|
||
width: 200rpx;
|
||
margin-top: 30rpx;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.text-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.title {
|
||
font-size: 55rpx;
|
||
color: #000000;
|
||
}
|
||
</style> |