door-uniapp-240802/service-uniapp-client/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">
			<!-- <image src="@/static/login/logo.png" mode="aspectFit"></image> -->
		</view>
		<view class="a4">上门服务服务平台</view>

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

		<view class="a6">
			<view class="a7" :class="{ a8 : agreement}" @click="agreement = !agreement">
				<span v-if="agreement">&check;</span>
			</view>
			已同意<span @click="keyValue = 'policy'; configPopupShow = true" class="agreement">《隐私政策》</span>
			<span @click="keyValue = 'server';configPopupShow = true" class="agreement">《服务条款》</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: [],
				agreement: false,
			}
		},
		onShow() {
			this.getConfig()
			if (this.GetQueryString('code')) { //路径上面有code说明微信已授权
			uni.showLoading({});
				this.agreement = true; //勾选协议
				//直接去登录发起请求
				this.toWxLogin(this.GetQueryString('code'))
			}
		},
		methods: {
			clickCancel() {
				uni.navigateTo({
					url: '/pages/login/mobile'
				})
			},
			clickStaff() {
				uni.navigateTo({
					url: '/pages/staff/center'
				})
			},
			clickLogin() {
				if (!this.agreement) {
					return uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					})
				}
				this.getwx_authorize();
			},
			loginOrRegister(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 redirect_uri = encodeURIComponent(import.meta.env.VITE_REDIRECT_URI + '/#/pages/login/login');
				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();
			},
			//获取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) {
				let vid = sessionStorage.getItem('vid');
				this.$api('wxLogin', {
					code,
					vid
				}, res => {
					if (res.code == 200) {
						localStorage.setItem("token", res.result.token)
						localStorage.setItem("userInfo", JSON.stringify(res.result.userInfo))
						if (!res.result.userInfo.phone) {
							uni.reLaunch({
								url: '/pages/mine/phoneDetail'
							})
						} else {
							location.href = import.meta.env.VITE_REDIRECT_URI + '/#/pages/index/index'
						}
						uni.hideLoading();
					} else {
						location.href = import.meta.env.VITE_REDIRECT_URI + '/#/pages/login/login'
					}
					sessionStorage.removeItem('vid')
				})
			},
			getConfig() {
				this.$api('getConfig', {}, res => {
					if (res.code == 200) {
						this.config = res.result
					}
				})
			}
		}
	}
</script>

<style>
	.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: 170rpx;
		height: 170rpx;
		border-radius: 16px;
		margin: 0 auto;
		overflow: hidden;
		background: #F6BEC3;
	}

	.a3 image {
		width: 100%;
		height: 100%;
	}

	.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: #F6BEC3;
		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 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #333333;
		margin-top: 40rpx;
	}

	.a6 .agreement {
		color: #F6BEC3;
	}

	.a7 {
		box-sizing: border-box;
		border-radius: 50%;
		width: 34rpx;
		height: 34rpx;
		display: inline-block;
		border: 1px solid #ccc;
		margin-right: 4rpx;
	}

	.a8 {
		background-color: #F6BEC3;
		border: none;
		color: #fff;
	}
</style>