iot-test-app/pages/login/login.vue

<template>

	<view>

		<view class="head" style="display: flex;justify-content: center;align-items: center;">
			<image style="width: 100;height: 100%;"
				src="https://www.zhisheji.com/uc_server/data/avatar/000/19/68/09_avatar_small.jpg?time=1527483060"
				mode=""></image>

		</view>
		<!--  -->
		<view class="login">
			<view class="title">
				登录
			</view>
			<view class="login-msg">
				<view class="username">
					<u-icon name="account-fill" color="#2979ff" size="28"></u-icon>
					<input v-model="loginMsg.userName" maxlength="20" type="text" placeholder="请输入账号">
					<view style="width: 28px;height: 28px;">

					</view>
				</view>
				<view class="username">
					<u-icon name="lock-fill" color="#2979ff" size="28"></u-icon>
					<input :password="openPassword" v-model="loginMsg.password" maxlength="20" placeholder="请输入密码">
					<view class="pwdIcon" @click="pwdIcon">
						<u-icon v-if="name" name="eye-off" size="28"></u-icon>
						<u-icon v-else name="eye-fill" size="28"></u-icon>
					</view>
				</view>

			</view>
			<view class="loginBtn" @click="toIndex">
				<u-button :loading="loading" color="#19334a" shape="circle" type="primary" size="large">登录</u-button>
			</view>
			<view class="agreeMsg" @click="changActive">
				<uni-icons class="icon" v-if="active" type="circle" size="16" color="#999"></uni-icons>
				<uni-icons class="icon" v-else type="checkmarkempty" size="16" color="#1296db"></uni-icons>
				登录即代表同意<text @click.stop='userAgreement'>《用户协议》</text>
			</view>

		</view>
		<u-modal :show="show" :title="title" @confirm="confirm" :zoom="true" :asyncClose="true">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				title: '用户隐私',
				content: `1、我们会遵循隐私声明收集、使用您的信息，但不会仅因您同意本隐私声明而采用强制捆绑的方式一揽子收集个人信息。<br>2、当您使用或开启相关功能或使用服务时，为实现功能、服务所必需，我们会收集、使用相关信息。除非是为实现基本业务功能或根据法律法规要求所必需的必要信息，您均可以拒绝提供且不影响其他功能或服务。<br>3、我们将在隐私声明中逐项说明哪些是必要信息。<br>4、当您使用或开启相关功能或使用服务时，为实现功能、服务所必需，我们会收集、使用相关信息。除非是为实现基本业务功能或根据法律法规要求所必需的必要信息，您均可以拒绝提供且不影响其他功能或服务。我们将在隐私声明中逐项说明哪些是必要信息。`,
				loading: false,
				openPassword: true,
				name: true,
				active: true,
				loginMsg: {
					userName: '',
					password: ''
					// userName: 'admin',
					// password: 'rW8[cD1!bQ6{'
				}

			}
		},
		methods: {
			onLoad() {
				if (uni.getStorageSync('Token')) {
					uni.switchTab({
						url: "/pages/mine/mine"
					})
				}
			},
			confirm() {

				setTimeout(() => {
					// 3秒后自动关闭
					this.active = false
					this.show = false;
				}, 1500)
			},

			userAgreement() {
				//用户协议
				this.show = true
			},
			pwdIcon() {
				this.name = !this.name
				this.openPassword = !this.openPassword
			},
			async login() {
				if(!this.loginMsg.userName||!this.loginMsg.password){
					return 	this.$u.toast(`账号密码不能为空`)
				}
				console.log (1);
				this.loading = true
				try {
					await uni.$http.post("/api/v1/user/login", this.loginMsg).then(res => {
						if (res.data.code === 200) {
							console.log(res);
							setTimeout(() => {
								this.$u.toast(`登录成功`)
								// this.loading = false
								uni.setStorageSync('userId', res.data.data.userId)
								uni.setStorageSync('Token', res.data.data.tokenValue)
								uni.setStorageSync('id', res.data.data.permissions[0].id)
								uni.setStorageSync('userName', this.loginMsg.userName)
								this.getProjectList()
								uni.switchTab({
									url: "/pages/index/index"
								})
							}, 2000)
						} else {
							uni.$showMsg('账号或者密码错误')
							this.loading = false
						}
					})

				} catch (err) {
					console.log(err)
					setTimeout(() => {
						this.loading = false
					}, 2000)
				} finally {
					setTimeout(() => {
						this.loading = false
					}, 2000)

				}
				// await uni.$http.post("/api/v1/user/login", this.loginMsg).then(res=>{
				// 	if (res.data.code === 200) {
				// 		setTimeout(() => {
				// 			this.$u.toast(`登录成功`)
				// 			this.loading = false
				// 			uni.setStorageSync('userId', res.data.data.userId)
				// 			uni.setStorageSync('Token', res.data.data.tokenValue)
				// 			uni.setStorageSync('id', res.data.data.permissions[0].id)
				// 			this.getProjectList()
				// 			uni.switchTab({
				// 				url: "/pages/index/index"
				// 			})
				// 		}, 1000)
				// 	} else {
				// 		uni.$showMsg('账号或者密码错误')
				// 		this.loading = false
				// 	}
				// })
				// console.log(data);

			},
			changActive() {
				this.active = !this.active
			},
			toIndex() {
				if (this.active == true) {
					uni.showModal({
						title: '温馨提示',
						content: '隐私未勾选，点击确定自动勾选登录',
						success: res => {
							if (res.confirm) {
								this.active = false
								this.login()
							}
						}
					})
				} else {
					this.login()

				}
			},
			async getProjectList() {
				let msg = {
					userId: uni.getStorageSync('userId'),
					pageNo: 1,
					pageSize: 100
				}
				const {
					data: res
				} = await uni.$http.post('/api/v1/test/testProject/queryByCondition', msg)
				// console.log(res.data.records[0].id);
				uni.setStorageSync('testProjectId', res.data.records[0].id)
				uni.setStorageSync('gatewayDeviceId', res.data.records[0].gatewayDeviceId)
			}
		},


	}
</script>
<style lang="scss" scoped>
	.head {
		width: 100vw;
		height: calc(40vh - 30px);
		// background-color: red;
	}

	.login {
		height: 60vh;
		width: 100vw;
		background-color: #eee;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;

		.title {
			text-align: center;
			font-size: 30px;
			padding: 30px 0 10px 0;
		}

		.login-msg {
			height: 20vh;
			width: calc(100vw - 60px);
			margin: 0 20px;
			background-color: #fdfdfd;
			border-radius: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			padding: 10px;

			.username {
				display: flex;
				justify-content: center;
				align-items: center;

				input {
					// margin-left: 2px;
					width: 100%;
					height: 7vh;
					// border: 1px solid black;
					// border: none;
					// text-align: center;
					outline: none;
					text-indent: 10px; //缩进，输入的内容
					padding-left: 10px;
					border-bottom: 1px solid #eee // width: 80%;
				}
			}
		}

		.loginBtn {

			width: 40vw;
			margin: 3vw 30vw;
		}

		.agreeMsg {
			margin-top: 20px;
			font-size: 13px;
			text-align: center;

			.icon {
				vertical-align: middle;
			}

			text {
				color: #1b89fb;
			}
		}
	}
</style>