teacherTeam-Frontend/src/views/TeacherDetail.vue

<template>
  <div class="teacher-detail">
    <header class="teacher-header">
      <img :src="teacher.image" :alt="teacher.name" class="profile-image">
      <h1>{{ teacher.name }}</h1>
    </header>
    
    <section class="basic-info">
      <h2>基本信息</h2>
      <p style="white-space: pre-line"><strong>简介:</strong> <p></p> {{ teacher.profile }}</p>
      <p style="white-space: pre-line"><strong>本科课程:</strong> <p></p> {{ teacher.undergraduateCourse }}</p>
      <p style="white-space: pre-line"><strong>研究生课程:</strong> <p></p> {{ teacher.graduateCourse }}</p>
      <p style="white-space: pre-line"><strong>研究领域:</strong> <p></p> {{ teacher.researchField }}</p>
      <p><strong>邮箱:</strong> {{ teacher.email }}</p>
      <p><strong>电话:</strong> {{ teacher.phoneNumber }}</p>
    </section>

    <section class="additional-info">
      <CollapsibleSection title="专利" :expanded="expandedSections.patents">
        <div v-for="patent in teacher.patent" :key="patent.patentNum" class="info-item">
          <p><strong>专利号:</strong> {{ patent.patentNum }}</p>
          <p><strong>授权号:</strong> {{ patent.authorizationNum }}</p>
          <p><strong>证书号:</strong> {{ patent.certificateNum }}</p>
          <p><strong>日期:</strong> {{ patent.date }}</p>
        </div>
        <Pagination
          :current-page="patentPage"
          :total-items="patentTotal"
          :items-per-page="pageSize"
          @page-change="handlePatentPageChange"
        />
      </CollapsibleSection>

      <CollapsibleSection title="获奖" :expanded="expandedSections.awards">
        <div v-for="award in awards" :key="award.id" class="info-item">
          <p><strong>名称:</strong> {{ award.name }}</p>
          <p><strong>时间:</strong> {{ award.time }}</p>
          <img :src="award.image" :alt="award.name" class="info-image">
        </div>
        <Pagination
          :current-page="awardPage"
          :total-items="awardTotal"
          :items-per-page="pageSize"
          @page-change="handleAwardPageChange"
        />
      </CollapsibleSection>

      <CollapsibleSection title="论文" :expanded="expandedSections.theses">
        <div v-for="thesis in theses" :key="thesis.id" class="info-item">
          <p><strong>名称:</strong> {{ thesis.name }}</p>
          <p><strong>发表时间:</strong> {{ thesis.time }}</p>
          <a :href="thesis.website" target="_blank" class="info-link">查看详情</a>
          <img :src="thesis.image" :alt="thesis.name" class="info-image">
          <a :href="thesis.file" target="_blank" class="info-link">下载文件</a>
        </div>
        <Pagination
          :current-page="thesisPage"
          :total-items="thesisTotal"
          :items-per-page="pageSize"
          @page-change="handleThesisPageChange"
        />
      </CollapsibleSection>

      <CollapsibleSection title="著作" :expanded="expandedSections.works">
        <div v-for="work in works" :key="work.id" class="info-item">
          <p><strong>名称:</strong> {{ work.name }}</p>
          <p><strong>出版社:</strong> {{ work.press }}</p>
          <p><strong>出版时间:</strong> {{ work.time }}</p>
          <img :src="work.image" :alt="work.name" class="info-image">
          <a :href="work.file" target="_blank" class="info-link">下载文件</a>
        </div>
        <Pagination
          :current-page="workPage"
          :total-items="workTotal"
          :items-per-page="pageSize"
          @page-change="handleWorkPageChange"
        />
      </CollapsibleSection>
    </section>
  </div>
</template>

<script>
import { ref, reactive, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useTeachersStore } from '@/store/modules/teachers';
import CollapsibleSection from '@/components/CollapsibleSection.vue';
import Pagination from '@/components/Pagination.vue';
import { getThesisPage, getWorksPage, getAwards } from '@/api/Open'

export default {
  name: 'TeacherDetail',
  components: {
    CollapsibleSection,
    Pagination
  },
  setup() {
    const teachersStore = useTeachersStore();
    const route = useRoute();
    const teacherId = ref(route.params.id);
    
    const teacher = ref({});
    const awards = ref([]);
    const theses = ref([]);
    const works = ref([]);
    
    const pageSize = ref(12);
    const awardPage = ref(1);
    const awardTotal = ref(1);
    const thesisPage = ref(1);
    const thesisTotal = ref(1);
    const workPage = ref(1);
    const workTotal = ref(1);
    const patentPage = ref(1);
    const patentTotal = ref(1);

    const expandedSections = reactive({
      patents: false,
      awards: false,
      theses: false,
      works: false
    });

    const fetchTeacherData = async () => {
      try {
        await teachersStore.fetchTeacherDetails(teacherId.value); // 调用 Pinia 方法
        teacher.value = teachersStore.currentTeacher; // 从 store 获取教师信息
        patentTotal.value = teacher.value.patent ? teacher.value.patent.length : 0; // 计算专利数量
      } catch (error) {
        console.error('获取教师信息失败:', error);
      }
    };

    const fetchAwards = async () => {
      try {
        const response = await getAwards(awardPage.value, 12, null, teacherId.value);
        awards.value = response.data.records;
        awardTotal.value = response.data.total;
      } catch (error) {
        console.error('获取获奖信息失败:', error);
      }
    };
    
    const fetchTheses = async () => {
      try {
        const response = await getThesisPage(thesisPage.value, 12, null, teacherId.value);
        theses.value = response.data.records;
        thesisTotal.value = response.data.total;
      } catch (error) {
        console.error('获取论文信息失败:', error);
      }
    };

    const fetchWorks = async () => {
      try {
        const response = await getWorksPage(workPage.value, 12, null, teacherId.value);
        works.value = response.data.records;
        workTotal.value = response.data.total;
      } catch (error) {
        console.error('获取著作信息失败:', error);
      }
    };

    const handleAwardPageChange = (page) => {
      awardPage.value = page;
      fetchAwards();
    };

    const handleThesisPageChange = (page) => {
      thesisPage.value = page;
      fetchThesis();
    };

    const handleWorkPageChange = (page) => {
      workPage.value = page;
      fetchWorks();
    };

    const handlePatentPageChange = (page) => {
      patentPage.value = page;
      teacher.value.patent = teacher.value.patent.slice((page - 1) * pageSize.value, page * pageSize.value);
    };

    watch(teacherId, () => {
      fetchTeacherData();
      fetchAwards();
      fetchTheses();
      fetchWorks();
    }, { immediate: true });

    return {
      teacher,
      awards,
      theses,
      works,
      pageSize,
      awardPage,
      awardTotal,
      thesisPage,
      thesisTotal,
      workPage,
      workTotal,
      patentPage,
      patentTotal,
      expandedSections,
      handleAwardPageChange,
      handleThesisPageChange,
      handleWorkPageChange,
      handlePatentPageChange
    };
  }
};
</script>

<style scoped>
.teacher-detail {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.teacher-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.profile-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin: 0;
}

h2 {
  font-size: 1.8rem;
  color: #34495e;
  margin-top: 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid #3498db;
  padding-bottom: 0.5rem;
}

.basic-info, .additional-info {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-top: 1rem;
}

.info-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s ease;
}

.info-link:hover {
  color: #2980b9;
}

p {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

strong {
  color: #2c3e50;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Add any additional styles for the CollapsibleSection and Pagination components here */
</style>