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="10" 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>《用户协议》</text><text>《隐私协议》</text>
			</view>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading: false,
				openPassword: true,
				name: true,
				active: false,
				loginMsg: {
					userName: 'testY',
					password: 'yy1021..'
					// userName: 'admin',
					// password: 'rW8[cD1!bQ6{'
				}

			}
		},
		methods: {
			pwdIcon() {
				this.name = !this.name
				this.openPassword = !this.openPassword
			},
			async login() {
				this.loading = true
				try {
					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)
								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>