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 class="popupBlock" v-if="popupShow">
			<view class="pop">
				<view class="poptit">
					完善信息
				</view>
				<view class="infoTxt">
					<view class="txtcell">
						<view class="">
							<text class="dian">*</text><text class="celTit">姓名</text>
						</view>
						<input type="text" class="inpSty" maxlength="10" placeholder="请输入真实姓名"
							placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);"
							v-model="userData.username" />
					</view>
					<view class="txtcell">
						<view class="">
							<text class="dian">*</text><text class="celTit">联系方式</text>
						</view>
						<input @blur="handleInput" type="number" class="inpSty" maxlength="11" placeholder="请输入联系方式"
							placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);" v-model="userData.tel" />

					</view>
					<view class="txtcell">
						<view class="">
							<text class="dian">*</text><text class="celTit">学校</text>
						</view>
						<view class="pickerBlock">
							<picker mode="selector" @change="schChange" :range="scharray">
								<view class="uni-input">{{!userData.sch?'请选择':userData.sch}}</view>
							</picker>
							<uni-icons type="right" class="icooo" size="20" color='rgba(0, 0, 0, 0.4)'></uni-icons>
						</view>

					</view>
					<view class="txtcell">
						<view class="">
							<text class="dian">*</text><text class="celTit">专业</text>
						</view>
						<view class="pickerBlock">
							<picker mode="selector" @change="speChange" :range="speList">
								<view class="uni-input">{{!userData.spe?'请选择':userData.spe}}</view>
							</picker>
							<uni-icons type="right" class="icooo" size="20" color='rgba(0, 0, 0, 0.4)'></uni-icons>
						</view>
					</view>
					<view class="txtcell">
						<view class="">
							<text class="celTit">职称</text><text
								style="color: rgba(0, 0, 0, 0.26);padding-left: 10rpx;">(选填)</text>
						</view>
						<view class="pickerBlock">
							<picker mode="selector" @change="rankChange" :range="rankList">
								<view class="uni-input">{{!userData.rankl?'请选择':userData.rankl}}</view>
							</picker>
							<uni-icons type="right" class="icooo" size="20" color='rgba(0, 0, 0, 0.4)'></uni-icons>
						</view>
					</view>
				</view>
				<view :class="btnColor" @click="register">
					完善信息并登录
				</view>
				<view class="logbri">
					完善个人信息后即可加入“丽湖国际双创虚拟教研室”会员，免费获取海量精品资源～
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				logbtn: 'logbtn',
				logbtn2: 'logbtn2',

				avatarUrl: '',
				nickname: '',
				// 学校
				scharray: ['深圳城市××大学', '深圳××大学', '深圳××大学', '深圳××大学'],
				// 专业
				speList: ['互联网', '网络通信', '航空', '汽修', '珠宝', '文秘', '设计'],
				// 职称
				rankList: ['xx', 'xx', 'xx'],
				// 默认头像的
				isShow: false,

				// 完善信息弹窗的
				popupShow: false,

				navBarData: {
					title: '登录',
					btn: 1 //判断是否显示返回按钮
				},

				btnCol: [],

				// 第一次登录
				userData: {
					openid: '',
					username: '',
					avatar: '',
					tel: '',
					sch: '',
					spe: '',
					rankl: '', //职称
				}
			};
		},
		computed: {
			btnColor() {

				let newArr = []
				Object.keys(this.userData).forEach(key => {
					if (this.userData[key] == '' && key != 'rankl') {
						newArr.push(key)
					}
				});
				console.log('newArr.length', newArr.length);
				return newArr.length > 0 || this.userData.tel == 11 ? 'logbtn' : 'logbtn2'
			}
		},
		methods: {
			// 判断手机号
			handleInput(e) {
				// console.log(e.target);
				const {value} = e.target

				const newValue = value.replace(/[^\d]/g, '') // 只允许输入数字
				console.log(newValue);
				
				// if (newValue.length <= 11) {
					this.userData.tel = newValue
				// }
				console.log(this.userData.tel);
			},
			// 选择用户名称
			inpvalue(e) {
				this.nickname = e.detail.value
			},
			schChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.userData.sch = this.scharray[e.detail.value]
			},
			speChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail)
				this.userData.spe = this.speList[e.detail.value]
			},
			rankChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail)
				this.userData.rankl = this.rankList[e.detail.value]
			},
			// 上传图片
			onChooseAvatar(e) {
				// 获取上传的图片
				const {
					avatarUrl
				} = e.detail

				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.userData.openid = oId
						this.userData.username = this.nickname
						this.userData.avatar = this.avatarUrl
						return this.popupShow = true
					} 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'
								})
							})
						})
					}
				})


			},
			register() {
				// username: '',
				// tel: '',
				// sch: '请选择',
				// spe: '请选择',
				if (this.userData.username == '') return uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				});
				if (this.userData.tel == '') return uni.showToast({
					title: '请输入联系方式',
					icon: 'none'
				});
				if (this.userData.sch == '') return uni.showToast({
					title: '请输入学校',
					icon: 'none'
				});
				if (this.userData.spe == '') return uni.showToast({
					title: '请输入专业',
					icon: 'none'
				});
				if (this.userData.tel.length != 11) return uni.showToast({
					title: '号码不足11位，请检查',
					icon: 'none'
				});
				// return console.log(this.userData);
				let oId = uni.getStorageSync('oId')
				this.$request('/login', 'POST', this.userData).then(res => {
					console.log('注册成功', res);

					// 添加消息页面系统通知提示已加入会员
					this.addMessage()

					this.$request('/selectUser', 'POST', {
						oId: oId,
					}).then(res => {
						this.$store.dispatch('asyncUpdateUser', res[0][0])
						uni.switchTab({
							url: '/pages/index/index'
						})
					})
				})
			},
			// 添加消息页面系统通知提示报名成功
			addMessage() {
				let opid = uni.getStorageSync('oId')
				let data = {
					oid: opid,
					acid: '',
					type: 2,
				}
				this.$request('/insertMessage', "POST", data).then(res => {
					console.log(res);
				})
			},
			// 跳转其他登录方式
			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;
	}

	.dian {
		color: rgba(245, 69, 69, 1);
	}

	.celTit {
		color: rgba(0, 0, 0, 0.8);
	}

	.icooo {
		transform: translate(0, 5rpx);
	}

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

	.popupBlock {
		position: absolute;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;

		.pop {
			width: 690rpx;
			height: 936rpx;
			background-color: #ffffff;
			border-radius: 30rpx;
			padding: 30rpx;

			.poptit {
				text-align: center;
				height: 48rpx;
				line-height: 48rpx;
				color: rgba(0, 0, 0, 0.88);
			}

			.infoTxt {
				width: 100%;
				height: 448rpx;
				margin-top: 40rpx;
				margin-bottom: 40rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.txtcell {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx rgba(231, 231, 231, 1) solid;
					padding-bottom: 20rpx;

					.inpSty {
						right: 0;
						bottom: 0;
						text-align: right;
					}

					.pickerBlock {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						color: rgba(0, 0, 0, 0.4);

						.uni-input {
							width: 100%;
							height: 100%;
						}
					}

				}
			}

			.logbtn2 {
				background-color: rgba(0, 86, 168, 1);
				width: 580rpx;
				height: 88rpx;
				border-radius: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 36rpx;
				margin: 150rpx auto;
				margin-bottom: 30rpx;
			}

			.logbtn {
				width: 580rpx;
				height: 88rpx;
				border-radius: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 36rpx;
				background-color: rgba(139, 190, 255, 1);
				margin: 150rpx auto;
				margin-bottom: 30rpx;
			}

			.logbri {
				width: 580rpx;
				margin: auto;
				text-align: center;
				font-size: 24rpx;
				color: rgba(48, 129, 232, 1);
			}
		}

	}
</style>