v3-h5-web/pages_basics/views/completeInformation/completeInformation.vue

<template>
	<view id="completeInformation">
		<view class="top-title-box-">
			<view>个人信息</view>
			<view>请完善个人信息</view>
		</view>
		<view class="bottom-input-max-box">
			<view class="text-max-box">
				<view class="text-top-box">
					<view>*</view>
					<view>姓名</view>
				</view>
				<view class="text-bottom-p">{{newData.userName}}</view>
			</view>
			<view class="text-max-box">
				<view class="text-top-box">
					<view>*</view>
					<view>{{newData.userType==1?'卡号':(newData.userType==2?'卡号':'')}}</view>
				</view>
				<view class="text-bottom-p">{{newData.account}}</view>
			</view>
			<view class="text-max-box">
				<view class="text-top-box">
					<view>*</view>
					<view>所在所</view>
				</view>
				<view class="text-bottom-p">{{newData.deptName?newData.deptName:'-'}}</view>
			</view>
			<view class="text-max-box" v-if="newData.userType == 2">
				<view class="text-top-box">
					<view>*</view>
					<view>专业</view>
				</view>
				<view class="text-bottom-p">{{newData.majorName?newData.majorName:'-'}}</view>
			</view>
			<view class="text-max-box" v-if="newData.mobile">
				<view class="text-top-box">
					<view>*</view>
					<view>手机号</view>
				</view>
				<view class="text-bottom-p">{{newData.mobile}}</view>
			</view>
			<view class="input-max-box" v-if="!newData.mobile">
				<view class="input-top-box">
					<view>*</view>
					<view>手机号</view>
				</view>
				<input class="input-top-p" :always-embed="true" :cursor-spacing="10"
				v-model="form.mobile" maxlength="11" focus placeholder="请输入手机号码">
			</view>
			<view class="input-button-max-box" v-if="!newData.mobile">
				<view class="input-top-box">
					<view>*</view>
					<view>手机验证码</view>
				</view>
				<view class="input-button-box">
					<input maxlength="6" :always-embed="true" :cursor-spacing="10"
					v-model="form.captcha" focus placeholder="请输入手机验证码" />
					<view @click="getCode()" :class="codeType?'checkButton':'noCheckButton'">
						{{codeType?seconds+'秒后重试':'获取验证码'}}
					</view>
				</view>
			</view>
			<view class="button-max-box" v-if="newData.userType == 2 && !newData.tutorUserName">
				<view class="button-top-box">
					<view>*</view>
					<view>领导</view>
				</view>
				<input class="button-bottom-p" :always-embed="true" :cursor-spacing="10"
				:disabled="true" v-model="form.supervisorName"
				maxlength="30" focus placeholder="请选择领导" @click="userButton()">
			</view>
			<view class="text-max-box" v-if="newData.userType == 2 && newData.tutorUserName">
				<view class="text-top-box">
					<view>*</view>
					<view>领导</view>
				</view>
				<view class="text-bottom-p">{{newData.tutorUserName}}</view>
			</view>
			<view class="bottom-button-p" @click="submitButton()">确定</view>
		</view>
		<view class="shade-max-big-box" v-if="userShowType">
			<view class="null-back-box" @click="userButton()"></view>
			<view class="shade-big-box">
				<view class="shade-top-box">
					<view class="shade-top-left-box">
						<uni-icons type="search" class="icon-view-left" size="20" color="#999999"></uni-icons>
						<input class="input-top-p" :always-embed="true" :cursor-spacing="10"
						 @confirm="searchButton()"
						v-model="getData.userName" maxlength="10" focus placeholder="请输入领导">
						<uni-icons v-if="getData.userName" @click="clearButton()"
						type="clear" class="icon-view-right" size="20" color="#999999"></uni-icons>
					</view>
					<view class="shade-top-right-button" @click="searchButton()">搜索</view>
				</view>
				<scroll-view scroll-y @scrolltolower="scrollGet" class="shade-bottom-box">
					<view @click="checkUser(item)"
					class="for-user-box" :class="checkUserUserId==item.userId?'check-user':''"
					v-for="(item,index) in dataList" :key="index">
						<view>{{item.userName}}{{item.account?'('+item.account+')':''}}</view>
						<view>{{item.deptName}}</view>
					</view>
					<view class="get-data-null-p" v-if="getDataType">- 没有更多数据 -</view>
					<view class="get-data-null-p" v-else="getDataType">- 滑动加载更多 -</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		systemUserDetail,
		systemUserSelectByPage,
		systemUserEditUser,
		authNumCaptchaNotRegistered,
	} from '@/pages_basics/api/index.js'
	export default {
		data() {
			return {
				newData:{
					userName:"",
					account:"",
					deptName:"",
					majorName:"",
					userType:0,
				},
				form:{
					mobile:"",
					supervisorName:"",
					supervisorId:"",
				},
				userShowType:false,
				checkUserUserId:null,
				//查询
				getData: {
					userType:1,
					page: 1,
					pageSize: 20,
					userName: '',
				},
				getDataType: false,
				total: 0,
				dataList:[],
				//定时器
				codeType: false,
				seconds: 0,
				timer:null,
			}
		},
		onLoad(option) {

		},
		onShow() {
			this.systemUserDetail();
		},
		methods: {
			async systemUserDetail(){
				const { data } = await systemUserDetail({userId:uni.getStorageSync('userId')});
				if (data.code == 200) {
					this.$set(this,'newData',data.data);
					this.systemUserSelectByPage();
				}
			},

			//获取验证码
			getCode() {
				let self = this;
				const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
				if (this.codeType) {
					uni.showToast({
						title: '请稍后再试',
						icon: "none",
						duration: 3000
					});
					return
				} else if (!this.form.mobile) {
					uni.showToast({
						title: '请输入手机号码',
						icon: "none",
						duration: 3000
					});
					return
				} else if (!reg.test(this.form.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: "none",
						duration: 3000
					});
					return
				}
				this.authNumCaptchaNotRegistered();
			},
			async authNumCaptchaNotRegistered() {
				let self = this;
				const {
					data
				} = await authNumCaptchaNotRegistered({mobile:this.form.mobile});
				if (data.code == 200) {
					uni.showToast({
						title: '发送成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					const TIME_COUNT = 60;
					this.$set(this, 'codeType', true);
					if (!this.timer) {
						this.$set(this, 'seconds', TIME_COUNT);
						this.timer = setInterval(() => {
							if (this.seconds > 1 && this.seconds <= TIME_COUNT) {
								this.seconds -= 1;
							} else {
								this.$set(this, 'codeType', false);
								clearInterval(this.timer);
								this.$set(this, 'timer', null);
							}
						}, 1000);
					}
				}
			},
			//提交
			submitButton(){
				let self = this;
				const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
				if(this.newData.userType == 1){
					if(!this.form.mobile){
						uni.showToast({
							title: '请输入手机号码',
							icon: "none",
							duration: 3000
						});
						return
					}else if (!reg.test(this.form.mobile)) {
						uni.showToast({
							title: '请输入正确的手机号码',
							icon: "none",
							duration: 3000
						});
						return
					} else if (!this.form.captcha) {
						uni.showToast({
							title: '请输入手机验证码',
							icon: "none",
							duration: 3000
						});
						return
					}
				}else if(this.newData.userType == 2){
					if(!this.newData.mobile && !this.newData.tutorUserName){
						if(!this.form.mobile){
							uni.showToast({
								title: '请输入手机号码',
								icon: "none",
								duration: 3000
							});
							return
						}else if (!reg.test(this.form.mobile)) {
							uni.showToast({
								title: '请输入正确的手机号码',
								icon: "none",
								duration: 3000
							});
							return
						} else if (!this.form.captcha) {
							uni.showToast({
								title: '请输入手机验证码',
								icon: "none",
								duration: 3000
							});
							return
						} else if(!this.checkUserUserId){
							uni.showToast({
								title: '请选择领导',
								icon: "none",
								duration: 3000
							});
							return
						}
					}else if(this.newData.mobile){
						if(!this.checkUserUserId){
							uni.showToast({
								title: '请选择领导',
								icon: "none",
								duration: 3000
							});
							return
						}
					}else{
						if(!this.form.mobile){
							uni.showToast({
								title: '请输入手机号码',
								icon: "none",
								duration: 3000
							});
							return
						}else if (!reg.test(this.form.mobile)) {
							uni.showToast({
								title: '请输入正确的手机号码',
								icon: "none",
								duration: 3000
							});
							return
						} else if (!this.form.captcha) {
							uni.showToast({
								title: '请输入手机验证码',
								icon: "none",
								duration: 3000
							});
							return
						}
					}
				}
				uni.showModal({
					title: '确认提交?',
					cancelColor: '#999999',
					confirmColor: '#0183FA',
					content: '',
					success(res) {
						if (res.confirm) {
							// console.log('确定')
							self.systemUserEditUser();
						} else if (res.cancel) {
							// console.log('取消')
						}
					}
				})
			},
			//完善用户信息-提交
			async systemUserEditUser(){
				let obj = {
					userId:this.newData.userId,
				}
				if(this.newData.userType == 1){
					obj.mobile = this.form.mobile;
					obj.captcha = this.form.captcha;
				} else if(this.newData.userType == 2){
					if(!this.newData.mobile && !this.newData.tutorUserName){
						obj.tutorUserId = this.checkUserUserId;
						obj.mobile = this.form.mobile;
						obj.captcha = this.form.captcha;
					}else if(this.newData.mobile){
						obj.tutorUserId = this.checkUserUserId;
					}else{
						obj.mobile = this.form.mobile;
						obj.captcha = this.form.captcha;
					}
				}
				const { data } = await systemUserEditUser(obj);
				if (data.code == 200) {
					uni.showToast({
						title: '提交成功',
						mask: true,
						icon: "none",
						duration: 2000
					});
					setTimeout(function(){
						uni.redirectTo({
							url: '/pages/views/home/home',
						});
					},2000);
				}
			},
			//搜索按钮
			clearButton(){
				this.$set(this, 'getDataType', false);
				this.$set(this, 'dataList', []);
				this.$set(this, 'total', 0);
				this.$set(this.getData, 'userName','');
				this.$set(this.getData, 'page', 1);
				this.systemUserSelectByPage();
			},
			//搜索按钮
			searchButton(){
				this.$set(this, 'getDataType', false);
				this.$set(this, 'dataList', []);
				this.$set(this, 'total', 0);
				this.$set(this.getData, 'page', 1);
				this.systemUserSelectByPage();
			},
			userButton(type){
				this.$set(this,'userShowType',!this.userShowType);
			},
			checkUser(item){
				this.$set(this.form,'supervisorName',item.userName);
				this.$set(this.form,'supervisorId',item.account);
				this.$set(this,'checkUserUserId',item.userId);
				this.$set(this,'userShowType',false);
			},
			//滚动加载事件
			scrollGet() {
				let self = this;
				if (self.total / self.getData.pageSize <= self.getData.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.getData.page += 1;
					this.$nextTick(() => {
						this.systemUserSelectByPage();
					})
				}
			},
			//获取实验室
			async systemUserSelectByPage() {
				let self = this;
				let obj = {
					userType:this.getData.userType,
					page:this.getData.page,
					pageSize:this.getData.pageSize,
					userName:this.getData.userName,
				};
				if(!obj.userName){
					obj.deptId = this.newData.deptId
				}
				const {
					data
				} = await systemUserSelectByPage(obj);
				if (data.code == 200) {
					if (self.getData.page == 1) {
						this.dataList = data.data.records;
						this.total = data.data.total;
						if (data.data.total / self.getData.pageSize <= self.getData.page) {
							this.$set(this, 'getDataType', true);
						}
					} else {
						this.dataList = [...this.dataList, ...data.data.records]
						this.total = data.data.total;
						if (data.data.total / self.getData.pageSize <= self.getData.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},
		},
	}
</script>


<style lang="stylus" scoped>
	#completeInformation {
		height:100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.top-title-box-{
			height:110rpx;
			display: flex;
			background-color: #FFFFFF;
			margin-bottom:20rpx;
			view:nth-child(1){
				line-height:100rpx;
				font-size:34rpx;
				margin:0 45rpx 0 32rpx;
				color:#333;
				font-weight:700;
			}
			view:nth-child(2){
				line-height:100rpx;
				font-size:30rpx;
				color:#999999;
			}
		}
		.bottom-input-max-box{
			flex:1;
			overflow-x: hidden;
			overflow-y: scroll;
			background-color: #FFFFFF;
			.text-max-box{
				.text-top-box{
					display: flex;
					margin-left:32rpx;
					view{
						font-size:30rpx;
						line-height: 100rpx;
					}
					view:nth-child(1){
						color:#FF0000;
					}
					view:nth-child(2){
						color:#333;
					}
				}
				.text-bottom-p{
					margin-left:32rpx;
					width: 630rpx;
					line-height: 100rpx;
					background: #F5F5F5;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					padding:0 30rpx;
				}
			}
			.input-max-box{
				.input-top-box{
					display: flex;
					margin-left:32rpx;
					view{
						font-size:30rpx;
						line-height: 100rpx;
					}
					view:nth-child(1){
						color:#FF0000;
					}
					view:nth-child(2){
						color:#333;
					}
				}
				.input-top-p{
					margin-left:34rpx;
					width: 630rpx;
					height: 100rpx;
					padding:0 30rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 1rpx solid #E0E0E0;
				}
			}
			.input-button-max-box{
				.input-top-box{
					display: flex;
					margin-left:32rpx;
					view{
						font-size:30rpx;
						line-height: 100rpx;
					}
					view:nth-child(1){
						color:#FF0000;
					}
					view:nth-child(2){
						color:#333;
					}
				}

				.input-button-box {
					display: flex;
					margin-left:30rpx;
					input {
						width: 412rpx;
						height: 100rpx;
						line-height: 100rpx;
						border-radius: 10rpx;
						border: 1px solid #D8D8D8;
						padding: 0 30rpx;
						margin-right: 18rpx;
					}

					view {
						width: 200rpx;
						line-height: 100rpx;
						text-align: center;
						font-size: 30rpx;
						border-radius: 10rpx;
					}

					.checkButton {
						color: #333;
						background-color: #E8E8E8;
					}

					.noCheckButton {
						color: #fff;
						background-color: #0183FA;
					}
				}
			}
			.button-max-box{
				.button-top-box{
					display: flex;
					margin-left:32rpx;
					view{
						font-size:30rpx;
						line-height: 100rpx;
					}
					view:nth-child(1){
						color:#FF0000;
					}
					view:nth-child(2){
						color:#333;
					}
				}
				.button-bottom-p{
					margin-left:34rpx;
					width: 630rpx;
					height: 100rpx;
					padding:0 30rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 1rpx solid #E0E0E0;
				}
			}
			.bottom-button-p{
				margin:40rpx 34rpx;
				background-color: #0183FA;
				line-height:100rpx;
				text-align: center;
				color:#fff;
				font-size:30rpx;
				border-radius:50rpx;
			}
		}
		.shade-max-big-box{
			position: fixed;
			height:100%;
			width:100%;
			background-color: rgba(0,0,0,0.5);
			z-index:100;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.null-back-box{
				height:20%;
			}
			.shade-big-box{
				flex:1;
				display: flex;
				flex-direction: column;
				background-color: #fff;
				border-top-left-radius:20rpx;
				border-top-right-radius:20rpx;
				overflow: hidden;
				z-index:110;
				.shade-top-box{
					height:122rpx;
					border-bottom:1px solid #dedede;
					display: flex;
					.shade-top-left-box{
						display: flex;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						border: 1rpx solid #E0E0E0;
						height:80rpx;
						margin:20rpx 0 0 30rpx;
						width:580rpx;
						.icon-view-left{
							margin:20rpx 21rpx 0 18rpx;
							color:#999999;
						}
						.input-top-p{
							line-height:80rpx;
							height:80rpx;
							width:420rpx;
						}
						.icon-view-right{
							width:80rpx;
							height:80rpx;
							line-height:80rpx;
							text-align: center;
						}
					}
					.shade-top-right-button{
						width:120rpx;
						text-align: center;
						line-height:80rpx;
						margin:20rpx 0;
						color:#0183FA;
						font-size:28rpx;
					}
				}
				.shade-bottom-box{
					flex:1;
					overflow-x: hidden;
					overflow-y: scroll;
					.for-user-box:nth-child(1){
						border:none;
					}
					.for-user-box{
						border-top:1px solid #e0e0e0;
						margin:0 30rpx;
						padding:20rpx 0;
						view{
							font-size:28rpx;
							line-height:39rpx;
						}
						view:nth-child(1){
							margin-bottom:19rpx;
						}
					}
					.check-user{
						color:#0183FA;
					}
					.get-data-null-p {
						text-align: center;
						line-height: 100rpx;
						padding-bottom: 80px;
						color: #999;
					}
				}
			}
		}
	}
</style>