style(approve): enhance card layout and status badge styling

- Add card-header class for improved layout of approval cards
- Introduce status-badge class with styling for approved and rejected statuses
- Update detail view to reflect changes in approval status conditions
- Refactor card footer to conditionally display action buttons based on current tab

assets/css/approve/index.scss

@@ -50,11 +50,31 @@
     overflow: hidden;
     box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
 
+    .card-header {
+      padding: 24rpx 28rpx 12rpx;
+    }
+
     .card-title {
       font-size: 30rpx;
       font-weight: 600;
       color: #1e293b;
-      padding: 24rpx 28rpx 12rpx;
+    }
+
+    .status-badge {
+      font-size: 22rpx;
+      font-weight: 500;
+      padding: 8rpx 16rpx;
+      border-radius: 20rpx;
+      
+      &.approved {
+        color: #10b981;
+        background: rgba(16, 185, 129, 0.1);
+      }
+
+      &.rejected {
+        color: #f56c6c;
+        background: rgba(245, 108, 108, 0.1);
+      }
     }
 
     .card-body {
@@ -112,27 +132,15 @@
             opacity: 0.8;
           }
         }
-      }
-    }
-
-    .card-status-bar {
-      border-top: 1rpx solid #f0f1f5;
-      padding: 20rpx 28rpx;
-
-      .status-text {
-        font-size: 26rpx;
-        font-weight: 500;
 
-        &.approved {
+        &.detail {
           color: #3b82f6;
-        }
+          background: rgba(59, 130, 246, 0.1);
+          border: 1rpx solid rgba(59, 130, 246, 0.2);
 
-        &.reviewing {
-          color: #3b82f6;
+          &:active {
+            background: rgba(59, 130, 246, 0.15);
           }
-
-        &.rejected {
-          color: #f56c6c;
         }
       }
     }

pages/approve/detail.vue

@@ -78,7 +78,7 @@
             </view>
         </view>
 
-        <view class="bottom-actions" v-if="detail.status === 0">
+        <view class="bottom-actions" v-if="detail.approve_status == 0 || detail.approve_status == 1">
             <u-button text="取消" shape="circle" :customStyle="{ flex: 1, marginRight: '24rpx', background: '#ffffff', color: '#606266', border: '1rpx solid #dcdfe6' }" @click="goBack"></u-button>
             <u-button text="审核" type="primary" shape="circle" :customStyle="{ flex: 1, background: '#2979ff' }" @click="openModal"></u-button>
         </view>
@@ -112,7 +112,7 @@
         data() {
             return {
                 id: '',
-                bill_id:'',
+                bill_id: '',
                 detail: {},
                 orderInfo: {},
                 showModal: false,
@@ -136,7 +136,7 @@
              * @return {void}
              */
             getData() {
-                this.request(API.feeApproveList, 'GET', { id: this.id }, true).then(res => {
+                this.request(API.feeApproveList, 'GET', { approve_id: this.id }, true).then(res => {
                     if (res.code === 0) {
                         var { list = [] } = res.data || {};
                         this.detail = list[0] || {};
@@ -211,7 +211,7 @@
                         setTimeout(() => {
                             uni.navigateBack();
                         }, 1500);
-                    }else{
+                    } else {
                         uni.showToast({
                             title: res.msg || '操作失败',
                             icon: 'none'

pages/approve/index.vue

@@ -19,7 +19,12 @@
             <!-- 列表内容 -->
             <template v-else>
                 <view class="approve-card" v-for="item in currentList" :key="item.approve_id">
-                    <view class="card-title">费用减免申请</view>
+                    <view class="card-header row bothSide verCenter">
+                        <text class="card-title">费用减免申请</text>
+                        <view v-if="currentTab === 1" :class="['status-badge', item.status === 1 ? 'approved' : 'rejected']">
+                            {{ item.status_cn }}
+                        </view>
+                    </view>
                     <view class="card-body">
                         <view class="card-row row">
                             <text class="card-label">申请人：</text>
@@ -33,6 +38,10 @@
                             <text class="card-label">订单号：</text>
                             <text class="card-value">{{ item.order_sn }}</text>
                         </view>
+                        <view class="card-row row" v-if="currentTab == 0">
+                            <text class="card-label">等待审批人：</text>
+                            <text class="card-value">{{ item.next_auditor_name }}</text>
+                        </view>
                         <view class="card-row row verCenter bothSide">
                             <view class="row verCenter">
                                 <u-icon name="clock-fill" color="#c0c4cc"></u-icon>
@@ -41,13 +50,9 @@
                             <text class="card-tag">{{ item.relief_detail }}</text>
                         </view>
                     </view>
-                    <view class="card-footer row rowCenter" v-if="currentTab === 0">
-                        <view class="action-btn approve" @click="handleApprove(item)">审批</view>
-                    </view>
-                    <view class="card-status-bar row rowCenter" v-else>
-                        <text :class="['status-text', item.status === 1 ? 'approved' : 'rejected']">
-                            {{ item.status_cn }}
-                        </text>
+                    <view class="card-footer row rowCenter">
+                        <view v-if="currentTab === 0" class="action-btn approve" @click="handleApprove(item)">审批</view>
+                        <view v-else class="action-btn detail" @click="handleApprove(item)">查看详情</view>
                     </view>
                 </view>