feat(接单中心): 优化订单列表和下拉刷新功能

重构订单列表展示逻辑，新增下拉刷新和滑动加载更多功能，提升用户体验。调整样式以增强视觉效果，并修复部分冗余代码。

pages/pagereceivecenter/pagereceivecenter.vue

@@ -1,17 +1,13 @@
 <script>
-// import orderCard from "./compounts/orderCard.vue";
 import filterQuery from "../order/components/orderCenter/filterQuery.vue";
 import commissionFilterQuery from "../order/components/commission/filterQuery.vue";
-import commissionItem from "../order/components/commission/commissionItem.vue";
 import dayjs from "dayjs";
 
 // status 状态 1 发单（刚发出来） 2 接单（处理中） 3 收单（入库了） 4 未收（没有收到）
 export default {
     components: {
-        // orderCard,
         filterQuery,
         commissionFilterQuery,
-        commissionItem,
     },
     data() {
         return {
@@ -29,7 +25,6 @@ export default {
             followUpNotes: '',
             countdown: 300,
             countdownIntervals: null,
-            refresherTriggered: false, // 下拉刷新状态
 
             //筛选条件
             filterList: [
@@ -88,7 +83,7 @@ export default {
         // 根据当前选择的类型返回对应的查询参数
         currentQueryParams() {
             return this.activeType === 3 ? this.commissionQueryParams : this.queryParams;
-        }
+        },
     },
     onLoad() {
         // 初始化字典数据
@@ -124,6 +119,30 @@ export default {
     onUnload() {
         clearInterval(this.countdownInterval);
     },
+    // 下拉刷新
+    async onPullDownRefresh() {
+        uni.stopPullDownRefresh();
+        // 重置页码和列表
+        this.page.pageNum = 1;
+        this.queryParams.pageNum = 1;
+        this.commissionQueryParams.pageNum = 1;
+        this.orderList = [];
+        // 重新获取数据
+        await this.getOrderList();
+        // 重新获取统计数据
+        await this.getStatisticsSendStatus();
+    },
+    // 滑动到底部加载更多
+    onReachBottom() {
+        if (this.orderList.length >= this.page.total) {
+            //到底了，没有更多
+            return;
+        }
+        const params = this.activeType === 3 ? this.commissionQueryParams : this.queryParams;
+        params.pageNum++;
+        this.page.pageNum++;
+        this.getOrderList();
+    },
     watch: {
         countdown: {
             handler(newVal, oldVal) {
@@ -204,21 +223,6 @@ export default {
                 uni.$u.toast(errorMsg);
             }
         },
-        // 下拉刷新
-        async onRefresh() {
-            this.refresherTriggered = true;
-            // 重置页码和列表
-            this.page.pageNum = 1;
-            this.queryParams.pageNum = 1;
-            this.commissionQueryParams.pageNum = 1;
-            this.orderList = [];
-            // 重新获取数据
-            await this.getOrderList();
-            // 重新获取统计数据
-            await this.getStatisticsSendStatus();
-            // 停止刷新
-            this.refresherTriggered = false;
-        },
         //获取统计数据
         async getStatisticsSendStatus() {
             // 如果是"我的分成"，不需要统计数据
@@ -295,6 +299,16 @@ export default {
 
             }
         },
+        // 格式化金额
+        formatAmount(amount) {
+            if (!amount) return '-';
+            return parseFloat(amount).toLocaleString();
+        },
+        // 格式化金额
+        formatAmount(amount) {
+            if (!amount) return '-';
+            return parseFloat(amount).toLocaleString();
+        },
         // 跳转订单详情
         toOrderDetail(order) {
             //点卡片看详情
@@ -310,18 +324,6 @@ export default {
 
         },
 
-        //滑动加载
-        scrolltolower() {
-            // console.log('到底了');
-            if (this.orderList.length >= this.page.total) {
-                //到底了，没有更多
-            } else {
-                const params = this.activeType === 3 ? this.commissionQueryParams : this.queryParams;
-                params.pageNum++;
-                this.page.pageNum++;
-                this.getOrderList();
-            }
-        },
 
         //获取全部标签
         async getAllTags() {
@@ -481,116 +483,150 @@ export default {
 
 
         <!-- 统计数据 -->
-        <scroll-view scroll-x class="statusScrollView" style="width: 100%;">
-            <view class="statisticsContainer">
-                <view v-for="item in statisticsSendStatus" :key="item.status" @click="changeStatus(item.status)"
-                    class="statisticsItem" :class="{ 'activeStatusClass': item.status == activeStatus }">
-                    <view>{{ item.statusName }}</view>
-                    <view>({{ item.count || 0 }})</view>
+        <view v-if="activeType !== 3" class="send_status_wrap">
+            <scroll-view scroll-x>
+                <view class="statisticsContainer">
+                    <view v-for="item in statisticsSendStatus" :key="item.status" @click="changeStatus(item.status)"
+                        class="statisticsItem" :class="{ 'activeStatusClass': item.status == activeStatus }">
+                        <view>{{ item.statusName }}</view>
+                        <view>({{ item.count || 0 }})</view>
+                    </view>
                 </view>
-            </view>
-        </scroll-view>
-
+            </scroll-view>
+        </view>
 
-        <view class="scrollViewContainer">
-            <scroll-view class="scrollView" scroll-y refresher-enabled :refresher-triggered="refresherTriggered"
-                @refresherrefresh="onRefresh" @scrolltolower="scrolltolower">
-                <transition-group name="order-move" tag="div">
-                    <!-- 我的分成 - 使用专门的分成卡片组件 -->
-                    <view class="commission_item_wrap" v-for="item in orderList" :key="activeType === 3 ? item.id : (item.receiptId + item.id)" v-if="activeType === 3">
-                        <commission-item :item="item" :type="'2'"></commission-item>
+        <!-- 订单列表容器 -->
+        <view class="order_list_wrap">
+            <transition-group name="order-move" tag="div">
+                <!-- 我的分成 - 使用专门的分成卡片 -->
+                <view class="commission_item" v-for="item in orderList" :key="activeType === 3 ? item.id : (item.receiptId + item.id)" v-if="activeType === 3">
+                    <view class="commission_top">
+                        <view class="top_left">{{ item.receiptItem || '-' }}</view>
+                        <view class="top_right">
+                            <text class="account_type">{{ item.accountType === '1' ? '前端' : '后端' }}</text>
+                        </view>
                     </view>
-                    
-                    <!-- 全部列表和我的接发单 - 使用订单卡片 -->
-                    <!-- <orderCard v-for="item in orderList" :key="item.receiptId + item.id" :order="item"
-                        @handleBtnClick="handleBtnClick">
-                    </orderCard> -->
-                    <view class="orderCard" v-for="item in orderList" :key="activeType === 3 ? item.id : (item.receiptId + item.id)"
-                        v-if="activeType !== 3" @click.stop="toOrderDetail(item)">
-                            <view class="bandAndPrice">
-                                <view class="bandName">{{ item.itemBrand || '暂无品牌' }}</view>
-                                <view class="price">￥{{ item.priceRange || '?' }}</view>
+                    <view class="commission_info">
+                        <view class="info_row">
+                            <view class="info_item">
+                                <text class="label">电话: </text>
+                                <text class="value">{{ item.phone || '-' }}</text>
                             </view>
-
-                            <view class="mainLind">
-                                <!-- <view class="mainLindImg">
-                                    <image :src="'/static/acceptOrder/orderCardPic.jpg'" v-if="item.src" />
-                                </view> -->
-                                <view class="itemName">{{ item.item || '暂无项目' }}</view>
-
-                                <view class="mainLindInfo">
-                                    <view class="infoItem">
-                                        <view class="infoItemTitle">发单人:</view>
-                                        <view>{{ item.createNickName || '未知' }}</view>
-                                    </view>
-                                    <view class="infoItem">
-                                        <view class="infoItemTitle">机构：</view>
-                                        <view>{{ item.orgName || '暂无机构' }}</view>
-                                    </view>
-                                    <view class="infoItem">
-                                        <view class="infoItemTitle">电话：</view>
-                                        <view>{{ item.phone || '暂无电话' }}</view>
-                                    </view>
-                                    <view class="infoItem">
-                                        <view class="infoItemTitle">接单人：</view>
-                                        <view>{{ item.identificationName || '暂无所属人' }}</view>
-                                    </view>
-                                    <view class="infoItem">
-                                        <view class="infoItemTitle">运营人：</view>
-                                        <view>{{ item.clueOperationName || '暂无运营人' }}</view>
-                                    </view>
-                                    <view class="infoItem">
-                                        <view class="infoItemTitle">发单日期：</view>
-                                        <view>{{ item.sendDate || '暂无时间' }}</view>
-                                    </view>
-                                </view>
+                        </view>
+                        <view class="info_row">
+                            <view class="info_item">
+                                <text class="label">收单时间: </text>
+                                <text class="value">{{ item.receiptDate || '-' }}</text>
+                            </view>
+                        </view>
+                        <view class="info_row">
+                            <view class="info_item">
+                                <text class="label">收单人: </text>
+                                <text class="value">{{ item.receiptNickName || '-' }}</text>
+                            </view>
+                            <view class="info_item">
+                                <text class="label">公司: </text>
+                                <text class="value">{{ item.orgName || '-' }}</text>
+                            </view>
+                        </view>
+                        <view class="info_row">
+                            <view class="info_item">
+                                <text class="label">分成所属人: </text>
+                                <text class="value">{{ item.userName || '-' }}</text>
+                            </view>
+                            <view class="info_item">
+                                <text class="label">分成比例: </text>
+                                <text class="value">{{ item.commissionRate || '-' }}%</text>
                             </view>
+                        </view>
+                    </view>
+                    <view class="commission_amount">
+                        <view class="amount_item">
+                            <view class="amount_label">业绩</view>
+                            <view class="amount_value primary">{{ formatAmount(item.commissionAmount) }}</view>
+                        </view>
+                        <view class="amount_item">
+                            <view class="amount_label">毛业绩</view>
+                            <view class="amount_value">{{ formatAmount(item.grossAmount) }}</view>
+                        </view>
+                    </view>
+                </view>
+                
+                <!-- 全部列表和我的接发单 - 使用订单卡片 -->
+                <view class="orderCard" v-for="item in orderList" 
+                    :key="activeType === 3 ? item.id : (item.receiptId + item.id)"
+                    v-if="activeType !== 3" 
+                    @click.stop="toOrderDetail(item)">
+                    <view class="bandAndPrice">
+                        <view class="bandName">{{ item.itemBrand || '暂无品牌' }}</view>
+                        <view class="price">￥{{ item.priceRange || '?' }}</view>
+                    </view>
 
-                            <view class="tags">
-                                <view class="tag" v-for="(tag, index) in item.tags" :key="index"
-                                    :style="{ backgroundColor: tag.color, opacity: 0.8 }">
-                                    {{ tag.name }}</view>
+                    <view class="mainLind">
+                        <view class="itemName">{{ item.item || '暂无项目' }}</view>
 
+                        <view class="mainLindInfo">
+                            <view class="infoItem">
+                                <view class="infoItemTitle">发单人:</view>
+                                <view>{{ item.createNickName || '未知' }}</view>
+                            </view>
+                            <view class="infoItem">
+                                <view class="infoItemTitle">机构：</view>
+                                <view>{{ item.orgName || '暂无机构' }}</view>
+                            </view>
+                            <view class="infoItem">
+                                <view class="infoItemTitle">电话：</view>
+                                <view>{{ item.phone || '暂无电话' }}</view>
                             </view>
+                            <view class="infoItem">
+                                <view class="infoItemTitle">接单人：</view>
+                                <view>{{ item.identificationName || '暂无所属人' }}</view>
+                            </view>
+                            <view class="infoItem">
+                                <view class="infoItemTitle">运营人：</view>
+                                <view>{{ item.clueOperationName || '暂无运营人' }}</view>
+                            </view>
+                            <view class="infoItem">
+                                <view class="infoItemTitle">发单日期：</view>
+                                <view>{{ item.sendDate || '暂无时间' }}</view>
+                            </view>
+                        </view>
+                    </view>
 
-                            <view class="Btns">
-                                <!-- status 状态 1 发单（刚发出来） 2 接单（处理中） 3 收单（入库了） 4 未收（没有收到） -->
-
-                                <view class="btnGroup" v-if="item && (item.status == '1')">
-                                    <view class="card-button" @click.stop="handleBtnClick('acceptOrder', item)">立即接单</view>
-                                    <view class=" card-button isBusy" @click.stop="handleBtnClick('isBusy', item)">
-                                        <view>
-                                            在忙
-                                        </view>
-                                        <view v-if="countdown > 0">
-                                            （{{ countdown }} s）
-                                        </view>
-                                    </view>
-                                </view>
-
-                                <view class="btnGroup" v-if="item && (item.status == '2')">
-                                    <view class="card-button willFollow" @click.stop="handleBtnClick('willFollow', item)">
-                                        待跟进
-                                    </view>
-                                    <view class="card-button isBusy" @click.stop="handleBtnClick('tag', item)">打标签</view>
-                                </view>
-
-                                <!-- <view class="btnGroup" v-if="item && (item.status == '3')">
-                                    <view class="card-button share" @click.stop="handleBtnClick('share', item)">一键分享</view>
-                                </view> -->
-
-                                <view class="btnGroup" v-if="item && (item.status == '4')">
-                                    <view class="card-button oneFollow" @click.stop="handleBtnClick('oneFollow', item)">待跟进
-                                    </view>
-                                </view>
+                    <view class="tags">
+                        <view class="tag" v-for="(tag, index) in item.tags" :key="index"
+                            :style="{ backgroundColor: tag.color, opacity: 0.8 }">
+                            {{ tag.name }}
+                        </view>
+                    </view>
+
+                    <view class="Btns">
+                        <!-- status 状态 1 发单（刚发出来） 2 接单（处理中） 3 收单（入库了） 4 未收（没有收到） -->
+
+                        <view class="btnGroup" v-if="item && (item.status == '1')">
+                            <view class="card-button" @click.stop="handleBtnClick('acceptOrder', item)">立即接单</view>
+                            <view class="card-button isBusy" @click.stop="handleBtnClick('isBusy', item)">
+                                <view>在忙</view>
+                                <view v-if="countdown > 0">（{{ countdown }} s）</view>
+                            </view>
+                        </view>
 
+                        <view class="btnGroup" v-if="item && (item.status == '2')">
+                            <view class="card-button willFollow" @click.stop="handleBtnClick('willFollow', item)">
+                                待跟进
                             </view>
+                            <view class="card-button isBusy" @click.stop="handleBtnClick('tag', item)">打标签</view>
                         </view>
-                </transition-group>
-                <view class="hasMore">
-                    {{ orderList.length >= page.total ? '没有更多了~' : '向下滑动加载更多~' }}
+
+                        <view class="btnGroup" v-if="item && (item.status == '4')">
+                            <view class="card-button oneFollow" @click.stop="handleBtnClick('oneFollow', item)">待跟进</view>
+                        </view>
+                    </view>
                 </view>
-            </scroll-view>
+            </transition-group>
+            <view class="hasMore">
+                {{ orderList.length >= page.total ? '没有更多了~' : '向下滑动加载更多~' }}
+            </view>
         </view>
 
 
@@ -645,6 +681,12 @@ export default {
 </template>
 
 <style scoped lang="scss">
+.container {
+    box-sizing: border-box;
+    min-height: 100vh;
+    background-color: #f5f5f5;
+}
+
 .hasMore {
     text-align: center;
     padding: 20rpx 0;
@@ -655,7 +697,7 @@ export default {
 .queryParams_wrap {
     display: flex;
     background: #fff;
-    padding: 10px 0;
+    padding: 14px 0;
     border-bottom: 1px solid #f0f0f0;
 
     .query,
@@ -680,42 +722,113 @@ export default {
     }
 }
 
-.scrollViewContainer {
-    height: calc(100vh - 44px - 44px - 27px - 60px - 10rpx);
-}
+.send_status_wrap {
+    width: 690rpx;
+    padding: 0 30rpx;
+    margin-top: 20rpx;
+    display: flex;
 
-.followUpScroll {
-    height: 600rpx;
+    .statisticsContainer {
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        white-space: nowrap;
+    }
 }
 
-.scrollView {
-    height: 100%;
+.order_list_wrap {
+    padding: 10px 0;
 }
 
-/* 订单移动动画 */
-.order-move-enter-active,
-.order-move-leave-active {
-    transition: all 0.5s ease;
-}
+/* 分成卡片样式 */
+.commission_item {
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    margin: 20rpx 20rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
 
-.order-move-enter-from,
-.order-move-leave-to {
-    opacity: 0;
-    transform: translateY(30px);
-}
+    .commission_top {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 15rpx;
 
-.order-move-move {
-    transition: transform 0.5s ease;
-}
+        .top_left {
+            font-size: 36rpx;
+            font-weight: bold;
+            color: #202020;
+        }
 
+        .top_right {
+            .account_type {
+                background: #108cff;
+                color: #fff;
+                padding: 8rpx 16rpx;
+                border-radius: 20rpx;
+                font-size: 24rpx;
+            }
+        }
+    }
 
+    .commission_info {
+        margin-bottom: 15rpx;
 
+        .info_row {
+            display: flex;
+            margin-bottom: 16rpx;
 
+            &:last-child {
+                margin-bottom: 0;
+            }
 
+            .info_item {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                font-size: 28rpx;
 
+                .label {
+                    color: #9b9aa2;
+                    margin-right: 16rpx;
+                    min-width: 120rpx;
+                }
 
+                .value {
+                    color: #202020;
+                }
+            }
+        }
+    }
+
+    .commission_amount {
+        display: flex;
+        justify-content: space-around;
+        padding: 30rpx 0;
+        border-top: 1rpx solid #f0f0f0;
+        background: #f8f9fb;
+        border-radius: 20rpx;
+
+        .amount_item {
+            text-align: center;
+
+            .amount_label {
+                font-size: 24rpx;
+                color: #9b9aa2;
+                margin-bottom: 10rpx;
+            }
 
+            .amount_value {
+                font-size: 32rpx;
+                font-weight: bold;
+                color: #202020;
 
+                &.primary {
+                    color: #108cff;
+                }
+            }
+        }
+    }
+}
 
 /* 订单卡片主容器 */
 .orderCard {
@@ -761,13 +874,6 @@ export default {
     flex-direction: column;
 }
 
-/* 主要内容行图片容器 */
-.orderCard .mainLind .mainLindImg image {
-    width: 150rpx;
-    height: 150rpx;
-    border-radius: 20rpx;
-}
-
 /* 主要内容行信息容器 */
 .orderCard .mainLind .mainLindInfo {
     display: grid;
@@ -777,6 +883,7 @@ export default {
     font-size: 24rpx;
     color: #6b7280;
     text-wrap: nowrap;
+    width: 100%;
 
     .infoItem {
         display: flex;
@@ -839,6 +946,9 @@ export default {
     cursor: pointer;
     height: 60rpx;
     line-height: 60rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 /* 忙碌状态按钮 */
@@ -846,8 +956,6 @@ export default {
     background-color: #fff;
     color: #6B7280;
     border-color: #6B7280;
-    display: flex;
-    justify-content: center;
 }
 
 /* 待跟进状态按钮 */
@@ -856,11 +964,6 @@ export default {
     color: #2563EB;
 }
 
-/* 分享按钮 */
-.orderCard .Btns .btnGroup .card-button.share {
-    width: 100%;
-}
-
 /* 单独跟进按钮 */
 .orderCard .Btns .btnGroup .card-button.oneFollow {
     width: 100%;
@@ -868,6 +971,35 @@ export default {
     color: #2563EB;
 }
 
+.followUpScroll {
+    height: 600rpx;
+}
+
+/* 订单移动动画 */
+.order-move-enter-active,
+.order-move-leave-active {
+    transition: all 0.5s ease;
+}
+
+.order-move-enter-from,
+.order-move-leave-to {
+    opacity: 0;
+    transform: translateY(30px);
+}
+
+.order-move-move {
+    transition: transform 0.5s ease;
+}
+
+
+
+
+
+
+
+
+
+
 .cancelBtn {
     margin-top: 20rpx;
 }
@@ -883,27 +1015,21 @@ export default {
 
 
 
-.statisticsContainer {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    white-space: nowrap;
-    padding: 0 0rpx;
-    margin-top: 20rpx;
-}
-
 .statisticsItem {
-    display: flex;
-    justify-content: center;
+    font-size: 30rpx;
+    display: inline-flex;
     align-items: center;
-    background-color: #fff;
-    padding: 10rpx 20rpx;
-    border-radius: 15rpx;
-    font-size: 24rpx;
-    font-weight: 700;
-    margin: 0 10rpx;
+    background: #fff;
+    margin-right: 30rpx;
+    padding: 8rpx 16rpx;
     white-space: nowrap;
-    flex-shrink: 0;
+    border-radius: 6rpx;
+    color: #333;
+
+    &.activeStatusClass {
+        color: #fff;
+        background: #4c8afe;
+    }
 }
 
 .activeStatusClass {
@@ -960,7 +1086,8 @@ export default {
     background-color: #fff;
 }
 
-.commission_item_wrap {
-    padding: 20px 20px;
+::v-deep .u-navbar {
+    flex-shrink: 0;
 }
+
 </style>