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">
				<!-- <button class="avatar-wrapper" @click="getImg"> -->
				<image class="avatar" :src="avatarUrl"></image>
			</button>
		</view>

		<view class="collpopul" v-if="popmsg">
			<view class="contxt">
				登录成功
			</view>
		</view>


		<view class="mid">
			<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="popupBlock" v-if="popupShow">
			<view class="shade" v-if="allShow" @click="hiddenShade">
			</view>
			<view class="pop">
				<view class="poptit">
					完善信息
				</view>
				<view class="infoTxt">
					<view class="txtcell">
						<view class="">
							<text class="celTit">学号/工号</text>
						</view>
						<input @blur="judgeNum" type="number" class="inpSty" maxlength="11" placeholder="输入后自动获取信息"
							placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);" v-model="judgeNumber" />
					</view>

					<view class="txtcell">
						<view class="">
							<text class="dian">*</text><text class="celTit">姓名</text>
						</view>
						<input type="text" class="inpSty" placeholder="请输入真实姓名"
							placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);"
							v-model="uname" />
					</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>
						<input type="text" class="inpSty" placeholder="请输入院校全称"
							placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);" v-model="stuName" />
					</view>
					
					<view class="txtcell">
						<view class="">
							<text class="celTit">所在部门</text>
						</view>
						<input type="text" class="inpSty" placeholder="请输入所在部门"
							placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);" v-model="majorName" />
					</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="logbtn2" @click="register">
					完善信息并登录
				</view>
				<view class="logbri">
					完善个人信息后即可加入“丽湖国际双创虚拟教研室”会员，免费获取海量精品资源～
				</view>
			</view>
		</view>
		<u-popup :show="popupshow" mode="center" round="10" :closeable='true' @close="popupclose">
			<view style="width: 600rpx;box-sizing: border-box;padding: 40px 20rpx; padding-bottom: 30px;">
				<view class="" style="display: flex;align-items: center;">
					<u--input :placeholder="typyInall?'请输入专业':'请输入学院'" border="surround" v-model="typyInCon"></u--input>
				</view>
				<view style="display: flex;width: 100%;justify-content: space-around;margin-top: 20rpx;">
					<view class="typyInbtn" @click="popupclose">
						取消
					</view>
					<view class="typyInbtn" @click="popupaffirm">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 遮罩框
				allShow: false,

				isLogin: false,

				searchStudent: '', //学校搜索栏
				searchMajor: '', //专业搜索栏
				popmsg: false,


				logbtn: 'logbtn',
				logbtn2: 'logbtn2',

				avatarUrl: '',
				nickname: '',
				// 学校
				isshow: false,
				stuName: '', //学校名称
				uname:'',
				colleges: [], //学校列表
				// inpTxt: '', //学校id
				// scharray: ['深圳城市××大学', '深圳××大学', '深圳××大学', '深圳××大学'],
				// 专业
				jorshow: false,
				majorList: [],
				majorName: '',
				// majorInpTxt: '',  //专业id
				// speList: ['互联网', '网络通信', '航空', '汽修', '珠宝', '文秘', '设计'],
				// 职称
				rankList: ['教授', '副教授', '讲师', '助教', '其他'],
				// 默认头像的
				isShow: false,

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

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

				btnCol: [],

				// 这两个因为要监视,所以不能放对象里面
				inpTxt: '', //学校id
				majorInpTxt: '', //专业id

				// 手动录入弹窗
				popupshow: false,
				typyInCon: '',
				typyInall: 0,
				// 第一次登录
				// name2:'', //被监视name
				// 学号工号
				judgeNumber: '',
				userData: {
					openid: '',
					username: '',
					avatar: '',
					tel: '',
					inpTxt: '', //学校id
					majorInpTxt: '', //专业id
					rankl: '', //职称
					schName: '', //学校名字
					jorName: '' //专业名字
				}
			};
		},
		watch: {
			searchMajor: {
				handler(val) {
					// 模糊搜索专业
					let data = {
						mid: this.inpTxt,
						txt: val
					}
					this.$request('/selectLikeMajors', "get", data).then(res => {
						// console.log('模糊搜索专业', res);
						this.majorList = res[0]
					})
					// this.selectMajor(val)
				}
			},
			searchStudent: {
				handler(val) {

					this.$request('/selectLikeColleges', "get", {
						txt: val
					}).then(res => {
						// console.log(res);
						this.colleges = res[0]
					})
					// this.selectMajor(val)
				}
			},
			inpTxt: {
				handler(val) {
					// console.log('val', val);
					this.selectMajor(val)
				}
			}
		},
		methods: {
			popupclose() {
				this.popupshow = false
				this.typyInCon = ''
				this.searchStudent = ''
			},
			popupaffirm() {
				if (!this.typyInall) {
					if (!this.typyInCon) return uni.showToast({
						title: '请输入学院',
						icon: 'none',
					})

					this.stuName = this.typyInCon
					this.searchStudent = ''
					this.inpTxt = ''
					this.majorInpTxt = ''
					this.searchMajor = ''
					this.majorName = ''
					this.popupshow = false
					// 赋值完清空
					this.typyInCon = ''
				} else {
					if (!this.typyInCon) return uni.showToast({
						title: '请输入专业',
						icon: 'none',
					})

					this.majorName = this.typyInCon
					this.majorInpTxt = ''
					this.searchMajor = ''
					this.popupshow = false
					// 赋值完清空
					this.typyInCon = ''
				}
			},
			typeIn(e) {
				this.hiddenShade()
				this.typyInall = e
				this.popupshow = true
			},
			// 遮罩层
			hiddenShade() {
				this.isshow = false
				this.jorshow = false
				this.allShow = false
			},
		
			// 学校list显示与隐藏
			show() {
				this.isshow = true
				// this.jorshow = false
				this.allShow = true
			},

			// 选择学校
			addStu(e) {
				// 选择学校时,将专业的数据清除，让其重新选择
				this.majorInpTxt = ''
				this.majorName = ''
				this.majorList = []
				// 为学校选项赋值
				let data = e.currentTarget.dataset.item
				this.inpTxt = data.id
				this.stuName = data.name

				// 学校list隐藏/显示
				this.isshow = false

				// 遮罩层隐藏
				this.allShow = false
			},

			// 专业list显示与隐藏
			majorshow() {
				// 学校未选择则提示
				if (!this.stuName) {
					uni.showToast({
						title: '请先选择学院',
						icon: 'none',
						duration: 1000
					});
					return
				}
				// 遮罩层显示
				this.allShow = true
				this.jorshow = true
			},
			// 选择专业
			addmajor(e) {
				let data = e.currentTarget.dataset.jor
				// console.log('选择专业', e);
				this.majorInpTxt = data.id
				this.majorName = data.name
				// console.log('选择专业', this.majorInpTxt);
				this.jorshow = false
				this.allShow = false
			},
			// 根据选择的学校来进行显示专业
			selectMajor(e) {
				// console.log('根据选择的学院来进行显示专业', e);
				let data = {
					mid: e
				}
				this.$request('/selectMajors', "get", data).then(res => {
					this.majorList = res[0]
				})
			},
			// 判断手机号
			handleInput(e) {
				const {
					value
				} = e.target
				const newValue = value.replace(/\s*/g, '') // 只允许输入数字

				this.userData.tel = newValue
				
			},
			// 失去焦点查询学号工号
			judgeNum() {
				if (!this.judgeNumber) return
				let opid = uni.getStorageSync('oId')
				let data = {
					txt: this.judgeNumber
				}
				this.$request('/selectStudentNumber', "Get", data).then(res => {
					console.log('失去焦点查询学号工号', res);
					if (res[0].length) {
						let aaa = res[0][0]
						console.log('aaaaaaaa',aaa);
						if (aaa.cid !== null) {
							this.inpTxt = aaa.cid
						}
						if (aaa.sid !== null) {
							this.majorInpTxt = aaa.sid
						}
						if (aaa.department === '') {
							this.stuName = ''
						} else {
							this.stuName = aaa.department
						}
						if (aaa.class_name === '') {
							this.majorName = ''
						} else {
							this.majorName = aaa.class_name
						}
						this.uname = aaa.name
					} else {
						uni.showToast({
							title: '学号/工号暂无查询结果',
							icon: 'none',
							duration: 1000
						})
					}

				})
			},
			// 选择用户名称
			inpvalue(e) {
				this.nickname = e.detail.value
			},
			rankChange(e) {
				// console.log('picker发送选择改变，携带值为', e.detail)
				this.userData.rankl = this.rankList[e.detail.value]
			},
			// 上传图片
			onChooseAvatar(e) {
				// 获取上传的图片
				const {
					avatarUrl
				} = e.detail
				// this.avatarUrl = avatarUrl
				// console.log(avatarUrl)
				let that = this
				const uploadTask = uni.uploadFile({
					// url: 'http://127.0.0.1:7334/img', // post请求地址
					url: 'https://awsupload.cocorobo.cn/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) {
						let img = JSON.parse(res.data)
						console.log('上传图片', img);
						that.avatarUrl = img.fileUrl
					},
					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.isShow) return uni.showToast({
					title: '请勾选条约',
					icon: 'error',
					duration: 1000
				});
				let oId = uni.getStorageSync('oId')
				// 判断是否登录过
				if (this.isLogin) {
					// 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 => {
							console.log('已注册过直接登录', res[0]);
							this.$store.dispatch('asyncUpdateUser', res[0][0])
							this.popmsg = true
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 1000)

						})
					})
				} else {
					console.log('还未注册过，开始注册');
					this.userData.openid = oId
					this.userData.username = this.nickname
					this.userData.avatar = this.avatarUrl
					return this.popupShow = true
				}

			},
			register() {
				
				if (!this.uname) return uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				});
				if (!this.userData.tel) return uni.showToast({
					title: '请输入联系方式',
					icon: 'none'
				});
				if (!this.stuName) return uni.showToast({
					title: '请输入院校全称',
					icon: 'none'
				});

				if (this.userData.tel.length != 11) return uni.showToast({
					title: '号码不足11位，请检查',
					icon: 'none'
				});
				this.userData.inpTxt = this.inpTxt
				this.userData.majorInpTxt = this.majorInpTxt
				this.userData.username = encodeURIComponent(this.uname)
				this.userData.schName = encodeURIComponent(this.stuName)
				this.userData.jorName = encodeURIComponent(this.majorName)

				// 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: 1,
				}
				this.$request('/insertMessage', "POST", data).then(res => {
					console.log(res);
				})
			},
			
			// 勾选取消条约
			isDui() {
				this.isShow = !this.isShow
			},
			//获取用户信息(授权)
			getImg() {
				uni.getUserProfile({
					desc: "获取你的昵称、头像、地区及性别",
					success: (res) => {
						// console.log("所有", res);
						this.avatarUrl = res.userInfo.avatarUrl; //获取微信头像
					},
					fail() {}
				})
			},
			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.isLogin = true
						this.avatarUrl = data.avatar
						this.nickname = data.username
					}
				})

				// 获取学院
				this.$request('/selectColleges', "get", {}).then(res => {
					// console.log(res);
					this.colleges = res[0]
				})
			}
		},
		onLoad() {
			this.avatarUrl =
				'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/file-1720687971964.jpeg';
			this.getdata()
		}
	}
