chelvc-custom/src/pages/login/login.vue

<template>
	<view class="container">
		<view class="t-b">欢迎登录车旅程！</view>
		<view class="t-b2">欢迎使用车旅程，为你提供便捷服务</view>

		<!-- 中间登录注册按钮 -->
		<view class="login-btn-wrap">
			<u-button v-if="!checked" shape="circle" type="primary" :customStyle="buttonStyleTop" @click="checkAgree">
				微信用户一键登录
			</u-button>
			<u-button v-else shape="circle" type="primary" :loading="loading" loadingText="登录中..."
				:customStyle="buttonStyleTop" open-type="getPhoneNumber" @getphonenumber="login">
				微信用户一键登录
			</u-button>
			<u-button shape="circle" :customStyle="buttonStyleButton" @tap="$Router.push('/pages/login/phoneLogin')">
				手机号登录/注册
			</u-button>
		</view>
		<br />

		<!-- 底部协议 -->
		<view class="agree">
			<u-checkbox-group v-model="agree">
				<u-checkbox shape="circle" name="1" label="我已阅读并同意" />
			</u-checkbox-group>
			<view @click="$Router.push('/pages/webview/index?target=http://8.137.122.65:88/用户协议.html')"
				class="agreement">
				《用户协议》</view>
			<view @click="$Router.push('/pages/webview/index?target=http://8.137.122.65:88/隐私政策.html')"
				class="agreement">
				《隐私政策》</view>
		</view>

		<!-- 第三方 -->
		<view class="t-f"><text>————— 第三方账号登录 —————</text></view>
		<view class="t-e cl">
			<view class="t-g" @click="$Router.push('/pages/login/phoneLogin')">
				<image src="@/static//icon/phone.png" />
			</view>
			<view class="t-g">
				<image src="@/static//icon/qq.png" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWxLoginCode
	} from '@/api/login.js';

	export default {
		data() {
			return {
				agree: [],
				code: '',
				mobile: '', // 手机号密文并非真实手机号
				isUserAgreement: false,
				loading: false,
				title: '',
				buttonStyleTop: {
					'font-size': '28rpx',
					background: '#5677fc',
					color: '#fff',
					height: '90rpx',
					'line-height': '90rpx',
					'border-radius': '50rpx',
					'box-shadow': '0 5px 7px 0 rgba(86, 119, 252, 0.2)',
					marginTop: '30rpx',
				},
				buttonStyleButton: {
					'font-size': '28rpx',
					background: '#fff',
					color: '#333',
					height: '90rpx',
					'line-height': '90rpx',
					'border-radius': '50rpx',
					'box-shadow': '0 5px 7px 0 rgba(235, 237, 245, 0.2)',
					marginTop: '30rpx',
				},
			};
		},
		computed: {
			checked() {
				return this.agree && this.agree.length > 0;
			},
		},
		methods: {

			onLoad: function(options) {
				console.log('options========>', options.q);
				if (options.q) {
					const urlString = decodeURIComponent(options.q)
					const pathSegments = urlString.split('/');
					const promoterId = pathSegments[pathSegments.length - 1];
					this.$store.commit('SET_INVITATIONCODE', promoterId)
				}


			},

			checkAgree() {
				if (!this.checked) {
					return uni.$u.toast('请阅读并勾选底部协议');
				}
			},
			//点击微信用户一键登录
			async login(e) {
				if (e.detail.errMsg != 'getPhoneNumber:ok') {
					return uni.$u.toast('您已取消登录');
				}
				this.mobile = e.detail.code;
				this.code = await getWxLoginCode();
				if (!this.code || !this.mobile) {
					this.loading = false;
					uni.$u.toast('微信授权失败,请稍后重试');
					return;
				}
				this.loading = true;
				const data = {
					code: this.code,
					mobile: this.mobile,
				};
				this.$store.dispatch('LoginByWxCode', data).then(() => {
						// this.$store.dispatch('SwitchIdentity', 'CUSTOMER');
						this.$Router.pushTab('/pages/tabbar/home');
						this.loading = false;
						this.$store.dispatch('GetUserInfo');
						uni.$u.toast('登录成功');
					})
					.catch(err => {
						this.loading = false;
						uni.$u.toast(`${err.message}`);
					});
			},
			confirmUserAgreement() {
				// 确认按钮点击事件处理
				if (!this.checked.length) {
					this.showUserAgreementDialog = true;
				} else {
					this.showPrivacyPolicyDialog = true;
				}

				// 在确认按钮点击后执行页面跳转的代码
				this.$Router.back();
			},

			//点击用户协议
			clickAgreement(title) {
				this.show = true; //打开弹框
				this.title = title; //赋值标题
			},

			//点击用户协议弹框内的确定
			handleConfirm() {
				this.show = false; //关闭弹框
			},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		height: 100vh;
		padding: 0 70rpx;
		background-color: #f2f5f9;
		background-color: #fff;
		padding-top: 150rpx;
		box-sizing: border-box;

		.t-b {
			text-align: left;
			font-size: 46rpx;
			color: #000;
			padding: 150rpx 0 30rpx 0;
			font-weight: bold;
		}

		.t-b2 {
			text-align: left;
			font-size: 32rpx;
			color: #aaaaaa;
			padding: 0rpx 0 80rpx 0;
		}

		.login-btn-wrap {
			margin-top: 50rpx;
			width: 100%;
		}
	}

	.agree {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 27rpx;
		margin-top: 20rpx;

		.agreement {
			color: #3c9cff;
			cursor: pointer;
		}
	}

	.t-f {
		text-align: center;
		margin: 200rpx 0 0 0;
		color: #666;

		text {
			margin-left: 20rpx;
			color: #aaaaaa;
			font-size: 27rpx;
		}
	}

	.t-e {
		text-align: center;
		width: 250rpx;
		margin: 20rpx auto 0;

		.t-g {
			float: left;
			width: 50%;
		}

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>