hht-gaoce-uni/pages/login/login.vue

<template>
	<view class="login_content">
		<view class="info-wraper">
			<view class="p1">欢迎来到</view>
			<view class="p2">高测手持系统！</view>
			<view class="login-bg"></view>
		</view>
		<view class="form-wraper">
			<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>
				<text class="setup-text" @tap="isUpdate">升级版本</text>
			</view>
			<button class="login-btn" :disabled="disabled" @tap="toLogin">确认登录</button>
			<view v-if="version !== ''" class="version-name">v{{version}}</view>
		</view>
		<Up-grade v-if="grade === true" @closeUpdate="closeUpdate" :androidUrl="androidUrl"></up-grade>
	</view>
</template>

<script>
	import { RSAencrypt } from '@/utils/jsencrypt.js'
	import {handLogin, pdaUpdate} from '@/utils/getData2.js'
	import UpGrade from './upgrade.vue'
	export default {
		components: {
			UpGrade
		},
		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: '',
				grade: false,
				androidUrl: ''
			}
		},
		created () {
			//#ifdef APP-PLUS
				// 获取本地应用资源版本号
				plus.runtime.getProperty(plus.runtime.appid, (info) => {
					// console.log(JSON.stringify(info));
					this.version = info.version;
					this.versionCode = info.versionCode ;
				}) 
			//#endif
		},
		methods: {
			isUpdate () {
				this._pdaUpdate()
			},
			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)
					this.$store.dispatch('saveRoles', res.roles)
					uni.redirectTo({
						url: '/pages/home/home'
					})
					this.disabled = false
				} catch (e) {
					this.disabled = false
				}
			},
			async _pdaUpdate () {
				let res = await pdaUpdate()
				// if (res.versionName === this.version) {
				// 	uni.showToast({
				// 		title: '当前为最新版本',
				// 		icon: 'none'
				// 	})
				// } else {
				// 	this.grade = true
				// 	this.androidUrl = res.url
				// }
				this.grade = true
				this.androidUrl = res.url
			},
			closeUpdate () {
				this.grade = false
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';
.login_content
  position: relative
  top 0
  height: 100%
  _bis('../../static/image/login_bg.png', 100%,,bottom)
  background-color #fff
  overflow: hidden
.info-wraper
  position relative
  _wh(100%, auto)
  padding 190rpx 0 55rpx 0
  background linear-gradient(to bottom, #fae2ca 0%, #fff5ea 20%, #fdfdfd 100%)
.p1
  position relative
  z-index 10
  _font(40rpx,75rpx,#444,666)
  padding 0 40rpx
.p2
  position relative
  z-index 10
  _font(46rpx,1,#444,600)
  padding: 10rpx 40rpx 0 40rpx
.login-bg
	position: absolute
	z-index: 1
	_wh(80%, 100%)
	right 0
	bottom 0
	opacity: 0.2
	_bis('../../static/image/bg.png', 100%,,bottom)
.form-wraper
  width 100%
  padding 0 40rpx
.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(flex-start)
	height: 34rpx
	flex: 2
.radio-label
	_font(28rpx, 28rpx,#333)
	padding-left: 10rpx
.setup-text
	_font(28rpx, 28rpx,$red,,right)
	padding-left 25rpx
.login-btn
  width 100%
  border-radius 46rpx
  _font(36rpx,92rpx,#fff,,center)
  background-color $red
.version-name
	width 100%
	position: absolute
	bottom: 30rpx
	_font(30rpx, 60rpx, #999,,center)
</style>