crm-app-vue3/pages/acceptOrderOrder/index.vue

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

		<scroll-view class="scroll_wrap" scroll-y @scrolltolower="scrolltolower">
			<order-card v-for="order, index in ordersList" :key="order.receiptId" :order="order"
				@handleCardClick="handleCardClick" @handleBuzyBtnClick="handleBuzyBtnClick"></order-card>
			<view class="hasMore">
				{{ ordersList.length >= page.total ? '没有更多了~' : '向下滑动加载更多~' }}
			</view>
		</scroll-view>

		<view class="createOrder" @click="handleAddClick">
			<u-icon name="plus" size="30" color="#ffffff"></u-icon>
		</view>
	</view>
</template>
<script>
import orderCard from "./compounts/orderCard.vue";



export default {
	components: {
		orderCard
	},
	data() {
		return {
			ordersList: [],
			page: {
				pageSize: 10,
				pageNum: 1,
				total: 0
			}
		};
	},
	methods: {
		async getOrderList() {

			try {
				const result = await uni.$u.api.selectClueOrderFormList({
					pageSize: this.page.pageSize,
					pageNum: this.page.pageNum,
				});
				// 检查result是否有值，以及是否包含rows和total
				if (result && Array.isArray(result.rows)) {
					console.log('接单列表', result.rows);
					this.ordersList.push(...result.rows);
					// 只有当total存在且为数字时才更新
					if (typeof result.total === 'number') {
						this.page.total = result.total;
					}
				}
			} catch (error) {
				console.error('接单列表接口调用失败:', error);
				// 添加用户友好的错误提示
				uni.$u.toast('获取订单列表失败，请稍后重试');
			}
		},
		scrolltolower() {
			if (this.ordersList.length >= this.page.total) {
				return uni.$u.toast('没有更多了');
			}
			this.page.pageNum++;
			this.getOrderList();
		},
		reset() {
			this.ordersList = [];
			this.page.pageNum = 1;
		},
		// 跳转按钮接单
		handleCardClick(order) {
			console.log('点击了订单', order);
			//跳转
			// uni.navigateTo({
			// 		url: `/pages/orderDetail/index?orderId=${order.id}&item=${order.item}&type=${this.type}&clueId=${order.clueId}`,
			// 	})

			//跳转新的页面
			uni.navigateTo({
				url: `/pages/orderDetailNew/index?orderId=${order.id}&item=${order.item}&type=${this.type}&clueId=${order.clueId}`,
			})
		},
		// 在忙按钮先延迟把当前项目移动到队列末尾
		// 点击或者在忙的时候倒计时300s结束之后触发
		// 目前的问题是移动到当前10个item
		// 队列的最后，而不是全部队列的最后
		handleBuzyBtnClick(order) {
			console.log('在忙', order);
			// 先把当前项目移动到队列末尾
			const index = this.ordersList.findIndex(item => item.id == order.id);
			if (index != -1) {
				const item = this.ordersList.splice(index, 1)[0];
				this.ordersList.push(item);
			}
		},

	},
	onLoad() {
		this.getOrderList();
	}
}



</script>

<style scoped>
.scroll_wrap {
	height: calc(100vh - 44px);
}

.hasMore {
	text-align: center;
	padding: 20rpx 0;
	font-size: 24rpx;
	color: #999;
}

.createOrder {
	position: fixed;
	bottom: 20rpx;
	right: 20rpx;
	z-index: 999;
	background-color: #007AFF;
	border-radius: 50%;
	padding: 10rpx;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	width: 80rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>