H5-frontend/modules/common/student-prosthetics/certificate.vue

<script setup>
import { computed, ref } from 'vue'
import TopNavBar from '@/business/top-nav-bar.vue'
import { getLeaveApplicationApproval, getDiagnosisAttachments } from '@/services/student-prosthetics'

const info = computed(() => {
  const storage = JSON.parse(localStorage.getItem('studentInfo') || '{}')
  return storage
})

// 存证数据
const evidenceData = ref({
  certNo: '',
  createdTime: '',
  name: '',
  studentNo: '',
  schoolName: '',
  gradeClass: '',
  leaveType: null,
  details: {
    expectedStartDate: '',
    expectedEndDate: '',
    diseaseDiagnosis: '',
    auditOpinion: ''
  },
  approvalRecords: [
    // {
    //   nodeName: '家长提交',
    //   operatorRole: '张三（家长）',
    //   lastUpdatedTime: '2024-01-15 10:30',
    //   action: '同意',
    //   comment: '情况属实',
    //   status: 'finish'
    // },
    // {
    //   nodeName: '学校审批',
    //   operatorRole: '李老师',
    //   lastUpdatedTime: '2024-01-15 14:20',
    //   action: '同意',
    //   comment: '情况属实',
    //   status: 'process'
    // },
    // {
    //   nodeName: '教育局审批',
    //   operatorRole: '',
    //   lastUpdatedTime: '',
    //   action: '',
    //   comment: '',
    //   status: 'pending'
    // }
  ],
  attachments: [
    // { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
    // { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg' }
  ]
})

// 期限描述 
const periodDescription = computed(() => {
  if (!evidenceData.value.details.expectedStartDate || !evidenceData.value.details.expectedEndDate) return ''

  const start = new Date(evidenceData.value.details.expectedStartDate)
  const end = new Date(evidenceData.value.details.expectedEndDate)

  const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24))

  return `${days}天`
})

// 计算当前激活的步骤索引
const activeStep = ref(0)

onLoad((options) => {
  for (const key in evidenceData.value) {
    if (!Object.hasOwn(info.value, key)) continue
    evidenceData.value[key] = info.value[key]
  }

  getLeaveApplicationApproval({ applicationId: info.value.applicationId, tenantId: info.value.tenantId }).then((res) => {
    if (res.success) {
      const infos = (res.infos || []).map((item, index) => {
        item.status = item.action ? 'finish' : 'process'
        return item
      })
      evidenceData.value.approvalRecords = infos
      activeStep.value = infos.length - 1
    }
  })

  getDiagnosisAttachments({ applicationId: info.value.applicationId, tenantId: info.value.tenantId }).then((res) => {
    if (res.success) {
      const infos = (res.infos || []).map((item) => {
        if (item.fileUrl && item.fileUrl.length) {
          return { url: item.fileUrl[0].temp }
        } else {
          return { url: item.fileUrlStr }
        }
      })
      evidenceData.value.attachments = infos
    }
  })
})
</script>

