暑期实训的第二周,进行功能的实现,因为不太熟悉,前期实现较慢,完成老师端个人信息的基本信息展示和可编辑、登录密码的修改。
学习总汇
设计了老师端个人信息的页面设计,以及基本信息页面和修改密码页面
对于具体功能页面代码如下:
基本信息
<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里写接口和方法进行了实现