hht-tongbo/pages/login/login.vue

<template>
	<view class="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' : '']" @click="changePassword">&#xe6a0;</span>
	    </div>
		<view class="radio-box">
			<view class="radio-wrap">
				<span class="iconfont icon_unchecked" :class="{'icon_checked': saveUser}"  @click="toSaveUser">&#xe66b;</span>
				<text class="radio-label">记住用户名</text>
			</view>
			<text class="setup-text" @click="setup">设置</text>
		</view>
		<button class="login-btn" :disabled="disabled" @click="toLogin">确认登录</button>
	</view>
</template>

<script>
	import { RSAencrypt } from '@/utils/jsencrypt.js'
	import {handLogin} from '@/utils/api.js'
	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
			}
		},
		methods: {
			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
	_bis('../../static/image/login_bg.png', 100%,,bottom)
.login-btn
  width 100%
  border-radius 46rpx
  _font(36rpx,92rpx,#fff,,center)
  background-color $red
</style>