assess-app/page_task/draft/index.vue

<template>
	<view class="total-page page-box page-env-20 scroll_content task-bg">
		<Nav :title="'草稿箱'" :genre="1" :back="true" is_fixed></Nav>
		<view>
			<Search :placeholder="'客户姓名或电话'"></Search>
		</view>
		<EnScroll ref="scroll" :navHeight="0" is_tabHeight @onRefresh="onRefresh" @onScrollBottom="onScrollBottom">
			<view class="draft-item r-40 sys-background-fff" v-for="(item,index) in  list">
				<view class="item-left">
					<view class="left-top left-item">
						<view class="top-name sys-weight-600 size-30 text-color-12">{{item.name}}</view>
						<view class="top-product sys-weight-400 size-24 text-color-009 r-10">{{item.product_name}}
						</view>
					</view>
					<view class="left-content left-item">
						<view class="sys-weight-400 size-24 text-color-12">身份证：</view>
						<view class="sys-weight-600 sys-size-28 text-color-12">{{item.id_number}}</view>
					</view>
					<view class="left-bottom left-item">
						<view class=" size-24 text-color-999">保存时间：</view>
						<view class=" size-24 text-color-999">{{item.created_at}}</view>
					</view>

				</view>
				<view class="item-right">
					<view
						class="but-item but-edit size-28 sys-weight-500 text-color-fff button-background sys-radius-100"
						@click.stop="editDraft(item.id)">编辑</view>
					<view class="but-item but-del  size-28 sys-weight-500 text-color-666 "
						@click.stop="delDraft(item.id,index)">删除</view>
				</view>

			</view>
			<en-blank v-if="list.length<=0"></en-blank>

		</EnScroll>
	</view>
</template>

<script>
	import {
		getDraftList
	} from "@/api/task";
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";

	export default {
		components: {
			EnBlank
		},
		data() {
			return {
				list: [],
				page: 1,
				total: null,
				isAjax: false,
			};
		},
		mounted() {
			uni.$on('setNewDraft', () => {
				if (this.$refs.draftRef) {
					this.startList()
				}
			})
			this.startList()
		},
		methods: {
			startList() {
				this.total = 999;
				this.list = [];
				this.page = 1;
				this.isAjax = false;
				this.getDraftList();

			},
			delDraft(draftId, index) {
				uni.showModal({
					title: '警告',
					content: '是否删除当前草稿！',
					success: (res) => {
						if (res.confirm) {
							delDraft({
								'draftId': draftId
							}).then((res) => {
								this.$refs.draftRef.list.splice(index, 1)
							})
						}
					}
				});

			},
			editDraft(id) {
				uni.navigateTo({
					url: '/page_task/information/information?draftId=' + id
				});
			},
			getDraftList() {
				if (this.isAjax || (this.total <= this.list.length)) {
					return;
				}
				this.isAjax = true;
				getDraftList({
					'page': this.page
				}).then((res) => {
					if (res.code === 1) {
						this.list.push(...res.data.items)
						this.total = res.data.total
						this.isAjax = false
							++this.page;
					}
				})
			},
			// 下拉刷新
			onRefresh() {
				// uni.showLoading({
				// 	title: '数据加载中'
				// })
				// setTimeout(() => {
				// 	uni.showToast({
				// 		title: '加载完成',
				// 		icon: 'none'
				// 	})
				// 	this.$refs.scroll.onEndPulling()
				// }, 1000)
				console.log("下拉刷新");
				this.startList()
			},
			// 滚动到底部
			onScrollBottom() {

				this.getDraftList();

				console.log("到底部了");
			},
		},
	}
</script>

<style lang="scss">
	.draft-item {
		margin: 20rpx 32rpx 0;
		padding: 25rpx 30rpx;
		display: flex;
		justify-content: space-between;

		.item-left {
			.left-item {
				display: flex;
				justify-content: left;
				align-items: center;
			}

			.left-top {
				height: 52rpx;

				.top-product {
					background-color: rgba(15, 177, 96, 0.1);
					padding: 9rpx 22rpx;
					margin-left: 20rpx;
				}
			}

			.left-content {
				margin-top: 24rpx;
				height: 40rpx;
			}

			.left-bottom {
				margin-top: 24rpx;
				height: 34rpx;
			}

		}

		.item-right {
			padding-top: 20rpx;

			.but-item {
				width: 172rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
			}

			.but-del {
				margin-top: 15rpx;
				box-sizing: border-box;
				border-radius: 99rpx 99rpx 99rpx 99rpx;
				border: 1rpx solid #666666;
			}
		}

	}
</style>