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="wechatCodeLogin()">
				<!--				<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">
				<!--        <text style="color: red;font-size: 22rpx  ">*此账号密码可进行交易使用，请保存好您的隐私。</text>-->
				<view class="agreement-content">
					<u-icon v-if="choose" name="checkmark-circle-fill" color="#2979ff" size="20" @click="changeChoose"></u-icon>
					<u-icon v-else name="/static/order/ud9.png" color="green" size="20" @click="changeChoose"></u-icon>
					<view class="agreement">
						<text>允许我们在必要的场景下合理使用你的相关信息，请阅读并同意协议</text>
						<text @click="gotoAgreement('1','会员协议')" class="text-color">《会员协议》、</text>
						<text @click="gotoAgreement('2','服务对象协议')" class="text-color">《服务对象协议》、</text>
					</view>
				</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>
</template>
<script>
	export default {
		data() {
			return {
				choose:true,
				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: {

			changeChoose(){
				this.choose =!this.choose
			},
			// 去协议页面
			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 == undefined) {
					this.show = true;
				}
			},
			// 微信小程序code自动登录
			wechatCodeLogin() {
				let that = this;
				if (!this.choose){
					uni.showToast({
						icon:'error',
						title: '请勾选相关协议'
					})
				}
				wx.login({
					success(re) {
						that.$api.wxLogin({code:re.code}).then(res=>{
							uni.setStorageSync('userInfo',res.data.data.userInfo)
							uni.setStorageSync('accessToken',res.data.data.access_token)
							uni.setStorageSync('phoneIsBind',res.data.data.phoneIsBind)

							uni.removeStorageSync('parent_member_id');
							if (!res.data.data.phoneIsBind){
								uni.showModal({
									title:'绑定手机号',
									content:'请绑定手机号，以便为你提供服务',
									success:res=>{
										if (res.confirm){
											uni.navigateTo({
												url: '/myPages/setting/setting-telphone',
											})
										}
									}
								})
							}

						})

					},
				})
			},
			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: 23rpx;

				.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>