lineWidth="65" 优化样式

刘淇
1 parent 6dcd0ffd
Showing 4 changed files with 25 additions and 30 deletions
pages-sub/daily/patrol-manage/pending-plan-detail.vue
pages-sub/problem/regional-order-manage/order-detail.vue
pages-sub/problem/work-order-manage/index.vue
pages-sub/problem/work-order-manage/order-detail.vue
 <template>
   <view class="page-container">
-
     <view class="page-body">
-      <view class="plan-card-wrap" v-for="(item,index) in planInfo" :key="`${item.planNo}_${index}`">
-
-        <!-- 计划名称 -->
-        <view class="form-card form-card--title">
-          <view class="card-title">{{ item.planName || '无计划名称' }}</view>
-        </view>
+      <!-- 只渲染一次标题卡片，取倒序后第一条数据 -->
+      <view class="form-card form-card--title" v-if="reversedPlanInfo.length">
+        <view class="card-title">{{ reversedPlanInfo[0].planName || '无计划名称' }}</view>
+      </view>
  
+      <!-- 倒叙循环计划信息卡片 -->
+      <view class="plan-card-wrap" v-for="(item,index) in reversedPlanInfo" :key="`${item.planNo}_${index}`">
         <!-- 计划信息 -->
         <view class="form-card">
           <view class="sec-head">
             <view class="sec-bar"></view>
             <view class="sec-title">计划信息</view>
           </view>
-
           <view class="u-body-item u-flex">
             <view class="u-body-item-title">计划编码：</view>
             <view class="u-line-1 u-body-value">{{ item.planNo || '-' }}</view>
@@ -26,24 +24,20 @@
               {{ uni.$dict.getDictLabel('cycle_id_type', item.cycleId) }}
             </view>
           </view>
-
           <view class="u-body-item u-flex">
             <view class="u-body-item-title">计划完成次数：</view>
             <view class="u-line-1 u-body-value">{{ item.planNum || 0 }}</view>
           </view>
-
           <view class="u-body-item u-flex">
             <view class="u-body-item-title">已完成次数：</view>
             <view class="u-line-1 u-body-value">{{ item.planFinishNum || 0 }}</view>
           </view>
-
           <view class="u-body-item u-flex">
             <view class="u-body-item-title">计划有效期：</view>
             <view class="u-line-1 u-body-value">{{ timeFormat(item.beginTime, 'yyyy-mm-dd') || '-' }} 至
               {{ timeFormat(item.endTime, 'yyyy-mm-dd') || '-' }}
             </view>
           </view>
-
           <!-- 底部操作区（分隔线 + 右对齐按钮） -->
           <view class="card-action-row" v-if="item.finishState == 3 || item.planFinishNum > 0">
             <view class="mini-btn mini-btn--primary is-disabled" v-if="item.finishState == 3">
@@ -57,8 +51,6 @@
         </view>
       </view>
     </view>
-
-
     <!-- 底部新增记录按钮     status=3-->
     <view class="fixed-bottom-btn-wrap" v-if="finishState==1">
       <up-button
@@ -74,21 +66,28 @@
  
 <script setup>
 import { timeFormat } from '@/uni_modules/uview-plus';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 import { inspectionPlanDetail } from "@/api/patrol-manage/patrol-plan";
+
 // 响应式数据定义
 const planInfo = ref([]);
 const batchNo = ref('')
 const planNo = ref('')
 const finishState = ref('')
+
+// 计算属性：数组拷贝后倒序，不修改原数组
+const reversedPlanInfo = computed(() => {
+  return [...planInfo.value].reverse()
+})
+
 // 页面加载接收参数
 onLoad((options) => {
   console.log('计划ID：', options.batchNo);
   batchNo.value = options.batchNo;
-  // planNo.value = options.planNo;
   finishState.value = options.status
 });
