JCSS / jcss-miniprogram

<template>
  <view class="pending-plan-detail">
    <!-- 计划详情卡片 -->
    <view class="detail-card">
      <!-- 标题行 -->
      <view class="detail-item">
        <text class="label">标题：</text>
        <text class="value up-line-1">{{ planInfo && planInfo.title ? planInfo.title : '-' }}</text>
      </view>

      <!-- 计划编码行 -->
      <view class="detail-item">
        <text class="label">计划编码：</text>
        <text class="value up-line-1">{{ planInfo && planInfo.code ? planInfo.code : '-' }}</text>
      </view>

      <!-- 养护周期行 -->
      <view class="detail-item">
        <text class="label">养护周期：</text>
        <text class="value up-line-1">{{ planInfo && planInfo.cycle ? planInfo.cycle : '-' }}</text>
      </view>

      <!-- 计划完成次数行 -->
      <view class="detail-item">
        <text class="label">计划完成次数：</text>
        <text class="value up-line-1">{{ planInfo && planInfo.planCount ? planInfo.planCount : 0 }} 次</text>
      </view>

      <!-- 已完成次数行 + 查看记录按钮 -->
      <view class="detail-item flex-between">
        <view class="left-wrap">
          <text class="label">已完成次数：</text>
          <text class="value up-line-1">{{ planInfo && planInfo.finishCount ? planInfo.finishCount : 0 }} 次</text>
        </view>
        <!-- 查看记录按钮（限制宽度+紧凑样式） -->
        <u-button
            type="primary"
            size="mini"
            :disabled="!(planInfo && planInfo.code)"
            @click="gotoFinishPlanDetail"
            class="view-record-btn"
        >
          查看记录
        </u-button>
      </view>

      <!-- 计划有效期行 -->
      <view class="detail-item">
        <text class="label">计划有效期：</text>
        <text class="value up-line-1">{{ planInfo && planInfo.validTime ? planInfo.validTime : '-' }}</text>
      </view>
    </view>

    <!-- 底部新增记录按钮 -->
    <view class="fixed-btn-wrap">
      <u-button
          type="primary"
          size="default"
          @click="addNewRecord"
          :disabled="!(planInfo && planInfo.code)"
          :style="{ width: '100%', height: '88rpx', fontSize: '30rpx', borderRadius: 0 }"
      >
        新增记录
      </u-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

// 响应式数据定义
const planInfo = ref({
  title: '123213',
  code: '',
  cycle: '',
  planCount: 0,
  finishCount: 0,
  validTime: ''
});
const planId = ref('')

// 页面加载接收参数
onLoad((options) => {
  console.log('计划ID：', options.id);
  planId.value = options.id;
});

// 页面显示时请求数据
onShow(() => {
  if (!planId.value) {
    uni.showToast({
      title: '计划ID不存在',
      icon: 'none'
    });
    return;
  }
  getPlanDetail(planId.value);
});

// 模拟接口请求
const getPlanDetail = (id) => {
  setTimeout(() => {
    planInfo.value = {
      title: '朝阳区望京街道道路养护计划朝阳区望京街道道路养护计划朝阳区望京街道道路养护计划',
      code: 'YH-2025-0891YH-2025-0891YH-2025-0891YH-2025-0891',
      cycle: '每月1次',
      planCount: 12,
      finishCount: 3,
      validTime: '2025-01-01 至 2025-12-31'
    };
  }, 300);
};

// 跳转到已完成计划明细
const gotoFinishPlanDetail = () => {
  // if (!planInfo.value || !planInfo.value.code) {
  //   uni.showToast({
  //     title: '计划数据未加载完成',
  //     icon: 'none'
  //   });
  //   return;
  // }
  uni.navigateTo({
    url: `/pages-sub/daily/patrol-manage/finish-plan-detail/index?planId=${planInfo.value.code}`
  });
};

// 新增记录
const addNewRecord = () => {
  if (!planInfo.value || !planInfo.value.code) {
    uni.showToast({
      title: '计划数据未加载完成',
      icon: 'none'
    });
    return;
  }
  uni.navigateTo({
    url: `/pages-sub/daily/patrol-manage/add-patrol-record/index?planId=${planInfo.value.code}`
  });
};
</script>

<style scoped lang="scss">
.pending-plan-detail {
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  min-height: 100vh; // 恢复最小高度，保证页面占满屏幕
  padding-bottom: 88rpx; // 给底部按钮留空间
}

.detail-card {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  flex: 1;
}

.detail-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  line-height: 1.8;
  padding: 10rpx 0;
  border-bottom: 1px solid #f5f5f5;

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

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left-wrap {
    display: flex;
    align-items: center;
    flex: 1; // 占满剩余空间，按钮靠右
  }
}

.label {
  color: #999;
  width: 200rpx;
  flex-shrink: 0;
}

.value {
  color: #333;
  flex: 1;
  word-break: break-all;
}

// 查看记录按钮样式（核心优化）
.view-record-btn {
  width: 160rpx !important; // 固定宽度，按需调整
  padding: 0 !important; // 移除内边距，减少宽度
  margin-right: 10rpx;
  font-size: 24rpx !important; // 缩小字体，更紧凑
  height: 50rpx !important; // 调整高度，比例协调
}

// 底部固定按钮容器
.fixed-btn-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0;
  background-color: #f8f8f8;
}

// 兼容小程序底部安全区
/* #ifdef MP-WEIXIN */
.fixed-btn-wrap {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
/* #endif */
</style>