veterans_chat_h5/pages/login/login.vue

<!-- 
		退役军人端:  通过退役军人userID获取退役军人userSig等信息,再通过判断permission获取哪一个教师拥有这个咨询权限,再进行登录后直接跳转到聊天页面
		教师端: 通过教师userID获取教师userSig等信息,再进行登录跳转到聊天记录页面
 -->
<template>
	<view class="login">
		<view class="login-logo">
			<u-image src="../../static/logo.png" mode="aspectFill" width="260" height="260" />
		</view>
		<view class="login-form">
			<u-form :model="form" ref="uForm">
				<u-form-item label="用户名" label-width="140" prop="userName">
					<u-input v-model="form.userName" placeholder="" border="" :disabled="isDisable"></u-input>
				</u-form-item>
				<!-- <u-form-item label="用户名" label-width="140" prop="userName">
					<u-input v-model="form.userName" placeholder="请输入用户名" border="" :disabled="isDisable"></u-input>
				</u-form-item> -->
				<!-- <u-form-item label="用户密码" label-width="140" prop="userSig">
					<u-input v-model="form.userSig" placeholder="请输入用户密码" border="" type="password" :disabled="isDisable"></u-input>
				</u-form-item> -->
				<u-form-item :border-bottom="false">
					<u-button type="primary" @click="handleLogin">登录</u-button>
				</u-form-item>
			</u-form>
		</view>
	</view>
</template>

