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 ap from "../../static/zfb.js"
	import {
		requestConfig
	} from "@/app.config.js";
	export default {
		data() {
			return {
				ap: ap,
				radiovalue: 0,
				shopId: "",
				uid: "",
				userInfo: {}
			};
		},
		onLoad(options) {
			this.shopId = options.shopId;
			this.uid = options.uid || '';
			let alipayuserinfo = localStorage.getItem("aliPayUserInfo")
			let wechatuserinfo = localStorage.getItem("weChatUserInfo")
			this.radiovalue = 1
			if (alipayuserinfo) {
				this.zfbLink()
			} else if (wechatuserinfo) {
				this.wxLink()
			}

		},
		methods: {
			login() {
				var userAgent = window.navigator.userAgent.toUpperCase();
				console.log(this.radiovalue);
				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">
	.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>