uniapp-yzcj-zlfk/pages/login/login.vue

<template>
	<view>
		<view class="margin-top padding">
			<text class="page-title">{{title}}</text>
		</view>

		<view class="margin-top">
			<view class="cu-form-group">
				<view class="title">用户名</view>
				<input placeholder="请输入用户名" v-model="username" v-on:input="valuechanging"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">密码</view>
				<input v-if="isshowpwd" placeholder="请输入密码" type="text" v-model="password" v-on:input="valuechanging" @confirm="login"></input>
				<input v-if="!isshowpwd" placeholder="请输入密码" type="password" v-model="password" v-on:input="valuechanging" @confirm="login"></input>
				<text class="text-blue" :class="isshowpwd ? 'cuIcon-attentionfill' : 'cuIcon-attentionforbidfill'" @click="changePassword"></text>
			</view>
		</view>

		<view class="margin-top padding">
			<button class="round loginBtn" :disabled="isnull" @click="login">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '鲁泰纺织',
				username: '',
				password: '',
				isshowpwd: false,
				isnull: true,
				isback: false
			}
		},
		onLoad(param) {

			///获取是否返回上级页面
			if (Object.keys(param).length > 0 && param.isback == 1) this.isback = true

			uni.getStorage({
				key: 'token',
				success: function(res) {
					//若用户已登录，则无需重复登录，跳转到菜单页面
					uni.redirectTo({
						url: '../menu/menu'
					})
				}
			});
		},
		methods: {
			changePassword() {
				//显示/隐藏密码
				this.isshowpwd = !this.isshowpwd;
			},
			valuechanging() {
				//根据是否输入用户名密码，设置登录按钮是否可用
				if (this.username != "" && this.password != "") {
					this.isnull = false;
				} else {
					this.isnull = true;
				}
			},
			login() {
				//判断用户名密码是否为空（设置了在输入密码按回车键的时候执行登录）
				if (this.username == "" || this.password == "") {
					uni.showToast({
						title: '用户名或密码为空！',
						icon: 'none'
					})
					return;
				}

				//访问网络登录
				uni.request({
					url: "https://api.lttc.cn/sys/user/login",
					data: {
						"userName": this.username,
						"password": this.password
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0) {
							//登录成功后，将用户的userKey存储缓存(键:token,值:userKey)
							var vm = this
							uni.setStorage({
								key: 'token',
								data: res.data.data.userKey,
								success: function() {

									////判断是否跳回原网页
									if (vm.isback) {
										uni.navigateBack({
											delta: 1,
										})
										return;
									}

									//登录成功后，跳转到菜单页面
									uni.redirectTo({
										url: '../menu/menu'
									})
								},
								fail() {
									//用户UserKey存储缓存失败时提示
									uni.showToast({
										title: '登录成功，但调用接口缓存token失败！',
										icon: 'none'
									})
								}
							});
						} else {
							//登录失败清空密码
							this.password = '';
							this.isnull = true;

							//弹出提示
							uni.showToast({
								title: '登录失败！原因是：' + res.data.msg,
								icon: 'none'
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '访问网络登录失败！原因是：' + res.errMsg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-image: linear-gradient(to bottom right, #0081ff, #5ac9ea);
	}

	.cu-form-group .title {
		color: #000000;
		font-size: medium;
		min-width: calc(4em);
	}

	.page-title {
		color: #ffffff;
		font-size: 60upx;
		text-align: center;
		display: block;
	}

	.loginBtn {
		background-color: #3c59ff;
		color: #FFFFFF;
	}
</style>