warst/warst-h5/pages/home/toDoList.vue

<template>
	<!-- 待办提醒  -->
	<view class="to-do-list">
		<view class="header">
			<view class="dflex acenter">
				<view class="wait-for">
					<view class="num-tips">
						<msgNum value="10"></msgNum>
					</view>
					<image
						src="@/static/images/home/to-do-list.png"
						class="h-icon"
					></image>
				</view>

				<text class="title"> 待办提醒 </text>
			</view>
			<view class="nav-right" @click="goToAll">
				<text>全部</text>
				<u-icon
					class="arrow-right"
					name="arrow-right"
					size="12"
				></u-icon>
			</view>
		</view>
		<c-scroll-paging :queryList="queryList">
			<view :key="item.id" v-for="item in rows" class="list-row">
				<view class="row-header">
					<view class="img-box">
						<image
							class="left-icon"
							:src="getIcon(item.type)"
						></image>
						<text class="row-title">{{ item.title }}</text>
					</view>
					<text class="row-date">{{ item.date }}</text>
				</view>
				<view class="row-work-time">
					加班时间：{{ item.workTime }}
				</view>
			</view>
		</c-scroll-paging>
	</view>
</template>

<script>
import msgNum from '@/components/msgNum/index.vue';
export default {
	name: 'toDoList',
	components: {
		msgNum,
	},
	data() {
		return {
			rows: [],
		};
	},
	methods: {
		goToAll() {
			uni.switchTab({ url: '/pages/waitHandle/index' });
		},
		getIcon(type) {
			const obj = {
				0: 'jiaban',
				1: 'buka',
				2: 'qingjia',
				3: 'chuchai',
			};
			return require(`@/static/images/home/waitFor/${obj[type]}.png`);
		},
		queryList(e) {
			console.log(e);
			return new Promise((resolve) => {
				const rows = [
					{
						id: '1',
						type: '0',
						title: '张三加班审批',
						date: '1分钟前',
						workTime: '3月10日 20:00-3月10日 22:00',
					},
					{
						id: '2',
						type: '1',
						title: '张三补卡审批',
						date: '1分钟前',
						workTime: '3月10日 20:00-3月10日 22:00',
					},
					{
						id: '3',
						type: '3',
						title: '张三补卡审批',
						date: '1分钟前',
						workTime: '3月10日 20:00-3月10日 22:00',
					},
					{
						id: '4',
						type: '3',
						title: '张三补卡审批',
						date: '1分钟前',
						workTime: '3月10日 20:00-3月10日 22:00',
					},
					{
						id: '5',
						type: '1',
						title: '张三补卡审批',
						date: '1分钟前',
						workTime: '3月10日 20:00-3月10日 22:00',
					},
				];
				setTimeout(() => {
					resolve({
						rows,
					});
					this.rows = rows;
				}, 0);
			});
		},
	},
};
</script>

<style scoped lang="scss">
.to-do-list {
	display: flex;
	flex-direction: column;
	flex: 1;
	background-color: #fff;
	border-radius: 6px;
	padding: 32rpx;
	margin-top: 26rpx;
	margin-bottom: 26rpx;
	box-shadow: 0px 2px 10px 0px rgba(69, 66, 230, 0.08);

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.wait-for {
			position: relative;
			width: 24px;
			height: 24px;
			margin-right: 12rpx;
			.num-tips {
				position: absolute;
				right: 0;
				top: 0;
				transform: scale(0.8) translate(50%, -50%);
				z-index: 1;
			}

			.h-icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 12rpx;
			}
		}

		.nav-right {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #8c93a3;
			.arrow-right {
				margin-top: 6rpx;
			}
		}
	}

	.list-row {
		background: #f8f9fc;
		padding: 24rpx;
		font-size: 14px;
		line-height: 48rpx;
		margin-bottom: 20rpx;

		.row-header {
			display: flex;
			justify-content: space-between;

			.img-box {
				display: flex;
				align-items: center;

				.left-icon {
					width: 18px;
					height: 18px;
					margin-right: 10rpx;
				}
			}

			.row-date {
				color: #a2a8b8;
				font-size: 13px;
			}
		}
		.row-work-time {
			font-size: 13px;
			color: #7b7e8c;
		}
	}
}
</style>