hptwxMiniProgram/pages/authorizedLogin/index.vue

<template>
	<view class="authorizedLogin-container" v-if="show">
		<image src="/static/logo.png" class="logo"></image>
		<view class="statement">
			<label>
				<label class="radio" @click="changecheck">
					<radio class="check-bt" value="1" :checked="checked" style="transform:scale(0.6)" />
					<text>我已阅读并同意</text>
					<text class="link" @click="statement">《隐私政策》</text>
					<text>首次使用自动注册登录</text>
				</label>
			</label>
		</view>
		<button class="btn-submit" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="checked">
			<view >一键登录</view>
		</button>
		<button class="btn-submit" @click="onSubmit" v-else>
			<view >一键登录</view>
		</button>
	</view>
</template>

<script>
	import { wxLogin,wxDecryptUserInfo} from '@/api/openApi.js'
	export default {
		name:"AuthorizedLogin",
		data() {
			return {
				show:true,
				checked:false
			};
		},
		methods:{
			changecheck(){
				this.checked= !this.checked
			},
			statement(){
				uni.navigateTo({
					url:'/pages/service_agreement/service_agreement'
				})
			},
			onSubmit(){
				if(!this.checked){
					uni.showToast({
						icon:"none",
						title:"请先阅读隐私协议"
					})
					return
				}				
			},
			getPhoneNumber(e){
				uni.getProvider({
					service:"oauth",
					success(res){
						let provider=res.provider
						uni.login({
							provider,
							success: function (loginRes) {
								let code=loginRes.code;
								wxLogin(code).then((resp)=>{
									const { code, data, msg } = resp
									if(data){
										if(data&&data.unionid){
											const sessionKey=data.session_key;
											const { encryptedData, iv, code} = e.detail;
											wxDecryptUserInfo({
												encryptedData, iv,sessionKey
											}).then((resp)=>{
												uni.setStorageSync('unionid',data.unionid)
												uni.setStorageSync('isLogin',true)
												uni.setStorageSync('phone-info',resp.data)
												uni.reLaunch({
													url:'/pages/index/index'
												})
											})
	
										}
									}
								})
							}						
						})					
					}
				})					
			}
		}
	}
</script>

<style lang="scss" scoped>
	.authorizedLogin-container{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(255,255,255,1);
		z-index: 999;
		padding: 20rpx;
		box-sizing: border-box;
		.logo{
			display: block;
			width: 100rpx;
			height: 100rpx;
			margin: 100rpx auto;
		}
		.statement{
			font-size: 24rpx;
			color: #666;
			.check-bt{
				::v-deep .uni-radio-input{
					margin-right: 0 !important;
				}
			}
			.link{
				color: #3D90F4;
			}
		}
		.btn-submit{
			width: 600rpx;
			height: 72rpx;
			line-height: 72rpx;	
			text-align: center;							
			background:#3D90F4;
			border-radius: 42rpx;	
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			z-index: 999;
			margin: 50rpx auto;
		}
	}
</style>