paymentCode/pages/index/index.vue

<template>
	<view class="login-main">
		<!-- Logo区域 -->
		<view class="logo-wrap">
			<image class="logo-img" src="../../static/images/logo.png" mode="aspectFit"></image>
			<text class="logo-title">天枢云</text>
		</view>
		<view>
			<!-- 授权说明区域 -->
			<view class="auth-info-wrap">
				<text class="auth-title">请确认以下信息并授权登录</text>
				<text class="auth-desc">获取您的信息(你的头像、信息等)</text>
			</view>

			<!-- 按钮区域 -->
			<view class="btn-wrap">
				<button class="auth-btn" @click="login">授权登录</button>
			</view>

			<!-- 协议单选框 -->
			<view class="agreement-wrap">
				<u-radio-group v-model="radiovalue">
					<u-radio value="1" size="30" name="1" iconSize="25" activeColor="#409EFF">
						<text class="agreement-text">授权同意《用户服务协议》和《隐私协议》</text>
					</u-radio>
				</u-radio-group>
			</view>
		</view>

	</view>
</template>

<script>
import ap from "../../static/zfb.js"
import {
	requestConfig
} from "@/app.config.js";
export default {
	data() {
		return {
			ap: ap,
			// 默认勾选协议，匹配参考图
			radiovalue: 1,
			shopId: "",
			uid: "",
			userInfo: {}
		};
	},
	onLoad(options) {
		this.shopId = options.shopId;
		this.uid = options.uid || '';
		let alipayuserinfo = localStorage.getItem("aliPayUserInfo")
		let wechatuserinfo = localStorage.getItem("weChatUserInfo")
		if (alipayuserinfo) {
			this.zfbLink()
		} else if (wechatuserinfo) {
			this.wxLink()
		}
	},
	methods: {
		login() {
			console.log(this.radiovalue);
			var userAgent = window.navigator.userAgent.toUpperCase();
			if (this.radiovalue == 1) {
				if (userAgent.indexOf('MICROMESSENGER') > 0) {
					this.wxLink()
				}
				if (userAgent.indexOf('ALIPAYCLIENT') > 0) {
					this.zfbLink()
				}
			} else {
				uni.$u.toast('请先同意用户授权！');
			}
		},
		zfbLink() {
			let url =
				`${requestConfig.zfb_request_url}?app_id=${requestConfig.zfb_appid}
					&scope=${requestConfig.zfb_scope}
					&redirect_uri=${encodeURIComponent(requestConfig.zfb_redirect_uri)}
					&state=STATE
					&shopId=${this.shopId}
					${this.uid ? '&uid=' + this.uid : ''}
					&type=zfb`
			console.log(url);
			window.location = url;
		},
		wxLink() {
			/*微信授权登录*/
			let redirect_uri = encodeURIComponent(requestConfig.wx_redirect_uri + '?shopId=' + this.shopId + '&uid=' +
				this.uid)
			let url = `https://open.weixin.qq.com/connect/oauth2/authorize?
							appid=${requestConfig.wx_appid}
							&redirect_uri=${redirect_uri}
							&response_type=code
							&scope=snsapi_userinfo
							&state=STATE
							#wechat_redirect`;
			window.location = url;
		},
	},
};
</script>

<style scoped lang="scss">
/* 全局页面容器 */
.login-main {
	width: 100%;
	min-height: 100vh;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 40rpx;
	box-sizing: border-box;
	justify-content: space-around;
}

/* Logo区域 */
.logo-wrap {
	margin-top: 180rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 160rpx;

	.logo-img {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 30rpx;
	}

	.logo-title {
		font-size: 48rpx;
		font-weight: 500;
		color: #333333;
		line-height: 64rpx;
	}
}

/* 授权说明区域 */
.auth-info-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 60rpx;

	.auth-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
		margin-bottom: 16rpx;
	}

	.auth-desc {
		font-size: 28rpx;
		color: #999999;
		line-height: 40rpx;
	}
}

/* 按钮区域 */
.btn-wrap {
	width: 100%;
	margin-bottom: 40rpx;

	.auth-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background: linear-gradient(90deg, #66B1FF 0%, #1677FF 100%);
		border-radius: 45rpx;
		border: none;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		padding: 0;
	}
}

/* 协议区域 */
.agreement-wrap {
	display: flex;
	align-items: center;
	justify-content: center;

	.agreement-text {
		font-size: 28rpx;
		color: #999999;
		line-height: 40rpx;
	}
}

/* 单选框样式适配 */
.u-radio-group--row {
	justify-content: center;
}
</style>