FE-lab-xcx/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.data1}}</view>
			</view>
			<view class="text-max-box">
				<view class="text-top-box">
					<view>*</view>
					<view>学号</view>
				</view>
				<view class="text-bottom-p">{{newData.data2}}</view>
			</view>
			<view class="text-max-box">
				<view class="text-top-box">
					<view>*</view>
					<view>所在学院</view>
				</view>
				<view class="text-bottom-p">{{newData.data3}}</view>
			</view>
			<view class="text-max-box">
				<view class="text-top-box">
					<view>*</view>
					<view>专业</view>
				</view>
				<view class="text-bottom-p">{{newData.data4}}</view>
			</view>
			<view class="input-max-box">
				<view class="input-top-box">
					<view>*</view>
					<view>手机号</view>
				</view>
				<input class="input-top-p" v-model="form.phone" maxlength="11" focus placeholder="请输入手机号码">
			</view>
			<view class="button-max-box">
				<view class="button-top-box">
					<view>*</view>
					<view>导师</view>
				</view>
				<input class="button-bottom-p" :disabled="true" v-model="form.supervisorName" 
				maxlength="30" focus placeholder="请选择导师" @click="userButton()">
			</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"  @confirm="searchButton()"
						v-model="getData.searchValue" maxlength="10" focus placeholder="请输入导师">
						<uni-icons v-if="getData.searchValue" @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,index)"
					class="for-user-box" :class="checkUserIndex==index?'check-user':''"
					v-for="(item,index) in dataList" :key="index">
						<view>{{item.name}}{{item.num?'('+item.num+')':''}}</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 {
		systemSubjectGetAppSubject,
	} from '@/pages_manage/api/index.js'
	export default {
		data() {
			return {
				newData:{
					data1:"刘晓明",
					data2:"2024060236",
					data3:"园艺学院",
					data4:"茶艺",
				},
				form:{
					phone:"",
					supervisorName:"",
					supervisorId:"",
				},
				userShowType:false,
				checkUserIndex:null,
				//查询
				getData: {
					page: 1,
					pageSize: 20,
					searchValue: '',
				},
				getDataType: false,
				total: 0,
				//教师查询列表
				dataList:[
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
					{name:"一二三四五",num:"01234567890123456789",deptName:"学院名称五六七八九十",},
				],
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			// this.systemSubjectGetAppSubject();
		},
		methods: {
			//提交
			submitButton(){
				const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
				if(!this.form.phone){
					uni.showToast({
						title: '请输入手机号码',
						icon: "none",
						duration: 3000
					});
					return
				}else if (!reg.test(this.form.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: "none",
						duration: 3000
					});
					return
				}
				if(!this.form.supervisorName){
					uni.showToast({
						title: '请选择导师',
						icon: "none",
						duration: 3000
					});
					return
				}
				uni.showModal({
					title: '确认提交?',
					cancelColor: '#999999',
					confirmColor: '#0183FA',
					content: '',
					success(res) {
						if (res.confirm) {
							console.log('确定')
						} else if (res.cancel) {
							console.log('取消')
						}
					}
				})
			},
			//搜索按钮
			clearButton(){
				this.$set(this, 'getDataType', false);
				this.$set(this, 'dataList', []);
				this.$set(this, 'total', 0);
				this.$set(this.getData, 'searchValue','');
				this.$set(this.getData, 'page', 1);
				this.systemSubjectGetAppSubject();
			},
			//搜索按钮
			searchButton(){
				this.$set(this, 'getDataType', false);
				this.$set(this, 'dataList', []);
				this.$set(this, 'total', 0);
				this.$set(this.getData, 'page', 1);
				this.systemSubjectGetAppSubject();
			},
			//教师弹窗开关啊
			userButton(type){
				this.$set(this,'userShowType',!this.userShowType);
			},
			//选中教师
			checkUser(item,index){
				this.$set(this.form,'supervisorName',item.name);
				this.$set(this.form,'supervisorId',item.num);
				this.$set(this,'checkUserIndex',index);
				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.systemSubjectGetAppSubject();
					})
				}
			},
			//获取实验室
			async systemSubjectGetAppSubject() {
				let self = this;
				const {
					data
				} = await systemSubjectGetAppSubject(this.getData);
				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;
				}
			}
			.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:1;
			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:10;
				.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>