hldy_app/pages/login/login.vue

<template>
	<view class="backgroundContainer">
		<image class="title-img" src="/static/index/superNu.png" />
		<view class="input-father">
			<view class="add">+86</view>
			<view class="shu"></view>
			<input style="font-size: 27rpx;" type="number" v-model="form.username" maxlength="11" placeholder="请输入手机号" @blur="getImg" />
		</view>
		<view class="input-father">
			<input class="password" password type="text" v-model="form.password" maxlength="15" placeholder="请输入密码" />
		</view>
		
		<view class="input-father" v-show="loginphoto">
			<input class="password" :password="false" v-model="form.captcha" maxlength="15" placeholder="请输入验证码" />
			<image class="input-code" :src="loginphoto" @click="getImg"></image>
		</view>
		<view class="input-father-gray" v-show="(!fullName) || (!canclick)">
			验证并登录
		</view>
		<view class="input-father-blue" v-show="fullName&&canclick" @click="login()">
			验证并登录
		</view>
		<view class="under-container-title">
			<view :class="isTarget ? 'radio-circle-target' : 'radio-circle'" @click="isTarget = !isTarget"></view>
			<view style="margin-left: 17rpx;" class="radio-circle-font" @click="isTarget = !isTarget">我已阅读并同意</view>
			<view class="radio-circle-blue" @click="openany=true;opentype=true">
				《用户协议》
			</view>
			<view class="radio-circle-blue" @click="openany=true;opentype=false">
				《隐私政策》
			</view>
		</view>
	</view>
	<!-- 弹出层 -->
	<view v-if="showPopup" class="popup-wrapper" style="z-index: 999;">
		<view class="mask"></view>
		<view class="box">
			<view class="box-title">
				服务条款和隐私保护提示
			</view>
			<view class="font-father">
				<view class="">
					欢迎使用护理单元app!
				</view>
				<view style="text-indent: 2em;">
					我们将通过<text class="text-blue"@click="openany=true;opentype=true">《用户协议》</text>和<text
						class="text-blue" @click="openany=true;opentype=false">《隐私政策》</text>，帮助您了解我们为您提供的服务、我们如何处理个人信息以及您享有的权利。我们会严格按照相关法律法规要求，采取各种安全措施来保护您的个人信息。
				</view>
				<view style="margin: 30rpx 0;">
					点击“同意”按钮，表示您已知情并同意以上协议和以下约定。
				</view>
			</view>
			<view class="gray-box-bgc">
				<scroll-view style="width: 100%;height: 100%;" scroll-y :show-scrollbar="true">
					<view style="margin-bottom: 10rpx;">
						1、服务条款与隐私政策确认：登录即表示您已阅读并同意《NU 护理单元用户服务协议》及《NU 护理单元隐私信息保护政策》，其中包含对您权利义务、个人信息处理的详细说明。
					</view>
					<view style="margin-bottom: 10rpx;">
						2、账号使用规范：账号仅限本人使用，禁止恶意注册、转借或泄露。请妥善保管账号密码，因保管不善导致的账号安全问题，由您自行承担责任。
					</view>
					<view style="margin-bottom: 10rpx;">
						3、内容发布责任：您在平台发布的内容需遵守法律法规，不得包含不良信息或侵犯他人权益的内容。发布利用新技术制作的非真实信息时，须显著标识。
					</view>
					<view style="margin-bottom: 10rpx;">
						4、个人信息保护：我们将依法收集、使用您的个人信息（如手机号用于注册登录），您可通过 “我的 - 设置 - 隐私管理” 查看、修改授权，也可申请注销账号（注销后相关数据将按规定处理）。
					</view>
					<view style="margin-bottom: 10rpx;">
						5、未成年人使用提示：未满 18 周岁用户需在监护人同意后使用，监护人可联系客服人员处理未成年人账号相关事宜，我们将严格保护未成年人信息。
					</view>
				</scroll-view>
			</view>

			<view class="blue-button" @click="closePopup">同意</view>
			<view class="white-button" @click="closeapp">不同意</view>
		</view>
	</view>
	<!-- 弹出层 -->
	<view v-if="openany" class="popup-any">
		<view class="mask" @click="openany=false"></view>
		<view class="box-any">
			<view class="title-left">
				<image class="back-img" src="/static/left.png" @click="openany=false"></image>
				<view v-if="!opentype" class="back-font">NU护理单元隐私信息保护政策</view>
				<view v-if="opentype" class="back-font">NU护理单元用户服务协议</view>
			</view>
			<twoseven v-if="!opentype" />
			<oneseven v-if="opentype" />
		</view>
	</view>
	<!-- 弹出层 -->
	<view v-if="openbottom" class="popup-wrapper">
		<view class="mask" @click="openbottom=false"></view>
		<view class="box-small">
			<view class="box-title" style="margin-top: 30rpx;">
				请阅读并同意以下条款
			</view>
			<view class="font-father">
				<text class="text-blue" @click="openany=true;opentype=true">《用户协议》</text>
				<text class="text-blue" @click="openany=true;opentype=false">《隐私政策》</text>
			</view>
			<view class="blue-button" @click="closebottom">同意并继续</view>
		</view>
	</view>
	<!-- 弹出层 -->
	<view v-if="openchange" class="popup-wrapper">
		<view class="mask"></view>
		<view class="box-change">
			<view class="box-title">
				修改账户登录密码
			</view>
			<view class="input-father">
				<input class="password" :password="false" v-model="changeform.oldpassword" maxlength="15"
					placeholder="请输入新密码" />
			</view>
			<view class="input-father">
				<input class="password" :password="false" v-model="changeform.newpassword" maxlength="15"
					placeholder="请再次输入新密码" />
			</view>

			<view class="blue-button" style="margin-top: 80rpx;" @click="openchange=false">确定</view>

		</view>
	</view>
	<!-- 自动更新组件  -->
	<zy-update ref="zyupgrade" :noticeflag="true" theme="blue" :h5preview="false" oldversion="1.0.0"
		:appstoreflag="true" :autocheckupdate="true"></zy-update>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, reactive } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import ZyUpdate from '@/component/zy-upgrade/zy-upgrade.vue'
	import oneseven from '@/pages/login/oneseven.vue'
	import twoseven from '@/pages/login/twoseven.vue'
	import { isRel,getLoginImg,loginApp } from './api.js'
	
	
	const zyupgrade = ref(null);
	const isTarget = ref(false);

	const form = reactive({
		username: "",
		password: "",
		captcha: "",
		checkKey:0
	})

	const changeform = reactive({
		oldpassword: "",
		newpassword: "",
	})

	// 计算属性
	const fullName = computed(() => {
		return form.password && isLength11(form.username) 
	})

	const showPopup = ref(false)
	function closebottom() {
		openbottom.value = false;
		isTarget.value = true;
	}

	function closePopup() {
		showPopup.value = false;
		uni.setStorageSync("appWgtVersion", uni.getSystemInfoSync().appWgtVersion)
	}
	function closeapp() {
		plus.runtime.quit()
	}

	function isLength11(str) {
		return typeof str === 'string' && str.length === 11;
	}
	const jumpTo = (url : string) => {
		uni.navigateTo({
			url: url
		});
	}
	const loginphoto = ref("");
	const canclick = ref(false)
	const time = ref(0);
	const getImg = () => {
		if(/^\d{11}$/.test(form.username)){
			isRel(form.username).then((res:any)=>{
				if( res.result !==null && res.result.serverUrl){
					uni.setStorageSync('serverUrl', res.result.serverUrl);
					console.log("info",res.result)
					time.value = Date.now();
					getLoginImg(time.value).then((element:any)=>{
						loginphoto.value = element.result
						canclick.value = true
					})
				}else{
					uni.setStorageSync('serverUrl', "");
					loginphoto.value = "";
					uni.showToast({
					  title: '该手机号未绑定机构',
					  icon: 'none', // 可选值：'success'、'loading'、'none'
					  duration: 2000   // 持续时间，单位ms
					})
					canclick.value = false;
				}
				
			})
		}else{
			if(form.username){
				uni.showToast({
				  title: '手机号不足11位',
				  icon: 'none', // 可选值：'success'、'loading'、'none'
				  duration: 2000   // 持续时间，单位ms
				})
			}
		}
	}
	const openbottom = ref(false);
	const openchange = ref(false);
	const openany = ref(false);
	const opentype = ref(false)
	const login = () => {
		if (isTarget.value) {
			// if (form.password == "123456") {
			// 	openchange.value = true;
			// } else {
			// 	loginApp().then(res=>{
			// 		console.log("???",res)
			// 	})
			// 	// jumpTo(`/pages/index/index`)
			// }
			form.checkKey = time.value
			loginApp(form).then(res=>{
				if(res.success){
					uni.showToast({
					  title: res.message,
					  icon: 'none', // 可选值：'success'、'loading'、'none'
					  duration: 500   // 持续时间，单位ms
					})
					uni.setStorageSync('token', res.result.token);
					uni.setStorageSync('realname', res.result.userInfo.realname);
					// console.log("????",res.result.userInfo.realname)
					setTimeout(()=>{
						jumpTo(`/pages/Initialization/index`)
					},500)
				}else{
					
					uni.showToast({
					  title: res.message,
					  icon: 'none', // 可选值：'success'、'loading'、'none'
					  duration: 2000   // 持续时间，单位ms
					})
					setTimeout(()=>{
						getImg()
						form.captcha=""
					},2000)
				}
				// console.log("???",res)
			})
		} else {
			openbottom.value = true;
		}
	}
	// 生命周期钩子
	onLoad(() => {
		if (uni.getStorageSync('appWgtVersion') != uni.getSystemInfoSync().appWgtVersion) {
			showPopup.value = true;

		}
	});
	// 生命周期钩子
	onShow(() => {
		zyupgrade.value?.check_update()
	});
