361 lines
9.2 KiB
Vue
361 lines
9.2 KiB
Vue
<template>
|
||
<div class="personal-info">
|
||
<PageHeader
|
||
title="个人信息"
|
||
:is-back="true"
|
||
:border-bottom="false"
|
||
:background="headerBackground"
|
||
/>
|
||
|
||
<div class="content-wrapper">
|
||
<div class="form-container">
|
||
<div class="form-item">
|
||
<div class="form-label">头像</div>
|
||
<div class="form-value">
|
||
<image
|
||
class="avatar"
|
||
:src="teacherInfo.avatar || '@/static/notes/default-avatar.png'"
|
||
mode="aspectFill"
|
||
></image>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-item">
|
||
<div class="form-label">姓名</div>
|
||
<div class="form-value">
|
||
<u-input
|
||
v-model="teacherInfo.name"
|
||
:border="false"
|
||
placeholder="请输入姓名"
|
||
:clearable="false"
|
||
:custom-style="{ textAlign: 'right' }"
|
||
></u-input>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-merge">
|
||
<div class="form-item-merge">
|
||
<div class="form-label">所属学校</div>
|
||
<div class="form-value">
|
||
<u-input
|
||
v-model="teacherInfo.schoolName"
|
||
:border="false"
|
||
placeholder="请输入学校名称"
|
||
:clearable="false"
|
||
:custom-style="{ textAlign: 'right' }"
|
||
:disabled="true"
|
||
></u-input>
|
||
</div>
|
||
</div>
|
||
<div class="line" style="height: 1px"></div>
|
||
<div class="form-item-merge">
|
||
<div class="form-label">学院</div>
|
||
<div class="form-value" @click="showCollegePicker = true">
|
||
{{ teacherInfo.collegeName || "请选择学院" }}
|
||
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
||
</div>
|
||
</div>
|
||
<div class="line" style="height: 1px"></div>
|
||
<div class="form-item-merge">
|
||
<div class="form-label">专业</div>
|
||
<div class="form-value" @click="showMajorPicker = true">
|
||
{{ teacherInfo.professionalName || "请选择专业" }}
|
||
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
||
</div>
|
||
</div>
|
||
<div class="line" style="height: 1px"></div>
|
||
<div class="form-item-merge">
|
||
<div class="form-label">岗位</div>
|
||
<div class="form-value">
|
||
<u-input
|
||
v-model="teacherInfo.post"
|
||
:border="false"
|
||
placeholder="请输入岗位"
|
||
:clearable="false"
|
||
:custom-style="{ textAlign: 'right' }"
|
||
></u-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="save-btn" @click="saveInfo">保存</div>
|
||
<!-- 学院选择器 -->
|
||
<u-select
|
||
v-model="showCollegePicker"
|
||
:list="collegeList"
|
||
@confirm="confirmCollege"
|
||
></u-select>
|
||
|
||
<!-- 专业选择器 -->
|
||
<u-select
|
||
v-model="showMajorPicker"
|
||
:list="majorList"
|
||
@confirm="confirmMajor"
|
||
></u-select>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import PageHeader from "@/components/PageHeader.vue";
|
||
|
||
export default {
|
||
name: "PersonalInfo",
|
||
components: {
|
||
PageHeader,
|
||
},
|
||
data() {
|
||
return {
|
||
teacherInfo: {
|
||
name: "",
|
||
id: "",
|
||
collegeName: "",
|
||
professionalName: "",
|
||
post: "",
|
||
collegeManagementId: "",
|
||
professionalManagementId: "",
|
||
schoolName: ""
|
||
},
|
||
headerBackground: {
|
||
background: "transparent",
|
||
},
|
||
showCollegePicker: false,
|
||
showMajorPicker: false,
|
||
collegeList: [],
|
||
majorList: [],
|
||
};
|
||
},
|
||
onLoad() {
|
||
// 从vuex获取教师信息
|
||
const info = this.vuex_teacherInfo || {};
|
||
this.teacherInfo = {
|
||
...info,
|
||
schoolName: "江西新能源科技职业技术学院",
|
||
};
|
||
|
||
this.getSchoolInfo();
|
||
},
|
||
methods: {
|
||
// 获取学院和专业信息
|
||
getSchoolInfo() {
|
||
this.$u.api.getData().then((res) => {
|
||
if (res.succeed && res.data) {
|
||
this.handleSchoolInfo(res);
|
||
}
|
||
});
|
||
},
|
||
// 处理获取的接口数据
|
||
handleSchoolInfo(res) {
|
||
// 处理学院信息
|
||
if (res.data && res.data.length > 0) {
|
||
// 设置学院列表
|
||
this.collegeList = res.data.map((item) => ({
|
||
value: item.value,
|
||
label: item.label,
|
||
}));
|
||
|
||
// 设置初始专业列表为第一个学院的专业
|
||
if (res.data[0].children && res.data[0].children.length > 0) {
|
||
this.majorList = res.data[0].children;
|
||
}
|
||
|
||
// 如果已有选择的学院，则设置对应的专业列表
|
||
if (this.teacherInfo.collegeName) {
|
||
const selectedCollege = res.data.find(
|
||
(item) => item.label === this.teacherInfo.collegeName
|
||
);
|
||
if (selectedCollege && selectedCollege.children) {
|
||
this.majorList = selectedCollege.children;
|
||
|
||
// 如果没有collegeManagementId，则设置它
|
||
if (!this.teacherInfo.collegeManagementId) {
|
||
this.teacherInfo.collegeManagementId = selectedCollege.value;
|
||
}
|
||
|
||
// 如果有专业名称但没有专业ID，则设置专业ID
|
||
if (this.teacherInfo.professionalName && !this.teacherInfo.professionalManagementId) {
|
||
const selectedMajor = selectedCollege.children.find(
|
||
(item) => item.label === this.teacherInfo.professionalName
|
||
);
|
||
if (selectedMajor) {
|
||
this.teacherInfo.professionalManagementId = selectedMajor.value;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
// 确认学院选择
|
||
confirmCollege(e) {
|
||
this.teacherInfo.collegeName = e[0].label;
|
||
this.teacherInfo.collegeManagementId = e[0].value;
|
||
|
||
// 根据选中的学院更新专业列表
|
||
this.$u.api.getData().then((res) => {
|
||
if (res.succeed && res.data) {
|
||
const selectedCollege = res.data.find(
|
||
(item) => item.label === this.teacherInfo.collegeName
|
||
);
|
||
|
||
if (selectedCollege && selectedCollege.children) {
|
||
this.majorList = selectedCollege.children;
|
||
// 清空之前选择的专业
|
||
this.teacherInfo.professionalName = "";
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 确认专业选择
|
||
confirmMajor(e) {
|
||
this.teacherInfo.professionalName = e[0].label;
|
||
this.teacherInfo.professionalManagementId = e[0].value;
|
||
},
|
||
|
||
// 保存个人信息
|
||
saveInfo() {
|
||
// 表单验证
|
||
if (!this.teacherInfo.name) {
|
||
return this.$u.toast("请输入姓名");
|
||
}
|
||
if (!this.teacherInfo.schoolName) {
|
||
return this.$u.toast("请输入学校名称");
|
||
}
|
||
if (!this.teacherInfo.collegeName) {
|
||
return this.$u.toast("请选择学院");
|
||
}
|
||
if (!this.teacherInfo.professionalName) {
|
||
return this.$u.toast("请选择专业");
|
||
}
|
||
if (!this.teacherInfo.post) {
|
||
return this.$u.toast("请输入岗位");
|
||
}
|
||
|
||
this.$u.vuex("vuex_teacherInfo", this.teacherInfo);
|
||
console.log("this.teacherInfo----", this.teacherInfo);
|
||
let query = {
|
||
...this.teacherInfo,
|
||
schoolName: "江西新能源科技职业技术学院",
|
||
};
|
||
|
||
this.$u.api
|
||
.updateTeacherInfo(query)
|
||
.then((res) => {
|
||
this.$u.toast("保存成功");
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
})
|
||
.catch((err) => {
|
||
this.$u.toast("保存失败，请重试");
|
||
});
|
||
|
||
// 模拟保存成功
|
||
this.$u.toast("保存成功");
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.personal-info {
|
||
height: 100vh;
|
||
background-image: url("@/static/notes/bg.png");
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
.content-wrapper {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 20rpx 30rpx 60px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.form-container {
|
||
border-radius: 8px;
|
||
margin-top: 46rpx;
|
||
}
|
||
|
||
.form-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.form-merge {
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-radius: 20rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.form-item-merge {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.line {
|
||
width: 90%;
|
||
height: 1px;
|
||
background-color: #f0f0f0;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
flex-shrink: 0;
|
||
width: 160rpx;
|
||
}
|
||
|
||
.form-value {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 27rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
flex: 1;
|
||
justify-content: flex-end;
|
||
text-align: right;
|
||
}
|
||
|
||
.avatar {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.save-btn {
|
||
width: 90%;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
background: #4f6aff;
|
||
border-radius: 16rpx;
|
||
margin: 60rpx auto;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
display: fixed;
|
||
bottom: 0;
|
||
}
|
||
</style>
|