aiot-app/pages/home/wt/todo/todo.vue

<template>
	<view class="blacklog-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="我的待办" @clickLeft="back" background-color="#157A2C" color="#fff"></uni-nav-bar>

		<view class="list-container">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="kd-card">
						<view class="card-title">
							<text>{{ item.processInstance.name }}</text>
							<text class="card-time">{{ item.createTime }}</text>
						</view>
						<view>
							<view class="card-body">
								<view class="card-col" v-for="itm in colOptions">
									<text class="label">{{ itm.label }}</text>
									<text class="content">{{ item[itm.key] }}</text>
								</view>
							</view>
							<view class="card-footer">
								<u-button v-if="['0', '2'].includes(item.extensionProperty.taskHandlePlatform)" type="success" @click="handleDetail(item, 'handle')">处理</u-button>
								<u-button v-else type="error">请在PC端处理</u-button>
								<u-button type="info" @click="handleDetail(item, 'detail')">流程详情</u-button>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<view v-show="list.length === 0" class="no_data">
			<u-empty mode="data" textSize="30"></u-empty>
		</view>
	</view>
</template>

<script>
	import { getTodoTaskPage } from '@/api/wt/index.js'
	let [page, size, isEnd] = [1, 10, true]

	export default {
		computed: {
			colOptions() {
				return [
					{
						label: '任务名称',
						key: 'name'
					},
					{
						label: '流程发起人',
						key: `startUserNickname`
					}
				]
			}
		},
		data() {
			return {
				list: [],
				params: {
					status: '',
					name: ''
				}
			}
		},
		onShow() {
			page = 1
			this.list = []
			this.getList()
		},

		methods: {
			scrolltolower() {
				if (isEnd) return
				page++
				this.getList()
			},
			//miniHandleRouter
			handleDetail(item, type) {
				if (type == 'handle') {
					let queryParams = `id=${item.processInstance.id}&businessId=${item.businessId}&taskId=${item.id}&taskDefinitionKey=${item.taskDefinitionKey}&miniHandleRouter=${item.miniHandleRouter}&miniViewRouter=${item.miniViewRouter}`
					uni.navigateTo({
						url: `/pages/home/wt/components/processTask?${queryParams}`
					})
					//
				} else {
					uni.navigateTo({
						url: `/pages/home/wt/components/detail?processInstanceId=${item.processInstance.id}`
					})
				}
			},
			async getList() {
				let paging = {
					pageNo: page,
					pageSize: size
				}
				let par = Object.assign(paging, this.params)
				isEnd = false
				const data = await getTodoTaskPage(par)
				this.list.push(...data.list)
				this.list.forEach(item => {
					item.startUserNickname = item.processInstance.startUserNickname
				})
				isEnd = this.list.length >= data.count
			}
		}
	}
</script>

<style lang="scss" scoped>
	.blacklog-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.list-container {
		flex: 1;
		padding: 24rpx;
		background: $page-bg;
		flex: 1;
		overflow: hidden;
		// position: absolute;
		// top: 88rpx;
		// bottom: 0;
		// left: 0;
		// right: 0;

		/deep/ .u-list {
			height: 100% !important;
		}
	}

	.no_data {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #999;
		font-size: 50rpx;
	}

	.kd-card {
		font-size: 34rpx;
		color: #333;
		background-color: #fff;
		border-radius: 25rpx;
		word-break: break-all;
		margin-bottom: 30rpx;

		.status {
			font-weight: normal;
		}

		.card-title {
			font-size: 1rem;
			font-weight: bold;

			.card-time {
				font-weight: normal;
				color: #bfbfbf;
				font-size: 0.9rem;
				align-self: center;
			}
		}

		.card-footer,
		.card-title {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 30rpx;
		}

		.card-footer {
			padding: 10rpx 30rpx 18rpx 30rpx;
			font-size: 0.8rem;

			/deep/ .u-button {
				width: 48%;
			}
		}

		.card-body {
			padding: 0 28rpx;
			position: relative;
			min-height: 150rpx;
		}

		.card-body:after {
			content: '';
			position: absolute;
			left: auto;
			top: auto;
			bottom: 10rpx;
			right: auto;
			height: 1rpx;
			width: 91%;
			background-color: #f1f1f1;
		}

		.card-col {
			padding: 8rpx 0;
			display: flex;

			// line-height: ;

			.content {
				flex: 1;
				overflow: hidden;
				font-size: 0.9rem;
			}

			.label {
				font-size: 0.9rem;
				color: #999;
				width: 25%;
			}
		}
	}
</style>