
<template>
	<view class="content">
		<view class="top_img">

			<image class="logo" src="/static/login/图层 1.png"></image>
			<image class="logo_car" src="/static/login/y.png"></image>
			<view class="top_title">
				SIGN IN
			</view>
			<view class="top_login">
				欢迎登录,
			</view>
			<view class="top_Firstaid">
				院前急救
			</view>
		</view>
		<view class="con_rectangle">
			<view class="con_view">

			</view>
			<view class="con_phone">
				<view class="phone_ico">
					<image src="../../static/login/手机1.png" mode=""></image>
					<text class="phone_line">|</text>
					<input class="uni-input" focus placeholder="请输入手机号码" v-model="user_plone" />

				</view>
			</view>
			<view class="line">

			</view>
			<view class="con_password">
				<view class="phone_ico">
					<image src="../../static/login/矩形 4.png" mode=""></image>
					<text class="phone_line">|</text>
					<input style="width: 280rpx;" class="uni-input" placeholder="请输入密码" :password="showPassword" v-model="user_password" />

					<image src="../../static/login/num.png"
						style="width: 33rpx;height: 23rpx;opacity: 0.75;position: absolute;right: 91rpx;line-height: 23rpx;"
						@click="changePassword">

				</view>
			</view>
			<view class="btn" @click="tap_login">
				<view class="log_in" >
					登&nbsp;录
				</view>

			</view>
			<view class="login_agreement">
				<checkbox-group @change="handleChange">
					<label class="checkbox">
						<checkbox v-model="select" :checked="select" style="transform:scale(0.7);" />
						登录代表你已经同意<text>《用户协议》</text>和<text>《隐私权政策》</text>
					</label>
				</checkbox-group>
			</view>

		</view>
		<!-- 登录成功弹出层 -->
		<view class="popup">
			<!-- 认证通不通过的弹出层 -->
			<uni-popup ref="popup" type="center" :animation="false" :mask-click="false" v-if="popup1Visible">

				<image class="popup_img" src="../../static/login/图层 2.png" mode="">

				</image>
				<view class="popup_ok" :style="popup_title=='认证不通过！'?'color:red':''">
					{{popup_title}}
				</view>
				<button type="default" class="popup_btn" style="background-color:#5581FF; color: #fff;"
					@click="btn_ok">确定</button>
			</uni-popup>
			<!-- 协议勾没勾选的弹出层 -->
			<uni-popup ref="popup" type="center" :animation="false" :mask-click="false" v-if="popup2Visible">

				<view class="agreement">
					<view class="agreement_title">
						服务协议及隐私保护
					</view>
					<view class="agreement_content">
						<view>
							尊敬的用户，为了更好地保障您的合法权益，我们依据相关法律法规制定了用户注册使用协议、隐私保护指引以及个人信息授权书，请您在点击同意注册之前仔细阅读并充分理解相关条款，其中的重点条款已经为您标注，方便您了解自己的权利。我们将通过《隐私保护指引》以及《个人信息处理授权书》向您说明:
						</view>
						<view class="agreement_empty">

						</view>
						<view>
							1、为了更好地为您提供服务，我们会根据您的授权，收集和使用对应的必要信息(如您的姓名、联系电话等);
						</view>
						<view>
							2、您可以对上述信息进行访问、更正、删除为了更好地为您提供服务，我们会根据您的授权，收集和使用对应的必要信息(如您的姓名、联系电话等);
						</view>


					</view>
					<view class="agreement_but">
						<button type="default" class="but_no" @click="notArgree">不同意</button>
						<button type="primary" class="but_yes" @click="agree">同意</button>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 内部使用 -->
		<view class="tips">
			<uni-icons type="info" size="35rpx" color="#5581FF" style="margin-right: 5rpx;height:30rpx;width: 30rpx;"></uni-icons><text>仅限内部人员使用</text>
		</view>

	</view>
</template>


