FarmingWx_sacanPay/pages/index/index.vue

<template>
	<view class="login-main">
		<view class="login-main-content">
			<image class="img" src="../../static/images/logo.png" mode=""></image>
		</view>
		<view class="login-contont">
			<view class="login-contont-info">
				<h5>请确认以下信息并授权登录</h5>
				<view class="text">获取您的信息（你的头像、信息等）</view>
			</view>
			<view class="login-contont-button">
				<button class="btn" @click="login">授权登录</button>
			</view>
			<view class="radio">
				<u-radio-group v-model="radiovalue">
					<u-radio value="1" size="30" name="1" iconSize="25">
						<text class="radioText">授权同意《用户服务协议》 和《隐私协议》</text></u-radio>
				</u-radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		requestConfig
	} from "@/app.config.js";
	export default {
		data() {
			return {
				radiovalue: 0,
				shopId: ""
			};
		},
		onLoad(options) {
			this.shopId = options.shopId;
			// console.log(this.GetQueryString('shopId'));
			// this.shopId = this.GetQueryString('shopId')
		},
		methods: {
			GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			},
			login() {
				console.log(this.radiovalue);
				if (this.radiovalue == 1) {
					// ne.sxdirectpurchase.com
					//地址进行编码，微信官方强制要求编码
					let redirect_uri = encodeURIComponent(requestConfig.redirect_uri + '?shopId=' + this.shopId)
					console.log(redirect_uri);
					let url = `https://open.weixin.qq.com/connect/oauth2/authorize?
								appid=${requestConfig.appid}
								&redirect_uri=${redirect_uri}
								&response_type=code
								&scope=snsapi_userinfo
								&state=STATE
								#wechat_redirect`;
					window.location = url;
				} else {
					uni.$u.toast('请先同意用户授权！');
				}

			},
		},
	};
</script>
<style scoped lang="scss">
	.u-radio-group--row {
		justify-content: center;
	}

	.radioText {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.login-main {
		background: url("../../static/images/back.png") no-repeat;
		background-size: 100% 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 100vh;
	}

	.login-contont-button {
		.btn {
			margin-top: 20px;
			width: 90%;
			height: 90rpx;
			background: linear-gradient(275deg, #01cf6c 0%, #07e278 100%);
			border-radius: 44rpx;
			color: #fff;
		}
	}

	.login-contont {
		width: 100%;
		height: 50%;

		.login-contont-info {
			text-align: center;

			.text {
				margin-top: 10px;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				font-style: normal;
			}
		}
	}

	.radio {
		text-align: center;
		margin-top: 10px;
	}

	.login-main-content {
		text-align: center;
		padding-top: 100px;
		width: 100%;
		height: 50%;

		.img {
			width: 100px;
			height: 130px;
		}
	}
</style>