ylrz_scrm_company_h5/pages/auth/wxlogin.vue

<template>
  <view class="container">
    <!-- #ifdef MP-WEIXIN -->
    <view  class="force-login-wrap">
      <view class="force-login__content y-f">
        <view class="logo">
        	<view class="logo-img">
        		<image :src="imgPath+'/app/image/logo.png'"></image>
				<!-- <image  src="https://rk-hw079058881.obs.cn-north-9.myhuaweicloud.com/fs/20250424/1745461007445.png"></image> -->
        	</view>
        	<view class="title">{{name}}</view>
        </view>
        <view class="login-notice">为了提供更优质的服务，请先登录</view>
		<view class="btns">
				<button
					class="author-btn"
					open-type="getPhoneNumber"
					@getphonenumber="phoneLogin"  >一键授权手机号登录</button>
			<button class="author-btn" v-if="isAgreement==false" @click="handleAgree()">一键授权手机号登录</button>
		</view>
		<button class="close-btn" @tap="back">暂不登录</button>
			
		<view class="tips">
			<checkbox  :checked="isAgreement" @click="handleAgreement()" iconColor="#48a2e1"
			 style="transform:scale(0.9)"/>
			<view  @click="handleAgreement()">您同意并接受</view>
		 	<view class="btn"  @click="openH5('/h5/userAgreement')">《用户协议》</view>
		 	<view class="btn" @click="openH5('/h5/privacyPolicy')">《隐私保护》</view>
		</view>
      </view>
    </view>
    <!-- #endif -->
	 
    
  </view>
</template>

<script>
	import { loginByMp} from '@/api/user'
