subject_gxj/xj_project_app_2024_2_18/pages/overdue/index.vue

<template>
	<view class="container">
		<page-title>预警提醒（{{listTotal}}）</page-title>

		<view class="cards-list" style="padding-bottom: 50rpx;">
			<view class="card" v-for="(item,index) in itemList" :key="index">
				<view class="card-title">
					<text class="card-name-num">{{(index+1<10?'0'+(index+1):index+1)}}</text>
					<text class="card-name-text">{{item.subName}}</text>
					<view class="card-status-item status-day">
						<view class="over-days">
							<text class="status-item-highlight">{{item.overDays}}</text>
							<view class="yujing">预警天数</view>
						</view>
						<view class="up-arrow" @click="upFunc(index+1)">
							<image src="../../static/images/upArrow.svg" mode="" v-if="chooseId!==(index+1)"></image>
							<image src="../../static/images/downArrow.svg" mode="" v-if="chooseId==(index+1)"></image>
						</view>
					</view>
				</view>
				<view class="card-up-item"
					:style="chooseId==(index+1) ? {height: '6rem', padding: '24rpx 16rpx 0rpx 24rpx',borderTop: '2rpx dashed #DDDDDD',marginTop: '24rpx'}:''">
					<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-item">
						<view class="card-item-name">逾期类型</view>
						<view class="card-item-content">{{item.kindName||'--'}}</view>
					</view>
					<view class="card-item">
						<view class="card-item-name">计划日期</view>
						<view class="card-item-content">{{item.endDate||'--'}}</view>
					</view>
					<view class="card-item-ckeck">
						<view class="card-btn fat-btn" @click="gotoDetail(item.subId,item.subName)">查看</view>
					</view>
				</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> -->

			<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: 2
	})

	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}`
		})
	}

	let chooseId = ref(0)

	function upFunc(num) {
		if (chooseId.value === num) {
			chooseId.value = 0;
		} else {
			chooseId.value = num;
		}
	}

	// 触底加载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>
	.line {
		width: 100%;
	}

	.card-index {
		position: absolute;
		top: 100rpx;
		right: 30rpx;
		width: 90rpx;
		display: flex;
		justify-content: center;
		white-space: nowrap;
		color: #ccc;
		font-size: 30rpx;
	}

	.car-btn {
		position: absolute;
		bottom: 40rpx;
		right: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 128rpx;
		height: 56rpx;
		background: #D6ECFF;
		border-radius: 30rpx;
		font-size: 22rpx;
		color: #002F69;
		font-weight: 500;
	}


	.cards-list {
		.card {
			box-shadow: 0rpx 0rpx 8rpx 0rpx #D8EEFF;
			border-radius: 12rpx;
			padding: 24rpx 0rpx 24rpx 8rpx !important;

			.card-title {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.card-name-num {
					width: 64rpx;
					height: 64rpx;
					border-radius: 4rpx;
					border: 4rpx solid #F4F4F4;
					font-size: 24rpx;
					color: #B5B5B5;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.card-name-text {
					width: calc(100% - 260rpx);
					height: 80rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					text-align: left;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}

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

				.status-day {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 144rpx;
					height: 80rpx;
					background: #FA6400;
					border-radius: 20rpx 0rpx 0rpx 20rpx;
					padding-left: 28rpx;

					.over-days {
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 5rpx;
						.status-item-highlight {
							font-weight: 500;
							font-size: 36rpx;
							color: #FFFF00;
							line-height: 38rpx;
							text-stroke: 2rpx #FFFFFF;
							display: flex;
							justify-content: center;
							font-style: normal;
						}

						.yujing {
							font-weight: 300;
							font-size: 32rpx;
							zoom: 0.5;
							color: #FFFFFF;
							line-height: 16rpx;
							text-align: left;
							white-space: nowrap;
						}
					}

					.up-arrow {
						width: 32rpx;
						height: 32rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.card-up-item {
				display: block !important;
				width: 100%;
				padding: 0rpx;
				position: relative;
				height: 0;
				overflow: hidden;
				transition: all .3s;
				border-top: 1rpx dashed transparent;
				padding: 0rpx 16rpx 0rpx 24rpx;

				.card-item {

					.card-item-name,
					.card-item-content {
						font-weight: 500;
						font-size: 24rpx;
						line-height: 40rpx;
						text-align: left;
					}

					.card-item-name {
						color: #999999;
					}

					.card-item-content {
						color: #444444;
					}
				}

				.card-item-ckeck {
					position: absolute;
					bottom: 16rpx;
					right: 16rpx;

					.fat-btn {
						width: 112rpx;
						height: 48rpx;
						background: #D6ECFF;
						border-radius: 30rpx;
						font-weight: 600;
						font-size: 28rpx;
						color: #002F69;
						line-height: 48rpx;
						text-align: center;
						font-style: normal;
					}
				}
			}
		}
	}
</style>