</script>

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

	::v-deep .u-safe-bottom {
		display: none;
	}

	.collpopul {
		position: absolute;
		padding: 0 30rpx;
		background-color: #fff;
		top: 10%;
		box-shadow: 0rpx 10rpx 10rpx 5rpx rgba(0, 0, 0, .1);
		z-index: 100;
		width: 650rpx;
		height: 90rpx;
		left: 50%;
		transform: translate(-50%, 0);
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		// animation: collpopul 1s cubic-bezier(0,0,0.25,1) forwards;

		.contxt {
			flex: 1;
			font-weight: 580;
			font-size: 30rpx;
			display: flex;
			align-items: center;

			image {
				padding-right: 10rpx;
			}
		}

		.goMore {
			// width: 120rpx;
			display: flex;
			// height: 35rpx;
			height: 100%;
			line-height: 30rpx;
			align-items: center;
			color: #F44265;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	@keyframes collpopul {
		0% {
			// background: red;
			top: 0;
		}

		100% {
			// background: red;
			top: 15%;
		}

		// 100%{
		// 	opacity: 0;
		// }
	}

	.typyInbtn {
		box-sizing: border-box;
		padding: 10rpx 60rpx;
		border-radius: 10rpx;
		color: #fff;
		background-color: #0081FE;
	}

	.typyInbtn2 {
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #0081FE;
		color: #E7E7E7;
		margin-right: 20px;
	}


	.shade {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		// background-color: #0056a8;
		z-index: 12;
	}

	.uni-input {
		text-align: right;
	}

	.stuListSty {
		position: absolute;
		top: calc(100% + 15rpx);
		right: -20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		z-index: 12;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx 0 #ccc;
		padding: 30rpx;
		padding-top: 10rpx;

		.Usearch {
			margin: 20rpx 0;
			// background-color: #0056a8;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.UsearchBtn {
				width: 130rpx;
				flex-shrink: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				// background-color: #0056a8;
				// color: #fff;
			}
		}
	}

	.list {
		position: relative;
		// top: calc(100% + 15rpx);
		// right: -20rpx;
		width: 550rpx;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		// padding: 10rpx 15rpx;
		border-radius: 20rpx;
		// box-shadow: 0 0 20rpx 0 #ccc;
		z-index: 11;

		.listcon {
			width: 100%;
			padding: 20rpx 0;
			font-size: 28rpx;
			border-bottom: 1rpx #e7e7e7 solid;
		}
	}

	.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: 28rpx;
		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: 10rpx;
					margin-bottom: 20px;


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

					.pickerBlock {
						flex: 1;
						display: flex;
						justify-content: flex-end;
						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>