SmartParks_uniapp/pages/sys/workbench/oa/oaDetail.vue

<template>
  <view class="	">
    <!-- 顶部导航背景 -->
    <view class="detail-navbar">
      <image src="/static/ic_back_white.webp" class="detail-back" @click="goBack" />
      <view class="detail-right">
        <image src="/static/ic_share_w.png" class="detail-scan" />
      </view>
    </view>

    <!-- 卡片内容，盖住导航背景 -->
    <view class="card-wrapper">
      <!-- 请假信息卡片 -->
      <view class="detail-card">
        <view class="leave-header">
          <view class="leave-type">请假</view>
          <view class="leave-status">已通过</view>
        </view>
        <view class="applicant-info">
          <view class="applicant-avatar" style="background-color: #4B7BF5;">余</view>
          <view class="applicant-detail">
            <text class="applicant-name">余永乐</text>
            <text class="applicant-dept">数据开发及研发部</text>
          </view>
        </view>
        <view class="submit-time">提交时间：7月16日 18:36:44</view>
      </view>

      <!-- 申批详情卡片 -->
      <view class="detail-card">
        <view class="detail-title">申批详情</view>
        <view class="detail-item-vertical">
          <text class="detail-label-vertical">假期类型</text>
          <text class="detail-value-vertical">病假</text>
        </view>
        <view class="detail-item-vertical">
          <text class="detail-label-vertical">开始时间</text>
          <text class="detail-value-vertical">2025-07-15</text>
        </view>
        <view class="detail-item-vertical">
          <text class="detail-label-vertical">结束时间</text>
          <text class="detail-value-vertical">2025-07-17</text>
        </view>
        <view class="detail-item-vertical">
          <text class="detail-label-vertical">时长</text>
          <text class="detail-value-vertical">2天</text>
        </view>
        <view class="detail-item-vertical">
          <text class="detail-label-vertical">请假事由</text>
          <text class="detail-value-vertical">由于腿儿过大，需要到医院进行检查</text>
        </view>
        <view class="detail-item-vertical">
          <text class="detail-label-vertical">附件</text>
          <view class="attachment">
            <view class="attachment-preview">
              <image src="/static/ic_attachment_preview.png" class="attachment-img" />
            </view>
            <view class="attachment-info">
              <text class="attachment-name">174568963.jpg</text>
              <text class="attachment-size">289.14 KB</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 审批记录卡片 -->
      <view class="detail-card">
        <view class="detail-title">申批记录</view>
        <view
          class="approval-item"
          v-for="(item, index) in detailData.approvalRecords"
          :key="index"
        >
          <view class="approval-status">
            <view :class="['status-dot', index < 3 ? 'selected' : '']"></view>
            <view
              v-if="index < detailData.approvalRecords.length - 1"
              class="status-line"
            ></view>
          </view>
          <view class="approval-content">
            <view class="approval-type">{{ item.type }}</view>
            <view class="approver-info" v-if="item.approver">
              <view
                class="approver-avatar"
                :style="{ backgroundColor: item.approver.avatarColor }"
              >
                {{ item.approver.avatarText }}
              </view>
              <text class="approver-name">{{ item.approver.name }}</text>
              <text class="approval-result">{{ item.result }}</text>
            </view>
            <text class="approval-time">{{ item.time }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detailData: {
        approvalRecords: [
          {
            type: "提交",
            approver: {
              name: "余永乐",
              avatarText: "余",
              avatarColor: "#4B7BF5",
            },
            result: "已提交",
            time: "07-12 18:28:22",
          },
          {
            type: "审批",
            approver: {
              name: "张桂花",
              avatarText: "张",
              avatarColor: "#F3831F",
            },
            result: "已同意",
            time: "07-12 18:28:22",
          },
          {
            type: "审批",
            approver: {
              name: "张桂花",
              avatarText: "张",
              avatarColor: "#F3831F",
            },
            result: "已批准",
            time: "07-12 18:28:22",
          },
          {
            type: "结束",
            time: "07-12 18:28:22",
          },
        ],
      },
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style scoped>
.detail-container {
  background-color: #f7f7f7;
  min-height: 100vh;
  position: relative;
}

/* 渐变背景导航栏 */
.detail-navbar {
  width: 100%;
  height: 372rpx;
  padding-top: 115rpx;
  display: flex;
  justify-content: space-between;
  background: linear-gradient(180deg, #0a60ed 0%, #ffffff 100%);
}

/* 卡片区域盖住导航背景 */
.card-wrapper {
  position: relative;
  z-index: 10;
  margin-top: -200rpx; /* 向上覆盖导航背景 */
}

/* 通用卡片 */
.detail-card {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.04);
}

.detail-back {
  margin-left: 37rpx;
  width: 15rpx;
  height: 33rpx;
}

.detail-right {
  margin-right: 37rpx;
}

.detail-scan {
  width: 36rpx;
  height: 35rpx;
}

.leave-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.leave-type {
  font-weight: 600;
  font-size: 26rpx;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  color: #2186ff;
  background: rgba(33, 134, 255, 0.1);
  border: 1px solid #2186ff;
}

.leave-status {
  font-size: 26rpx;
  padding: 6rpx 20rpx;
  border-radius: 8rpx;
  color: #07c78e;
  background-color: rgba(7, 199, 142, 0.1);
  border: 1px solid #07c78e;
}

.applicant-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.applicant-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  margin-right: 20rpx;
}

.applicant-detail {
  display: flex;
  flex-direction: column;
}

.applicant-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 6rpx;
}

.applicant-dept {
  font-size: 24rpx;
  color: #666;
}

.submit-time {
  font-size: 24rpx;
  color: #999;
}

.detail-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.detail-item-vertical {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
}

.detail-label-vertical {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.detail-value-vertical {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.attachment {
  display: flex;
  align-items: center;
}

.attachment-preview {
  width: 80rpx;
  height: 80rpx;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.attachment-img {
  width: 80rpx;
  height: 80rpx;
}

.attachment-info {
  display: flex;
  flex-direction: column;
}

.attachment-name {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.attachment-size {
  font-size: 22rpx;
  color: #999;
}

/* 审批记录 */
.approval-item {
  display: flex;
  margin-bottom: 30rpx;
}

.approval-status {
  width: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
}

.status-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 10rpx;
  border: 1px solid #ddd;
  background-color: #fff;
  margin-bottom: 10rpx;
}

.status-dot.selected {
  background-color: #2186ff;
  border-color: #2186ff;
}

.status-line {
  width: 2rpx;
  flex: 1;
  background-color: #ddd;
}

.approval-content {
  flex: 1;
}

.approval-type {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.approver-info {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.approver-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  margin-right: 10rpx;
}

.approver-name {
  font-size: 26rpx;
  color: #333;
  margin-right: 20rpx;
}

.approval-result {
  font-size: 24rpx;
  color: #07c78e;
}

.approval-time {
  font-size: 24rpx;
  color: #999;
}
</style>