massage-front/pages_order/auth/wxLogin.vue

<template>
	<view class="login">
		<view class="logo">
			<image :src="configList.config_app_logo" mode=""></image>
			<view class="text">
				{{ configList.config_app_name }}
			</view>
		</view>

		<button class="btn btn-login mt" @click="wxLogin">
			<view class="icon">
				<uv-icon name="weixin-fill" color="#ffffff" size="36rpx"></uv-icon>
			</view>
			<view class="">
				授权登录
			</view>
		</button>

		<button class="btn btn-cancel" :plain="true" :hairline="false" @click="onCancel">
			暂不登录
		</button>

		<view class="config mt">
			<view style="flex: 1;">
				<uv-checkbox-group v-model="checkboxValue" shape="circle">
					<view class="content">
						<uv-checkbox size="28rpx" icon-size="28rpx" activeColor="#07C261" :name="1"></uv-checkbox>
						已同意
						<text @click="openModal">《注册协议》、隐私协议</text>
					</view>
				</uv-checkbox-group>
			</view>
			<view class="flex">
				<uv-icon name="info-circle" color="#07C261" size="28rpx"></uv-icon>
			</view>
		</view>

		<agreementModal ref="modal" @confirm="onConfirmAggrement"></agreementModal>

	</view>
</template>

<script>
	import agreementModal from './agreementModal.vue'
	import Vue from 'vue'
	export default {
		name: 'Login',
		data() {
			return {
				checkboxValue: []
			}
		},
		components: {
			agreementModal
		},
		onShow() {
			if (this.GetQueryString('code')) { //路径上面有code说明微信已授权
				this.agreement = true; //勾选协议
				//直接去登录发起请求
				this.toWxLogin(this.GetQueryString('code'))
			}
		},
		methods: {
			wxLogin() {
				if (!this.checkboxValue.length) {
					return uni.showToast({
						title: '请先同意隐私协议',
						icon: 'none'
					})
				}
				
				
				// #ifdef MP-WEIXIN
				this.$store.commit('login')
				// #endif
				
				// #ifdef H5
				this.getwx_authorize();
				// #endif
			},
			openModal() {
				this.$refs.modal.open()
			},
			onConfirmAggrement(confirm) {
				if (confirm) {
					this.checkboxValue = [1]
				} else {
					this.checkboxValue = []
				}
			},
			onCancel() {
				console.log('--onCancel')
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			getwx_authorize() {
				console.log(Vue.prototype.$config.redirect);
				let redirect_uri = encodeURIComponent(Vue.prototype.$config.redirect + '/#/pages_order/auth/wxLogin');
				let appid = Vue.prototype.$config.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) {
						
						this.$store.commit('h5Login', res.result)
						
					} else {
						location.href = Vue.prototype.$config.redirect + '/#/pages_order/auth/wxLogin'
					}
					sessionStorage.removeItem('vid')
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.login {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 100vh;
		flex-direction: column;
		position: relative;

		background: $uni-fg-color;

		.logo {
			margin-top: 334rpx;
			width: 320rpx;

			image {
				height: 150rpx;
				width: 320rpx;
			}

			.text {
				margin-top: 90rpx;
				font-size: 38rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #000000;
			}
		}

		.btn {
			width: 80%;
			height: 100rpx;

			font-size: 15px;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;

			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;

			&-login {
				background-image: linear-gradient(to right, #84A73F, #D8FF8F);
				color: #fff;
				border: none;

				.icon {
					margin-right: 10rpx;

					image {
						width: 40rpx;
						height: 35rpx;
					}
				}
			}

			&-cancel {
				height: calc(100rpx - 1rpx * 2);
				color: #c7c7c7;
				background-color: transparent;
				border: 1rpx solid #c7c7c7;
				margin-top: 60rpx;
			}
		}

		.mt {
			margin-top: 200rpx;
		}

		.config {
			width: 80%;
			line-height: 40rpx;
			// margin-top: 27rpx;
			color: #C7C7C7;
			text-align: left;
			display: flex;

			.content {
				font-size: 22rpx;
				display: flex;
				align-items: center;
			}

			text {
				color: #07C261;
			}
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}
</style>