jsy-app/pages/agreement.vue

<template>
	<view class="login-container" v-if="showPop">
		<view class="title">
			<image :src="appInfo.logo"></image>
			<text>{{appInfo.name}}</text>
		</view>
		<view class="bottom_text">
			<view>浙ICP备2023018079号-2A</view>
			<view>浙江及时雨智能灌溉设备有限责任公司</view>
		</view>
	</view>
	<view class="login-container" v-else style="background-image: url(../static/images/login/login_bg1.png);">
		<view class="title">
			<image :src="appInfo.logo"></image>
			<text>{{appInfo.name}}</text>
		</view>
		<view class="login-form-content" >
			<image src="/static/images/login/jz.gif" style="width: 120px; height: 120px;margin-top: 50%;" :vertical="true"></image>
			<!-- <u-loading-icon size="50" mode="circle" :vertical="true" text="数据恢复中" /> -->
			<u-button size="large" text="重新登录" @click="reLoginFun" v-if="reLogin" />
		</view>
		<view class="bottom_text">
			<view>浙ICP备2023018079号-2A</view>
			<view>浙江及时雨智能灌溉设备有限责任公司</view>
		</view>
	</view>
	<!-- 协议弹窗 -->
	<u-popup mode="center" :show="showPop" :is-mask-click="false">
		<view style="background: #f3f3f3;max-width: 70vw;padding: 10px;    border-radius: 5px;">
			<view style="text-align: center;font-weight: bold;margin-bottom: 10px;">
				<text>用户协议和隐私协议</text>
			</view>
			<view style="line-height: 24px; font-size: 14px; color: #555;">
				我们依据相关法律制定了
				<text class="text-blue" @click="handleUserAgrement">《用户协议》</text>
				和
				<text class="text-blue" @click="handlePrivacy">《隐私协议》</text>
				,请您在点击同意之前仔细阅读并充分理解相关条款。为了便于您理解《隐私政策》,特向您说明如下:
				<br>
				1、为了向您提供服务,我们需要收集您的设备信息和操作日志;
				<br>
				2、我们会采取业界先进的安全措施保护您的信息安全,未经您同意,我们不会向第三方共享您的信息;
				<br>
				3、您可以对上述信息进行查询、更正、删除我们也在政策中提供专门的个人信息保护联系方式。
				<br>
				如您同意以上协议内容,请点击"同意"接受并开始使用我们的服务。
			</view>
			<view style=" display: flex;margin-top: 10px;grid-gap: 10px;">
				<u-button size="large" text="暂不使用" @click="closeApp" />
				<u-button type="success" size="large" text="同意" @click="toLoginFun" />
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref,
		watch,
		computed
	} from "vue";
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	import {
		getToken
	} from '@/utils/auth'
	import * as loginJS from '@/utils/login.js'
	import plugins from "@/plugins";
	import config from '@/config.js'
	const appInfo = config.appInfo;
	const showPop = ref(false);
	const reLogin = ref(false);

	onLoad(() => {
		loginJS.hasToken().then(res => {
			showPop.value = false;
			// 登录
			loginJS.getInfo().then(() => {
				uni.switchTab({
					url: '/pages/index',
				});
			}).catch(error => {
				reLogin.value = true;
				plugins.modal.msg(error)
			})
		}).catch(error => {
			showPop.value = true;
			// #ifdef H5
			toLoginFun()
			// #endif
		})
	})

	// 暂不使用
	function closeApp() {
		// #ifdef APP-PLUS
		plus.runtime.quit();
		// #endif
	}
	// 同意
	function toLoginFun() {
		uni.reLaunch({
			url: `/pages/login`
		});
	}
	// 重新登录
	function reLoginFun() {
		loginJS.reLoginHandle();
	}

	const globalConfig = ref(config);
	// 隐私协议
	function handlePrivacy() {
		let site = globalConfig.value.appInfo.agreements[0];
		uni.navigateTo({
			url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
		});
	};
	// 用户协议
	function handleUserAgrement() {
		let site = globalConfig.value.appInfo.agreements[1]
		uni.navigateTo({
			url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
		});
	};
</script>

<style lang="scss" scoped>
	uni-page-wrapper {
		max-height: 100%;
		overflow: hidden;
	}

	page {
		background-color: #ffffff;
	}

	::v-deep .u-popup__content {
		background-color: transparent !important;
	}

	.u-checkbox {
		margin: 0;
	}

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

	.login-container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url(../static/images/login/login_bg.png);
		background-size: 100% 100%;
		background-position: 30% 30%;
		background-repeat: no-repeat;

		::v-deep .u-tabs__wrapper__nav__item__text {
			font-size: 32rpx;
		}

		.title {
			margin: 80px 0 30px;
			font-size: 44rpx;
			color: #39ac4f;
			text-align: center;

			image {
				width: 120rpx;
				height: 120rpx;
				margin-bottom: 20px;
			}

			text {
				display: block;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 10px auto 20px;
			width: 80%;

			.input-item {
				background-color: transparent !important;
				border-bottom: 1px solid #39ac4f;
				border-image: linear-gradient(to left, transparent, #39ac4f, transparent)1;
				margin: 0px auto;
				height: 45px;
				border-radius: 20px;

				.icon {
					color: #39ac4f;
					font-size: 48rpx;
				}

				.input {
					width: 100%;
					font-size: 30rpx;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-code {
				margin-top: 10px;
				display: flex;
				justify-content: space-around;

				.login-code-button {
					width: 96px;
					height: 38px;
					white-space: nowrap
				}
			}

			.tip-text {
				font-size: 28rpx;
				color: #c0c4cc;
				margin: 10px 0;
				width: 100%;
				overflow: hidden;
			}

			.red-tip {
				font-size: 28rpx;
				color: #ff1e35;
			}

			.remember-password {
				margin-top: 20px;
				display: flex;
				justify-content: space-between;

				.forget-password {
					color: #39ac4f;
					font-size: 28rpx;
				}
			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
			}


		}

		.account_agreement {
			text-align: left;
			margin: 20px 15px;
			font-size: 20rpx;
			font-weight: bold;
			color: red;
		}

		.bottom_text {
			text-align: center;
			margin: auto auto 10px auto;
			font-size: 20rpx;
			color: #000;
		}
	}
</style>