YXGJ/pages/login/login.vue

<template>
	<view class="container">
		<image class="image"
			src="https://yossys22170.obs.cn-east-2.myhuaweicloud.com:443/202309251695606306772B2018b85b.jpg"
			mode="scaleToFill" />
		<view class="box">
			<view :style="{ height: height }" />
			<view class="logo">
				<u--image src="/static/img/LOGO-c1524a7d.svg" width="39.200vw" height="12.533vw" mode="scaleToFill">
					<template v-slot:loading>
						<u-loading-icon color="red"></u-loading-icon>
					</template>
					<view slot="error" style="font-size: 12px;">加载失败</view>
				</u--image>
			</view>
			<account :isAgreement="isAgreement" v-show="loginMethod == 'account'" />
			<phone :isAgreement="isAgreement" v-show="loginMethod == 'phone'" />
			<view style="height: 25px;" />
			<view class="agreement">
				<u-checkbox :checked="isAgreement" shape="circle" @change="changeAgreement" />
				<view @click="changeAgreement">
					已阅读并同意
				</view>
				<text class="nav" @tap="checkTheAgreement">《隐私协议》</text>
			</view>
			<other-login :isAgreement="isAgreement" :loginMethod="loginMethod" @onChange="changeLoginMethod" />
		</view>
	</view>
</template>
<script>
import account from "./modules/account.vue";
import phone from "./modules/phone.vue";
import otherLogin from "./modules/otherLogin.vue";
export default {
	components: {
		account,
		phone,
		otherLogin
	},
	data() {
		return {
			loginMethod: "",
			height: this.usePort == 'h5' ? "100px" : "100px",
			isAgreement: false
		};
	},
	onLoad() {
		this.loginMethod = uni.getStorageSync('loginMethod') || 'account';//登录方式
		if (uni.getStorageSync("isAgreement")) this.isAgreement = true;
	},
	methods: {
		/* 修改登录方式 */
		changeLoginMethod(Method) {
			this.loginMethod = Method;
		},
		changeAgreement() {
			this.isAgreement = !this.isAgreement;
		},
		checkTheAgreement() {
			uni.showLoading({
				title: '加载中...',
			})
			uni.downloadFile({
				url: 'https://yossys22170.obs.cn-east-2.myhuaweicloud.com:443/202309261695715892017B6ef5bd76.docx',
				success: (res) => {
					uni.openDocument({
						filePath: res.tempFilePath,
						fileType: "docx",
						success: (s) => {
							uni.hideLoading();
						},
						fail: (err) => {
							console.log("openDocument", err)
							uni.hideLoading();
							uni.showToast({
								title: '读取失败,请稍后再试',
								icon: "none"
							})
						}
					})
				},
				fail: (err) => {
					console.log("downloadFile", err)
					uni.hideLoading();
					uni.showToast({
						title: '读取失败,请稍后再试',
						icon: "none"
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;

	.box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		box-sizing: border-box;
		z-index: 9;

		.logo {
			width: 147px;
			height: 42px;
			margin: 0 auto 50px;
		}

		.agreement {
			display: flex;
			justify-content: center;
			margin: 0 auto;
			height: 17px;
			font-size: 12px;
			font-weight: 400;
			color: #fff;

			.nav {
				color: #16FFF6;
			}
		}

		/deep/.u-checkbox__icon-wrap,
		/deep/.u-checkbox__icon-wrap--circle {
			width: 16px !important;
			height: 16px !important;

			.u-icon__icon {
				font-size: 10px !important;
			}
		}
	}

	.image {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		z-index: 3;
	}
}
</style>