1206 lines
37 KiB
Vue
Raw Normal View History

2025-11-05 20:29:14 +08:00
<template>
<view class="teacher-profile-page">
<!-- 加载状态 -->
<view v-if="loading" class="loading-mask">
<view class="loading-content">
<view class="loading-spinner"></view>
<text class="loading-text">数据加载中...</text>
</view>
</view>
<scroll-view v-else scroll-y class="profile-scroll">
<!-- 顶部基本信息卡片 -->
<view class="header-card">
<view class="avatar-wrapper">
<image
class="avatar"
:src="teacher.headPic || '/static/default-avatar.png'"
mode="aspectFill"
/>
</view>
<view class="header-info">
<text class="teacher-name">{{ teacher.jsxm || '-' }}</text>
<text class="teacher-code">档案号{{ teacher.jsdah || '-' }}</text>
<view class="basic-tags">
<text class="tag tag-primary" v-if="teacher.jsType">{{ teacher.jsType }}</text>
<text class="tag tag-info" v-if="teacher.age">{{ teacher.age }}</text>
<text class="tag tag-success" v-if="teacher.jsxbId">{{ parseGender(teacher.jsxbId) }}</text>
</view>
</view>
</view>
<!-- 个人基础信息大模块 -->
<view class="section-container">
<view class="section-header">
<view class="section-marker"></view>
<text class="section-title">个人基础信息</text>
</view>
<!-- 基础信息子模块 -->
<view class="sub-section">
<view class="sub-section-header">基础信息</view>
<view class="info-grid">
<view class="info-item">
<text class="info-label">档案号</text>
<text class="info-value">{{ teacher.jsdah || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">姓名</text>
<text class="info-value">{{ teacher.jsxm || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">类型</text>
<text class="info-value">{{ teacher.jsType || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">性别</text>
<text class="info-value">{{ parseGender(teacher.jsxbId) }}</text>
</view>
<view class="info-item">
<text class="info-label">籍贯</text>
<text class="info-value">{{ teacher.jsjgId || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">民族</text>
<text class="info-value">{{ teacher.mzId || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">身份证号</text>
<text class="info-value">{{ teacher.sfzh || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">出生日期</text>
<text class="info-value">{{ formatDate(teacher.cstime) }}</text>
</view>
<view class="info-item">
<text class="info-label">年龄</text>
<text class="info-value">{{ teacher.age ? teacher.age + '岁' : '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">政治面貌</text>
<text class="info-value">{{ teacher.zzmmId || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">入党时间</text>
<text class="info-value">{{ formatMonth(teacher.rdtime) }}</text>
</view>
<view class="info-item">
<text class="info-label">联系电话</text>
<text class="info-value">{{ teacher.lxdh || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">电子邮箱</text>
<text class="info-value">{{ teacher.dzyx || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">参加工作时间</text>
<text class="info-value">{{ formatMonth(teacher.cgtime) }}</text>
</view>
<view class="info-item">
<text class="info-label">工龄</text>
<text class="info-value">{{ teacher.jsgl ? teacher.jsgl + '年' : '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">教龄计算时间</text>
<text class="info-value">{{ formatMonth(teacher.jltime) }}</text>
</view>
<view class="info-item">
<text class="info-label">教龄</text>
<text class="info-value">{{ teacher.jl ? teacher.jl + '年' : '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">进入本单位时间</text>
<text class="info-value">{{ formatMonth(teacher.jrdwtime) }}</text>
</view>
<view class="info-item">
<text class="info-label">进入本单位年限</text>
<text class="info-value">{{ teacher.jrdwnx ? teacher.jrdwnx + '年' : '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">进入来源</text>
<text class="info-value">{{ teacher.jrly || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">编制情况</text>
<text class="info-value">{{ teacher.bzqkId || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">在岗情况</text>
<text class="info-value">{{ teacher.zdqkId || '-' }}</text>
</view>
<view class="info-item" v-if="teacher.dcyy">
<text class="info-label">调出原因</text>
<text class="info-value">{{ teacher.dcyy }}</text>
</view>
<view class="info-item">
<text class="info-label">社保卡号</text>
<text class="info-value">{{ teacher.sbkh || '-' }}</text>
</view>
</view>
</view>
<!-- 学历情况子模块 -->
<view class="sub-section">
<view class="sub-section-header">学历情况</view>
<view class="info-grid">
<view class="info-item">
<text class="info-label">初始学历</text>
<text class="info-value">{{ teacher.dyxlId || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">全日制学历毕业院校</text>
<text class="info-value">{{ teacher.dybyyx || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">全日制学历专业</text>
<text class="info-value">{{ teacher.dybyzy || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">全日制学历毕业年月</text>
<text class="info-value">{{ formatMonth(teacher.dybynytime) }}</text>
</view>
<view class="info-item">
<text class="info-label">最后学历</text>
<text class="info-value">{{ teacher.zhxlId || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">最后学历毕业院校</text>
<text class="info-value">{{ teacher.zhbyyx || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">最后学历专业</text>
<text class="info-value">{{ teacher.zhbyzy || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">最后毕业年月</text>
<text class="info-value">{{ formatMonth(teacher.zhbynytime) }}</text>
</view>
<view class="info-item">
<text class="info-label">学位</text>
<text class="info-value">{{ teacher.xw || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">学位专业</text>
<text class="info-value">{{ teacher.xwzy || '-' }}</text>
</view>
</view>
</view>
<!-- 教师资格子模块 -->
<view class="sub-section">
<view class="sub-section-header">教师资格</view>
<view class="info-grid">
<view class="info-item">
<text class="info-label">教师资格学段</text>
<text class="info-value">{{ teacher.zgxdId || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">教师资格学科</text>
<text class="info-value">{{ teacher.zgxkId || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">教师资格证书号</text>
<text class="info-value">{{ teacher.zgzs || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">教师资格证取得年月</text>
<text class="info-value">{{ formatMonth(teacher.zgnytime) }}</text>
</view>
<view class="info-item">
<text class="info-label">当前教师资格注册时间</text>
<text class="info-value">{{ formatDate(teacher.zgzctime) }}</text>
</view>
<view class="info-item">
<text class="info-label">下次教师资格注册时间</text>
<text class="info-value">{{ formatDate(teacher.xczgzctime) }}</text>
</view>
</view>
</view>
<!-- 任职情况子模块 -->
<view class="sub-section">
<view class="sub-section-header">任职情况</view>
<view class="info-grid">
<view class="info-item">
<text class="info-label">党政职务</text>
<text class="info-value">{{ dzzwNames }}</text>
</view>
<view class="info-item">
<text class="info-label">其他职务</text>
<text class="info-value">{{ qtzwNames }}</text>
</view>
<view class="info-item">
<text class="info-label">所属年级</text>
<text class="info-value">{{ teacher.njmc || '-' }}</text>
</view>
</view>
</view>
</view>
<!-- 职称信息 -->
<view class="section-container">
<view class="section-header">
<view class="section-marker"></view>
<text class="section-title">职称信息</text>
</view>
<view class="list-wrapper">
<view v-if="!zcxxList.length" class="empty-tip">暂无职称信息</view>
<view v-else class="list-container">
<view class="list-item" v-for="(item, index) in zcxxList" :key="item.id">
<view class="list-item-header">
<view class="item-badge">{{ index + 1 }}</view>
<text class="item-title">{{ item.zcdjId || '-' }}</text>
</view>
<view class="list-item-body">
<view class="item-row">
<text class="item-label">职称类别</text>
<text class="item-value">{{ item.zclbId || '-' }}</text>
</view>
<view class="item-row">
<text class="item-label">职称专业</text>
<text class="item-value">{{ item.zczyId || '-' }}</text>
</view>
<view class="item-row">
<text class="item-label">审批机关</text>
<text class="item-value">{{ item.zcspjg || '-' }}</text>
</view>
<view class="item-row">
<text class="item-label">批准文号</text>
<text class="item-value">{{ item.zcbzwh || '-' }}</text>
</view>
<view class="item-row">
<text class="item-label">批准年月</text>
<text class="item-value">{{ formatMonth(item.zcpztime) }}</text>
</view>
<view class="item-row">
<text class="item-label">证书编号</text>
<text class="item-value">{{ item.zczsbh || '-' }}</text>
</view>
<view class="item-row" v-if="item.pydj">
<text class="item-label">聘用等级</text>
<text class="item-value">{{ item.pydj }}</text>
</view>
<view class="item-row" v-if="item.qqtime">
<text class="item-label">起聘时间</text>
<text class="item-value">{{ formatMonth(item.qqtime) }}</text>
</view>
<view class="item-row" v-if="item.pywjh">
<text class="item-label">聘用文件号</text>
<text class="item-value">{{ item.pywjh }}</text>
</view>
<view class="item-row item-row-column" v-if="item.zczs">
<text class="item-label">职称证书</text>
<view class="certificate-images">
<image
v-for="(imgPath, imgIndex) in parseImagePaths(item.zczs)"
:key="imgIndex"
:src="getImageUrl(imgPath)"
class="certificate-image"
mode="aspectFill"
@click="previewCertificate(item.zczs, imgIndex)"
/>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 任岗情况 -->
<view class="section-container">
<view class="section-header">
<view class="section-marker"></view>
<text class="section-title">任岗情况</text>
</view>
<view class="list-wrapper">
<view v-if="!gwqkList.length" class="empty-tip">暂无岗位信息</view>
<view v-else class="list-container">
<view class="list-item" v-for="(item, index) in gwqkList" :key="item.id">
<view class="list-item-header">
<view class="item-badge">{{ index + 1 }}</view>
<text class="item-title">{{ item.gwjbId || '-' }}</text>
</view>
<view class="list-item-body">
<view class="item-row">
<text class="item-label">岗位类别</text>
<text class="item-value">{{ item.gwlbId || '-' }}</text>
</view>
<view class="item-row">
<text class="item-label">开始时间</text>
<text class="item-value">{{ formatMonth(item.gwrzkstime) }}</text>
</view>
<view class="item-row">
<text class="item-label">结束时间</text>
<text class="item-value">{{ formatMonth(item.gwrzjstime) }}</text>
</view>
<view class="item-row">
<text class="item-label">任职年限</text>
<text class="item-value">{{ item.gwrznx ? item.gwrznx + '年' : '-' }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 学习及工作经历 -->
<view class="section-container">
<view class="section-header">
<view class="section-marker"></view>
<text class="section-title">学习及工作经历</text>
</view>
<view class="list-wrapper">
<view v-if="!gzjlList.length" class="empty-tip">暂无工作经历信息</view>
<view v-else class="list-container">
<view class="list-item" v-for="(item, index) in gzjlList" :key="item.id">
<view class="list-item-header">
<view class="item-badge">{{ index + 1 }}</view>
<text class="item-title">{{ item.gzdw || '-' }}</text>
</view>
<view class="list-item-body">
<view class="item-row">
<text class="item-label">开始时间</text>
<text class="item-value">{{ formatMonth(item.gzkstime) }}</text>
</view>
<view class="item-row">
<text class="item-label">结束时间</text>
<text class="item-value">{{ formatMonth(item.gzjstime) }}</text>
</view>
<view class="item-row">
<text class="item-label">职务</text>
<text class="item-value">{{ item.zw || '-' }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 家庭成员 -->
<view class="section-container">
<view class="section-header">
<view class="section-marker"></view>
<text class="section-title">家庭成员</text>
</view>
<view class="list-wrapper">
<view v-if="!jtcyList.length" class="empty-tip">暂无家庭成员信息</view>
<view v-else class="list-container">
<view class="list-item" v-for="(item, index) in jtcyList" :key="item.id">
<view class="list-item-header">
<view class="item-badge">{{ index + 1 }}</view>
<text class="item-title">{{ item.xm || '-' }}</text>
</view>
<view class="list-item-body">
<view class="item-row">
<text class="item-label">与本人关系</text>
<text class="item-value">{{ item.jtcygxId || '-' }}</text>
</view>
<view class="item-row">
<text class="item-label">出生日期</text>
<text class="item-value">{{ formatDate(item.cstime) }}</text>
</view>
<view class="item-row">
<text class="item-label">工作单位</text>
<text class="item-value">{{ item.gzdw || '-' }}</text>
</view>
<view class="item-row">
<text class="item-label">职务</text>
<text class="item-value">{{ item.zw || '-' }}</text>
</view>
<view class="item-row">
<text class="item-label">联系电话</text>
<text class="item-value">{{ item.lxdh || '-' }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 备案资料 -->
<view class="section-container">
<view class="section-header">
<view class="section-marker"></view>
<text class="section-title">备案资料</text>
</view>
<view class="document-wrapper">
<view class="document-grid">
<view class="document-item" v-if="teacher.sfzrxy" @click="previewDocument(teacher.sfzrxy)">
<image :src="getImageUrl(teacher.sfzrxy)" class="document-image" mode="aspectFill" />
<text class="document-label">身份证人像页</text>
</view>
<view class="document-item" v-if="teacher.sfzghy" @click="previewDocument(teacher.sfzghy)">
<image :src="getImageUrl(teacher.sfzghy)" class="document-image" mode="aspectFill" />
<text class="document-label">身份证国徽页</text>
</view>
<view class="document-item" v-if="teacher.dyxlbyz" @click="previewDocument(teacher.dyxlbyz)">
<image :src="getImageUrl(teacher.dyxlbyz)" class="document-image" mode="aspectFill" />
<text class="document-label">第一学历毕业证</text>
</view>
<view class="document-item" v-if="teacher.dyxlxwz" @click="previewDocument(teacher.dyxlxwz)">
<image :src="getImageUrl(teacher.dyxlxwz)" class="document-image" mode="aspectFill" />
<text class="document-label">第一学历学位证</text>
</view>
<view class="document-item" v-if="teacher.zgxlbyz" @click="previewDocument(teacher.zgxlbyz)">
<image :src="getImageUrl(teacher.zgxlbyz)" class="document-image" mode="aspectFill" />
<text class="document-label">最高学历毕业证</text>
</view>
<view class="document-item" v-if="teacher.zgxlxwz" @click="previewDocument(teacher.zgxlxwz)">
<image :src="getImageUrl(teacher.zgxlxwz)" class="document-image" mode="aspectFill" />
<text class="document-label">最高学历学位证</text>
</view>
<view class="document-item" v-if="teacher.pthzm" @click="previewDocument(teacher.pthzm)">
<image :src="getImageUrl(teacher.pthzm)" class="document-image" mode="aspectFill" />
<text class="document-label">普通话证明</text>
</view>
<view class="document-item" v-if="teacher.jszgz" @click="previewDocument(teacher.jszgz)">
<image :src="getImageUrl(teacher.jszgz)" class="document-image" mode="aspectFill" />
<text class="document-label">教师资格证</text>
</view>
</view>
<view v-if="!hasAnyDocument" class="empty-tip">暂无备案资料</view>
</view>
</view>
<!-- 备注信息 -->
<view class="section-container" v-if="teacher.remark">
<view class="section-header">
<view class="section-marker"></view>
<text class="section-title">备注信息</text>
</view>
<view class="remark-content">
<text class="remark-text">{{ teacher.remark }}</text>
</view>
</view>
</scroll-view>
<!-- 固定在底部的返回按钮 -->
<view class="fixed-bottom">
<button class="back-btn" @click="handleBack">
返回
</button>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { get } from "@/utils/request";
import dayjs from "dayjs";
import { BASE_IMAGE_URL } from "@/config";
import { getZwListByLx } from "@/api/base/zwApi";
interface Teacher {
id?: string;
jsxm?: string;
jsdah?: string;
jsType?: string;
jsxbId?: string;
jsjgId?: string;
mzId?: string;
sfzh?: string;
cstime?: string;
age?: number;
zzmmId?: string;
rdtime?: string;
lxdh?: string;
dzyx?: string;
cgtime?: string;
jsgl?: number;
jltime?: string;
jl?: number;
jrdwtime?: string;
jrdwnx?: number;
jrly?: string;
bzqkId?: string;
zdqkId?: string;
dcyy?: string;
sbkh?: string;
dyxlId?: string;
dybyyx?: string;
dybyzy?: string;
dybynytime?: string;
zhxlId?: string;
zhbyyx?: string;
zhbyzy?: string;
zhbynytime?: string;
xw?: string;
xwzy?: string;
zgxdId?: string;
zgxkId?: string;
zgzs?: string;
zgnytime?: string;
zgzctime?: string;
xczgzctime?: string;
dzzw?: string;
qtzw?: string;
njmc?: string;
remark?: string;
headPic?: string;
// 备案资料
sfzrxy?: string; // 身份证人像页
sfzghy?: string; // 身份证国徽页
dyxlbyz?: string; // 第一学历毕业证
dyxlxwz?: string; // 第一学历学位证
zgxlbyz?: string; // 最高学历毕业证
zgxlxwz?: string; // 最高学历学位证
pthzm?: string; // 普通话证明
jszgz?: string; // 教师资格证
}
const teacherId = ref("");
const teacher = ref<Teacher>({});
const loading = ref(false);
// 各模块数据
const zcxxList = ref<any[]>([]); // 职称信息
const gwqkList = ref<any[]>([]); // 岗位情况(任岗情况)
const gzjlList = ref<any[]>([]); // 工作经历
const jtcyList = ref<any[]>([]); // 家庭成员
// 职务数据
const dzZwList = ref<any[]>([]); // 党政职务列表
const qtZwList = ref<any[]>([]); // 其他职务列表
// 计算是否有任何备案资料
const hasAnyDocument = computed(() => {
return !!(
teacher.value.sfzrxy ||
teacher.value.sfzghy ||
teacher.value.dyxlbyz ||
teacher.value.dyxlxwz ||
teacher.value.zgxlbyz ||
teacher.value.zgxlxwz ||
teacher.value.pthzm ||
teacher.value.jszgz
);
});
// 性别解析
const parseGender = (jsxbId?: string) => {
if (!jsxbId) return '-';
if (jsxbId === '1' || jsxbId === '男') return '男';
if (jsxbId === '2' || jsxbId === '女') return '女';
return jsxbId;
};
// 职务ID转名称支持单个或多个逗号分隔
const parseZwNames = (zwIds?: string, zwList: any[] = []) => {
if (!zwIds || !zwIds.trim()) return '-';
// 分割多个职务ID
const idArray = zwIds.split(',').map(id => id.trim()).filter(id => id);
// 将ID转换为名称
const names = idArray.map(id => {
const zw = zwList.find(item => item.id === id || item.id === parseInt(id));
return zw ? zw.zwmc : id;
}).filter(name => name);
return names.length > 0 ? names.join('、') : '-';
};
// 党政职务名称
const dzzwNames = computed(() => parseZwNames(teacher.value.dzzw, dzZwList.value));
// 其他职务名称
const qtzwNames = computed(() => parseZwNames(teacher.value.qtzw, qtZwList.value));
// 日期格式化YYYY-MM-DD
const formatDate = (dateStr?: string) => {
if (!dateStr) return '-';
try {
return dayjs(dateStr).format('YYYY-MM-DD');
} catch (error) {
return '-';
}
};
// 月份格式化YYYY-MM
const formatMonth = (dateStr?: string) => {
if (!dateStr) return '-';
try {
return dayjs(dateStr).format('YYYY-MM');
} catch (error) {
return '-';
}
};
// 解析图片路径(支持单张或多张,逗号分隔)
const parseImagePaths = (pathStr?: string): string[] => {
if (!pathStr) return [];
return pathStr.split(',').map(path => path.trim()).filter(path => path);
};
// 获取完整图片URL
const getImageUrl = (path: string): string => {
if (!path) return '';
// 如果是完整URL直接返回
if (path.startsWith('http://') || path.startsWith('https://')) {
return path;
}
// 否则拼接服务器地址(使用项目配置的图片服务器地址)
return `${BASE_IMAGE_URL}${path.startsWith('/') ? path : '/' + path}`;
};
// 预览证书图片(多张)
const previewCertificate = (pathStr: string, currentIndex: number) => {
const paths = parseImagePaths(pathStr);
const urls = paths.map(path => getImageUrl(path));
if (urls.length === 0) return;
uni.previewImage({
current: currentIndex,
urls: urls,
});
};
// 预览文档(单张)
const previewDocument = (path: string) => {
if (!path) return;
const url = getImageUrl(path);
uni.previewImage({
current: 0,
urls: [url],
});
};
// 加载教师完整档案信息
const loadTeacherInfo = async () => {
if (!teacherId.value) {
uni.showToast({
title: '教师ID不能为空',
icon: 'none',
});
return;
}
loading.value = true;
try {
// 并行加载所有数据
const [basicInfoRes, zcxxRes, gwqkRes, gzjlRes, jtcyRes, dzZwRes, qtZwRes] = await Promise.all([
// 基础信息
get('/api/js/findJsById', { id: teacherId.value }),
// 职称信息
2025-11-23 19:34:40 +08:00
get('/api/zcxx/findPage', { jsId: teacherId.value, page: 1, rows: 100 }),
2025-11-05 20:29:14 +08:00
// 岗位情况
2025-11-23 19:34:40 +08:00
get('/api/gwqk/findPage', { jsId: teacherId.value, page: 1, rows: 100 }),
2025-11-05 20:29:14 +08:00
// 工作经历
2025-11-23 19:34:40 +08:00
get('/api/gzjl/findPage', { jsId: teacherId.value, page: 1, rows: 100 }),
2025-11-05 20:29:14 +08:00
// 家庭成员
2025-11-23 19:34:40 +08:00
get('/api/jtcy/findPage', { jsId: teacherId.value, page: 1, rows: 100 }),
2025-11-05 20:29:14 +08:00
// 党政职务列表
getZwListByLx('党政职务'),
// 其他职务列表
getZwListByLx('其他职务'),
]);
// 处理基础信息
if (basicInfoRes) {
// 如果有 resultCode 字段,使用 result
// 如果有 rows 数组,取第一个元素
// 否则直接使用响应数据
if (basicInfoRes.result) {
teacher.value = basicInfoRes.result as Teacher;
} else if (basicInfoRes.rows && Array.isArray(basicInfoRes.rows) && basicInfoRes.rows.length > 0) {
teacher.value = basicInfoRes.rows[0] as Teacher;
} else {
teacher.value = basicInfoRes as Teacher;
}
console.log('教师基础信息:', teacher.value);
}
// 处理职称信息
if (zcxxRes && zcxxRes.rows && Array.isArray(zcxxRes.rows)) {
zcxxList.value = zcxxRes.rows;
console.log('职称信息:', zcxxList.value);
}
// 处理岗位情况
if (gwqkRes && gwqkRes.rows && Array.isArray(gwqkRes.rows)) {
gwqkList.value = gwqkRes.rows;
console.log('岗位情况:', gwqkList.value);
}
// 处理工作经历
if (gzjlRes && gzjlRes.rows && Array.isArray(gzjlRes.rows)) {
gzjlList.value = gzjlRes.rows;
console.log('工作经历:', gzjlList.value);
}
// 处理家庭成员
if (jtcyRes && jtcyRes.rows && Array.isArray(jtcyRes.rows)) {
jtcyList.value = jtcyRes.rows;
console.log('家庭成员:', jtcyList.value);
}
// 处理党政职务列表
if (dzZwRes) {
if (dzZwRes.result && Array.isArray(dzZwRes.result)) {
dzZwList.value = dzZwRes.result;
} else if (Array.isArray(dzZwRes)) {
dzZwList.value = dzZwRes;
}
console.log('党政职务列表:', dzZwList.value);
}
// 处理其他职务列表
if (qtZwRes) {
if (qtZwRes.result && Array.isArray(qtZwRes.result)) {
qtZwList.value = qtZwRes.result;
} else if (Array.isArray(qtZwRes)) {
qtZwList.value = qtZwRes;
}
console.log('其他职务列表:', qtZwList.value);
}
} catch (error) {
console.error('加载教师档案失败:', error);
uni.showToast({
title: '网络异常,请稍后重试',
icon: 'none',
});
} finally {
loading.value = false;
}
};
// 返回上一页
const handleBack = () => {
uni.navigateBack();
};
onLoad((options: any) => {
if (options.id) {
teacherId.value = options.id;
console.log('接收到的教师ID:', teacherId.value);
}
});
onMounted(() => {
loadTeacherInfo();
});
</script>
<style scoped lang="scss">
.teacher-profile-page {
min-height: 100vh;
background: #f4f6fb;
display: flex;
flex-direction: column;
}
.profile-scroll {
flex: 1;
padding: 24rpx 0 160rpx 0; // 只有上下padding为底部固定按钮留出空间
background-color: #f4f6fb;
}
// 加载遮罩
.loading-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.loading-content {
background: #ffffff;
border-radius: 16rpx;
padding: 48rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}
.loading-spinner {
width: 60rpx;
height: 60rpx;
border: 4rpx solid #e5e7eb;
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-text {
font-size: 28rpx;
color: #6b7280;
font-weight: 500;
}
// 顶部卡片
.header-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 24rpx;
padding: 48rpx 32rpx;
margin: 0 30rpx 24rpx 30rpx; // 左右30rpx留白
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
}
.avatar-wrapper {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
overflow: hidden;
border: 6rpx solid rgba(255, 255, 255, 0.3);
margin-bottom: 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
}
.avatar {
width: 100%;
height: 100%;
background: #e0e7ff;
}
.header-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
width: 100%;
}
.teacher-name {
font-size: 40rpx;
font-weight: 700;
color: #ffffff;
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}
.teacher-code {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.9);
}
.basic-tags {
display: flex;
gap: 16rpx;
margin-top: 8rpx;
flex-wrap: wrap;
justify-content: center;
}
.tag {
padding: 8rpx 20rpx;
border-radius: 24rpx;
font-size: 24rpx;
font-weight: 500;
backdrop-filter: blur(10rpx);
background: rgba(255, 255, 255, 0.25);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
}
// 大模块容器
.section-container {
background: #ffffff;
border-radius: 16rpx;
margin: 0 30rpx 24rpx 30rpx; // 左右30rpx留白
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}
.section-header {
background: #fafbfc;
padding: 24rpx;
display: flex;
align-items: center;
border-bottom: 2rpx solid #e5e7eb;
}
.section-marker {
width: 8rpx;
height: 32rpx;
background: #3b82f6;
border-radius: 4rpx;
margin-right: 16rpx;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #1f2933;
}
// 子模块
.sub-section {
padding: 24rpx;
border-bottom: 1px solid #f3f4f6;
&:last-child {
border-bottom: none;
}
}
.sub-section-header {
font-size: 28rpx;
font-weight: 600;
color: #3b82f6;
margin-bottom: 20rpx;
padding-bottom: 12rpx;
border-bottom: 2rpx solid #e0f2fe;
}
// 信息网格布局每行4列
.info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20rpx;
}
.info-item {
display: flex;
flex-direction: column;
gap: 8rpx;
}
.info-label {
font-size: 24rpx;
color: #6b7280;
font-weight: 500;
}
.info-value {
font-size: 28rpx;
color: #1f2933;
word-break: break-all;
line-height: 1.4;
}
// 备注内容
.remark-content {
padding: 24rpx;
}
.remark-text {
font-size: 28rpx;
color: #1f2933;
line-height: 1.8;
white-space: pre-wrap;
}
// 备案资料
.document-wrapper {
padding: 24rpx;
}
.document-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24rpx;
margin-bottom: 24rpx;
}
.document-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
cursor: pointer;
}
.document-image {
width: 100%;
height: 280rpx;
border-radius: 12rpx;
border: 2px solid #e5e7eb;
background: #f8f9fa;
transition: all 0.3s;
&:active {
transform: scale(0.95);
opacity: 0.8;
}
}
.document-label {
font-size: 26rpx;
color: #6b7280;
font-weight: 500;
text-align: center;
}
// 列表容器
.list-wrapper {
padding: 24rpx;
}
.list-container {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.list-item {
background: #f8f9fb;
border-radius: 12rpx;
overflow: hidden;
border: 1px solid #e5e7eb;
transition: all 0.3s;
}
.list-item-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20rpx 24rpx;
display: flex;
align-items: center;
gap: 16rpx;
}
.item-badge {
width: 44rpx;
height: 44rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10rpx);
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-weight: 600;
color: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.item-title {
flex: 1;
font-size: 30rpx;
font-weight: 600;
color: #ffffff;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
}
.list-item-body {
padding: 24rpx;
display: flex;
flex-direction: column;
gap: 16rpx;
background: #ffffff;
}
.item-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 16rpx;
border-bottom: 1px solid #f3f4f6;
&:last-child {
padding-bottom: 0;
border-bottom: none;
}
&.item-row-column {
flex-direction: column;
align-items: stretch;
gap: 16rpx;
}
}
.item-label {
font-size: 26rpx;
color: #6b7280;
font-weight: 500;
min-width: 180rpx;
flex-shrink: 0;
}
.item-value {
flex: 1;
font-size: 28rpx;
color: #1f2933;
text-align: right;
word-break: break-all;
line-height: 1.5;
}
// 证书图片容器
.certificate-images {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
margin-top: 8rpx;
}
.certificate-image {
width: 200rpx;
height: 200rpx;
border-radius: 12rpx;
border: 2px solid #e5e7eb;
background: #f8f9fa;
transition: all 0.3s;
&:active {
transform: scale(0.95);
opacity: 0.8;
}
}
.empty-tip {
text-align: center;
padding: 64rpx;
color: #9ca3af;
font-size: 26rpx;
background: #f8f9fa;
border-radius: 12rpx;
}
// 固定底部按钮
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #ffffff;
padding: 24rpx;
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
z-index: 100;
}
.back-btn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background: #3b82f6;
color: #ffffff;
border: none;
border-radius: 16rpx;
font-size: 32rpx;
font-weight: 600;
box-shadow: 0 4rpx 16rpx rgba(59, 130, 246, 0.3);
transition: all 0.3s;
&:hover {
background: #2563eb;
box-shadow: 0 6rpx 20rpx rgba(59, 130, 246, 0.4);
}
&:active {
transform: scale(0.98);
background: #1d4ed8;
}
}
</style>