ylrz_scrm_uniapp/pages/auth/appLogin.vue

<template>
	<view>
		<view class="top_text">
			<view>您好,</view>
			<view>欢迎来到云联商城！</view>
		</view>
		<view class="numberbtn">
			<button @click="phoneLogin()" class="log-bnt log-a" :disabled="loading">
			{{ loading ? '登录中...' : '本机号码一键登录' }}</button>
			<view @click="otherLogin()" class="log-bnt log-b">其他方式登录</view>
		</view>
		<view class="tips">
			 <checkbox  :checked="isAgreement" @click="handleAgreement()" color='#fff' 
			 activeBackgroundColor='#018C39 ' borderColor='#EDEEEF' activeBorderColor='#EDEEEF'/>
			 <view  @click="handleAgreement()">您同意并接受</view>
			<view class="btn"  @click="openH5('/h5/userAgreement')">《用户协议》</view>
			<view class="btn" @click="openH5('/h5/privacyPolicy')">《隐私保护》</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAgreement:false,
				loading: false,      // 防止重复点击
				loginType:3,//1账号密码  2:微信登录 3:手机号一键登录
				providerList: [],    // 支持的登录服务列表
				univerifyStyle: {    // 一键登录弹窗样式配置（可选）
					fullScreen: true,
					backgroundColor: '#ffffff'
				}
			}
		},
		methods: {
			handleAgreement(){
				this.isAgreement=!this.isAgreement;
			},
			openH5(url){
				var requestPath = uni.getStorageSync('requestPath');
				uni.setStorageSync('url',requestPath+url);
				uni.navigateTo({
					url: '../home/h5'
				})
			},
			phoneLogin(){
				if(!this.isAgreement){
					uni.showToast({
						icon:'none',
						title: "请先同意协议后再登录",
					});
					return false;
				}
				this.$showLoginPage()
			},
			otherLogin(){
				uni.navigateTo({
					url:'/pages/auth/passwordLogin'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top_text{
		padding-top: 240rpx;
		font-size: 52rpx;
		font-weight: bold;
		margin-left: 60rpx;
	}
	.numberbtn{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 200rpx !important;
		padding: 0 80rpx;
	}
	.log-bnt{
		padding: 20rpx 0;
		width: 100%;
		text-align: center;
	}
	.log-a{
		background: linear-gradient(135deg, #38e663 0%, #018C39 100%);
		border-radius: 80rpx;
		color: #fff;
	}
	.log-b{
		border-radius: 80rpx;
		border: 2rpx solid #999999;
		margin-top: 40rpx;
	}
.tips{
	margin-top: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	color: #000;
	.btn{
		color: #018C39;
	}
}
/deep/ .uni-checkbox-input {
	border-radius: 50% !important;
}
</style>