<<<<<<< HEAD
=======
<template>
	<div>
		<div class="divbox">
			<div class="div-left">
				<image class="logo" src='../../imgs/logo.png' mode="widthFix"></image>
				
			</div>
			<div class="div-right">
				<h1 class="h1-title">内部会议系统</h1>
				<u-form :model="form" :rules="rules" ref="uForm" label-position="top" label-width="100"
					class="view-form">
					<u-form-item label="" prop="username">
						<view class="form-item-box">
							<u-input autocomplete="new-password" class="form-item-input" v-model="form.username"
								placeholder="请输入用户名" />
						</view>
					</u-form-item>
					<u-form-item label="" prop="password" class="form-item-pass" style="padding-bottom: 0">
						<view class="form-item-box" style="display: flex; align-items: center">
							<u-input :type="!passShow ? 'password' : ''" class="form-item-input"
								autocomplete="new-password" v-model="form.password" placeholder="请输入密码" />
							<image @click="passShow = !passShow" v-if="passShow" mode="aspectFit" class="form-item-img"
								src="../../imgs/xyj.png" style="margin-right: 14px"></image>
							<image @click="passShow = !passShow" v-else mode="aspectFit" class="form-item-img"
								src="../../imgs/xyj1.png" style="margin-right: 14px"></image>
						</view>
					</u-form-item>

					<u-form-item label="" prop="code">
						<view style="width:100%; display: flex;">
							<view class="form-item-box" style="flex:1">
								<u-input autocomplete="off" class="form-item-input" v-model="form.code"
									placeholder="请输入验证码" />
							</view>
							<view class="code-imagebox" @click="getCaptchaImage()">
								<image class='code-image' :src="codeUrl" alt=""></image>
							</view>

						</view>
						
					</u-form-item>
					<view @click="show = true" style="text-align: right;"> 忘记密码？</view>
				</u-form>
				
				<view class="log-but" @click="handleLogin"> 登录 </view>
			</div>
		</div>
		<u-modal :show="show" :content='configData' @confirm="show = false"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</div>
