山东大学暑期实训（4）

        暑期实训的第二周，进行功能的实现，因为不太熟悉，前期实现较慢，完成老师端个人信息的基本信息展示和可编辑、登录密码的修改。

学习总汇

        设计了老师端个人信息的页面设计，以及基本信息页面和修改密码页面

 

 

 对于具体功能页面代码如下：

基本信息

<template>
	<view id="container">
		<view id="info-card"> 
		<u-image id="avatar" width="200rpx" height="200rpx" :src="mapSrc" shape="circle"></u-image>
			<view id="disabled-info">
				<view class="info_item">工号：{{info.teaId}}</view>
				<view class="info_item">姓名：{{info.teaName}}</view>
				<view class="info_item">性别：{{info.teaGender}}</view>
				<view class="info_item">出生日期：{{info.teaBirthday}}</view>
			</view>	
		</view>
		<view id="abled-info">
			<u-form :model="form" ref="uForm">
				<u-form-item label="电话号码" label-width="150">
					<u-input type="number"  v-model="info.teaTelNum"/>
				</u-form-item>
				<u-form-item label="邮箱地址" label-width="150">
					<u-input type="text"  v-model="info.mailAddress"/>
				</u-form-item>
				<u-form-item label="职称" label-width="150">
				    <u-input type="text"  v-model="info.position" />
				</u-form-item>
				<u-form-item label="最高学历" label-width="150">
				    <u-input type="text"  v-model="info.highestEdu" />
				</u-form-item>
				<u-form-item label="最后学历" label-width="150">
				    <u-input type="text"  v-model="info.finalEdu" />
				</u-form-item>
		
				<u-form-item label="博导时间" label-width="150" >
					<view >
					     <picker mode="date"
						  :value="date1" 
						  :start="doc_startDate" 
						  :end="doc_endDate"
						  default-time="date1"
						  @change="doc_time_confirm">
					         <view class="uni-input" >{{date1}}</view>
					     </picker>
					</view>
				</u-form-item>
				<u-form-item label="硕导时间" label-width="150" >
				    <view >
				         <picker mode="date" 
						 :value="date2" 
						 :start="master_startDate" 
						 :end="master_endDate" 
						 default-time="date2" 
						 @change="master_time_confirm">
				             <view class="uni-input">{{date2}}</view>
				         </picker>
				    </view>
				</u-form-item>
				
				<u-form-item label="研究方向" label-width="150">
				    <u-input type="text"  v-model="info.searchDirection" />
				</u-form-item>
				<u-form-item label="人事单位" label-width="150">
				    <u-input type="text"  v-model="info.workAddress" />
				</u-form-item>
				<u-form-item label="学院" label-width="150">
				    <u-input type="text"  v-model="info.teaDname" />
				</u-form-item>
				<u-form-item label="个人简介" label-width="150">
				    <u-input type="textarea"  v-model="info.personIntro" />
				</u-form-item>		
					<u-button type="primary" shape="circle" id="basic-info-button" @click="summit_handler">提交修改</u-button>
					
			</u-form>
				
		</view>
		
	</view>
	
</template>


<style>
	#container{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	#avatar{
		z-index:0;
		margin-top:30rpx;
		border-radius:50%;
	}
	#info-card{
		display: flex;
		flex-direction: row;
		z-index:-1;
		background-color: white;
		position:relative;
		margin-top:30rpx;
		margin-bottom: 20rpx;
		height:280rpx;
		width:660rpx;
		border-radius: 20px;
		padding:20px 20px;
		box-shadow: 0 0 40rpx -10rpx grey;
		padding-top: 10rpx;	        
		justify-content: center;
	}

	#disabled-info{
		margin-left: 50rpx;
	}
	#abled-info{
		margin-top:5rpx;
		margin-bottom: 50rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		height:1400rpx;
		width:660rpx;
		border-radius: 20px;
		box-shadow: 0 0 40rpx -10rpx grey;	
	}
	.info_item{
	    font-size:14px;
	    margin-top: 20rpx;
	}
</style>

修改密码

<template>
	<view>
		<view id="container">
			<u-image  id="pic"  width="400rpx" height="400rpx" src="/static/pictures/山东大学校徽.png"></u-image>
		</view>
		<view id="form-card">
			<u-form :v-model="info" ref="info-form">
				<u-form-item class="form-item" label="原密码" label-width=150rpx>
					<u-input v-model="info.passWord" />
				</u-form-item>
				
				<u-form-item class="form-item" label="新密码" label-width=150rpx>
					<u-input v-model="info.newPassWord" />
				</u-form-item>
				
				<u-form-item class="form-item" label="确认密码" label-width=150rpx>
					<u-input v-model="info.conPassWord"/>
				</u-form-item>
			</u-form>
				<u-button type="primary" shape="circle" id="change-button" @click="change">修改密码</u-button>
		</view>
	</view>	
</template>

<style>
	#container{
		z-index: 0;
		display:flex;
		justify-content: center;
	    margin:15px auto 0px auto;
	    /* width:400px; */
	    border-radius: 0px;
	    padding:10px;
	    outline-color:black;
	    /* box-shadow: 0 0 20px -5px grey; */
	}
	#form-card{
	    position:relative;
	    margin:-60px auto 0px auto;
	    width:300px;
	    border-radius: 10px;
	    padding:20px;
	    outline-color:black;
	    box-shadow: 0 0 20px -5px grey;
		
	   
	}
	#card-tip{
		display:flex;
		position:relative;
		/* padding:50px; */
		flex-direction: column;
	    position: absolute;
	    line-height:20px;
		
	    height:20px;
	    font-size: 20px;
	    left:50%;
	    transform: translate(-50%);
	    margin-top: -20px;
	}
	#pic{
		display: flex;
		position: relative;
		align-items: center;
	}
	.form-item{
		width:auto;
	}
</style>

对于前后端连接在script里写接口和方法进行了实现