<script>
	import userList from '../../config/tim/user.js'
	export default {
		data() {
			return {
				isDisable: false,
				form: {
					userID: '', // 用户id
					userName: '', // 用户名
					userSig: '', // 用户标签
					toUserId: '', // 接收消息用户id
					permission: '', // 教师权限 用于筛选不用类型下的教师
					classId: '', // 班级id 用于筛选该班级下的教师
					type: '' // 用来区分教师端(teacher)和退役军人移动端(retire)
				},
				rules: {
					userID: [{
						required: true,
						message: '请输入用户ID',
						trigger: ['blur']
					}],
					userName: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur']
					}],
					userSig: [{
						required: true,
						message: '请输入用户密码',
						trigger: ['blur']
					}]
				}
			}
		},
		onLoad(page) {
			/**
			 * userID 用户id
			 * userName 用户名
			 * userSig 用户标签
			 * toUserId 接收消息用户id
			 * permission 教师权限 用于筛选不用类型下的教师
			 * classId 班级id 用于筛选该班级下的教师
			 * type 用来区分教师端(teacher)和退役军人移动端(retire)
			 */
			if (page.userID) {
				this.isDisable = true
				this.form.userID = page?.userID
				this.form.type = page?.type
				this.form.userName = page?.userName
				this.form.userSig = page?.userSig
				this.form.permission = page?.permission
				this.form.classId = page?.classId
				this.autoLogin();
			} else {
				uni.showToast({
					title: '参数丢失',
					icon: 'none'
				})
			}
		},
		onShow() {},
		methods: {
			/**
			 * 自动登录
			 */
			autoLogin() {
				uni.showLoading({
					mask: true,
					title: '正在登录中...'
				})
				if (this.form.type === 'teacher') {
					setTimeout(() => {
						this.getTeacherInfo(this.form.userID);
					}, 100)
				} else if (this.form.type === 'retire') {
					setTimeout(() => {
						this.getRetireInfo(this.form.userID);
					}, 100)
				} else {
					uni.showToast({
						title: '参数丢失',
						icon: 'none'
					})
				}
			},
			/**
			 * 获取个人信息
			 */
			getMyProfile() {
				this.tim.getMyProfile().then(res => {
					console.log('res', res)
				}).catch(err => {
					console.log('err', err)
					this.autoLogin();
				})
			},
			/**
			 * 登录按钮
			 */
			handleLogin() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.autoLogin();
					}
					return false;
				})
			},
			/**
			 * 登录TIM
			 */
			loginTim(userInfo) {
				this.tim.login({
					userID: this.form.userID,
					userSig: this.form.userSig
				}).then(res => {
					// 登录成功后 更新登录状态
					this.$store.commit('toggleIsLogin', true);
					// 自己平台的用户基础信息
					uni.setStorageSync('userInfo', JSON.stringify(userInfo))
					// tim 返回的用户信息
					uni.setStorageSync('userTIMInfo', JSON.stringify(res.data));
					this.updateUserInfo(userInfo);
					if (this.form.toUserId) {
						setTimeout(() => {
							uni.hideLoading()
							this.$store.commit('createConversationActive', this.form.toUserId)
							this.$u.route({
								url: 'pages/chat/chat',
								type: 'redirectTo'
							})
						}, 300)
					} else {
						setTimeout(() => {
							uni.hideLoading();
							this.$u.route({
								url: '/pages/index/index',
								type: 'redirectTo'
							})
						}, 300)
					}
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: '用户不存在',
						duration: 2000
					})
				})
			},
			updateUserInfo(userInfo) {
				// 将已经登陆的用户信息 提交到IM中
				this.tim.updateMyProfile({
					nick: userInfo.username,
					avatar: userInfo.avatar,
					gender: this.$TIM.TYPES.GENDER_MALE,
					selfSignature: '暂无个性签名',
					allowType: this.$TIM.TYPES.ALLOW_TYPE_ALLOW_ANY
				}).then((res) => {
					console.log('提交资料成功')
				}).catch((err) => {
					console.warn('updateMyProfile error:', err); // 更新资料失败的相关信息
				});
			},
			/**
			 * 获取老师信息
			 * @param { String } teacherId
			 */
			getTeacherInfo(teacherId) {
				uni.request({
					url: this.config.baseUrl + '/im/getSignatureInfo',
					data: {
						id: teacherId,
						type: 2
					},
					success: (res) => {
						console.log('教师信息:', res.data)
						if (res.data.code === 200) {
							this.form.userSig = res.data.data.signature
							this.form.userName = res.data.data.username
							this.importUser(teacherId, 2, res.data.data)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							})
							uni.hideLoading()
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '获取教师信息失败!',
							icon: 'none'
						})
						uni.hideLoading()
					}
				});
			},
			/**
			 * 获取退役军人信息
			 * @param {String} retireId
			 */
			getRetireInfo(retireId) {
				uni.request({
					url: this.config.baseUrl + '/im/getSignatureInfo',
					data: {
						id: retireId,
						type: 1
					},
					success: (res) => {
						console.log('退役军人信息:', res.data);
						if (res.data.code === 200) {
							this.form.userSig = res.data.data.signature
							this.form.userName = res.data.data.username
							if (this.form.classId) {
								this.getClassTeacherByClassId(this.form.classId, res.data.data)
							} else {
								this.getConsultJurisdiction(this.form.permission, res.data.data)
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							})
							uni.hideLoading()
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '获取退役军人信息失败!',
							icon: 'none'
						})
						uni.hideLoading()
					}
				});
			},
			/**
			 * 通过班级id筛选老师
			 * @param {Object} classId
			 * @param {Object} userInfo
			 */
			getClassTeacherByClassId(classId, userInfo) {
				uni.request({
					url: this.config.baseUrl + '/im/getTeacherInfoByClassId',
					data: {
						classId: classId
					},
					success: (res) => {
						console.log('班级教师信息:', res.data);
						if (res.data.code === 200) {
							this.form.toUserId = res.data.data?.teacherId
							if (this.form.toUserId) {
								this.importUser(this.form.toUserId, 2, userInfo)
							} else {
								uni.showToast({
									title: '未找到相关班级老师!',
									icon: 'none'
								})
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							})
							uni.hideLoading()
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '获取退役军人信息失败!',
							icon: 'none'
						})
						uni.hideLoading()
					}
				});
			},
			/**
			 * 获取拥有该权限的教师
			 * @param { String } permission
			 */
			getConsultJurisdiction(permission, userInfo) {
				uni.request({
					url: this.config.baseUrl + '/im/getTeacherInfoByAuth',
					data: {
						auth: permission
					},
					success: (res) => {
						console.log('拥有权限的教师:', res.data);
						if (res.data.code === 200) {
							if (res.data.data) {
								this.form.toUserId = res.data.data.teacherId
								this.importUser(res.data.data.teacherId, 2, userInfo)
							} else {
								uni.showToast({
									title: '该咨询目前未分配教师!',
									icon: 'none'
								})
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
							uni.hideLoading()
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '获取教师权限失败!',
							icon: 'none'
						})
						uni.hideLoading()
					}
				});
			},
			/**
			 * 导入用户
			 * @param { String } id 导入用户id
			 * @param { Number } type 1-退役军人 2-教师 3-企业
			 * @param { Object } userInfo 登录用户信息
			 */
			importUser(id, type, userInfo) {
				uni.request({
					url: this.config.baseUrl + '/im/importUser',
					method: 'POST',
					data: {
						id,
						type
					},
					success: (res) => {
						console.log('注册:', res.data);
						if (res.data.code === 200) {
							this.loginTim(userInfo);
						} else {
							uni.showToast({
								title: res.data.msg || res.data.message,
								icon: 'error'
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '注册失败!',
							icon: 'none'
						})
						uni.hideLoading()
					}
				});
			},
			/**
			 * 登录trtc calling
			 */
			loginTrtc() {
				this.trtcCalling.login({
					sdkAppID: this.config.sdkAppId,
					userID: this.form.userID,
					userSig: this.form.userSig
				}).then(res => {
					this.tim.login({
						userID: this.form.userID,
						userSig: this.form.userSig
					}).then(res => {
						// 登录成功后 更新登录状态
						this.$store.commit('toggleIsLogin', true);
						// 自己平台的用户基础信息
						uni.setStorageSync('userInfo', JSON.stringify(userInfo))
						// tim 返回的用户信息
						uni.setStorageSync('userTIMInfo', JSON.stringify(res.data));
						setTimeout(() => {
							uni.hideLoading()
							this.$u.route({
								url: '/pages/index/index'
							})
						}, 1000)
					}).catch(err => {
						uni.showToast({
							icon: 'none',
							title: '用户不存在',
							duration: 2000
						})
					})
				}).catch(err => {
					console.log(err)
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		&-logo {
			width: 260rpx;
			height: 260rpx;
			margin: 100rpx auto;
		}

		&-form {
			width: calc(100% - 200rpx);
			margin: 0 auto;
		}
	}
</style>