warst/warst-h5/pages/com/msgNotification/index.vue

<template>
	<!-- 消息  -->
	<view class="msg-container">
		<c-scroll-paging
			refresherBackground="#f8f8f8"
			:queryList="queryList"
			:refresher-enabled="isDropDown"
		>
			<uni-swipe-action-item
				:right-options="rOptions"
				@click="rowClick"
				:key="item.id"
				v-for="item in rows"
				class="swipe-item"
			>
				<view 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.remarks }}
					</view>
				</view>
			</uni-swipe-action-item>
		</c-scroll-paging>
	</view>
</template>

<script>
export default {
	name: 'msgNotification',
	data() {
		return {
			isDropDown: true,
			rOptions: [
				{
					text: '删除',
					style: {
						backgroundColor: '#ee0a24',
					},
				},
			],
			rows: [],
		};
	},
	methods: {
		rowClick() {
			console.log(111);
		},
		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分钟前',
						remarks: '张三提交了加班申请',
					},
					{
						id: '2',
						type: '1',
						title: '您的加班申请已通过',
						date: '1分钟前',
						remarks: '缺卡时间：3月10日 20:00上班打卡',
					},
					{
						id: '3',
						type: '3',
						title: '张三补卡审批',
						date: '1分钟前',
						remarks: '张三提交了加班申请',
					},
					{
						id: '4',
						type: '3',
						title: '张三补卡审批',
						date: '1分钟前',
						remarks: '缺卡时间：3月10日 20:00上班打卡',
					},
					{
						id: '25',
						type: '1',
						title: '张三补卡审批',
						date: '1分钟前',
						remarks: '缺卡时间：3月10日 20:00上班打卡 ',
					},
					{
						id: '15',
						type: '1',
						title: '张三补卡审批',
						date: '1分钟前',
						remarks: '缺卡时间：3月10日 20:00上班打卡 ',
					},
					{
						id: '5',
						type: '1',
						title: '张三补卡审批',
						date: '1分钟前',
						remarks: '缺卡时间：3月10日 20:00上班打卡 ',
					},
					{
						id: '35',
						type: '1',
						title: '张三补卡审批',
						date: '1分钟前',
						remarks: '缺卡时间：3月10日 20:00上班打卡 ',
					},
					{
						id: '45',
						type: '1',
						title: '张三补卡审批',
						date: '1分钟前',
						remarks: '缺卡时间：3月10日 20:00上班打卡 ',
					},
					{
						id: '55',
						type: '1',
						title: '张三补卡审批',
						date: '1分钟前',
						remarks: '缺卡时间：3月10日 20:00上班打卡 ',
					},
					{
						id: '65',
						type: '1',
						title: '张三补卡审批',
						date: '1分钟前',
						remarks: '缺卡时间：3月10日 20:00上班打卡 ',
					},
					{
						id: '75',
						type: '1',
						title: '张三补卡审批',
						date: '1分钟前',
						remarks: '缺卡时间：3月10日 20:00上班打卡 ',
					},
					{
						id: '10',
						type: '1',
						title: '张三补卡审批',
						date: '1分钟前',
						remarks: '缺卡时间：3月10日 20:00上班打卡 ',
					},
				];
				setTimeout(() => {
					resolve({
						rows,
					});
					this.rows = rows;
				}, 0);
			});
		},
	},
};
</script>

<style scoped lang="scss">
.msg-container {
	padding: 28rpx;
	height: 100%;
	background-color: #f8f8f8;

	.swipe-item {
		background: #fff;
		margin-bottom: 20rpx;
	}

	.list-row {
		padding: 24rpx;
		font-size: 14px;
		line-height: 48rpx;

		.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>