IOT/SourceCode/ui/fbs-ui_app2/pages/login/login.vue

<template>
	<view class="u-page">
		<view class="u-block">
			<view class="u-block__content">
				<view class="image"><image src="/static/image/logo.png" mode="aspectFit"></image></view>
				<u--form ref="form1" labelPosition="left" :model="modelInfo" labelWidth="10">
					<u-form-item prop="username"><u-input v-model="modelInfo.username" @confirm="startLogin" placeholder="请输入用户名"></u-input></u-form-item>
					<u-form-item prop="password"><u-input type="password" @confirm="startLogin" v-model="modelInfo.password" placeholder="请输入密码"></u-input></u-form-item>
					<u-form-item>
						<u-button type="primary" v-if="!isRotate" text="登录" @click="startLogin"></u-button>
						<u-button type="primary" v-if="isRotate" loading loadingText="登录中..."></u-button>
					</u-form-item>
				</u--form>
			</view>
		</view>
	</view>
</template>

<script>
import { log } from "@/utils/base.js";
export default {
	data() {
		return {
			//logoImage: "/pages/login/image/logo.png",
			modelInfo: {
				username: "",
				password: "",
			},
			userName: "", //用户/电话
			password: "", //密码
			isRotate: false, //是否加载旋转
			isFocus: true, // 是否聚焦
			redirect: "",
			rules: {
				username: {
					type: "string",
					required: true,
					message: "用户名不能为空",
					trigger: ["blur", "change"],
				},

				password: {
					type: "string",
					required: true,
					message: "密码不能为空",
					trigger: ["blur", "change"],
				},
			},
		};
	},

	onReady() {
		// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
		this.$refs.form1.setRules(this.rules);
	},
	onLoad(opt) {
		this.redirect = opt.redirect ? decodeURIComponent(opt.redirect) : "";
		this.$store.commit("menu/setMenus", []);
		//log("=====>opt", opt, this.redirect);
	},
	mounted() {
		this.$store.commit("logout");
		//this.isLogin();
	},
	methods: {
		isLogin() {
			if (this.$store.getters.hasLogin) {
				this.$Router.replaceAll("/pages/home/home");
			}
		},
		startLogin(e) {
			//登录
			this.$store.commit("logout");
			if (this.isRotate) {
				//判断是否加载中，避免重复点击请求
				return false;
			}
			if (!this.modelInfo.username) {
				uni.showToast({
					type: "error",
					position: "top",
					title: "用户名不能为空",
				});
				return;
			}
			if (!this.modelInfo.password) {
				uni.showToast({
					position: "top",
					title: "密码不能为空",
				});
				return;
			}
			this.isRotate = true;

			this.$store
				.dispatch("login", {
					n: this.modelInfo.username,
					p: this.modelInfo.password,
				})
				.then(res => {
					this.isRotate = false;
					const path = this.redirect ? this.redirect : "/pages/home/home";
					log("登录成功", path, this.$Router);
					this.$store.dispatch("menu/getMenus");
					uni.showToast({
						type: "success",
						url: path,
						duration: 2000,
						title: "登录成功",
					});
					this.$Router.replaceAll(path);
				})
				.catch(err => {
					this.isRotate = false;
					const msg = "用户名或密码不正确";
					// uni.showToast({
					// 	type: "none",
					// 	position: "top ",
					// 	title: msg,
					// });
					uni.$u.toast(msg);
					log("登录失败", err);
					return;
				});
		},
	},
};
</script>

<style lang="scss">
.image {
	width: 100px;
	height: 100px;
	display: flex;
	margin: 0 auto;
	border-radius: 50%;
	image {
		width: 100%;
		height: 100%;
	}
}
.u-block {
	height: calc(100vh - 200px);
	display: flex;
	align-items: center;
	justify-content: center;
	&__content {
		width: 400%;
	}
}
</style>