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>
			<view class="wechat-go-home" @click="onGoHome">暂不登录</view>
			<view class="agreement-box" style="width: 80%;">
				<view class="agreement-text agree-text">
					<checkbox-group @change="checkboxChange">
						<checkbox value="1" class="protocol-check"></checkbox>我已阅读并遵守
						<view class="agree-text">
							<view>《用户协议》</view>
							与
							<view>《隐私协议》</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
			}
		},
		onLoad(option) {
			this.options=option.item
		},
		methods: {
			onWxMiniLogin(){
				// if(!this.protocol){
				// 	this.isSubmit = false;
				// 	this.$utils.msg("请同意用户协议");
				// 	return ;
				// }
				var that = this;
				this.isSubmit = true;
				wx.getUserProfile({
				  desc: '授权',
				  success: (res) => {
					let userInfo = JSON.parse(res.rawData);
					wx.login({
					  success: function (resData){
						let params = {};
						params.userInfo = userInfo;
						// params.code = resData.code;
						const userCode={code:resData.code}
						that.$http.wxgetCode(userCode).then(result=>{
							if(result.code === 0){
								const wxuserinfo={...result.data,...userInfo}
								that.$store.commit("UPDATEUSERS",wxuserinfo);
								//有token就存储token
								if(wxuserinfo.token){
									that.$store.commit("UPDATETOKEN",wxuserinfo.token);
								}
								//有手机号就存储手机号
								if(wxuserinfo.mobile){
									that.$store.commit("UPDATEMOBILE",wxuserinfo.mobile);
								}
								if(that.options === 'scan'){
									that.$utils.switchTab('scan/index');
								}
								else{
									that.$utils.switchTab('ucenter/index');
								}
								that.isSubmit = false;
							}
							else if(result.code === 1){
								that.$utils.msg(result.msg);
								that.isSubmit = false;
							}
							else{
								that.$utils.msg(result.message);
								that.isSubmit = false;
							}
							
						}).catch(error=>{
							that.isSubmit = false;
							that.$utils.msg(error);
						});
					  },
					  fail:function (err){
						that.isSubmit = false;
						that.$utils.msg(err);
					  }
					})
				  },
				  fail: res=>{
					that.$utils.msg("您无权限请求该接口");
				  }
				})
			},
			onGoHome(){
				this.$utils.switchTab("index/index");
			},
			checkboxChange(e){
				this.protocol = e.detail.value[0] != undefined;
			},
		}
	}
</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>