yizhizan-h5/pages/public/loginV2.vue

<template>
	<view class="container">
		<view class="main-container">
			<view class="logo"></view>
			<view class="main-img"></view>
			<view class="phone-number">13588888888</view>
			<view class="agreement">
				<view class="check-box" @click="checked = !checked">
					<image src="@/static/images/jobApplicant/check.svg" v-if="checked" mode="scaleToFill" />
					<image src="@/static/images/jobApplicant/border.svg" v-else mode="scaleToFill" />
				</view>
				<view class="content">
					已阅读并同意<navigator url="/my/setting/xieyi">《亿职赞用户协议》</navigator>
					和<navigator url="/my/setting/mimi">《隐私协议》</navigator>，允许亿职赞统一管理本人账号信息					
				</view>
			</view>
			<u-button class="login-btn" shape="circle" :hairline="false" @click="login">一键登录</u-button>
			<view class="other-login">
				<view class="other-type">
					<view class="icon"></view>
					<view class="text">微信登录</view>
				</view>
				<view class="other-type">
					<view class="icon"></view>
					<view class="text">其他手机登录</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="link">企业套餐咨询</view>
			<view class="link">投诉举报</view>
			<view class="link">资质信息</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false
			}
		},
		onLoad() {
			this.handleLogin()
		},
		methods: {
			login() {
				if (!this.checked) {
					uni.showToast({
						title: '请阅读并同意协议',
						icon: 'none'
					})
					return
				}
				this.handleLogin()
				console.log('点击登录')
			},
			handleLogin() {
				uni.login({
					provider: 'univerify',
					univerifyStyle: {
					    fullScreen: true,
						icon: {
							path: 'static/images/avator.png',
						},
						authButton: {
							normalColor: '#016BF6'
							// "normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5
							// "highlightColor": "#2861c5",  // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
							// "disabledColor": "#73aaf5",  // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
						},
						otherLoginButton: {
							visible: false,
						},
						privacyTerms: {
							defaultCheckBoxState: false,
							uncheckedImage: 'static/images/jobApplicant/border.svg',
							checkedImage: 'static/images/jobApplicant/check.svg',
							privacyItems: [
								{
									"url": "/my/setting/xieyi", // 点击跳转的协议详情页面
									"title": "亿职赞用户协议" // 协议名称
								},
								{
									"url": "/my/setting/mimi", // 点击跳转的协议详情页面
									"title": "隐私协议" // 协议名称
								},
							]
						},
						buttons: {
							iconWidth: '60px',
							list: [
								{
									provider: 'weixin',
									iconPath: 'static/images/avator.png'
								},
								{
									provider: 'phone',
									iconPath: 'static/images/avator.png'
								}
							]
						}
					},
					success: (res) => {
						console.log(JSON.parse(JSON.stringify(res)))
					},
					fail: (err) => {
						console.log(JSON.parse(JSON.stringify(err)))
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 70rpx;
		.logo {
			width: 204rpx;
			height: 56rpx;
			background-color: gray;
			margin: 72rpx auto 92rpx;
		}
		.main-img {
			width: 400rpx;
			height: 400rpx;
			background-color: gray;
			margin: 0 auto 34rpx;
		}
		.phone-number {
			font-size: 56rpx;
			font-weight: bold;
			line-height: 68rpx;
			text-align: center;
		}
		.agreement {
			display: flex;
			align-items: flex-start;
			font-size: 24rpx;
			color: #605d67;
			margin: 40rpx auto 68rpx;
			.check-box {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 16rpx;
				
				image {
					width: 24rpx;
					height: 24rpx;
					margin-top: 6rpx;
				}
			}
			.content {
				display: flex;
				flex-wrap: wrap;
				word-wrap: break-word;
				flex: 1;
			}
			navigator {
				color: #016bf6;
			}
		}
		.login-btn {
			width: 600rpx;
			height: 88rpx;
			border-radius: 100px;
			background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
		}
		.other-login {
			display: flex;
			justify-content: center;
			margin-top: 80rpx;
			.other-type {
				margin: 0 24rpx;
			}
			.icon {
				width: 60rpx;
				height: 60rpx;
				background-color: gray;
				margin: 0 auto 8rpx;
			}
			.text {
				text-align: center;
				font-size: 24rpx;
				line-height: 32rpx;
				color: rgb(153, 153, 153);
			}
		}
		.footer {
			display: flex;
			justify-content: center;
			margin-bottom: 40rpx;
			.link {
				font-size: 28rpx;
				color: #999999;
				margin: 0 14rpx;
			}
		}
	}
</style>