wx-fensisiyu/pages/login/login.vue

<template>
	<view class="page">
		<view class="u-flex-col u-col-center">
			<view class="border">
				<image style="width: 116rpx;height: 116rpx;" src="" mode=""></image>
			</view>
			<view class="quanxian">
				粉丝私域会员服务中心 申请获得以下权限
			</view>
			<view class="info">获得你的公开信息 (昵称、头像等)</view>
		</view>
		<view class="content">
			<view class="top_title">
				粉丝私域会员服务中心用户协议及隐私政策
			</view>
			<view class="top_content">
				感谢您使用“粉丝私域会员服务中心”小程序，为了让您有更好的使用体验并充分保障您的权益，请您详细阅读、充分理解以下各条款内容。
			</view>
			<view class="bottom">
				<view class="title">
					粉丝私域会员服务中心用户协议
				</view>
				<view class="shuoming">
					欢迎您使用“粉丝私域会员服务中心”并使用会员中心
					服务。
				</view>
				<view class="tiaokuan">
					【提示条款】
				</view>
				<view class="content1">
					为了维护您自身权益，您在申请注册流程中采取进一步操作之前，请务必审慎阅读、充分理解《粉丝私域会员服务中心用户服务协议》(以下简称|“本协议”）与《隐私政策》的各条款内容，尤其是以加粗形式提示您注意的关于免除或者限制责任的条款、法律适用和争议解决条款。前述协议构成统一整体，您对本协议的接受即受全部条款的约束。此外，本协议各条款前所列索引关键词仅为帮助您理解该条款表达的主旨之用，不影响或限制本协议的含义或解
				</view>
			</view>
		</view>
		<view class="yinsi .u-flex-col u-col-center">
			<u-checkbox-group @change="checkboxGroupChange">
				<view class="u-flex" style="margin-bottom: 86rpx;">
					<u-checkbox shape="circle" v-model="checked" :name="1"></u-checkbox>
					<text class="enter">您同意并接受</text>
					<view class="xieyi">
						<text @click="toxieyi">《用户服务协议》</text>
						<text @click="toyinsi">《隐私政策》</text>
					</view>
				</view>
			</u-checkbox-group>
			<view @click="toindex" class="u-flex u-row-center button">
				微信用户一键登录
			</view>
		</view>
		<u-popup v-model="show" mode="center" :mask-close-able='false'>
			<view class="" style="position: relative;">
				<image style="width: 500rpx;height: 477rpx;" src="/static/images/tan.png" mode=""></image>
				<!-- @getphonenumber="tologin1" -->
				<button open-type="getPhoneNumber" class="button1" >
					绑定手机号
				</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				show: true,
			};
		},
		methods: {
			//复选框
			checkboxGroupChange(e) {
				console.log(e);
			},
			// 跳转到协议
			toxieyi() {
				uni.navigateTo({
					url: '/pageA/xieyi'
				})
			},
			//跳转到隐私
			toyinsi() {
				uni.navigateTo({
					url: '/pageA/yinsi'
				})
			},
			toindex() {
				if (!this.checked) {
					this.$u.toast('请勾选协议')
					return
				}
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.button1 {
		width: 370rpx;
		height: 92rpx;
		background: rgba(143, 211, 243, 1);
		border-radius: 46rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 92rpx;
		color: #FFFFFF;
		position: absolute;
		left: 70rpx;
		bottom: 32rpx;
	}

	::v-deep .u-mode-center-box {
		background-color: rgba(255, 255, 255, 0) !important;
	}

	.page {
		padding: 0 24rpx;
		background-color: #F6F5FA;
		min-height: 100vh;
		border: 2rpx solid rgba(255, 255, 255, 0);
	}

	.button {
		width: 370rpx;
		height: 92rpx;
		background: rgba(143, 211, 243, 1);
		border-radius: 46rpx;
		text-align: center;
		line-height: 92rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 52rpx;
		color: #FFFFFF;
	}

	.yinsi {
		margin: 46rpx 0 66rpx 0;
		justify-content: center;

		.enter {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 52rpx;
			color: #959595;
		}

		.xieyi {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 52rpx;
			color: #6C89FF;
			text-decoration: underline;
			// border-bottom: 2rpx solid #6C89FF;
		}
	}

	.content {
		width: 702rpx;
		height: 922rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 12rpx;
		padding: 28rpx 23rpx 38rpx;
		box-sizing: border-box;

		.top_title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 42rpx;
			color: #000000;
			text-align: center;
			// opacity: 1;
		}

		.top_content {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #323337;
			margin: 22rpx 0 10rpx 0;
		}

		.bottom {
			width: 656rpx;
			height: 674rpx;
			background: #EDEDED;
			// opacity: 1;
			border-radius: 14rpx;
			padding: 22rpx 24rpx 50rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 600;
				line-height: 40rpx;
				color: #323337;
			}

			.shuoming {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 36rpx;
				color: #323337;
				margin: 22rpx 0;
			}

			.tiaokuan {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 36rpx;
				color: #323337;
			}

			.content1 {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 52rpx;
				color: #323337;
			}
		}
	}

	.border {
		width: 128rpx;
		height: 128rpx;
		border: 2px solid #AB7BFF;
		border-radius: 50%;
		// opacity: 1;
		padding: 6;
		margin: 34rpx 0;
	}

	.quanxian {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 44rpx;
		color: #000000;
		// opacity: 1;
	}

	.info {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #959595;
		opacity: 1;
		margin: 10rpx 0 20rpx 0;
	}
</style>