</script>

<style scoped lang="less">
	.backgroundContainer {
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.6);
		background-blend-mode: screen;
		background-size: cover;
		background-position: center center;
		overflow: hidden;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.title-img {
			width: 150rpx;
			height: 200rpx;
			margin-bottom: 130rpx;
		}

		.input-father {
			height: 90rpx;
			width: 550rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			position: relative;

			.input-code {
				position: absolute;
				top: 0;
				right: 20rpx;
				width: 150rpx;
				height: 90rpx;
			}
		}

		.input-father-blue {
			margin-top: 100rpx;
			height: 90rpx;
			width: 550rpx;
			background: linear-gradient(to right, #00C9FF, #0076FF);
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 32rpx;
		}

		.input-father-gray {
			margin-top: 100rpx;
			height: 90rpx;
			width: 550rpx;
			background: rgb(148, 154, 163);
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.under-container-title {
		display: flex;
		margin-top: 80rpx;
		align-items: center;
		font-size: 25rpx;
		font-weight: 500;

		.radio-circle-blue {
			color: #0083FF;
			margin-top: 3rpx;
		}

		.radio-circle-font {
			color: #5A607F;
			margin-top: 3rpx;
		}

		.radio-circle {
			position: relative;
			margin-top: 2rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			border: 2rpx solid #C0C5D9;
			background-color: transparent;
		}

		.radio-circle-target {
			position: relative;
			margin-top: 2rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			border: 2rpx solid #C0C5D9;
			background-color: transparent;
		}

		.radio-circle-target::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 30rpx;
			height: 30rpx;
			background-color: #00C9FF;
			border-radius: 50%;
		}
	}

	.add {
		margin-left: 50rpx;
		font-size: 32rpx;
	}

	.shu {
		background-color: #d2d5d7;
		width: 2rpx;
		height: 35rpx;
		margin: 0 20rpx;
	}

	.password {
		font-size: 27rpx;
		margin-left: 30rpx;
		width: 100%;
		height: 100rpx;
		// margin-top: 50rpx;
	}

	.popup-wrapper {
		position: fixed;
		inset: 0;
		z-index: 2;
		/* 初始透明度 */
		opacity: 0;
		/* 播放动画：名称 fadeIn，时长 0.5s，缓动函数 ease，保持最后状态 */
		animation: fadeIn 0.5s ease forwards;
	}
	.popup-any{
		position: fixed;
		inset: 0;
		z-index: 999;
		/* 初始透明度 */
		opacity: 0;
		/* 播放动画：名称 fadeIn，时长 0.5s，缓动函数 ease，保持最后状态 */
		animation: fadeIn 0.5s ease forwards;
	}

	/* 定义关键帧 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.mask {
		position: absolute;
		inset: 0;
	}
	
	.box-any {
		position: absolute;
		top: 50%;
		left: 50%;
		// transform: translate(0, -50%);
		// transform: translateX(-50%);
		transform: translate(-50%,-50%);
		width: 1000rpx;
		height: 1500rpx;
		background: #fff;
		border-radius: 50rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// padding: 65rpx;
		padding: 65rpx 40rpx;
	}
	
	.box-small {
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		// transform: translate(0, -50%);
		transform: translateX(-50%);
		width: 800rpx;
		height: 350rpx;
		background: #fff;
		border-radius: 50rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 65rpx;

		.box-title {
			font-size: 35rpx;
			margin: 60rpx 0;
		}

		.font-father {
			line-height: 50rpx;
		}

		.text-blue {
			color: #0083FF;
		}
	}

	.box-change {
		position: absolute;
		top: 60%;
		left: 50%;
		transform: translate(-50%, -60%);
		width: 800rpx;
		height: 700rpx;
		background: #fff;
		border-radius: 50rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 65rpx;

		.box-title {
			font-size: 35rpx;
			margin: 60rpx 0;
			font-weight: 600;
		}

		.input-father {
			height: 90rpx;
			width: 550rpx;
			background-color: rgb(247, 247, 251);
			border-radius: 30rpx;
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
		}

	}

	.box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 800rpx;
		height: 1100rpx;
		background: #fff;
		border-radius: 50rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 65rpx;

		.box-title {
			font-size: 35rpx;
			margin: 60rpx 0;
		}

		.font-father {
			line-height: 50rpx;
		}

		.text-blue {
			color: #0083FF;
		}

		.gray-box-bgc {
			width: 100%;
			height: 250rpx;
			border: 2rpx solid #CFD5E4;
			background-color: #F2F4F7;
			color: #777777;
			border-radius: 20rpx;
			padding: 20rpx 20rpx;
		}
	}

	.blue-button {
		width: 100%;
		height: 90rpx;
		background: linear-gradient(to right, #00C9FF, #0076FF);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		border-radius: 25rpx;
		font-size: 35rpx;
		letter-spacing: 5rpx;
	}

	.white-button {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
		border-radius: 25rpx;
		font-size: 35rpx;
	}
	.title-left{
		display: flex;
		align-items: center;
		.back-img{
			width: 60rpx;
			height: 60rpx;
			margin-right: 30rpx;
		}
		.back-font{
			font-size: 35rpx;
			font-weight: 600;
		}
	}
</style>