feat(approve): refactor list display and integrate API data fetching

- Replace separate pending and done list views with unified list component using computed property
- Update field mappings to match API response schema (applicant_name, customer_name, order_sn, create_time_cn, relief_detail, status_cn)
- Remove static mock data and implement dynamic data fetching via API.feeApproveList
- Add getData method to fetch approval lists based on tab status (0 for pending, 1,2 for completed)
- Simplify tab labels by removing hardcoded counts
- Consolidate card rendering logic to reduce code duplication
- Add onShow lifecycle hook to refresh data when page becomes visible
- Update status display logic to use numeric status values (1 for approved, others for rejected)
- Improve empty state messaging with dynamic text based on current tab

pages/approve/index.vue

@@ -8,141 +8,96 @@
             <u-tabs :list="tabList" :current="currentTab" @click="onTabChange" :scrollable="false" lineColor="#3b82f6" lineWidth="50" lineHeight="4" :activeStyle="{ color: '#3b82f6', fontWeight: '600', fontSize: '32rpx' }" :inactiveStyle="{ color: '#909399', fontSize: '28rpx', fontWeight: '400' }" itemStyle="padding: 24rpx 40rpx"></u-tabs>
         </view>
 
-        <!-- 待处理列表 -->
-        <view class="list-wrap" v-if="currentTab === 0">
-            <view class="approve-card" v-for="item in pendingList" :key="item.id">
-                <view class="card-title">{{ item.title }}</view>
+        <view class="list-wrap">
+            <view class="approve-card" v-for="item in currentList" :key="item.id">
+                <view class="card-title">{{ item.apply_type }}</view>
                 <view class="card-body">
                     <view class="card-row row">
                         <text class="card-label">申请人：</text>
-                        <text class="card-value">{{ item.applicant }}</text>
+                        <text class="card-value">{{ item.applicant_name }}</text>
                     </view>
                     <view class="card-row row">
                         <text class="card-label">客户名称：</text>
-                        <text class="card-value">{{ item.customerName }}</text>
+                        <text class="card-value">{{ item.customer_name }}</text>
                     </view>
                     <view class="card-row row">
                         <text class="card-label">订单号：</text>
-                        <text class="card-value">{{ item.orderNo }}</text>
+                        <text class="card-value">{{ item.order_sn }}</text>
                     </view>
                     <view class="card-row row verCenter bothSide">
                         <view class="row verCenter">
                             <u-icon name="info-circle-fill" color="#3b82f6"></u-icon>
-                            <text class="card-time">{{ item.time }}</text>
+                            <text class="card-time">{{ item.create_time_cn }}</text>
                         </view>
-                        <text class="card-tag">{{ item.tag }}</text>
+                        <text class="card-tag">{{ item.relief_detail }}</text>
                     </view>
                 </view>
-                <view class="card-footer row rowCenter">
+                <view class="card-footer row rowCenter" v-if="currentTab === 0">
                     <view class="action-btn approve" @click="handleApprove(item)">审批</view>
                 </view>
-            </view>
-
-            <u-empty v-if="!pendingList.length" mode="data" text="暂无待处理审批"></u-empty>
-        </view>
-
-        <!-- 已处理列表 -->
-        <view class="list-wrap" v-if="currentTab === 1">
-            <view class="approve-card" v-for="item in doneList" :key="item.id">
-                <view class="card-title">{{ item.title }}</view>
-                <view class="card-body">
-                    <view class="card-row row">
-                        <text class="card-label">申请人：</text>
-                        <text class="card-value">{{ item.applicant }}</text>
-                    </view>
-                    <view class="card-row row">
-                        <text class="card-label">客户名称：</text>
-                        <text class="card-value">{{ item.customerName }}</text>
-                    </view>
-                    <view class="card-row row">
-                        <text class="card-label">订单号：</text>
-                        <text class="card-value">{{ item.orderNo }}</text>
-                    </view>
-                    <view class="card-row row verCenter bothSide">
-                        <view class="row verCenter">
-                            <u-icon name="info-circle-fill" color="#3b82f6"></u-icon>
-                            <text class="card-time">{{ item.time }}</text>
-                        </view>
-                        <text class="card-tag">{{ item.tag }}</text>
-                    </view>
-                </view>
-                <view class="card-status-bar row rowCenter">
-                    <text :class="['status-text', item.status === 'approved' ? 'approved' : item.status === 'reviewing' ? 'reviewing' : 'rejected']">
-                        {{ item.statusText }}
+                <view class="card-status-bar row rowCenter" v-else>
+                    <text :class="['status-text', item.status === 1 ? 'approved' : 'rejected']">
+                        {{ item.status_cn }}
                     </text>
                 </view>
             </view>
 
