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> -->
			<!-- #ifdef APP-PLUS -->
			<button class="login-btn x-c" style="margin-top: 74rpx;" :loading="btnLoading" :disabled="btnLoading"
				@click="show=true">
				<image class="es-icon-50 es-mr-10" src="/static/images/icon_wx.png"></image>
				<text>微信快捷登录</text>
			</button>
			<!-- #endif -->
			<button class="login-btn" style="margin-top: 74rpx;" :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>我已阅读并同意<text @tap="goToWeb(0)">《用户协议》</text><text @tap="goToWeb(1)">《隐私政策》</text> 并使用本机号码登录</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" round="16rpx" @close="show=false">
			<view class="popupLoginBox 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="wechatLogin">
					同意并登录
				</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 {
		quickWechatLogin
	} from "@/utils/login.js"
	export default {
		data() {
			return {
				btnLoading: false,
				agree: false,
				show: false,
			}
		},
		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: '../course/index',
					url: '/pages_im/pages/conversation/conversationList/index',
					//url: '../course/video/living-app',
					animationType: 'none',
					animationDuration: 2000
				})
			}
		},
		methods: {
			wechatLogin() {
				this.agree=true;
				quickWechatLogin(false)
			},
			goToWeb(index){
				uni.setStorageSync('url',index==0?getApp().globalData.userAgreement:getApp().globalData.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:#2583EB;
		}

		.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, #2583EB 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: 20vh;
		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:#2583EB;
		}

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

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

	.login-btn {
		min-width: 622rpx;
		height: 88rpx;
		margin-top: 48rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(270deg, #2583EB 0%, #6BB2F4 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;
		}
	}

	.other-login-btn {
		background: #fff;
		border: 2rpx solid #ECECEC;
		color: #333333 !important;
	}
	
	.popupLoginBox {
		padding: 48rpx 24rpx;
		width: 500rpx;
		flex-direction: column;
	
		.colorFF5C03 {
			color: #2583EB;
		}
	
		.popupbox-btn {
			width: 100%;
			border-radius: 8rpx;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #2583EB;
		}
	}
</style>