JiangxiMiniProgram/pages/userCenter/login/login.vue

<template>
	<view class="main" :style="{ background: `url(${imgUrl}) no-repeat`, backgroundSize: backgroundSize }">
		<view class="h1Img">
			<image src="../../../static/images/userCenter/loginTitle.png" mode=""></image>
		</view>
		<view class="btnCon">
			<view class="btn" @click="getPhoneNumber">手机号快捷登录 			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="hide">手机号</button></view>
			<view class="btn border" @click="$goPage('/pages/userCenter/login/loginByPhone');">手机号登录/注册</view>
		</view>
		<view style="margin-top: 40rpx;">
			<privacyRadion :isCheck="isCheck" @changeRadio="changeRadio"></privacyRadion>
		</view>
		
		<u-popup :show="show" :round="10" mode="center" >
			<view class="">
				<view class="popupCon">
					<view class="h1">提 示</view>
					<view class="msg">授权手机号，我们才能继续为您 <br>提供服务哦~</view>
					<view class="oneBtn">我知道了</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { imgUrl } from '@/config/site.config'
	import privacyRadion from './comp/privacyRadion.vue'
	import { weixinLogin } from '@/config/api.js'
	export default {
		components: {privacyRadion},
		data() {
			return {
				isCheck: false,
				show: false,
				decodePhoneParams: {},
				imgUrl: imgUrl+'loginTopBg.png',
				backgroundSize: '100% 360rpx',
			}
		},
		onLoad() {
			this.getCode()
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: function (res) {
			// 		console.log(res)
			// 		console.log('当前位置的经度：' + res.longitude);
			// 		console.log('当前位置的纬度：' + res.latitude);
			// 	}
			// });
		},
		methods: {
			async getPhoneNumber (e) {
				if(!this.isCheck) return this.$u.toast('请勾选产品协议与隐私政策');
				let phoneCode = e.detail.code
			    console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
			    console.log(e.detail)  // 错误码（失败时返回）
				const loginCode = await this.loginFn()
				if(!loginCode||!phoneCode) return
				console.log('登录验证码')
				console.log(loginCode)
				let obj = {
					phoneCode,
					loginCode
				}
				const {data: res} = await weixinLogin(obj)
				this.$store.commit('update_vuex_loginInfo',res)
				this.$store.dispatch('getUserInfo')
				// this.$goPage('/pages/userCenter/login/face')
				uni.switchTab({
					url: '/pages/tabbar/index/index'
				})
			  },
			
			loginFn() {
			      // 微信登录
				  return new Promise((resolve,reject)=>{
					  uni.login({
					    provider: 'weixin',
					    success: loginRes => {
					      if (loginRes.code) {
					        // 登录成功，获取用户信息
					  						console.log('loginRes.code')
					  						console.log(loginRes.code)
											resolve(loginRes.code)
					        // this.getUserInfo(loginRes.code);
					      } else {
					        console.error('微信登录失败');
					      }
					    },
					    fail: err => {
							reject(null)
					      console.error('微信登录失败', err);
					    }
					  });
				  })
			      
			    },
			    getUserInfo(code) {
			      // 获取用户信息
			      uni.getUserInfo({
			        provider: 'weixin',
			        success: userInfoRes => {
			          // 在这里处理获取到的用户信息
			          console.log('用户信息', userInfoRes);
			          // 发送 code 和用户信息到后台进行登录操作
			          this.loginBackend(code, userInfoRes);
			        },
			        fail: err => {
			          console.error('获取用户信息失败', err);
			        }
			      });
			    },
			    loginBackend(code, userInfo) {
			      // 在这里发送 code 和用户信息到后台进行登录操作
			      // 可以使用 uni.request 或其他 HTTP 库发送请求
			    },
				
			// 获取code
			getCode() {
			        uni.login({
			                provider: 'weixin',
			                success: loginRes => {
			                        this.decodePhoneParams.code = loginRes.code
									console.log('loginRes')
									console.log(loginRes)
			                }
			        });
			},
			 
			// 是否选择协议
			changeRadio(val) {
				this.isCheck = val
			},
			init() {
				uni.login({
				    provider: 'weixin',
					"onlyAuthorize": true, 
				    success: function (loginRes) {
						console.log('11')
						console.log(loginRes)
				        // 登录成功
				        uni.getUserInfo({
				            provider: 'weixin',
				            success: function(info) {
				                // 获取用户信息成功, info.authResult保存用户信息
								console.log('11')
								console.log(info)
				            }
				        })
				    },
				    fail: function (err) {
				        // 登录授权失败  
				        // err.code是错误码
				    }
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// background: url('../../../static/images/userCenter/loginTopBg.png') no-repeat;
		// background-size: 100% 360rpx;
	  .h1Img {
	    width: 658rpx;
		height: 94rpx;
		margin: 288rpx 0 120rpx 0;
	  }
	  .btnCon {
	    .btn {
			width: 396rpx;
			height: 72rpx;
			background: #1989FA;
			border-radius: 8rpx;
			color: #fff;
			margin-bottom: 32rpx;
			text-align: center;
			line-height: 72rpx;
			font-size: 28rpx;
			position: relative;
			overflow: hidden;
			.hide {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				display: inline-block;
				opacity: 0;
			}
			&.border {
				background: rgba(25,137,250,0.1);
				border: 2rpx solid #1989FA;
				color: $themC;
			}
	    }
	  }
	}
	
	.popupCon {
		width: 558rpx;
		height: 344rpx;
		border-radius: 16rpx;
		overflow: hidden;
	  .h1 {
		line-height: 124rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		height: 124rpx;
		width: 100%;
		background: linear-gradient(180deg, #C1DFFE 0%, #FFFFFF 100%);
	  }
	
	  .msg {
		font-size: 28rpx;
		color: #686B73;
		padding: 0 0 30rpx 0;
		text-align: center;
	  }
	
	  .oneBtn {
		line-height: 112rpx;
		height: 112rpx;
		border-top: 1px solid #E8E9EC;
		text-align: center;
		font-size: 36rpx;
		color: $themC;
		font-weight: 600;
	  }
	}
</style>