<template>
  <div class="evidence-page">
    <TopNavBar></TopNavBar>

    <!-- 存证标题 -->
    <div class="evidence-header">
      <div class="title">休学存证</div>
      <div class="evidence-id">{{ evidenceData.certNo }}</div>
      <div class="evidence-time">存证时间：{{ evidenceData.createdTime }}</div>
    </div>

    <!-- 学生信息 -->
    <div class="section">
      <div class="section-title">学生信息</div>
      <div class="info-table">
        <div class="info-row">
          <div class="label">姓名</div>
          <div class="value">{{ evidenceData.name }}</div>
        </div>
        <div class="info-row">
          <div class="label">学号</div>
          <div class="value">{{ evidenceData.studentNo }}</div>
        </div>
        <div class="info-row">
          <div class="label">所属学校</div>
          <div class="value">{{ evidenceData.schoolName }}</div>
        </div>
        <div class="info-row">
          <div class="label">年级班级</div>
          <div class="value">{{ evidenceData.gradeClass }}</div>
        </div>
      </div>
    </div>

    <!-- 休学信息 -->
    <div class="section">
      <div class="section-title">休学信息</div>
      <div class="info-table">
        <div class="info-row">
          <div class="label">休学类型</div>
          <div class="value">{{ evidenceData.details.leaveType == 1 ? '休学' : '复学' }}</div>
        </div>
        <div class="info-row">
          <div class="label">开始日期</div>
          <div class="value">{{ evidenceData.details.expectedStartDate }}</div>
        </div>
        <div class="info-row">
          <div class="label">结束日期</div>
          <div class="value">{{ evidenceData.details.expectedEndDate }}</div>
        </div>
        <div class="info-row">
          <div class="label">休学期限</div>
          <div class="value">{{ periodDescription }}</div>
        </div>
        <div class="info-row">
          <div class="label">疾病诊断</div>
          <div class="value">{{ evidenceData.details.diseaseDiagnosis }}</div>
        </div>
        <div class="info-row">
          <div class="label">申请原因</div>
          <div class="value">{{ evidenceData.details.auditOpinion }}</div>
        </div>
      </div>
    </div>

    <!-- 审批记录 - 使用van-steps -->
    <div class="section">
      <div class="section-title">审批记录</div>
      <div class="approval-steps">
        <van-steps direction="vertical" :active="activeStep">
          <van-step v-for="(step, index) in evidenceData.approvalRecords" :key="index">
            <div>
              <!-- 步骤标题区域 -->
              <div class="step-header">
                <div class="step-title">{{ step.nodeName }}</div>
                <div class="step-status" :class="step.status">
                  {{
                    step.status === 'finish' ? '已完成' :
                      step.status === 'process' ? '进行中' : '待处理'
                  }}
                </div>
              </div>

              <!-- 处理人信息 -->
              <div class="step-info">
                <div class="info-item">
                  <span class="info-label">处理人：</span>
                  <span class="info-value">{{ step.operatorRole || '待处理' }}</span>
                </div>
                <div v-if="step.lastUpdatedTime" class="info-item">
                  <span class="info-label">日期：</span>
                  <span class="info-value">{{ step.lastUpdatedTime }}</span>
                </div>
              </div>

              <!-- 审批意见 -->
              <div v-if="step.action || step.comment" class="step-opinion">
                {{ step.action }} {{ step.comment }}
              </div>

              <!-- 空状态提示 -->
              <div v-if="!step.operatorRole && !step.lastUpdatedTime" class="step-empty">
                等待处理中...
              </div>
            </div>
          </van-step>
        </van-steps>
      </div>
    </div>

    <!-- 证明材料 -->
    <div class="section">
      <div class="section-title">证明材料</div>
      <van-uploader v-model="evidenceData.attachments" multiple disabled :deletable="false" />
      <!-- <div class="evidence-attachments">
        <div class="attachment-item">
          <van-icon name="description" size="36rpx" color="#1989fa" />
          <span>医院诊断证明.pdf</span>
        </div>
        <div class="attachment-item">
          <van-icon name="description" size="36rpx" color="#1989fa" />
          <span>病历资料（1-5页）.pdf</span>
        </div>
        <div class="attachment-item">
          <van-icon name="picture" size="36rpx" color="#4caf50" />
          <span>家长身份证复印件.jpg</span>
        </div>
      </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.evidence-page {
  padding: 24rpx;
  background-color: #f7f8fa;
  min-height: 100vh;
  padding-top: 120rpx;
}

.evidence-header {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
  text-align: center;

  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 16rpx;
  }

  .evidence-id {
    font-size: 28rpx;
    color: #1989fa;
    margin-bottom: 8rpx;
    font-weight: 500;
  }

  .evidence-time {
    font-size: 24rpx;
    color: #888;
  }
}

.section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #eee;
  }
}

.info-table {
  .info-row {
    display: flex;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .label {
      width: 200rpx;
      font-size: 28rpx;
      color: #666;
      flex-shrink: 0;
    }

    .value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
  }
}

.approval-steps {

  .van-step {
    padding: 32rpx 0 32rpx 0;
    position: relative;

    &:first-child {
      &::before {
        top: 72rpx;
      }
    }

    &:last-child {
      &::before {
        bottom: auto;
        height: 72rpx;
      }
    }

    .van-step__circle {
      width: 24rpx;
      height: 24rpx;
      background-color: #fff;
      border: 2rpx solid #666;
      box-shadow: 0 0 0 4rpx #fff;
      z-index: 1;

      &.van-step__circle--finish {
        background-color: #4caf50;
        border-color: #4caf50;
      }

      &.van-step__circle--process {
        background-color: #ff9800;
        border-color: #ff9800;
      }
    }

    .van-step__line {
      background-color: #e0e0e0;

      &.van-step__line--vertical {
        width: 2rpx;
        left: 21rpx;
      }
    }
  }

  .van-step__title {
    font-size: 0;
    line-height: 0;
  }

}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;

  .step-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
  }

  .step-status {
    font-size: 26rpx;
    padding: 4rpx 12rpx;
    border-radius: 12rpx;

    &.finish {
      background-color: #e8f5e9;
      color: #4caf50;
    }

    &.process {
      background-color: #e3f2fd;
      color: #2196f3;
    }
  }
}

.step-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.step-opinion {
  background: #f9f9f9;
  border-radius: 8rpx;
  padding: 16rpx;
  margin-bottom: 16rpx;

  .opinion-label {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 8rpx;
    font-weight: 500;
  }

  .opinion-content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.4;
  }
}

.evidence-attachments {
  .attachment-item {
    display: flex;
    align-items: center;
    padding: 24rpx;
    margin-bottom: 16rpx;
    background: #f9f9f9;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;

    .van-icon {
      margin-right: 16rpx;
      flex-shrink: 0;
    }

    span {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>