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 in ordersList" :key="order.id" :order="order" @handleCardClick="handleCardClick"></order-card>
			<view class="hasMore">
				{{ ordersList.length >= page.total ? '没有更多了~' : '向下滑动加载更多~' }}
			</view>
		</scroll-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() {

			const { rows,total } = await uni.$u.api.selectClueOrderFormList({
				pageSize: this.page.pageSize,
				pageNum: this.page.pageNum,
			}
			);
			console.log('接单列表', rows);
			this.ordersList.push(...rows);
			this.page.total=total;
		},
		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}`,
			})
		},

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



</script>

<style scoped>
	.scroll_wrap {
		height: calc( 100vh - 44px );
	}
	.hasMore {
		text-align: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #999;
	}
</style>