2025-11-23 19:34:40 +08:00

1206 lines
37 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 }),
// 职称信息
get('/api/zcxx/findPage', { jsId: teacherId.value, page: 1, rows: 100 }),
// 岗位情况
get('/api/gwqk/findPage', { jsId: teacherId.value, page: 1, rows: 100 }),
// 工作经历
get('/api/gzjl/findPage', { jsId: teacherId.value, page: 1, rows: 100 }),
// 家庭成员
get('/api/jtcy/findPage', { jsId: teacherId.value, page: 1, rows: 100 }),
// 党政职务列表
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>