zhxy-jsd/src/pages/view/routine/JiFenPingJia/detail.vue

<template>
  <view class="detail-container">
    <view class="content-wrapper">
      <!-- 评分标准 -->
      <view class="form-section">
        <view class="section-title">评分标准</view>
        <view class="standard-text">
          1.一二年级考核语文、数学两个学科。平行班教学质量评价差距均在2分内的，按一...
        </view>
      </view>

      <!-- 考核评价 -->
      <view class="detail-item">
        <text class="detail-label">考核评价</text>
        <text class="detail-value">{{ detailData.evaluationType }}</text>
      </view>

      <!-- 积分类型 -->
      <view class="detail-item">
        <text class="detail-label">积分类型</text>
        <text class="detail-value">{{ detailData.scoreType }}</text>
      </view>

      <!-- 积分分值 -->
      <view class="detail-item">
        <text class="detail-label">积分分值</text>
        <text class="detail-value">{{ detailData.scoreValue }}</text>
      </view>

      <!-- 考核处室 -->
      <view class="detail-item">
        <text class="detail-label">考核处室</text>
        <text class="detail-value">{{ detailData.department }}</text>
      </view>

      <!-- 考核时间 -->
      <view class="detail-item">
        <text class="detail-label">考核时间</text>
        <text class="detail-value">{{ detailData.evaluationDate }}</text>
      </view>

      <!-- 考核打分 -->
      <view class="detail-item">
        <text class="detail-label">考核打分</text>
        <text class="detail-value">{{ detailData.score }}</text>
      </view>

      <!-- 证明材料 -->
      <view class="detail-item file-section" v-if="detailData.files.length > 0">
        <text class="detail-label">证明材料</text>
        <view class="file-list">
          <view
            class="file-item"
            v-for="(file, index) in detailData.files"
            :key="index"
            @click="previewFile(file)"
          >
            <uni-icons type="paperplane" size="16" color="#409eff" />
            <text class="file-name">{{ file.name }}</text>
          </view>
        </view>
      </view>

      <!-- 转手机端按钮 -->
      <view class="bottom-actions">
        <button class="mobile-btn" @click="goBack">返回</button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

interface DetailData {
  evaluationType: string;
  scoreType: string;
  scoreValue: number | string;
  department: string;
  evaluationDate: string;
  score: number | string;
  files: Array<{ name: string; url: string }>;
}

// 详情数据
const detailData = ref<DetailData>({
  evaluationType: "考核评价",
  scoreType: "加分",
  scoreValue: 1,
  department: "教科处",
  evaluationDate: "2025-06-08",
  score: 90,
  files: [
    { name: "教学成果证明.pdf", url: "/files/certificate.pdf" },
    { name: "获奖证书.jpg", url: "/files/award.jpg" },
  ],
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 预览文件
const previewFile = (file: { name: string; url: string }) => {
  // 根据文件类型进行预览
  const ext = file.name.split(".").pop()?.toLowerCase();

  if (["jpg", "jpeg", "png", "gif"].includes(ext || "")) {
    // 图片预览
    uni.previewImage({
      urls: [file.url],
      current: file.url,
    });
  } else {
    // 其他文件类型提示下载
    uni.showModal({
      title: "提示",
      content: `是否下载文件: ${file.name}?`,
      success: (res) => {
        if (res.confirm) {
          // TODO: 实现文件下载逻辑
          uni.showToast({
            title: "开始下载",
            icon: "success",
          });
        }
      },
    });
  }
};

// 转手机端
const transferToMobile = () => {
  uni.showModal({
    title: "提示",
    content: "确定要转到手机端处理吗？",
    success: (res) => {
      if (res.confirm) {
        // TODO: 实现转手机端逻辑
        uni.showToast({
          title: "已转至手机端",
          icon: "success",
        });
      }
    },
  });
};

onMounted(() => {
  // 页面加载时可以获取详情数据
  console.log("页面加载完成");
});
</script>

<style scoped lang="scss">
.detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content-wrapper {
  padding: 30rpx 30rpx 40rpx;
}

.form-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }

  .standard-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}

.detail-item {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .detail-label {
    font-size: 28rpx;
    color: #333;
    width: 160rpx;
    flex-shrink: 0;
  }

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

.file-section {
  flex-direction: column;
  align-items: flex-start;

  .detail-label {
    margin-bottom: 20rpx;
  }

  .file-list {
    width: 100%;

    .file-item {
      display: flex;
      align-items: center;
      padding: 15rpx 20rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      margin-bottom: 10rpx;
      cursor: pointer;

      &:hover {
        background-color: #e6f7ff;
      }

      uni-icons {
        margin-right: 10rpx;
      }

      .file-name {
        font-size: 26rpx;
        color: #333;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background-color: #ffffff;
  border-top: 1rpx solid #eee;

  .mobile-btn {
    width: 100%;
    height: 88rpx;
    background-color: #ff4757;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: bold;
    border-radius: 44rpx;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;

    &:active {
      background-color: #ff3742;
    }
  }
}
</style>