teaching-uniapp/pages/login_Wechat/login_Wechat.vue

<template>
	<view class="login_Wechat">
		<statusBar :item='navBarData'></statusBar>
		<view class="block">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatarUrl"></image>
			</button>
		</view>

		<view class="inp">
			<view class="nc">昵称：</view>
			<input type="nickname" class="weui-input" :value="nickname" @blur="inpvalue" placeholder="请输入昵称" />
		</view>

		<view class="mid">
			<!-- <radio value="r1" @click="radioCheck" size="10" :checked="isOK" /> -->
			<view class="" style="position: relative;padding-left:30rpx;">
				我已阅读并同意<text>《教育小程序服务条款》</text>和 <text>《 隐私协议》</text>新用户自动注册
				<view class="quan" @click="isDui">
					<image v-if="isShow" class="dui" src="https://teacherapi.cocorobo.cn/teaching-file/static//yym/dui.png"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>



		<button class="btn" @click="gotoIndex">一键登录</button>
		<view class="footer" @click="goto">
			<text>手机号登录/账号密码登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: '',
				nickname: '',
				isShow: false,
				navBarData: {
					title: '登录页',
					btn: 1 //判断是否显示返回按钮
				},
			};
		},
		methods: {
			// 选择名称
			inpvalue(e) {
				this.nickname = e.detail.value
			},
			// 上传图片
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				console.log(avatarUrl);

				let that = this
				const uploadTask = uni.uploadFile({
					url: 'http://139.159.246.165:7006/img', // post请求地址
					// url: 'https://cxcy.ssti.net.cn/api/UploadFirmFile', // post请求地址
					// filePath: tempFilePaths,
					filePath: avatarUrl,
					name: 'file', // 待确认
					header: {
						// 不要写这个不然报错
						// 'Content-Type': 'multipart/form-data',
					},
					success: function(res) {
						console.log(res);
						that.avatarUrl = res.data
					},
					fail: function(uploadFileFail) {
						console.log('Error:', uploadFileFail.data);
					},
					complete: () => {
						// 接口调用结束的回调函数（调用成功、失败都会执行）
						// console.log('Complete:');
					}
				});


				// this.avatarUrl = avatarUrl
			},
			// 登录
			gotoIndex() {
				if (this.avatarUrl ==
					'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
				) {
					uni.showToast({
						title: '请选择头像',
						icon: 'error',
						duration: 1000
					});
					return
				}
				if (this.nickname == '') {
					uni.showToast({
						title: '请输入昵称',
						icon: 'error',
						duration: 1000
					});
					return
				}
				if(!this.isShow) return uni.showToast({title: '请勾选条约',icon: 'error',duration: 1000});
					
				let oId = uni.getStorageSync('oId')
				console.log('gotoIndex:', oId);
				// let all = []
				// 检查是否注册过
				this.$request('/selectUser', 'POST', {
					oId: oId,
				}).then(res => {
					console.log('selectUser', res[0]);

					console.log(res[0] == false);
					// 账号第一次登录，还没注册过
					if (res[0] == false) {
						console.log('还未注册过，开始注册');
						this.$request('/login', 'POST', {
							openid: oId,
							Nme: this.nickname,
							// avatar: 'https://teacherapi.cocorobo.cn/teaching-file/static//mine/Avatar_default.png'
							avatar: this.avatarUrl
						}).then(res => {
							console.log('注册成功', res);
							uni.setStorageSync('token', res.token)
							// 注册过后重新登录
							this.gotoIndex()
						})
					} else {
						console.log('已注册过直接登录', res[0][0]);
						// 修改昵称头像
						this.$request('/updateUser',"POST",{
							openid: oId,
							Nme: this.nickname,
							avatar: this.avatarUrl
						}).then(res=>{
							console.log('updateUser',res);
							this.$request('/selectUser', 'POST', {
								oId: oId,
							}).then(res => {
								this.$store.dispatch('asyncUpdateUser', res[0][0])
							})
						})
					}
				})
				uni.switchTab({
					url: '/pages/index/index'
				})

			},
			// 跳转其他登录方式
			goto() {
				uni.navigateTo({
					url: "/pages/login_two/login_two"
				})
			},
			// 勾选取消条约
			isDui() {
				this.isShow = !this.isShow
			},
			getdata(){
				this.$request('/selectUserInfo', "POST", {openid: uni.getStorageSync('oId')}).then(res => {
					console.log('获取渲染数据',res[0][0]);
					let data=res[0][0]
					console.log(data);
					if(!data){
						return
					}else{
						this.avatarUrl=data.avatar
						this.nickname=data.username
					}
				})
			}
		},
		onLoad() {
			this.avatarUrl =
				'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';
			this.getdata()
		}
	}
</script>

<style lang="scss">
	.login_Wechat {
		width: 750rpx;
		height: 100vh;
		background-color: #ffffff;
	}

	.block {
		width: 750rpx;
		height: 30vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer {
		display: flex;
		justify-content: center;
		font-size: 14px;
		margin: auto;
		color: #666666;
	}

	.avatar-wrapper {
		width: 200rpx;
		height: 200rpx;
		padding: 0;

		image {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.inp {
		display: flex;
		align-items: center;
		padding: 0rpx 50rpx;
		.nc {
			// width: 150rpx;
			text-align: left;
		}

		.weui-input {}
	}

	.mid {
		display: flex;
		justify-content: flex-start;
		width: 750rpx;
		padding: 0rpx 50rpx;
		font-size: 13px;
		margin-top: 80rpx;
		
		.quan {
			position: absolute;
			flex-shrink: 0;
			top: 0;
			left: -10rpx;
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			margin-top: 5rpx;
			margin-right: 10rpx;
			border: 1px #bdbdbd solid;
			display: flex;
			justify-content: center;
			align-items: center;

			.dui {
				width: 32rpx;
				height: 32rpx;
			}
		}

		text {
			color: #4a97f2;
		}
	}

	.btn {
		background-color: #0056a8;
		color: #ffffff;
		border-radius: 30px;
		margin: 30rpx 55rpx;
		// padding: 10rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		// padding: 0rpx 10rpx;
		font-size: 16px;
	}
</style>