<script>
	import md5 from 'js-md5';
	export default {
		data() {
			return {
				// 用户密码查看
				showPassword: true,
				// 用户手机号
				user_plone: '',
				//用户密码
				user_password: '',
				//用户认证提示标题
				popup_title: '',
				//协议是否选中
				select: false,
				//显示用户认证
				popup1Visible: true,
				//显示协议
				popup2Visible: true,
				
			}
		},
		onLoad() {
			
		},
		watch: {
			popup_title(newVal) {
				if (newVal === '认证完成' || newVal === '认证不通过！') {
					this.popup1Visible = true; // 如果popup_title的值是'认证完成'或'认证不通过！'，则显示第一个弹出框
					this.popup2Visible = false; // 隐藏第二个弹出框
				} else if (newVal === '') {
					this.popup1Visible = false;
					this.popup2Visible = true;
				}
			}
		},
		methods: {
			// 查看密码
			changePassword() {
				this.showPassword = !this.showPassword;

			},

			//点击登录
			tap_login() {
				if (this.user_plone !== '' && this.user_password !== '' && this.select == true) {
					const password = md5(this.user_password);
					uni.request({
					  url: 'http://192.168.0.15:8080/wechat/authentication', // 后端服务的地址
					  method: 'POST', // 请求方法，根据实际情况选择
					  data: {username: this.user_plone ,password:password}, // 发送给后端的数据，根据实际情况填写
					  
					  success: (res)=>{
						// 请求成功时的处理逻辑
						if(res.statusCode=='200'){
							//设置提示标题
							this.popup_title = '认证完成'
							this.$refs.popup.open('center')
							
						}
					  },
					  fail: function(err) {
					    console.error(err); // 请求失败时的处理逻辑
					  }
					});
					
				} else if (!this.select && this.user_plone !== '' && this.user_password !== '') {
					this.popup_title = ''
					this.$refs.popup.open('center')
				} else {
					//设置提示标题
					this.popup_title = '认证不通过！'
					this.$refs.popup.open('center')
				}
			},
			//认证成功时登录
			btn_ok() {
				if (this.popup_title == '认证完成') {
					//跳转
					uni.navigateTo({
						url: '/pages/accredit/accredit'
					});
				    uni.setStorageSync('userName',this.user_plone)	
					this.$refs.popup.close()
					this.user_plone = ''
					this.user_password = ''
					this.select = false
				} else {
					//弹窗关闭
					this.$refs.popup.close()
				}
			},
			//协议弹出层确定
			agree() {
				//弹出层关闭
				this.$refs.popup.close()
				this.select = true
				this.popup_title = '认证完成'
			},
			//协议弹出层取消
			notArgree() {
				//弹出层关闭
				this.$refs.popup.close()
				this.select = false

			},
			//协议选中不选中
			handleChange(value) {
				var values = value.detail.value
				// 如果选中的值数组不为空，则将 select 设为 true，否则设为 false
				this.select = values.length > 0;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 750rpx;
		height: 1334rpx;
		position: relative;

	}

	.top_img {
		width: 750rpx;
		height: 600rpx;

	}

	.logo_car {
		position: absolute;
		left: 303rpx;
		top: 134rpx;
		width: 447rpx;
		height: 333rpx;
		z-index: 10;
	}

	.top_title {
		width: 100rpx;
		height: 21rpx;
		position: absolute;
		top: 166rpx;
		left: 52rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: left;
		font-style: normal;
		text-transform: none;
		color: #80A5EE;
	}

	.top_login {
		width: 275rpx;
		height: 68rpx;
		position: absolute;
		left: 51rpx;
		top: 221rpx;
		font-weight: 400;
		font-size: 63rpx;
		color: #FFFFFF;
	}

	.top_Firstaid {
		position: absolute;
		top: 306rpx;
		left: 51rpx;
		width: 220rpx;
		height: 52rpx;
		font-size: 55rpx;
		color: #FFFFFF;
		text-align: left;
	}

	.logo {
		height: 600rpx;
		width: 750rpx;

	}

	.con_rectangle {
		width: 726rpx;
		height: 581rpx;
		position: absolute;
		left: 13rpx;
		top: 391rpx;
		background-color: #FFFFFF;
		border-radius: 31rpx 31rpx 31rpx 31rpx;
	}

	.con_view {
		width: 726rpx;
		height: 120rpx;

	}

	.con_phone {
		width: 567rpx;
		height: 90rpx;
		padding-left: 88rpx;
		display: flex;
		align-items: center;

	}

	.line {
		width: 547rpx;
		height: 1rpx;
		position: absolute;
		left: 88rpx;
		background: #848484;

	}

	.con_password {
		width: 567rpx;
		height: 100rpx;
		padding-left: 88rpx;
		display: flex;
		align-items: center;
		position: relative;

	}

	.phone_ico {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.phone_ico image {
		width: 24rpx;
		height: 34rpx;
		vertical-align: middle;
	}

	.phone_line {
		width: 1rpx;
		opacity: 0.22;
		padding-left: 21rpx;
	}

	.uni-input {
		padding-left: 30rpx;
		width: 280rpx;
		height: 24rpx;
		padding-top: 9rpx;
	}

	.uni-icon {
		width: 33rpx;
		height: 23rpx;
		opacity: 0.75;
		position: absolute;
		right: 91rpx;
		line-height: 23rpx;
	}

	.btn {
		width: 567rpx;
		height: 104rpx;
		box-shadow: 6rpx 0rpx 10rpx 0rpx #1579FD;
		background-color: #1579FD;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin-left: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.log_in {
		width: 77rpx;
		height: 34rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.login_agreement {
		width: 500rpx;
		height: 20rpx;
		margin-left: 120rpx;
		margin-top: 30rpx;
		font-weight: 400;
		font-size: 18rpx;
		color: #666666;
		line-height: 20rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;

	}

	.login_agreement text {
		color: #F34141;
	}

	 // 登录成功的弹出层 
	.popup {
		.popup_img {
			width: 361rpx;
			height: 381rpx;
			position: relative;
		}

		.popup_ok {
			position: absolute;
			top: 45%;
			left: 30%;
			font-size: 31rpx;
			color: #333333;
			line-height: 31rpx;
			width: 124rpx;
			height: 30rpx;
		}

		.popup_btn {
			position: absolute;
			width: 237rpx;
			height: 63rpx;
			background: #5581FF;
			border-radius: 31rpx 31rpx 31rpx 31rpx;
			top: 70%;
			left: 15%;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 63rpx;
		}
	}


	// 服务协议弹出层
	.agreement {
		width: 594rpx;
		height: 779rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		position: relative;
		text-align: left;
		font-style: normal;
		text-transform: none;

		.agreement_title {
			width: 311rpx;
			height: 34rpx;
			font-weight: 400;
			font-size: 34rpx;
			color: #141414;
			line-height: 34rpx;
			position: absolute;
			left: 137rpx;
			top: 45rpx;
		}

		.agreement_content {
			width: 493rpx;
			height: 505rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #141414;
			line-height: 40rpx;
			position: absolute;
			left: 50rpx;
			top: 115rpx;
			margin-top: 26rpx;
			overflow-y: auto;

			.agreement_empty {
				height: 15rpx;
			}
		}

		.agreement_but {
			width: 493rpx;
			height: 85rpx;
			position: absolute;
			left: 42rpx;
			top: 657rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			button {
				width: 230rpx;
				height: 82rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				text-align: center;
				line-height: 82rpx;
				font-weight: 400;
				font-size: 32rpx;
			}

			.but_no {
				background: #F3F5F7;
				color: #141414;
			}

			.but_yes {
				background: #538DEB;
				color: #FFFFFF;
			}
		}
	}
	//提示信息
	.tips{
		position: absolute;
		left: 72rpx;
		top: 1235rpx;
		width: 600rpx;
		height: 60rpx;
		color: #5581FF;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>