lookcommon_course/pages/auth/login.vue

<template>
	<view class="content">
		<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>
					</view>
					<view class="title">{{imgname}}</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> -->
					<button class="author-btn" @click="handleAgree()">微信一键登录</button>
				</view>
				<button class="close-btn" @tap="back">暂不登录</button>
				<view class="tips">
							 <checkbox  :checked="isAgreement" @click="handleAgreement()" />
							 <view  @click="handleAgreement()">您同意并接受</view>
					<view class="btn"  @click="openContent('userRegister')">《用户协议》</view>
					<view class="btn" @click="openContent('userPrivacy')">《隐私保护》</view>
				</view>
			</view>
		</view>
	<!-- 	<u-popup bgColor="#f6f6f6" :safeAreaInsetBottom="false"  :round="15" mode="bottom" :show="wxShow" @close="wxAuthClose" @open="wxAuthOpen">
			 <view class="wxAuth">
				 <view class="title">编辑头像和昵称</view>
				 <wx-auth class="wx-box" @updateUser="updateUser()" ref="wxauth"   ></wx-auth>
			 </view>
			 
		</u-popup> -->
	</view>
</template>

<script>

import { wxLogin,loginByMp } from '@/api/user'
// import {wxAuth} from '../components/wxAuth.vue';

export default {
	// components:{
	// 	wxAuth
	// },
	data() {
		return {
			wxShow:false,
			isAgreement:false,
			code:null,
		}
	},
	computed: {
	    imgPath() {
	      return this.$store.state.imgpath
	    },
		appid() {
			return this.$store.state.appid
		},
		imgname() {
		  return this.$store.state.logoname
		},
	  },
	// onLoad(option) {
	// 	uni.$on('refreshLogin', () => {
	// 		uni.navigateBack({
	// 			delta:1
	// 		})
	// 	})
	// },
	onLoad(option) {
	  uni.$on('refreshLogin', () => {
	    const pages = getCurrentPages(); // 获取当前页面栈
	    if (pages.length > 1) {
	      uni.navigateBack({ delta: 1 }); // 有上一页才返回
	    } else {
	      // 如果是首页，跳转到某个默认页面（如首页）
	      uni.reLaunch({ url: '/pages/index/index' }); // 或者用 switchTab 如果是 tabBar 页面
	      // 或者直接提示用户
	      uni.showToast({ title: '已经是首页了', icon: 'none' });
	    }
	  });
	},
	onUnload() {
	},
	mounted() {

	},
	methods: {
		gologin(){
			var that=this;
			
			uni.showLoading({
				title:"处理中"
			})
			uni.login({
				provider: 'weixin',
				success: async loginRes => {
					console.log(loginRes)
					let code = loginRes.code // 获取开发code
					var tuiUserId=uni.getStorageSync('tuiUserId');
					loginByMp({
					   code: code,
					   tuiUserId:tuiUserId
					})
					.then( res => {
						uni.hideLoading();
						if(res.code==200){
							uni.showToast({
								icon:'none',
								title: "登录成功",
							});
							uni.setStorageSync('userHistoryApp',res.user.historyApp);
							uni.setStorageSync('AppToken',res.token);
							uni.setStorageSync('userId',res.user.userId);
							uni.setStorageSync('avatar',res.user.avatar);
							uni.setStorageSync('nickName',res.user.nickName);
							if(res.user.isWeixinAuth==0){
								that.wxAuthOpen()
							}
							else{
								uni.$emit('refreshLogin');
								uni.$emit('refreshIM');
							}
						}
						else{
							uni.showToast({
								icon:'none',
								title: "授权登录失败,请重新登录",
							});
						}
					   
					})
					.catch(error => {
						console.log(error)
						uni.hideLoading();
						uni.showToast({
							icon:'none',
							title: "授权登录失败,请重新登录",
						});
					})
					 
				}
			})
		},
		updateUser(){
			this.wxShow=false;
			uni.$emit('refreshLogin');
			uni.$emit('refreshIM');
		},
		wxAuthOpen(){
			this.wxShow=true;
			var that=this;
			setTimeout(function(){
				that.$refs.wxauth.getUserInfo();
			})
			
		},
		wxAuthClose(){
			this.wxShow=false;
		},
		handleAgree(){
			if(!this.isAgreement){
			  	uni.showToast({
			  		icon:'none',
			  		title: "请先同意协议后再登录",
			  	});
				return 
			}
			this.gologin()
		},
		openContent(type){
			console.log(type)
			 
			uni.navigateTo({
				url:"/pages_user/agreement?type="+type
			})
		},
		handleAgreement(){
			this.isAgreement=!this.isAgreement;
		},
		// 微信用户手机号登录
		phoneLogin(e) {
			var that=this;
			
			uni.showLoading({
				title:"处理中"
			})
			
			console.log(e)
			// if (e.detail.errMsg == 'getPhoneNumber:ok') {
			// 	this.$getProvider()
			// 	.then(provider => {
			// 		console.log('当前的环境商',provider)
			// 		if (!provider) {
			// 		  reject()
			// 		}
			// 		// uni登录
			// 		uni.login({
			// 			provider: provider,
			// 			success: async loginRes => {
			// 				console.log(loginRes)
			// 				let code = loginRes.code // 获取开发code
			// 				var tuiUserId=uni.getStorageSync('tuiUserId');
			// 				wxLogin({
			// 				   encryptedData: e.detail.encryptedData,
			// 				   iv: e.detail.iv,
			// 				   code: code,
			// 				   tuiUserId:tuiUserId
			// 				})
			// 				.then( res => {
			// 					uni.hideLoading();
			// 					if(res.code==200){
			// 						uni.showToast({
			// 							icon:'none',
			// 							title: "登录成功",
			// 						});
			// 						uni.setStorageSync('userHistoryApp',res.user.historyApp);
			// 						uni.setStorageSync('AppToken',res.token);
			// 						uni.setStorageSync('userId',res.user.userId);
			// 						uni.setStorageSync('avatar',res.user.avatar);
			// 						uni.setStorageSync('nickName',res.user.nickName);
			// 						if(res.user.isWeixinAuth==0){
			// 							that.wxAuthOpen()
			// 						}
			// 						else{
			// 							uni.$emit('refreshLogin');
			// 							uni.$emit('refreshIM');
			// 						}
			// 					}
			// 					else{
			// 						uni.showToast({
			// 							icon:'none',
			// 							title: "授权登录失败,请重新登录",
			// 						});
			// 					}
							   
			// 				})
			// 				.catch(error => {
			// 					console.log(error)
			// 					uni.hideLoading();
			// 					uni.showToast({
			// 						icon:'none',
			// 						title: "授权登录失败,请重新登录",
			// 					});
			// 				})
							 
			// 			}
			// 		})
			// 	})
			// 	.catch(err => {})
			// } else {
			// 	uni.showToast({
			// 		title: '已拒绝授权',
			// 		icon: 'none',
			// 		duration: 2000,
			// 	})
			// }
		},
		back() {
			// uni.reLaunch({
			// 	url: '/pages/index/index',
			// 	animationType: 'pop-in',
			// 	animationDuration: 100
			// })
			uni.navigateBack({
				delta: 1
			});
		}
	},
}
</script>

<style lang="scss">
.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, #2583EB 0%, #6dbae9 100%);
				background: -moz-linear-gradient(to right, #2583EB 0%, #6dbae9 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, #2583EB 0%, #6dbae9 100%);
			background: -moz-linear-gradient(to right, #2583EB 0%, #6dbae9 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 #2583EB;
		  background: none;
		  font-size: 30rpx;
		  font-family: PingFang SC;
		  font-weight: 500;
		  color: #2583EB;
		}
	}
}
.tips{
	margin-top: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	color: #000;
	checkbox{
		
	}
	.btn{
		color: #2583EB;
	}
	
}
.wxAuth{
	border-radius: 30rpx;
	width: 100%;
	padding: 15rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	.title{
		font-size: 32rpx;
		margin: 10rpx 0rpx;
		font-weight: bold;
		text-align: center;
	}
	.wx-box{
		width: 100%;
		padding: 0rpx 30rpx;
	}
}
</style>