clsd/app/pages/user/resume/application/task_list.vue

<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="left">
					<text class="icon">&#xe627;</text>
				</view>
				<view class="con">
					<view class="date">{{ item.createTime }}</view>
					<view class="del" @click="remove(item)">删除</view>
					<images v-model="item.pic" :read="true"></images>
					<view class="contents">{{ item.contents }}</view>
				</view>
			</view>
			<u-empty v-if="list.length == 0"></u-empty>
		</view>
		<view class="mfooter">
			<button class="btn" @click="show()">
				<text class="icon">&#xe7c4;</text>
				<text>添加</text>
			</button>
		</view>
		<task ref="task" @confirm="confirm()"></task>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			param: {}
		};
	},
	onLoad(e) {
		this.param.taskId = e.taskId;
		this.getData();
	},
	methods: {
		getData() {
			this.http.request({
				url: '/app/task/list',
				data: this.param,
				success: (res) => {
					this.list = res.data.data;
					this.list.forEach((item) => {
						item.pic = item.pic.split(',');
						item.createTime = uni.$u.timeFrom(Date.parse(item.createTime));
					});
				}
			});
		},
		show() {
			this.$refs.task.init(this.param.taskId);
		},
		confirm() {
			this.getData();
		},
		remove(item) {
			uni.showModal({
				title: '提示',
				content: '确定删除?',
				success: (res) => {
					if (res.confirm) {
						this.http.request({
							url: '/app/task/remove/' + item.id,
							success: (res) => {
								uni.showToast({ title: '删除成功' });
								this.list.splice(this.list.indexOf(item), 1);
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.list {
	padding-top: 16px;
	.item {
		padding: 20px 15px 20px 20px;
		display: flex;
		.left {
			flex: 0.1;
			border-left: 1px solid darkgray;
			margin-top: -44px;
			.icon {
				float: left;
				margin-left: -12px;
				position: relative;
				background-color: $main-color;
				color: white;
				border-radius: 50%;
				padding: 5px;
				margin-top: 8px;
				font-size: 15px;
			}
		}
		.con {
			flex: 1;
			background-color: white;
			padding: 0px 12px 10px 12px;
			position: relative;
			border-radius: 5px;
			font-size: 14px;
			.date {
				top: -31px;
				left: 0px;
				position: absolute;
			}
			.del {
				top: -31px;
				right: 0px;
				position: absolute;
				color: #F44336;
			}
			.contents {
				padding-top: 5px;
			}
		}
	}
}
</style>