hht-tongbo/pages/login/login.vue

<template>
	<view class="zd_content bg">
		<view class="p1">欢迎来到</view>
		<view class="p2">海亮铜箔手持系统！</view>
		<view class="input-box">
			<input class="large-input" type="text" placeholder="请输入用户名" v-model="user">
		</view>
		<div class="input-box">
			<input class="large-input" :password="!showPassword" placeholder="请输入密码" v-model="password">
			<span class="iconfont icon_eye_close" :class="[showPassword ? 'icon_eye_active' : '']" @tap="changePassword">&#xe6a0;</span>
	    </div>
		<view class="radio-box">
			<view class="radio-wrap">
				<span class="iconfont icon_unchecked" :class="{'icon_checked': saveUser}"  @tap="toSaveUser">&#xe66b;</span>
				<text class="radio-label">记住用户名</text>
			</view>
			<text class="setup-text" @tap="setup">设置</text>
		</view>
		<button class="login-btn" :disabled="disabled" @tap="toLogin">确认登录</button>
		<!-- <button class="login-btn" @tap="test">打印</button> -->
	</view>
</template>

<script>
	import {getCLodop, getPrinterList} from "@/utils/CLodopfuncs.js"
	import { RSAencrypt } from '@/utils/jsencrypt.js'
	import {handLogin} from '@/utils/getData2.js'
	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
	export default {
		data() {
			return {
				user: this.$store.getters.loginName ? this.$store.getters.loginName : '',
				password: '',
				showPassword: false,
				saveUser: this.$store.getters.loginName ? true : false,
				disabled: false,
				version: '',
				versionCode: ''
			}
		},
		created () {
			//#ifdef APP-PLUS
			// 获取本地应用资源版本号
			plus.runtime.getProperty(plus.runtime.appid, (info) => {
				this.version = info.version;
				this.versionCode = info.versionCode ;
				if (Number(this.versionCode) < 103) {
					checkUpdate();
				}
			}) 
			//#endif
		},
		methods: {
			// 检测版本更新
			async checkUpdates() {
				// #ifdef APP-PLUS
				//调用接口获取后台版本信息，检查是否需要更新
				let versionInfo = await this.$api.login.getAppInfo();
				console.log('获取后台版本信息', versionInfo);
				// 待更新版本
				const currentVersion = versionInfo.versionName;
				console.log('后台需要更新版本', currentVersion);
				// 更新地址
				let androidUrl = versionInfo.url;
				// 是否强制更新 isMust 0.否 1.强制更新
				let showCancel = versionInfo.isMust ? true : false;
				//  比较版本是否不同 当前版本：plus.runtime.version
				const localVersion = plus.runtime.version.split('.');
				let current = currentVersion.split('.');
				// 默认是同一个版本，不需要更新
				let flag = false;
				current.forEach((item, i) => {
					if (item !== localVersion[i]) {
						// 检测到版本不同，需要更新
						flag = true;
					}
				});
	
				if (flag) {
					uni.showModal({
						// 更新提醒
						title: '发现新版本，是否更新',
						content: '待更新版本号：' + currentVersion ,
						// showCancel: showCancel,
						success: res => {
							if (res.confirm) {
								this.doUpData(androidUrl);
								this.showdownLine = true;
								// plus.runtime.openURL(androidUrl)
							} else if (res.cancel) {
								// 不更新强制退出app
								if (showCancel) {
									console.log('不更新强制退出app');
									plus.runtime.quit();
								}
							}
						}
					});
				} else {
					this.$myToast('无更新', 'none');
				}
				// #endif
			},
			doUpData(Url) {
				uni.showLoading({
					title: '更新中……'
				});
				const downloadTask = uni.downloadFile({
					//执行下载
					url: Url, //下载地址
					timeout: 1000 * 30, //30秒超时时间
					success: downloadResult => {
						//下载成功
						console.log(downloadResult);
						this.showdownLine = false;
						uni.hideLoading();
						if (downloadResult.statusCode == 200) {
							plus.runtime.install(
								//安装软件
								downloadResult.tempFilePath,
								{
									force: true
								},
								function(res) {
									plus.runtime.restart();
								}
							);
						}
					},
					fail: err => {
						uni.hideLoading();
						this.showdownLine = false;
						this.$u.toast(err.errMsg);
						console.log(err);
					},
					complete: com => {
						console.log(com);
					}
				});
	
				// 下载进度
				downloadTask.onProgressUpdate(res => {
					// this.$u.toast(res.progress)
					this.downloadNum = res.progress;
					// console.log('下载进度' + res.progress);
					// console.log('已经下载的数据长度' + res.totalBytesWritten);
					// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
	
					// 满足测试条件，取消下载任务。
					// if (res.progress > 50) {
					// 	downloadTask.abort();
					// }
				});
			},
			test() {
				let LODOP = getCLodop();
				// 更换为打印服务器ip 不需要加前缀
				LODOP.PRINT_INIT(null, "192.168.81.198");
				// 打印机序号 规则为打印服务器打印机列表倒数从0开始 -1为默认打印机 
				LODOP.SET_PRINTER_INDEX(-1);
				// 设置打印纸大小
				LODOP.SET_PRINT_PAGESIZE(1, 800, 600, "");
				// 根据需求插入打印代码
				LODOP.PRINT();  // 打印
				// LODOP.PREVIEW()
			},
			toSaveUser() {
				this.saveUser = !this.saveUser
			},
			changePassword() {
			    this.showPassword = !this.showPassword
			},
			setup () {
				uni.redirectTo({
					url: '/pages/login/setup'
				})
			},
			async toLogin() {
				// uni.redirectTo({
				// 	url: '/pages/home/home'
				// })
				this.disabled = true
				if (this.user === '') {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none'
					})
					this.disabled = false
					return
				}
				if (this.password === '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					this.disabled = false
					return
				}
				try {
					let res = await handLogin(this.user, RSAencrypt(this.password))
					if (this.saveUser) {
						this.$store.dispatch('saveLoginName', this.user)
					} else {
						this.$store.dispatch('delLoginName', '')
					}
					this.$store.dispatch('saveUserInfo', JSON.stringify(res.user.user))
					this.$store.dispatch('saveToken', res.token)
					uni.redirectTo({
						url: '/pages/home/home'
					})
					this.disabled = false
				} catch (e) {
					this.disabled = false
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';
.p1
  _font(60rpx,75rpx,#444)
  padding-top: 90rpx
.p2
  _font(50rpx,1,#444)
  padding: 40rpx 0 25rpx
.input-box
  _fj()
  margin-top 68rpx
  height 75rpx
  border-bottom 1rpx solid #e2e2e2
.large-input
	_wh(calc(100% - 40rpx), 74rpx)
	_font(32rpx,74rpx,#999)
	padding-left 10rpx
.radio-box
	_fj()
	margin: 25rpx 0 70rpx 0
	height: 34rpx
.radio-wrap
	_fj()
	height: 34rpx
.radio-label
	_font(28rpx, 28rpx,#333)
	padding-left: 10rpx
.setup-text
	_font(28rpx, 28rpx,$red,,right)
.bg
	background-color: #fff;
	_bis('../../static/image/login_bg.png', 100%,,bottom)
.login-btn
  width 100%
  border-radius 46rpx
  _font(36rpx,92rpx,#fff,,center)
  background-color $red
.zd_content
	height: 100%
</style>