reservation-uniapp-250509/service-uniapp-technician/pages/login/login.vue

<template>
	<view class="content">
		<view style="height: 166rpx; width: 100%;"></view>
		<view class="a1">手机号快捷登录</view>
		<view class="a2">美好服务即刻享受</view>
		<view class="a3" @click="clickStaff">
			<img width="100%" src="/static/logo.png" alt="" />
		</view>
		<view class="a4">上门服务服务平台</view>

		<button class="a5" @click="clickLogin()">微信一键（注册）登录</button>

		<view class="a6">
			<view class="a7">&check;</view>
			已同意<span 
			@click="keyValue = 'policy';
			configPopupShow = true">《隐私政策》</span>
			<span @click="keyValue = 'service';configPopupShow = true">《服务条款》</span>
		</view>

		<configPopup 
		:keyValue="keyValue"
		:show="configPopupShow"
		:list="config"
		@close="configPopupShow = false"/>
	</view>
</template>

<script>
	import configPopup from '@/components/configPopup'
	export default {
		components : {
			configPopup
		},
		data() {
			return {
				step: 2,
				openid: '',
				code: undefined,
				configPopupShow : false,
				keyValue : '',
				config : []
			}
		},
		onLoad() {
			// this.getConfig()
			this.code = this.GetQueryString('code');
			if (!this.code) {
				this.getwx_authorize();
			}
			// if (this.code) {
			// 	this.toWxLogin(this.code)
			// }
		},
		methods: {
			clickCancel() {
				uni.navigateTo({
					url: '/pages/login/mobile'
				})
			},
			clickStaff() {
				uni.navigateTo({
					url: '/pages/staff/center'
				})
			},
			clickLogin() {
				this.code = this.GetQueryString('code');
				if (this.code) {
					//直接去登录发起请求
					this.toWxLogin(this.code)
				} else {
					//获取code 静默授权
					this.getwx_authorize();
				}
			},
			loginOrRegister(encryptData) {
				console.log('encryptData', encryptData);
				uni.setStorageSync("userid", "1")
				uni.switchTab({
					url: '/pages/index/index'
				})
				this.$httpGet("/wxma/getMobile", {
					encryptedData: encryptData
				}, (res) => {
					uni.setStorageSync("userid", "1")
				})
			},
			getwx_authorize() {
				// let vid = uni.getStorageSync("ivcode");
				//授权的回调地址
				let redirect_uri = encodeURIComponent(import.meta.env.VITE_REDIRECT_URI + '/#/pages/login/login');
				//这是我们公众号的appid
				let appid = import.meta.env.VITE_APPID;
				//静默授权	
				window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+'&redirect_uri='+redirect_uri+'&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect'+'&t='+new Date().getTime();
				//修改授权参数
				// window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid +
				// 	'&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_userinfo&state=' + vid +
				// 	'&connect_redirect=1#wechat_redirect';
			},
			//获取url中参数的方法
			GetQueryString(name) {
				var url = window.location.href;
				try {
					var cs = url.split('?')[1]; //获取?之后的参数字符串
					var cs_arr = cs.split('&'); //参数字符串分割为数组
					for (var i = 0; i < cs_arr.length; i++) { //遍历数组，拿到json对象
						if (cs_arr[i].split('=')[0] == name) {
							return cs_arr[i].split('=')[1];
						}
					}
					return "";
				} catch {
					return "";
				}
			},
			//微信登录
			toWxLogin(code) {
				this.vid = uni.getStorageSync("ivcode");
				this.$api('wxLogin', { code }, res=>{
					if(res.code == 200){
						uni.setStorageSync("token", res.result.token)
						uni.setStorageSync("userInfo", JSON.stringify(res.result.userInfo))
						location.href = import.meta.env.VITE_REDIRECT_URI + '/#/pages/index/index'
					}else{
						location.href = import.meta.env.VITE_REDIRECT_URI + '/#/pages/login/login'
					}
				})
			},
			getConfig() {
				this.vid = uni.getStorageSync("ivcode");
				this.$api('getConfig', {} ,res => {
					if(res.code == 200){
						this.config = res.result
					}
				})
			},
		}
	}
</script>

<style scoped>
	.a1 {
		width: 336rpx;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 48rpx;
		font-family: PingFang SC, PingFang SC-Heavy;
		font-weight: 800;
		text-align: center;
		color: #333333;
		width: 100%;

		margin-bottom: 20rpx;
	}

	.a2 {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #333333;

		margin-bottom: 100rpx;
	}

	.a3 {
		width: 148rpx;
		height: 148rpx;
		background: #51d0b4;
		border-radius: 16px;
		margin: 0 auto;
		overflow: hidden;
	}

	.a4 {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #333333;

		margin-top: 20rpx;
		margin-bottom: 80rpx;
	}

	.a5 {
		width: 568rpx;
		height: 90rpx;
		background: #51d0b4;
		border-radius: 16rpx;

		margin: 0 auto;

		line-height: 90rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
	}

	.a6 {
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #333333;

		margin-top: 40rpx;
	}

	.a6 span {
		color: #6FDFBE;
	}

	.a7 {
		background-color: #6FDFBE;
		width: 34rpx;
		height: 34rpx;
		line-height: 34rpx;
		color: #fff;
		border-radius: 50%;
		display: inline-block;
	}
</style>