zk-driver-wechat-applet/pages/public/login.vue

<template>
	<view>
		<view class="login-wrap">
			<view class="logo"><image src="../../static/logo.png"></image></view>
			<view class="wechat-title">微信授权登录</view>
			<view class="wechat-desc">获得您的公开信息，以便为您提供更好的服务</view>
			<!-- <view class="wechat-login-btn" @click="onWxMiniLogin">授权登录</view> -->
			<button class="wechat-login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号码一键登录</button>
			<!-- <view class="wechat-go-home" @click="onGoHome">暂不登录</view> -->
			<view class="agreement-box" style="width: 80%;">
				<view class="agreement-text agree-text" @click="checkboxChange">
					<checkbox-group>
						<checkbox class="protocol-check" :checked="protocol"></checkbox>我已阅读并遵守
						<view class="agree-text">
							<view @click.stop="goRead">《用户协议与隐私政策》</view>
						</view>
					</checkbox-group>
				</view>
			</view>
		</view>
		<loading v-if="isSubmit" :layer="true"></loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSubmit:false,
				protocol: false,
				options:null,
				params:{
					code:null,
					encryptedData:null,
					iv:null,
				}
			}
		},
		onLoad(option) {
			this.options=option.item
		},
		methods: {
			getPhoneNumber(e){
				this.isSubmit = true;
				if(!this.protocol){
					this.isSubmit = false;
					this.$utils.msg("请同意用户协议");
					return ;
				}
				let that=this
				if(e.detail.errMsg == "getPhoneNumber:ok" && that.params.code){
					that.params.encryptedData=e.detail.encryptedData
					that.params.iv=e.detail.iv
					that.$http.wxLogin(that.params).then(res=>{
						if(res.code === 0){
							that.$store.commit("UPDATEMOBILE",res.data.mobile);
							that.$store.commit("UPDATEUSERS",res.data);
							that.$storage.setJson("token",res.data.token)
							that.$utils.switchTab('ucenter/index');
							that.isSubmit = false;
						}else{
							that.$utils.msg(res.msg);
						}
					}).catch(error=>{
						that.$utils.msg(error);
					});
				}
			},
			onGoHome(){
				this.$utils.switchTab("index/index");
			},
			checkboxChange(e){
				let that =this
				wx.login({
					success(res){
						that.params.code=res.code
					}
				})
				this.protocol = !this.protocol;
			},
			goRead(e){
				uni.navigateTo({
					url:'/pages/userAgreement/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.agreement-box {
		width: 100%;
		margin: 30rpx auto 0;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		.protocol-check {
			position: relative;top:-2px;transform:scale(0.6)
		}
		.agreement-text {
			width: 100%;
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
			.agree-text {
				display: inline-block;
				color: #2841c2;
				view{
					display: inline;
				}
			}
		}
	}
	.login-wrap {
		.logo {
			text-align: center;
			padding-top: 180rpx;
			image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 50%;
			}
		}
		.wechat-title {
			font-size: 35rpx;
			font-weight: 500;
			color: #333;
			margin-top: 24rpx;
			text-align: center;
		}
		.wechat-desc {
			font-size: 28rpx;
			font-weight: 500;
			color: #999;
			margin-top: 24rpx;
			text-align: center;
			padding: 10rpx 50rpx;
		}
		.wechat-login-btn {
			height: 80rpx; line-height: 80rpx;
			color: #fff; background-color: #58be6b;
			text-align: center; border-radius: 50rpx;
			margin: 50rpx; font-size: 32rpx;
		}
		.wechat-go-home { text-align: center; font-size: 30rpx; color:#666; }
	}
</style>