接单中心增加筛选项

pages/orderDetailNew/components/pageOne.vue

@@ -28,8 +28,12 @@
 
         <!-- 聊天记录卡片 -->
         <view class="card_wrap">
-            <view class="card-title">聊天记录</view>
-            <view class="image-upload-container">
+            <view class="card-title">
+                <text @click="chatRecordOrCallRecord = 'chatRecords'">聊天记录</text>
+                <text style="margin: 0 10rpx;">|</text>
+                <text @click="chatRecordOrCallRecord = 'callRecords'">通话记录</text>
+            </view>
+            <view class="image-upload-container" v-if="chatRecordOrCallRecord === 'chatRecords'">
                 <view class="image-list">
                     <view class="image-item" v-for="(item, index) in chatRecordsUploadList"
                         :key="'chatRecords-' + index">
@@ -41,6 +45,9 @@
                     </view>
                 </view>
             </view>
+            <view class="image-upload-container" v-if="chatRecordOrCallRecord === 'callRecords'">
+
+            </view>
         </view>
 
         <!-- 基本信息卡片 -->
@@ -117,6 +124,7 @@ export default {
             chatRecordsUploadList: [],
             // 待绑定的图片列表
             bindList: [],
+            chatRecordOrCallRecord: 'chatRecords',
         }
     },
     watch: {
@@ -136,12 +144,14 @@ export default {
                     setTimeout(() => {
                         this.getList('2', '1', newVal.id, this.orderDetail.itemBrand);
                         this.getList('2', '2', newVal.id, this.orderDetail.itemBrand);
+                        this.getCallRecords();
                     }, 100)
 
                 }
             }
         },
     },
+
     methods: {
 
         // 电话卡片点击事件
@@ -380,7 +390,14 @@ export default {
                 urls: urlList,
                 current: src
             })
-        }
+        },
+        //获取通话记录
+        async getCallRecords() {
+            console.log('这里是参数', this.currentReceipt.clueId);
+            // const { data } = await uni.$u.api.getCallClueFileByClueId({ clueId: this.currentReceipt.clueId });
+            const { data } = await uni.$u.api.getCallClueFileByClueId({ clueId: 1998278069905854466 });
+            console.log('通话记录:', data);
+        },
 
     },
 

pages/pagereceivecenter/pagereceivecenter.vue

@@ -20,12 +20,24 @@ export default {
             followUpModelShow: false,
             followUpNotes: '',
             countdown: 300,
-            countdownIntervals: null
+            countdownIntervals: null,
+
+            //筛选条件
+            filterList: [
+                { name: '全部列表', type: 1 },
+                { name: '我的接发单', type: 2 }
+            ],
+
+            statisticsSendStatus: [],//中间统计数据
+            activeType: 1,//当前选择的筛选类型,顶部tab的类型
+            activeStatus: '',//当前选择的状态,统计数据的类型
         }
     },
     onLoad() {
         //初始调用
         this.getOrderList();
+        this.getStatisticsSendStatus();
+
         this.countdownInterval()
         // uni.navigateTo({
         //     url: `/pages/orderDetailNew/index?orderId=5464&item=测试发单&type=undefined&clueId=1973381744953516033`,
@@ -61,6 +73,9 @@ export default {
                 const result = await uni.$u.api.selectClueOrderFormList({
                     pageSize: this.page.pageSize,
                     pageNum: this.page.pageNum,
+                }, {
+                    type: this.activeType,
+                    status: this.activeStatus,
                 });
 
                 console.log('接单列表', result);
@@ -79,7 +94,12 @@ export default {
                 uni.$u.toast('获取订单列表失败，请稍后重试');
             }
         },
-
+        //获取统计数据
+        async getStatisticsSendStatus() {
+            const { data } = await uni.$u.api.statisticsSendStatus({ type: this.activeType });
+            console.log('统计数据是', data)
+            this.statisticsSendStatus = data;
+        },
         // 处理按钮点击事件
         handleBtnClick(btnType, order) {
 
@@ -203,6 +223,24 @@ export default {
             }
             this.followUpNotes = '';
         },
+
+        // 切换筛选条件
+        async changeFilter(param) {
+            this.activeType = param.type;
+
+            this.page.pageNum = 1;
+            this.orderList = [];
+
+            this.getOrderList();
+            this.getStatisticsSendStatus()
+        },
+        //切换统计数据的类型
+        changeStatus(param) {
+            this.activeStatus = param;
+            this.page.pageNum = 1;
+            this.orderList = [];
+            this.getOrderList();
+        },
     }
 }
 </script>
@@ -211,6 +249,18 @@ export default {
     <view class="container">
         <u-navbar title="接单中心" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
 
+        <!-- 筛选条件 -->
+        <u-tabs :list="filterList" @click="changeFilter"></u-tabs>
+
+        <!-- 统计数据 -->
+        <view class="statisticsContainer">
+            <view v-for="item in statisticsSendStatus" :key="item.status" @click="changeStatus(item.status)"
+                class="statisticsItem">
+                <view>{{ item.statusName }}</view>
+                <view>({{ item.count || 0 }})</view>
+            </view>
+        </view>
+
         <view class="scrollViewContainer">
             <scroll-view class="scrollView" scroll-y @scrolltolower="scrolltolower">
                 <transition-group name="order-move" tag="div">
@@ -337,7 +387,7 @@ export default {
 }
 
 .scrollViewContainer {
-    height: calc(100vh - 44px);
+    height: calc(100vh - 44px - 44px - 27px - 10rpx);
 }
 
 .scrollView {
@@ -529,4 +579,28 @@ export default {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
 }
+
+
+
+
+
+
+.statisticsContainer {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 20rpx;
+}
+
+.statisticsItem {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    padding: 10rpx 20rpx;
+    border-radius: 15rpx;
+    font-size: 24rpx;
+    font-weight: 700;
+    width: 100rpx;
+}
 </style>