jje_uniapp/pages/login/login.vue

<template>
	<view class="container">

		<view class="login-wrap">
			<view class="title">
				<text>HI，您好！ 欢迎登录</text>
			</view>
			<view class="h-logo">
				<image class="logo-img" src="../../static/logo.png" mode=""></image>
			</view>

			<!-- <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
              <u-icon name="weixin-fill" color="green" size="26"></u-icon>
              微信授权手机号登录
            </button> -->

			<button class="login-btn" @click="authWechatCodeLogin()">
				<u-icon name="weixin-fill" color="green" size="26"></u-icon>
				授权微信登录
			</button>


			<view class="login-form">
				<view class="remember-acconut">
					<view class="remember-acconut-password">
						<u-radio-group
								v-model="radiovalue1"
								placement="column"
								@change="groupChange"
						>
							<u-radio
									:customStyle="{marginBottom: '8px'}"
									v-for="(item, index) in radiolist1"
									:key="index"
									:label="item.name"
									:name="item.name"
									@change="radioChange"
							>
							</u-radio>
						</u-radio-group>
					</view>
					<view @click="gotoRetieveAccount()" class="forget-acconut-password">
						找回账号
					</view>
				</view>
			</view>

			<view class="login-form">
				<view class="agreement-content">
					<u-icon name="checkmark-circle-fill" color="#2979ff" size="20"></u-icon>
					<view class="agreement">
						<text>允许我们在必要的场景下合理使用你的相关信息，登录且同意</text>
						<text @click="gotoAgreement('1','会员协议')" class="text-color">《会员协议》、</text>
						<text @click="gotoAgreement('2','服务对象协议')" class="text-color">《服务对象协议》、</text>
						<text @click="gotoAgreement('3','服务对象协议')" class="text-color">《服务对象协议》</text>等内容
					</view>
				</view>
			</view>


			<!-- 判断微信是否绑定账号 -->
			<u-popup :show="show" :round="10"  mode="center" >
				<view class="h-popo-content">
					<view class="h-img">
						<u-icon name="/static/login/u01.png" color="red" size="60"></u-icon>
					</view>
					<view class="text">
						<text>该微信未绑定账号</text>
					</view>
					<view class="h-btn-wrap">
						<view @click="cancelOption" class="h-left-btn">
							<text>取消</text>
						</view>
						<view @click="gotoBindAccount" class="h-right-btn">
							<text>去绑定</text>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				userInfo: {
					username: 'uview-plus UI',
					password: '',
					openId: ''
				},
				// 基本案列数据
				radiolist1: [{
					name: '自动登录',
					disabled: true
				}],
				radiolist2: [{
					name: '允许我们在必要的场景下合理使用你的相关信息，登录且同意',
					disabled: true
				}],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '自动登录',
				radiovalue2: '22222',
			};
		},
		onLoad() {
			this.wechatCodeLogin();
		},
		methods: {
			// 去协议页面
			gotoAgreement(type,name){
				uni.navigateTo({
					url: '/myPages/TermsOfService/index?name='+name + '&type=' + type,
				})
			},
			// 取消操作
			cancelOption(){
				this.show = false;
			},
			// 去绑定账号
			gotoBindAccount(){
				this.show = false;
				uni.navigateTo({
					url: '/loginPages/login/bind-account',
				})
			},
			// 自动登录不成功，用户手动授权登录
			authWechatCodeLogin(){
				if(!this.userInfo.openId){
					this.show = true;
				}
			},
			// 微信小程序code自动登录
			wechatCodeLogin(){
				let that = this;

				wx.login({
					success(re) {
						that.$api.wxAuthLogin({code:re.code}).then(res=>{
							that.userInfo = res.data.data.userInfo
							uni.setStorageSync('userInfo',res.data.data.userInfo)
							uni.setStorageSync('accessToken',res.data.data.access_token)
							uni.setStorageSync('phoneIsBind',res.data.data.phoneIsBind)

							if (res.data.data.phoneIsBind){
								uni.switchTab({
									url: '/pages/index/index',
								})
							}else {
								that.show = true
							}

						})

					},
				})
			},
			getPhoneNumber (e) {
				uni.showToast({
					title: e.detail.code
				})
				console.log(e.detail.code)  // 动态令牌
				console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
				console.log(e.detail.errno)  // 错误码（失败时返回）
			},
			// 去找回账号页面
			gotoRetieveAccount(){
				uni.navigateTo({
					url: '/loginPages/login/retrieve-account',
				})
			},

			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				this.radiovalue1 = ""
				console.log('radioChange', n);
			},
		},
	};
</script>
<style lang="scss">
	page,body{
		background: #fff;
	}
	.container{
		width: 90%;
		margin: 0 auto;
		font-family: PingFangSC-Semibold, PingFang SC;
		.title{
			margin-top: 12px;
			width: 140px;
			font-size: 24px;
			font-weight: 600;
			color: #333333;
			line-height: 38px;
		}
		.h-logo{
			text-align: center;
			.logo-img{
				width: 160px;
				height: 122px;
			}
		}
		.login-wrap {
			.account{
				display: flex;
			}
		}
		.login-btn{
			text-align: center;
			color: #333;
			width: 70%;
			justify-content: center;
			margin: 0 auto;
			margin-top: 50px;
			height: 40px;
			line-height: 40px;
			border-radius: 8px;
			background: #FFE05C;
			border-radius: 21px;
			font-size: 14px;
			display: flex;
			.wechat-logo{
				height: 12px;
				width: 12px;
			}
		}
		.identifying-code{
			image{
				width: 80px;
				height: 30px;
			}
		}
		.remember-acconut{
			margin-top: 18px;
			display: flex;
			justify-content: space-between;
			color: #999999;
			.forget-acconut-password{
				color: rgb(96, 98, 102);
				font-size: 15px;
				line-height: 25px;
				margin-left: 30%;
			}
		}
		.agreement-content{
			margin-top: 18px;
			display: flex;
			// justify-content: space-between;
			color: #999999;
			align-items: center;
			.agreement{
				color: rgb(96, 98, 102);
				padding-left: 1px;
				font-size: 15px;
				.text-color{
					color: blue;
				}
			}
		}
	}

	.h-popo-content{
		height: 180px;
		padding: 12px;
		width: 300px;
		text-align: center;
		font-size: 14px;
		font-family: PingFangSC-Semibold, PingFang SC;
		.h-img{
			padding: 7px;
			display: flex;
			justify-content: center;

		}
		.h-text{
			margin-top: 12px;
			font-weight: 400;
			color: #666666;
		}
		.text{
			margin-top: 6px;
			font-weight: 400;
			color: #666666;
		}
		.h-btn-wrap{
			display: flex;
			justify-content: space-between;
			color: #333333;
			text-align: center;
			margin-top: 14px;
			.h-left-btn{
				height: 32px;
				line-height: 30px;
				background: #EEEEEE;
				width: 100px;
				text-align: center;
				border-radius: 16px;
				margin: 0 auto;
			}
			.h-right-btn{
				height: 32px;
				line-height: 30px;
				background: #FFE05C;
				width: 100px;
				border-radius: 16px;
				margin: 0 auto;

			}
		}
	}
</style>