GuangYuYuan-app/src/pages/login/wxLogin.vue

<template>
	<view class="login">
		<view class="title">
		</view>
		<view class="logo">
			<image src="/static/identify/logo.png" mode=""></image>
		</view>
		<view class="btn" @click="login">
			微信登录
		</view>
		<view class="agree">
			<view class="round" @click="isLook">
				<image src="/static/other/select_round.png" mode="" v-if="look"></image>
				<image src="/static/other/round.png" mode="" v-else></image>
			</view>
			<view class="choice">
				我已阅读并同意 <text @click="goAgreement">《用户协议》</text> 和 <text @click="goPrivacy">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<!-- <script href="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
<script ref="http://res.wx.qq.com/open/js/jweixin-1.6.0.js">
	import {
		wxGetCode
	} from '../../api/my'
	export default {
		data() {
			return {
				openId: '',
				isLogin: false,
				token: '',
				url:'',
				look:false
			}
		},
		methods: {
			goPrivacy(){
				uni.navigateTo({
					url:'./privacy'
				})
			},
			goAgreement(){
				uni.navigateTo({
					url:'./agreement'
				})
			},
			isLook(){
				this.look = !this.look
			},
			login() {
				if(this.look){
				 	window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa72f643173a90106&redirect_uri=https://test.baoxianzhanggui.com/fragrance/&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
				}else{
					uni.showToast({
						title: '请同意《用户协议》和《隐私政策》',
						icon: 'none'
					})
				}
				// wxGetCode().then(res => {
				// })
				// uni.request({
				// 	url: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9aaa5016e4b259bd&redirect_uri=https://test.baoxianzhanggui.com/fragrance/%23/&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect',
				// 	success: (res) => {
				// 	}
				// })
			},
			back() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		onLoad(options) {}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100vw;
		height: 100vh;
		// background-image: radial-gradient(circle, #b1fffc, #fcfdff);
		background: radial-gradient( 1000% 50% at 65% 50%, #C9FEF4 0%, #F6FFFF 100%);
		overflow: hidden;

		.title {
			margin: 38rpx 0px 0px 40rpx;
			font-size: 36rpx;
			letter-spacing: 1px;
		}

		// display: flex;
		// align-items: center;
		.logo {
			width: 240rpx;
			height: 240rpx;
			border-radius: 10%;
			overflow: hidden;
			margin: 80px auto 0px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.btn {
			width:670rpx;
			height: 84rpx;
			text-align: center;
			background: linear-gradient(to right, #35c99d, #27aea7);
			margin: 200rpx 0px 20px 40rpx;
			line-height: 84rpx;
			border-radius: 10px;
			color: #fcfdff;
			font-size: 28rpx;
		}
		.agree{
			width: 100%;
			height: 50rpx;
			margin-left: 40rpx;
			display: flex;
			// justify-content: center;
			align-items: center;
			.round{
				margin-right: 10rpx;
				image{
					width: 28rpx;
					height: 28rpx;
				}
			}
			.choice{
				font-size: 26rpx;
			}
			text{
				color: #27aea7;
				line-height: 50rpx;
			}
		}
	}
</style>