cmgd-mini-app/pages/todo/todoList.vue

<template>
	<view class="page-content">
		<z-paging ref="paging" :refresher-enabled="false" :auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false" v-model="dataList" @query="queryList">
			<view style="z-index: 10000;position: sticky;" :style="'top:0px'">
				<view class="top-bar">
					<nut-button type="primary" block plain @click="navigateTo('/pages/todo/todoAdd')">
						添加待办事项
					</nut-button>
				</view>
			</view>

			<view class="todo-item" v-for="(item, index) in dataList" :key="index">
				<view class="todo-item-content">
					<view class="todo-item-content-header" @click="onShowInfoPopup(item)">
						<view style="font-size: 24rpx"> 记录人: {{ item.user.staff_name }}</view>
						<view style="font-size: 24rpx"> 记录时间: {{ item.create_time }} </view>
					</view>
					<view class="todo-item-content-body" @click="onShowInfoPopup(item)">
						<view class="todo-item-content-body-desc">
							{{item.content}}
						</view>
					</view>
					<view class="todo-item-content-footer">
						<view style="font-size: 24rpx; color: red;" v-if="item.status.value === 0">
							状态:<text>{{item.status.text}}</text>
						</view>
						<view style="font-size: 24rpx; color:chartreuse;" v-else>
							状态:<text>{{item.status.text}}</text>
						</view>
						<view class="todo-item-content-footer-btn">
							<nut-button size="small" type="success" v-if="item.status.value == 0"
								@click="onMark(item.id,'1')">
								标记已办
							</nut-button>
							<nut-button size="small" type="danger" v-if="item.status.value == 1"
								@click="onMark(item.id,'0')">
								标记未办
							</nut-button>
						</view>
					</view>
				</view>
			</view>
		</z-paging>

		<!-- 弹出 -->
		<nut-popup :custom-style="{ height: '50%' }" v-model:visible="visibleInfoPopup" position="bottom"
			safe-area-inset-bottom :close-on-click-overlay="true" @close="onCloseInfoPopup">
			<view>
				<view class="title">记录人: {{tempTodo?.user?.staff_name}} </view>
				<view class="room-info">
					<view class="remark" v-if="tempTodo?.content">待办事项: {{tempTodo.content}}</view>
					<view class="room-id" v-if="tempTodo?.create_time">添加时间: {{tempTodo.create_time}}</view>
				</view>
			</view>
		</nut-popup>


	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue'

	import {
		onLoad,
		onShow,
	} from '@dcloudio/uni-app'

	import {
		fetchTodoList,
		fetchEditTodo
	} from '@/api/index';

	import {
		navigateTo,
	} from '@/utils/helper';

	const tempTodo = reactive({})

	const visibleInfoPopup = ref(false)
	const onShowInfoPopup = (todo) => {
		console.log("----", todo);
		Object.assign(tempTodo, todo)
		visibleInfoPopup.value = true
	}
	const onCloseInfoPopup = () => {
		Object.assign(tempTodo, {})
		visibleInfoPopup.value = false
		console.log("关闭");
	};


	const paging = ref(null);
	const dataList = ref([]);

	// 标记
	const onMark = (id, status) => {
		const params = {
			id: id,
			status: status
		}
		console.log(params);
		fetchEditTodo(params).then(res => {
			uni.showToast({
				title: '标记成功',
				icon: 'success',
			});
			paging.value.refresh();
		}).catch(res => {
			paging.value.refresh();
		});
	};



	// 获取列表
	const queryList = (pageNo, pageSize) => {
		const params = {
			pageSize,
			page: pageNo,

		}
		console.log(params);
		fetchTodoList(params).then(res => {
			console.log('res=>', res.list);
			paging.value.complete(res.list);
		}).catch(res => {
			paging.value.complete(false);
		});
	};




	const init = () => {
		console.log('init111');
	}

	onShow(() => {
		console.log("onshow---");
		console.log('paging.value', paging.value);
		if (paging.value) {
			paging.value.refresh();
		}
	});


	onMounted(() => {
		init();
	})
</script>

<style scoped lang="scss">
	.page-content {
		min-height: 100vh;
		background-color: #f2f3f5;

	}



	.top-bar {
		background: #fff;
		align-items: center;
		text-align: center;
		padding: 20rpx 60rpx;
	}


	.todo-item {

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		gap: 20rpx;


		.todo-item-content {
			// width: 100%;
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;
			/* 首尾贴边，中间均分 */

			// gap: 15px;
			.todo-item-content-header {
				display: flex;
				align-items: center;
				padding: 6rpx 0;
				gap: 20rpx;
			}

			.todo-item-content-body {
				padding: 6rpx 0;

				.todo-item-content-body-desc {
					color: #7c7c7c;
					font-size: 26rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}



			.todo-item-content-footer {
				padding: 6rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.todo-item-content-footer-btn {
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 10rpx;
				}
			}
		}
	}




	.title {
		padding: 0 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		font-weight: 400;
		text-align: center;
	}

	.room-info {
		text-align: left;
		padding: 20rpx 20rpx;
		color: #666;
		width: 100%;
		box-sizing: border-box;
	
		.remark {
			font-size: 26rpx;
		}
		
		.room-id {
			font-size: 26rpx;
			padding-top: 40rpx;
		}
	}
</style>