import {loginByMiniApp , getUserInfo } from '@/api/user'
export default {
	data() {
		return {
			code:null,
			isAgreement:false,
			companyId:null,
		}
	},
	computed: {
	    imgPath() {
	      return this.$store.state.imgpath
	    },
		name() {
			  return this.$store.state.logoname
			},
	},
	onLoad(option) {
		this.companyId=option.companyId
		// #ifdef MP-WEIXIN
		uni.$on('refreshLogin', () => {
			uni.navigateBack({
				delta:1
			})
		})
		//选获取CODE，防止后请求的时候腾讯服务端未同步报错
		this.getCode();
		// #endif
		
		// #ifdef H5
		if (this.checkWeixin()) {
			this.getWxCode()
		} else {
			uni.showToast({
				icon:'none',
				title: "请在微信中打开",
			});
			//跳转到手机号密码登录
		}
		// #endif
	 
	},
	onUnload() {
	},
	mounted() {
    
	},
	methods: {
		handleAgree(){
			if(!this.isAgreement){
			  	uni.showToast({
			  		icon:'none',
			  		title: "请先同意协议后再登录",
			  	});
			}
			
		},
		 
		checkWeixin(){
			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/micromessenger/i) == 'micromessenger') {
				return true;
			} else {
				return false;
			}
		},
		//URL地址是否存在CODE
		getUrlCode(name) {
			return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1]
				.replace(/\+/g, '%20')) || null
		},
		//获取微信CODE
		getWxCode() {
			//在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头； 
			//http://shequ.natapp1.cc/#/pages/index/index?deviceId=8
			var appId="wx29d26f63f836be7f";
			var url="https://company.h5.test.ylrztop.com";
			window.location.href ='https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri=' +encodeURIComponent(url+"/#/pages/auth/wxLogin") +'&response_type=code&scope=snsapi_userinfo&state=JeffreySu-954&connect_redirect=1#wechat_redirect';
			//console.log('https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri=' +encodeURIComponent("http://shequ.natapp1.cc/#/pages/index/index?deviceId="+this.deviceId) +'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect')
			// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code
		},
		handleAgreement(){
			this.isAgreement=!this.isAgreement;
			// if(!uni.getStorageSync('userInfos')){
			// 	uni.navigateTo({
			// 		url:'/pages_course/webview'
			// 	})
			// 	return
			// }
		},
		openH5(url){
			var requestPath = uni.getStorageSync('requestPath');
			uni.setStorageSync('url',requestPath+url);
			uni.navigateTo({
				url:'/pages/index/h5'
			})
		},
		getCode(){
			var that=this;
			this.utils.getProvider()
			.then(provider => {
				console.log('当前的环境商',provider)
				if (!provider) {
				  reject()
				}
				// uni登录
				uni.login({
					provider: provider,
					success: async loginRes => {
						that.code = loginRes.code
					}
				})
			})
			.catch(err => {
				
			})
		},
		// 微信用户登录
		phoneLogin(e) {
			console.log(e)
			if(!this.isAgreement){
				uni.showToast({
					icon:'none',
					title: "请先同意协议后再登录",
				});
				return false;
			}
			// console.log(uni.getStorageSync('userInfos'))
			
			uni.showLoading({
				title: "处理中..."
			});
				if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
					this.utils.getProvider()
					.then(provider => {
						if (!provider) {
						  reject()
						}
						// uni登录
						uni.login({
							provider: provider,
							success: async loginRes => {
								console.log(loginRes)
								console.log(e)
								let code = loginRes.code // 获取开发code
								// const userinfos=JSON.parse(uni.getStorageSync('userInfos')) 
								loginByMiniApp({
								   encryptedData: e.mp.detail.encryptedData,
								   iv: e.mp.detail.iv,
								   code: code,
								   // nickname:userinfos.nickname,
								   // avatar:userinfos.avatar
								})
								.then( res => {
									if(res.code==200){
										console.log(res)
										uni.hideLoading();
										uni.showToast({
											icon:'none',
											title: "登录成功",
										});
										uni.setStorageSync('TOKEN_WEXIN', res.token);
										uni.setStorageSync('userInfo', JSON.stringify(res.user));
										this.userInfo=res.user;
										uni.hideLoading()
										setTimeout(()=>{
											uni.navigateTo({
												url:'/pages/enterprise/enterprise'
											})
										},200)
									}
									else{
										uni.hideLoading();
										uni.showToast({
											icon:'none',
											title: "授权登录失败,请重新登录",
										});
									}
								   
								 })
							}
						})
					})
					.catch(err => {
						uni.showToast({
							icon:'none',
							title: err,
						});
					})
					 
				} else {
					uni.showToast({
						title: '已拒绝授权',
						icon: 'none',
						duration: 2000,
					})
				}
		},
		back() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss">
	radio .wx-radio-input{
	  width: 36rpx;
	  height: 36rpx;
	  border: 1px solid #CCCCCC;
	}
	/* 选中后的 背景样式  */
	radio .wx-radio-input.wx-radio-input-checked{
		background: linear-gradient(135deg, #48a2e1 0%, #60CDC3 100%);
		border: 1px solid #48a2e1;
	}
	/* 选中后的 对勾样式 （白色对勾） */
	radio .wx-radio-input.wx-radio-input-checked::before{
		color: #ffffff;
	}
	checkbox .wx-checkbox-input{
		width: 36rpx;
		height: 36rpx;
		border: 1px solid #CCCCCC;
		border-radius: 50%;
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: linear-gradient(135deg, #48a2e1 0%, #60CDC3 100%);
		border: 1px solid #48a2e1;
		border-radius: 50%;
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		color: #ffffff;
	}
.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

.force-login-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11111;
  top: 0;

  .force-login__content {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);

    .logo{
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	align-items: center;
    	.logo-img{
    		border: 4upx solid #FFFFFF;
    		box-shadow: 0px 5px 15px 2px rgba(0,0,0,0.1);
    		border-radius: 50%;
    		width: 80px;
    		height: 80px;
    		image{
    			border-radius: 50%;
    			width: 100%;
    			height: 100%;
    			overflow: hidden;
    		}
    	}
    	
    	.title{
    		margin-top: 20rpx;
    		font-size: 35rpx;
    		font-family: PingFang SC;
    		font-weight: bold;
    		color: #000;
    		margin-bottom: 30rpx;
    	}
    }

    .login-notice {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000;
      line-height: 44rpx;
      width: 500rpx;
      text-align: center;
      margin-bottom: 80rpx;
    }
	.btns{
		position: relative;
		width: 630rpx;
		height: 80rpx;
		.author-btn{				
			z-index:100;
			position: absolute;
			width: 630rpx;
			height: 80rpx;
			background: linear-gradient(to right, #48a2e1 0%, #2aa7B9 100%);
			background: -moz-linear-gradient(to right, #48a2e1 0%, #2aa7B9 100%);
			// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
	}
	// .author-btn{
	// 	z-index:100;
	// 	// position: absolute;
	// 	width: 630rpx;
	// 	height: 80rpx;
	// 	background: linear-gradient(to right, #48a2e1 0%, #2aa7B9 100%);
	// 	background: -moz-linear-gradient(to right, #48a2e1 0%, #2aa7B9 100%);
	// 	// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
	// 	border-radius: 40rpx;
	// 	font-size: 30rpx;
	// 	font-family: PingFang SC;
	// 	font-weight: 500;
	// 	text-align: center;
	// 	line-height: 80rpx;
	// 	color: rgba(255, 255, 255, 1);
	// }
    // .author-btn {
    //   width: 630rpx;
    //   height: 80rpx;
    //   background: linear-gradient(to right, #48a2e1 0%, #2aa7B9 100%);
    //   background: -moz-linear-gradient(to right, #48a2e1 0%, #2aa7B9 100%);
    //   // box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
    //   border-radius: 40rpx;
    //   font-size: 30rpx;
    //   font-family: PingFang SC;
    //   font-weight: 500;
    //   color: rgba(255, 255, 255, 1);
    // }

    .close-btn {
      width: 630rpx;
      height: 80rpx;
      margin-top: 30rpx;
      border-radius: 40rpx;
      border: 2rpx solid #48a2e1;
      background: none;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #48a2e1;
    }
  }
}
.tips{
	margin-top: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	color: #000;
	checkbox{
	}
	.btn{
		color: #48a2e1;
	}
}


.wx-login{
	background: rgba(0,0,0,0.7);
	z-index: 99999;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	.form{
		border-radius: 20rpx;
		padding: 60rpx 30rpx;
		width: 500upx;
		height: 300upx;
		background-color: #fff;
		.title{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			
		}
		.desc{
			font-size: 28upx;
			margin: 60upx 0upx 60upx 0upx;
			font-family: PingFang SC;
			font-weight: 500;
		}
		.btn-box{
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 10upx;
				width: 50%;
				height: 80rpx;
				border-radius: 5rpx;
				background-color: #48a2e1;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
				position: relative;
			}
			.btn-close{
				margin-right: 10upx;
				width: 50%;
				height: 80rpx;
				border-radius: 5rpx;
				border: 2rpx solid #48a2e1;
				background: none;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #48a2e1;
			}
		}
	}
}
.auth_btn{
	width: 100%;
	height: 100%;
	top:0upx;
	position: absolute;
	opacity:0.0;
}
</style>