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">
			<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号</button> -->
			<view class="btn" @click="loginFn">手机号快捷登录</view>
			<!-- <button type="success" size="mini" style="margin-top: 15rpx;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" text="获取手机号">获取手机号</button> -->
			<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'
	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: {
			getPhoneNumber (e) {
			    console.log(e.detail.code)  // 动态令牌
			    console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
			    console.log(e.detail.errno)  // 错误码（失败时返回）
			  },
			
			loginFn() {
			      // 微信登录
			      uni.login({
			        provider: 'weixin',
			        success: loginRes => {
			          if (loginRes.code) {
			            // 登录成功，获取用户信息
			            this.getUserInfo(loginRes.code);
			          } else {
			            console.error('微信登录失败');
			          }
			        },
			        fail: err => {
			          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)
			                }
			        });
			},
			// 获取手机号
			// async getPhoneNumber(e) {
			//        await this.getCode();
			// 	   console.log('获取手机号')
			// 	   console.log(e)
			//         if(!this.decodePhoneParams.code || !e.detail.encryptedData){
			//                 return false;
			//         }
			       
			// },
			// 是否选择协议
			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;
			&.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>