baiyuApp/pages/auth/loginIndex.vue

<template>
	<view class="container">
		<view class="login-title">
			<view>您好，</view>
			<view>欢迎来到芳华未来！</view>
		</view>
		<!-- <view class="logoimage"><image src="/static/logo.png" mode="aspectFill"></image></view> -->
		<view class="login-box">

			<!-- <view class="phone">187****8783</view>
			<view class="tips">认证服务由中国移动统一认证提供</view> -->
			<!-- #ifndef APP-HARMONY -->

			<button class="login-btn x-c" v-if="checkWechatInstalled()" style="margin-top: 74rpx;" :loading="btnLoading"
				:disabled="btnLoading" @click="quickClick(1)">
				<image class="es-icon-50 es-mr-10" src="/static/images/icon_wx.png"></image>
				<text>微信快捷登录</text>
			</button>
			<!-- #endif -->

			<button class="login-btn apple-login-btn x-c" :loading="btnLoading" v-if="$isIos()" :disabled="btnLoading"
				@click="quickClick(2)">
				<image class="es-icon-50 es-mr-10" src="/static/image/login/apple.png"></image>
				<text>苹果登录</text>
			</button>


			<button class="login-btn other-login-btn" :loading="btnLoading" :disabled="btnLoading"
				@click="submit()">手机号一键登录</button>

			<button class="login-btn other-login-btn" :disabled="btnLoading" @tap="handleOtherLogin">其他方式登录</button>
			<view class="checkbox">
				<view class="checkbox-icon" @tap="handleAgree">
					<image src="../../static/image/login/radio_default.png" v-show="!agree"></image>
					<image src="../../static/image/login/radio_choose.png" v-show="agree"></image>
				</view>
				<view class="es-fs-36" @tap="handleAgree">我已阅读并同意<text @tap.stop="goToWeb(0)">《用户协议》</text><text
						@tap.stop="goToWeb(1)">《隐私政策》</text> 并使用本机号码登录</view>
			</view>
		</view>

		<u-popup :show="show" :safeAreaInsetBottom="false" mode="center" round="16rpx" @close="show=false">
			<view class="popupBox u-f-ajc">
				<view class="es-c-33 es-fs-32 es-fw ">
					用户协议及隐私协议
				</view>
				<view class="es-mt-40 es-fs-24">
					已阅读并同意<text class="colorFF5C03" @tap="goToWeb(0)"> 用户协议 </text>和<text class="colorFF5C03"
						@tap="goToWeb(1)">隐私政策</text>
				</view>
				<view class="es-mt-40 popupbox-btn es-c-white" @tap="quickLogin">
					同意并登录
				</view>
				<view class="es-mt-40 es-fs-24 es-c-99" @tap="show=false">
					不同意
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		navBack
	} from "../../utils/common";
	import {
		login
	} from "@/api/user.js"
	import {
		quickAppleLogin,
		quickWechatLogin
	} from "@/utils/login.js"
	import {
		checkWechatInstalled
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				btnLoading: false,
				agree: false,
				show: false,
				quickLoginType: 1, // 1:微信登录  2:苹果登录，
				curRegistrationID: null,
			}
		},
		onLoad() {
			if (!this.$isLogin()) {
				let pages = getCurrentPages();
				let url = pages[pages.length - 3];
				if (pages.length > 2 && url && (url.route == "pages/auth/login" || url.route == "pages/auth/loginIndex" ||
						url.route == "pages/common/launch")) {
					uni.navigateBack({
						delta: 2
					});
				} else {
					// #ifdef APP-PLUS
					//this.submit()

					// #endif
					// #ifndef APP-PLUS
					if (String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger") {
						const pages = getCurrentPages();
						if (pages.length > 1) {
							const url = pages[pages.length - 2];
							const options = url.options //url中所带的参数
							//拼接url的参数
							if (options && JSON.stringify(options) != '{}') {
								let allurl = '/' + url.route + uni.$u.queryParams(options)
								uni.setStorageSync('beforLoginPage', allurl)
							} else {
								uni.setStorageSync('beforLoginPage', '/' + url.route);
							}
							uni.redirectTo({
								url: "/pages/auth/h5WxLogin"
							});
						} else {
							this.submit()
						}
					} else {
						uni.redirectTo({
							url: "/pages/auth/login"
						})
					}
					// #endif
				}
			}
		},
		onShow() {
			if (this.$isLogin()) {
				uni.reLaunch({
					// url: '/pages_im/pages/conversation/conversationList/index',
					url: '/pages/index/index',
					//url: '../course/video/living-app',
					animationType: 'none',
					animationDuration: 2000
				})
			}

			// #ifdef APP-PLUS
			let curAgreePrivacy = this.$isAgreePrivacy();
			if (curAgreePrivacy) {
				this.getRegistrationID();
			}
			// #endif
		},
		methods: {
			getRegistrationID() {
				this.curRegistrationID = uni.getStorageSync('registrationID');
				if (!this.curRegistrationID) {
					uni.getPushClientId({
						success: (res) => {
							uni.setStorageSync('registrationID', res.cid);
							this.curRegistrationID = res.cid;
						}
					});
				}
			},


			checkWechatInstalled,
			quickClick(type) {
				this.quickLoginType = type;
				this.show = true;
			},
			quickLogin() {
				this.agree = true;
				if (this.quickLoginType == 1) {
					quickWechatLogin(false);
				}
				if (this.quickLoginType == 2) {
					quickAppleLogin(false);
				}
			},
			goToWeb(index) {
				uni.setStorageSync('url', index == 0 ? "https://userapp.his.cdwjyyh.com/web/userAgreement" :
					"https://userapp.his.cdwjyyh.com/web/privacyPolicy");
				uni.navigateTo({
					url: "/pages/index/h5"
				})
			},
			// 同意
			handleAgree() {
				this.agree = !this.agree
			},
			// login
			submit() {
				// if(!this.agree) {
				// 	this.$refs.popup.open('center')
				// 	return
				// }
				this.$showLoginPage()
				// uni.preLogin({
				// 	provider: 'univerify',
				// 	success() { //预登录成功
				// 		// 显示一键登录选项
				// 		uni.showToast({
				// 			title: "登录成功",
				// 			icon: "none"
				// 		})
				// 		uni.login({
				// 			provider: 'univerify',
				// 			univerifyStyle: { // 自定义登录框样式
				// 				fullScreen: true,
				// 			},
				// 			success(res) { // 登录成功 在该回调中请求后端接口，将access_token传给后端
				// 				console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'} 
				// 			},
				// 			fail(res) { // 登录失败
				// 				console.log(res.errCode)
				// 				console.log(res.errMsg)
				// 			}
				// 		})
				// 	},
				// 	fail(res) { // 预登录失败
				// 		// 跳转到普通登录
				// 		uni.navigateTo({
				// 			url: "/pages/login/otherLogin"
				// 		})
				// 		// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
				// 		console.log(res.errCode)
				// 		console.log(res.errMsg)
				// 	}
				// })
			},
			handleOtherLogin() {
				uni.redirectTo({
					url: "/pages/auth/login"
				})
			},
			// 关闭弹窗
			close(val) {
				this.$refs.popup.close()
				if (val == 'agree') {
					this.agree = true
					this.submit()
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.container {
		height: 100vh;
		padding: 0 64rpx;
		padding-top: calc(var(--status-bar-height) + 88rpx);
		padding-bottom: calc(var(--window-bottom) + 20rpx);
		box-sizing: border-box;
	}

	.popupbox {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #999999;
		line-height: 38rpx;
		background-color: #fff;
		width: 600rpx;
		padding: 60rpx 30rpx 10rpx 30rpx;
		border-radius: 15rpx;
		box-sizing: border-box;

		text {
			color: #FF5C03;
		}

		.popupbox-footer {
			padding: 30rpx 0;
			@include u-flex(row, center, center);
		}

		.popupbox-btn {
			width: 200rpx;
			height: 68rpx;
			background: #fff;
			font-size: 28rpx;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			text-align: center;
			line-height: 66rpx;
			border: 1rpx solid #999;
			color: #999;
		}

		.agree-btn {
			background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
			border: none;
			color: #fff;
		}
	}

	.login-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 56rpx;
		color: #333333;
		line-height: 78rpx;
		padding-top: 40rpx;
	}

	.logoimage {
		@include u-flex(row, center, center);
		margin-top: 5vh;

		image {
			height: 100rpx;
			width: 100rpx;
		}
	}

	.login-box {
		margin-top: 16vh;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		text-align: center;

		.phone {
			font-weight: 500;
			font-size: 56rpx;
		}

		.tips {
			margin-top: 18rpx;
			color: #757575;
		}
	}

	.checkbox {
		margin-top: 36rpx;
		@include u-flex(row, flex-start, flex-start);
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 38rpx;
		text-align: left;

		text {
			color: #FF5C03;
		}

		&-icon {
			flex-shrink: 0;
			margin-right: 12rpx;

			image {
				height: 40rpx;
				width: 40rpx;
			}
		}

	}

	.login-btn {
		min-width: 622rpx;
		height: 88rpx;
		margin-top: 40rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF !important;

		&::after {
			border: none;
		}
	}


	.apple-login-btn {
		background: #fff;
		border: 2rpx solid #000000;
		color: #000 !important;
	}


	.other-login-btn {
		background: #fff;
		border: 2rpx solid #ECECEC;
		color: #333333 !important;
	}

	.popupBox {
		padding: 48rpx 24rpx;
		width: 500rpx;
		flex-direction: column;

		.colorFF5C03 {
			color: #FF5C03;
		}

		.popupbox-btn {
			width: 100%;
			border-radius: 8rpx;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #FF5C03;
		}
	}
</style>