great_reserve/pages/login/loginh5.vue

<template>
	<view class="body" :style="{height:screenHeight}">
		<image class="login-bg" :src="staticUrl+'/img/login-bg.png'" mode="widthFix"></image>
		<u-toast ref="uToast"></u-toast>
		<view style="height: 40%;position: relative;z-index: 10;">
			<view class="logo-wrap">
				<img :src="logoSrc" class="logo" alt="">
			</view>
			<view class="btn-wrap" style="margin:94rpx">
				<u-button
					:hair-line='false' 
					type="error" 
					color="#ED0000"
					@click="disabledClick"
					shape="circle">登录
				</u-button>
			</view>
			<view class="rule-wrap u-flex u-flex-wrap u-row-center">
				<u-checkbox-group v-model="checked" @change="checkboxChange" placement="row">
					<u-checkbox activeColor="#1677FF" name="同意" labelSize="24rpx" shape="circle" label="我已阅读并同意"></u-checkbox>
				</u-checkbox-group>
				<text class="link" @click="$u.route('/pages/login/regulation',{regulationName:'用户服务协议',type:1})">《用户服务协议》</text>
				和<text class="link" @click="$u.route('/pages/login/regulation',{regulationName:'用户隐私政策',type:2})">《用户隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				checked:false,
				checkboxVal:null,
				loginBtn:true,
				bname:'旭烁集团',
				//屏幕高度
				screenHeight: "",
				logoSrc: "/static/logo.png",
				// sitename:"/static/sitename.png",
				miniappLoginInfo:null,
				hasUserInfo:false,
				userInfo: null,
				user:{   
					avatar:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
					name:'',
					mobile:'',
				},
				code: '',
				showAuthorizeUser: false,
				showAuthorizePhone: false,
				customStyleUnOk:{},
				customStyleOk:{'margin-left': '30px',color:'#00A447'},
				backUrl:null,
				scene:'',
			};
		},
		onLoad(e) {
			console.log("回调参数=======",e)
			if(e&&e.code) { // 微信第三方登录成功
				this.code = e.code
				this.login(e)
			}
			let that = this;
			//获取屏幕高度，我的项目再store里已经取到了
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.windowHeight + "px"
				}
			});
			uni.getStorage({
				key: 'backUrl',
				success: function (res) {
					that.backUrl = '/'+res.data;
				}
			});
		},
		onShow() {
			let pages = getCurrentPages(); //当前页面栈
			console.log("pages=====",pages)
			let userInfo = uni.getStorageSync('userInfo');
			this.user.name = userInfo.name;
		},
		methods: {
			openAuth(){
				this.showAuthorizePhone = true;
			},
			//获取昵称输入内容
			// userNameInput(e){
			//     this.user.nickName = e.detail.value
			// },
			onChooseAvatar(e) {
				console.log('头像信息》')
				console.log(e)
				this.user.avatar = e.detail.avatarUrl;
			},
			async login(e){
				// console.log('e',e);
				let _this = this;
				let wxinfo = await this.$u.api.wxinfoH5({code:this.code});
				let {openid,nickname} = wxinfo.data;

				// console.log('----------登陆中',data)
				this.$u.api.login({
					"openId": "",
					"h5OpenId":"openid",
					"mobile": ""
				}).then(res=>{
					// console.log('微信登录返回结果========',res.data)
					_this.$u.vuex('vuex_user_info', res.data);
					// _this.$u.vuex('vuex_member_info',res.data);
					// uni.setStorageSync('userInfo', res.data)
					this.showAuthorizePhone = false;
					uni.removeStorage({
						key:'scene'
					});
					// console.log('res.data.userid',res.data.userid);
					this.getMemberInfo(res.data.userId);
					
				}).catch(err=>{
					console.log('err',err);
					this.showAuthorizePhone = false
				})
			},
			/**
			 * @author ygh
			 * @date 2023-12-14
			 * @param {Object} userid
			 * 根据userId 获取用户信息
			 */
			getMemberInfo(userid){
				// console.log('userid',userid);
				let _this = this;
				this.$u.api.memberInfo({id:userid}).then(res=> {
					if(res.code ===200) {
						_this.userInfo = res.data;
						this.$u.vuex('vuex_member_info', res.data);
						// this.$u.vuex('vuex_member_info.avatar', 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0');
						if(!res.data.name){
							this.$u.vuex('vuex_member_info.name', '微信用户');
							this.updateMemberInfo();
						}else{
							this.goBack();
						}
					}
				})
			},
			/**
			 * @author ygh 
			 * @date 2023-12-14
			 * 更新用户信息
			 */
			updateMemberInfo(){
				let params ={
					id:this.userInfo.id,
					// avatar:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
					name:'微信用户'
				};
				this.$u.api.updateMemberInfo(params).then(res=>{
					this.goBack();
				}).catch(err=>{
					console.log('err',err);
				})
			},
			goBack(){
				let url = this.backUrl&&this.backUrl.length>0?this.backUrl:'/pages/index/index';
				// console.log('url',url);
				uni.removeStorage({
					key: 'backUrl',
					success: function (res) {
						// console.log('success');
						uni.reLaunch({url: decodeURIComponent(url)});
					}
				});
			},
			checkboxChange(e){
				this.checkboxVal = e[0];
			},
			disabledClick(){
				console.log("this.checked====",this.checked)
				// console.log('checked',this.checked?.length);
				// console.log('loginBtn',this.loginBtn);
				if(!this.checked||this.checked?.length<=0){
					uni.showToast({
						title:'请先同意使用条款！',
						icon:'none'
					})
				}else{
					uni.showToast({
						title:'登录中！',
						icon:'none'
					})
					this.redirectToAuth()
				}
			},
			/**  微信授权登录  */
			redirectToAuth() {
			    const appid = 'wx6490eaa0d20d2be2';
			    const redirectUri = encodeURIComponent('https://greath5.dev.gztjy.top/pages/login/loginh5');
			    const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
			 
			    window.location.href = authUrl;
			},
			
			getAccessToken() {
				const code = (new URLSearchParams(window.location.search)).get('code');
				if (code) {
				    const appid = 'wx6490eaa0d20d2be2';
				    const requestUrl = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=YOUR_APP_SECRET&code=${code}&grant_type=authorization_code`;
				    fetch(requestUrl)
				    .then(response => response.json())
				    .then(data => {
				        if (data && data.openid) {
				            const openid = data.openid;
				            // 在这里可以存储或使用用户的openid
				            // ...
				        }
				    })
				    .catch(error => {
				        console.error(error);
				    });
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.login-bg{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
}
.body {
	background-color: #fff;
	box-sizing: border-box;
	text-align: center;
	.logo-wrap {
		padding-top: 248rpx;
		img{
			display: block;
			margin: 0 auto;
		}
		.logo{
			width: 306rpx;
			height: 258rpx;
		}
		.sitename{
			width: 460rpx;
			height: 142rpx;
		}
	}
}

// 

.auth-btncard{
	margin-top: 20px;
    .btn-unok{
        width: 45%;
        float: left;
    }
    .btn-ok{
        width: 45%;
        float: left;
        margin: 0;
        padding: 0;
        border: 0px solid transparent;  //自定义边框
        outline: none;    //消除默认点击蓝色边框效果
        u-button{
			font-size: 16px;
            margin: 0;
            padding: 0;
            // border: 0px solid transparent;  //自定义边框
            outline: none;    //消除默认点击蓝色边框效果
        }
    }
}
.auth-card{
    text-align: center;
    .avatar-img{
        width: 150rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 100%;
        margin-top: 30rpx;
    }
    .title{
        font-size: 30rpx;
    }
    .content{
        margin-top: 10rpx;
		margin-bottom: 20rpx;
    }
}
.avatar-wrapper{
	width: 150rpx;
	height: 100rpx;
	color: #333 !important;
	text-align: center !important;
	border: none !important;
	border-radius:0 !important;
	background-color:transparent !important;
}
.avatar-wrapper::after {
	border: none !important;
}
.avatar{
	width: 100rpx;
	height: 100rpx;
	overflow: hidden;
	border-radius: 100%;
}

.rule-wrap{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 20px;
	margin: 40rpx auto;
	font-size: 24rpx;
	line-height: 1.5;
	.link{
		white-space: nowrap;
		color: #1677FF;
	}
}
</style>