-            <u-empty v-if="!doneList.length" mode="data" text="暂无已处理审批"></u-empty>
+            <u-empty v-if="!currentList.length" mode="data" :text="currentTab === 0 ? '暂无待处理审批' : '暂无已处理审批'"></u-empty>
         </view>
     </view>
 </template>
 
 <script>
+    import { API } from '@/util/api';
+
     export default {
         data() {
             return {
                 keyword: '',
                 currentTab: 0,
                 tabList: [
-                    { name: '待处理(2)' },
+                    { name: '待处理' },
                     { name: '已处理' }
                 ],
-                // 静态演示数据
-                pendingList: [
-                    {
-                        id: 1,
-                        title: '费用减免申请',
-                        applicant: '陈小将',
-                        customerName: '深圳市海克斯科技有限公司',
-                        orderNo: 'B123456',
-                        time: '2026-04-10 14:01',
-                        tag: '代理费减免'
-                    },
-                    {
-                        id: 2,
-                        title: '费用减免申请',
-                        applicant: '$_发起人姓名',
-                        customerName: '$_客户名称',
-                        orderNo: '$_关联客户名称',
-                        time: '2026-04-10 14:04',
-                        tag: '代理费减免'
-                    }
-                ],
-                doneList: [
-                    {
-                        id: 3,
-                        title: '费用减免申请',
-                        applicant: '陈小将',
-                        customerName: '深圳市海克斯科技有限公司',
-                        orderNo: 'B123456',
-                        time: '2026-04-10 14:01',
-                        tag: '代理费减免',
-                        status: 'reviewing',
-                        statusText: '审批中'
-                    },
-                    {
-                        id: 4,
-                        title: '费用减免申请',
-                        applicant: '陈小将',
-                        customerName: '深圳市海克斯科技有限公司',
-                        orderNo: 'B123456',
-                        time: '2026-04-10 14:01',
-                        tag: '代理费减免',
-                        status: 'approved',
-                        statusText: '已通过'
-                    }
-                ]
+                pendingList: [],
+                doneList: []
             };
         },
+        computed: {
+            currentList() {
+                return this.currentTab === 0 ? this.pendingList : this.doneList;
+            }
+        },
+        onShow() {
+            this.getData();
+        },
         methods: {
             /**
+             * 获取审批列表，根据当前 Tab 传不同 status
+             * @return {void}
+             */
+            getData() {
+                var statusVal = this.currentTab === 0 ? '0' : '1,2';
+                this.request(API.feeApproveList, 'GET', { status: statusVal }, true).then(res => {
+                    if (res.code === 0) {
+                        var { list = [], total = 0 } = res.data || {};
+                        if (this.currentTab === 0) {
+                            this.pendingList = list;
+                            this.$set(this.tabList, 0, { name: total ? `待处理(${total})` : '待处理' });
+                        } else {
+                            this.doneList = list;
+                        }
+                    }
+                });
+            },
+            /**
              * Tab 切换
              * @param {Object} item - 选中的 tab 项
              * @return {void}
              */
             onTabChange(item) {
                 this.currentTab = item.index;
+                this.getData();
             },
             /**
              * 审批

util/api.js

@@ -54,7 +54,11 @@ const API = {
   /**
    * 根据订单号获取客户名称
    */
-  getCustomerName: API_BASE + '/ajax/customerNameOption'
+  getCustomerName: API_BASE + '/ajax/customerNameOption',
+  /**
+   * 获取审批列表
+   */
+  feeApproveList: API_BASE + '/api/approve/feeApproveList'
 }