crm-app-vue3/pages/pagereceivecenter/pagereceivecenter.vue

<script>
import orderCard from "./compounts/orderCard.vue";

export default {
    components: {
        orderCard,
    },
    data() {
        return {
            orderList: [],
            page: {
                pageSize: 10,
                pageNum: 1,
                total: 0
            },
        }
    },
    onLoad() {
        //初始调用
        // this.getOrderList();
        uni.navigateTo({
            url: `/pages/orderDetailNew/index?orderId=5464&item=测试发单&type=undefined&clueId=1973381744953516033`,
        })
    },
    methods: {
        //获取列表数据
        async getOrderList() {
            try {
                const result = await uni.$u.api.selectClueOrderFormList({
                    pageSize: this.page.pageSize,
                    pageNum: this.page.pageNum,
                });

                console.log('接单列表', result);
                // 把数组按照status的大小排序，从小到大
                result.rows.sort((a, b) => {
                    return a.status - b.status;
                })


                this.orderList.push(...result.rows);
                this.page.total = result.total;

            } catch (error) {
                console.error('接单列表接口调用失败:', error);
                // 添加用户友好的错误提示
                uni.$u.toast('获取订单列表失败，请稍后重试');
            }
        },

        // 处理按钮点击事件
        handleBtnClick(btnType, order) {

            if (btnType == 'acceptOrder') {
                //去接单
                console.log('去接单', order)

                //跳转接单form
                uni.navigateTo({
                    url: `/pages/orderDetailNew/index?orderId=${order.id}&item=${order.item}&type=${this.type}&clueId=${order.clueId}`,
                })
            } else if (btnType == 'isBusy') {
                //在忙
                console.log('在忙', order)


                //当前订单移动到末尾
                this.orderList.push(this.orderList.splice(this.orderList.indexOf(order), 1)[0]);


            } else if (btnType == 'willFollow') {
                //待跟进
                console.log('待跟进', order)
            } else if (btnType == 'tag') {
                //打标签
                console.log('打标签', order)
            } else if (btnType == 'share') {
                //一键分享
                console.log('一键分享', order)
            } else if (btnType == 'oneFollow') {
                //待跟进
                console.log('待跟进', order)
            }
        },

        //滑动加载
        scrolltolower() {
            console.log('到底了');
            if (this.orderList.length >= this.page.total) {
                return uni.$u.toast('没有更多了');
            }
            this.page.pageNum++;
            this.getOrderList();
        },

    }
}
</script>

<template>
    <view class="container">
        <u-navbar title="接单中心" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>

        <view class="scrollViewContainer">
            <scroll-view class="scrollView" scroll-y @scrolltolower="scrolltolower">
                <transition-group name="order-move" tag="div">
                    <orderCard v-for="item in orderList" :key="item.receiptId + item.id" :order="item"
                        @handleBtnClick="handleBtnClick">
                    </orderCard>
                </transition-group>
                <view class="hasMore">
                    {{ orderList.length >= page.total ? '没有更多了~' : '向下滑动加载更多~' }}
                </view>
            </scroll-view>
        </view>





    </view>
</template>

<style scoped lang="scss">
.hasMore {
    text-align: center;
    padding: 20rpx 0;
    font-size: 24rpx;
    color: #999;
}

.scrollViewContainer {
    height: calc(100vh - 44px);
}

.scrollView {
    height: 100%;
}

/* 订单移动动画 */
.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;
}
</style>