</template>
<script>
	import {
		mapMutations,
		mapState
	} from "vuex";
	import {
		login,
		captchaImage,
		config
	} from "@/common/userApi";
	export default {
		name: "SignIn",
		components: {},
		data() {
			return {
				show:false,
				codeUrl: '', // 图片验证码
				passShow: false,
				form: {
					username: "",
					password: "",
				},
				configData:'',
				rules: {
					username: [{
						required: true,
						message: "请输入用户名",
						trigger: ["blur"],
					}],
					password: [{
						required: true,
						message: "请输入密码",
						trigger: ["blur"],
					}],
					code: [{
						required: true,
						message: "请输入验证码",
						trigger: ["blur"],
					}],
				},
			};
		},
		computed: {
			...mapState("ht", ["reportId"]),
		},
		created() {
			this.getCaptchaImage() // 获取验证码
			this.getConfig() // 获取配置信息
			this.keyEnter()
		},
		methods: {
			...mapMutations(["setTrainPath"]),
			// 监听回车事件
			keyEnter(){
				document.onkeydown = e =>{
					if(e.keyCode == 13){
						this.handleLogin() // 登录
					}
				}
			},
				// 获取验证码
			async getConfig() {
				const res = await config('sys.password.forget');
				const {
					code,
					rows,
					msg
				} = res;
				if (code === 200) {
					this.configData = rows[0]?.configValue || ''
				}
			},
			// 获取验证码
			async getCaptchaImage() {
				const res = await captchaImage();
				const {
					code,
					data,
					msg
				} = res;
				if (code === 200) {
					this.codeUrl = "data:image/gif;base64," + res.img;
					this.form.uuid = res.uuid
				}
			},
			// 登录
			async handleLogin() {
				this.$refs.uForm.validate().then(async (formRes) => {
					const param = {
						username: this.form.username,
						password: this.form.password,
						code: this.form.code, // 4训练师端、5居家端、6医生端
						uuid: this.form.uuid,
					};
					const res = await login(param);
					const {
						code,
						data,
						msg
					} = res;
					if (code === 200) {
						uni.setStorageSync("userToken", res.token);
						uni.setStorageSync("userName", this.form.username);
						uni.navigateTo({
							url: "/pages/index/index",
						});
						// 全屏
						var docElm = document.documentElement;
						if (docElm.requestFullscreen) {
							docElm.requestFullscreen();
						} else if (docElm.mozRequestFullScreen) {
							docElm.mozRequestFullScreen();
						} else if (docElm.webkitRequestFullScreen) {
							docElm.webkitRequestFullScreen();
						} else if (elem.msRequestFullscreen) {
							elem.msRequestFullscreen();
						}
						this.handleSuccess("登录成功");
					} else {
						this.handleError(msg || "登录失败");
					}
				})

			},
			// 错误提示信息
			handleError(_tips) {
				this.$refs.uToast.show({
					type: "error",
					icon: false,
					message: _tips,
				});
			},
			// 正确提示信息
			handleSuccess(_tips) {
				this.$refs.uToast.show({
					type: "success",
					icon: false,
					message: _tips,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.view-form {
		width: 80%
	}

	.code-imagebox {
		width: 100px;
		margin-left: 12px;

		.code-image {
			width: 100px;
			height: 48px;
		}
	}

	.log-but {
		width: 400px;
		line-height: 48px;
		background: #3d78ff;
		border-radius: 4px;
		font-size: 20px;
		color: #ffffff;
		text-align: center;
		margin-top: 36px;
	}

	.checkbox-box {
		display: flex;
	}

	.view-yd {
		width: 440px;
	}

	/deep/.u-checkbox__icon-wrap--square {
		width: 18px !important;
		height: 18px !important;
	}

	.pawss {
		display: flex;
		justify-content: space-between;
		color: #3d78ff;

		.forget {
			font-size: 14px !important;
		}
	}

	/deep/ .u-checkbox-label--left span {
		font-size: 14px !important;
	}

	.form-fg {
		height: 30px;
	}

	.form-item-img {
		width: 20px;
		height: 30px;
	}

	.ipt-box {
		width: 380px;
		margin: 0 100px;
	}

	.code-wrap {
		display: flex;

		.code-field {
			flex: 1;
		}

		.code-btn {
			margin-left: 10px;
		}

		i {
			position: absolute;
			top: 30px;
			right: 15px;
			cursor: pointer;
		}
	}

	.forgetPassword {
		cursor: pointer;
		color: rgba(0, 0, 0, 0.54);
	}

	.forgetPassword:hover {
		text-decoration: underline;
		color: rgba(0, 0, 0, 0.87);
	}
</style>
<style scoped lang="scss">
	.form-item-box {
		width: 100%;
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #dcdfe6;
		height: 46px;
	}

	.form-item-input {
		height: 46px !important;
		border-radius: 23px;
		padding: 0 14px !important;
		color: #333333;
		box-sizing: border-box;
		border: none;
	}

	/deep/ .uni-input-input {
		//font-size: 50px;
	}

	.form-item-input:placeholder {
		font-size: 16px;
		color: #000;
	}

	.form-item-codebut {
		font-size: 12px;
		color: #888888;
		width: 100px;
		text-align: center;
		border-left: 1px solid #d8d8d8;
	}

	/deep/ .u-form-item__body__left__content__label {
		width: 100px;
		font-size: 22px;
		color: #000000;
		margin-bottom: 16px;
	}

	/deep/.u-input__content__field-wrapper__field {
		height: 48px;
		line-height: 48px;
		font-size: 16px;
	}

	/deep/.ant-input {
		font-size: 22px;
	}

	/deep/.ant-input-affix-wrapper .ant-input:not(:first-child) {
		padding-left: 40px;
	}

	.h1-title {
		text-align: center;
		font-weight: bold;
		font-size: 36px;
		width: 100%;
		margin-bottom: 20px;
	}

	.divbox {
		display: flex;
		background-image: url('../../imgs/left.png');
		background-position: left bottom;
		background-repeat: no-repeat;
		background-size: 100% ;
		.div-left {
			position: relative;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			.equipment {
				position: absolute;
				bottom: 4px;
				color: #6fcd9d;
			}
		}
	}
	.divbox {
		width: 100%;
		height: 100vh;
		display: flex;

		.div-left {
			flex: 2;
		}

		.div-right {
			background:rgba(255, 255, 255, .6) ;
			width: 500px;
			
			
			text-align: left;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-content: center;

			.p-note {
				color: #10b884;
			}
		}
	}
</style>
>>>>>>> 25ec9f751d39f07689d8b4df360b7c458d10409a