+
 // 页面显示时请求数据
 onShow(() => {
   if (!batchNo.value) {
@@ -100,6 +99,7 @@ onShow(() =&gt; {
   }
   getPlanDetail(batchNo.value);
 });
+
 const getPlanDetail = async () => {
   const queryData = {
     batchNo: batchNo.value,
@@ -110,16 +110,19 @@ const getPlanDetail = async () =&gt; {
   planInfo.value = planInfoRes
   console.log(planInfoRes)
 };
+
 // 跳转到已完成计划明细
 const gotoFinishPlanDetail = (i) => {
   uni.navigateTo({
     url: `/pages-sub/daily/patrol-manage/finish-plan-detail?planNo=${i.planNo}`
   });
 };
-// 新增记录
+
+// 新增记录，取倒序后的第一条
 const addNewRecord = () => {
+  const firstItem = reversedPlanInfo.value[0]
   uni.navigateTo({
-    url: `/pages-sub/daily/patrol-manage/add-patrol-record?planNo=${planInfo.value[0].planNo}&batchNo=${batchNo.value}`,
+    url: `/pages-sub/daily/patrol-manage/add-patrol-record?planNo=${firstItem.planNo}&batchNo=${batchNo.value}`,
   });
 };
 </script>
@@ -132,11 +135,9 @@ const addNewRecord = () =&gt; {
   background-color: #F4F6FA;
   box-sizing: border-box;
 }
-
 .page-body {
   padding: 0 24rpx;
 }
-
 // 白色卡片：8px 圆角 + 卡片阴影（设计稿 .card）
 .form-card {
   margin-top: 24rpx;
@@ -145,7 +146,6 @@ const addNewRecord = () =&gt; {
   border-radius: 16rpx;
   box-shadow: 0 4rpx 16rpx rgba(17, 24, 39, 0.06);
 }
-
 // 区块标题：蓝色竖条 + 标题文字
 .sec-head {
   display: flex;
@@ -153,20 +153,17 @@ const addNewRecord = () =&gt; {
   gap: 12rpx;
   padding: 20rpx 0 8rpx;
 }
-
 .sec-bar {
   width: 6rpx;
   height: 28rpx;
   background-color: #2563EB;
   border-radius: 3rpx;
 }
-
 .sec-title {
   font-size: 30rpx;
   font-weight: 500;
   color: #1F2937;
 }
-
 /* 计划名称卡片 */
 .form-card--title {
   padding: 28rpx 24rpx;
@@ -177,22 +174,18 @@ const addNewRecord = () =&gt; {
   color: #1F2937;
   line-height: 1.4;
 }
-
 /* 信息行 */
 .form-card .u-body-item {
   margin-bottom: 12rpx;
-
   &:last-of-type {
     margin-bottom: 0;
   }
 }
-
 /* 禁用态按钮 */
 .mini-btn.is-disabled {
   background-color: #93B4F5 !important;
   opacity: 0.7;
 }
-
 /* 底部提交栏 */
 .fixed-bottom-btn-wrap {
   position: fixed;
@@ -211,4 +204,4 @@ const addNewRecord = () =&gt; {
   border-radius: 16rpx !important;
   font-size: 30rpx !important;
 }
-</style>
 \ No newline at end of file
+</style>
@@ -21,6 +21,7 @@
             inactive-color="#606266"
             class="top-tabs"
             @click="activeTopTabClick"
+             lineWidth="65"
         ></up-tabs>
       </up-sticky>
  
@@ -57,7 +57,7 @@
         <empty-view/>
       </template>
  
-      <view class="common-card-list" style="padding-top: 216rpx;padding-bottom: calc(120rpx + env(safe-area-inset-bottom))">
+      <view class="common-card-list" style="padding-top: 190rpx;padding-bottom: calc(120rpx + env(safe-area-inset-bottom))">
         <!-- 待办工单卡片 -->
         <up-card
             v-if="activeTab == 0"
@@ -21,6 +21,7 @@
             inactive-color="#606266"
             class="top-tabs"
             @click="activeTopTabClick"
+             lineWidth="65"
         ></up-tabs>
       </up-sticky>