zhibo/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> -->
			<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/imagesradio_default.png" v-show="!agree"></image>
					<image src="/static/image/radio_choose.png" v-show="agree"></image>
				</view>
				<view>我已阅读并同意<text @tap="goToWeb(0)">《用户协议》</text><text @tap="goToWeb(1)">《隐私政策》</text> 并使用本机号码登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import { navBack } from "../../utils/common";
	import { navBack } from "@/utils/util";
import {
		loginByApp
	} from "@/api/login.js"
	export default {
		data() {
			return {
				btnLoading: false,
				agree: 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: '../course/video/living-app',
					animationType: 'none',
					animationDuration: 2000
				})
			}
		},
		methods: {
			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: 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:#FF5C03;
		}

		&-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, #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;
		}
	}

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