subject_gxj/xj_project_app/pages/overdue/index.vue

<template>
	<view class="container">
		<page-title>预期提醒</page-title>

		<view class="cards-list">
			<view class="card" v-for="(item,index) in itemList" :key="index">
				<card-title :numerator="index+1" :denominator="listTotal"></card-title>

				<view class="card-name">
					<view class="card-name-title">
						<text class="card-name-description">项目名称</text>
					</view>

					<text class="card-name-text">{{item.subName}}</text>
				</view>

				<view class="card-item">
					<view class="card-item-name">申报单位</view>

					<view class="card-item-content">{{item.sbdw}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">阶段说明</view>

					<view class="card-item-content">{{item.title}}</view>
				</view>

				<view class="card-status">
					<view class="card-status-item status-now">
						<view>预期类型</view>
						<view class="status-item-text">{{item.kindName}}</view>
					</view>

					<view class="card-status-item status-date">
						<view>计划日期</view>
						<view class="status-item-text">{{item.endDate}}</view>
					</view>

					<view class="card-status-item status-day">
						<view>预警天数</view>
						<view class="status-item-text"><text class="status-item-highlight">{{item.overDays}}</text>天</view>
					</view>
				</view>

				<view class="card-item">
					<view class="card-btn fat-btn" @click="gotoDetail(item.subId,item.subName)">项目查看</view>
				</view>
			</view>

			<empty-show v-if="itemList.length===0"></empty-show>
		</view>

		<u-back-top :scroll-top="scrollTop"></u-back-top>

		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
		onPageScroll
	} from "@dcloudio/uni-app"

	import {
		getOverdueList
	} from "@/api/work/overdue.js"

	function backToBefore() {
		uni.navigateBack({})
	};

	let scrollTop = ref(0)
	let loading = ref(true)

	// 参数
	let searchInfo = ref({
		pageNo: 1,
		pageSize: 10,
		overStatus: 0
	})

	function getList() {
		if(searchInfo.value.pageNo == 1){
			loading.value = true
		}
		getOverdueList(searchInfo.value).then(res => {
			loading.value = false
			res.data.list.forEach(item => {
				if (Number(item.overDays) && Number(item.overDays) < 0) {
					item.overDays = Math.abs(item.overDays)
				}
			})
			itemList.value = itemList.value.concat(res.data.list)
			listTotal.value = res.data.total

			if (res.data.total == searchInfo.value.pageNo*searchInfo.value.pageSize-(10 - res.data.list.length)) moreListFlag = false;
		}).catch(() => {
			loading.value = false
		})
	}

	let itemList = ref([])
	let listTotal = ref(0)

	function gotoDetail(id, subName) {
		uni.navigateTo({
			url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}`
		})
	}

	// 触底加载flag
	let moreListFlag = true

	onLoad(() => {
		getList()
	})

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop
	})

	onPullDownRefresh(() => {
		searchInfo.value.pageNo = 1;
		itemList.value = [];
		moreListFlag = true;
		try {
			getList();
		} finally {
			uni.stopPullDownRefresh()
		}
	})

	onReachBottom(() => {
		if (!moreListFlag) {
			return uni.showToast({
				title: "已经到底了。",
				icon: "none",
				duration: 2000
			})
		}
		searchInfo.value.pageNo++;
		getList();
	})
</script>

<style lang="scss" scoped>
	.card-status {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 128rpx;
		margin-top: 40rpx;

		.card-status-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 190rpx;
			height: 128rpx;
			padding: 16rpx 0 30rpx;
			border-radius: 20rpx;
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #626266;

			.status-item-text {
				font-size: 28rpx;
				font-weight: 400;
				color: #343437;
			}

			.status-item-highlight {
				font-size: 36rpx;
				font-weight: 400;
				color: #FF530F;
				margin-right: 12rpx;
			}
		}

		.status-now {
			background-color: #C3E6FF;
		}

		.status-date {
			background-color: #C2CAFF;
		}

		.status-day {
			background-color: #FFD2C0;
		}
	}
</style>