aiot-app/pages/pda/workOrder/index/index.vue

<template>
	<view class="content-box">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="工单列表" background-color="#157A2C" color="#fff"
			@clickLeft="back"></uni-nav-bar>

		<view class="top-wrapper">
			<uni-section>
				<uni-easyinput prefixIcon="search" style="width: 460rpx" v-model="searchFrom.keyWord" placeholder="请输入">
				</uni-easyinput>
			</uni-section>

			<button class="search_btn" @click="doSearch">搜索</button>

			<image class="menu_icon" src="~@/static/pda/menu.svg"></image>



		</view>

		<view class="list_box">

			<u-list @scrolltolower="scrolltolower" key="list" :preLoadScreen="page * 10">
				<u-list-item v-for="(item, index) in dataList" :key="index">
					<workCard :item="item" @handleDetail="handleDetail"></workCard>
				</u-list-item>


				<u-list-item v-if="dataList.length === 0">
			          <view style='margin-top: 20vh;'>
						  <u-empty iconSize='150'  textSize='32' text='暂无工单'>
						  </u-empty>
					  </view>
				</u-list-item>

			</u-list>
		</view>

	</view>
</template>

<script>
	import workCard from '../../components/workCard.vue'

	import {
		workorderPage
	} from '@/api/pda/workOrder.js'
	let [isEnd] = [false]
	export default {
		components: {
			workCard
		},
		data() {
			return {
				page: 1,
				size: 10,
				dataList: [],

				searchFrom: {
					keyWord: null
				},


			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			async getList() {
				let params = {
					pageNum: this.page,
					customerClient: 2,
					size: this.size,
					workOrderType: 1,
					status: [4, 5, 6, 7],
					...this.searchFrom
				}

				isEnd = false
				const res = await workorderPage(params)
		

				if (params.pageNum === 1) {
					this.dataList = []
				}

				this.dataList.push(...res.list)
				isEnd = this.dataList.length >= res.count

			},


			doSearch() {},


			scrolltolower() {
				if (isEnd) return
				this.page++
				this.getList()
			},



			handleDetail(item) {
				let url = '/pages/pda/workOrder/extrusionMolding/index'
				url += `?id=${item.id}&title=${item.taskName}`
		
				uni.navigateTo({
					url
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: $page-bg;
	}

	.top-wrapper {
		background-color: #fff;
		display: flex;
		width: 750rpx;
		height: 88rpx;
		padding: 16rpx 32rpx;
		align-items: center;
		gap: 16rpx;

		/deep/.uni-section {
			margin-top: 0px;
		}

		/deep/.uni-section-header {
			padding: 0px;

		}

		.search_btn {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 24rpx;
			background: $theme-color;
			font-size: 32rpx;
			color: #fff;
			margin: 0;
			margin-left: 26rpx;
		}

		.menu_icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 14rpx;
		}
	}


	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 16rpx 0;

		.u-list {
			height: 100% !important;
		}
	}
</style>