subject_gxj/xj_project_app/pages/countAnalysis/fundPlan/through/index.vue

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

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

	import {
		getProjectInfoList
	} from "@/api/work/projectInfo.js";

	import {
		addFocus,
		cancelFocus
	} from "@/api/work/focus.js";

	// 返回头部
	let scrollTop = ref(0);

	// 获取列表
	let loading = ref(true);
	let moreListFlag = true;

	let projectList = ref([]);
	let listTotal = ref(0);

	let sendData = ref({});
	let searchInfo = reactive({
		pageNo: 1,
		pageSize: 10,
		beginDateStart: null,
		beginDateEnd: null,
		status: null,
	})
	const getList = () => {
		if (searchInfo.pageNo == 1) loading.value = true;
		let params = Object.assign({}, sendData, searchInfo);

		getProjectInfoList(params).then(res => {
			projectList.value = projectList.value.concat(res.data.list);
			listTotal.value = res.data.total;
			if (res.data.total == searchInfo.pageNo * searchInfo.pageSize - (10 - res.data.list.length)) {
				moreListFlag = false;
			}
		}).finally(() => {
			loading.value = false;
		})
	}
	const reGetList = () => {
		searchInfo.pageNo = 1;
		projectList.value = [];
		moreListFlag = true;
		getList();
	}

	// 折叠/展开
	const changeFoldItem = (status, id) => {
		let item = projectList.value.find(item => item.id === id);
		item.unfold = status;
	}

	// 详情
	const goToDetail = (id, subName) => {
		uni.navigateTo({
			url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}`
		})
	}

	// 收藏/取消
	const changeFocus = (id, status) => {
		let item = projectList.value.find(item => item.id === id);

		if (status) {
			cancelFocus({
				subId: id
			}).then(res => {
				if (res.code === 200) {
					item.isAttention = 0;
				}
			}).catch(() => {
				uni.showToast({
					title: "更改收藏状态失败。",
					icon: "none",
					duration: 2000
				})
			})
		} else {
			addFocus({
				subId: id
			}).then(res => {
				if (res.code === 200) {
					item.isAttention = 1;
				}
			}).catch(() => {
				uni.showToast({
					title: "更改收藏状态失败。",
					icon: "none",
					duration: 2000
				})
			})
		}
	}

	// 周报月报/更多
	const goToReport = (type, subId, subName) => {
		if (type === 'more') {
			uni.navigateTo({
				url: `/pages/projectBtnList/index?type=${type}&subId=${subId}&subName=${subName}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/projectInfo/report/index?type=${type}&subId=${subId}&subName=${subName}`
			})
		}
	}

	onLoad(options => {
		sendData = options;
		searchInfo.beginDateStart = `${options.year}/01/01`;
		searchInfo.beginDateEnd = `${options.year}/12/31`;
		searchInfo.status = options.status;
		getList();
	})

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

	onPullDownRefresh(() => {
		try {
			reGetList();
		} finally {
			uni.stopPullDownRefresh();
		}
	})

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

<template>
	<view class="container">
		<page-title>详情</page-title>

		<view class="cards-list">
			<view v-for="(item,index) in projectList" :key="index">
				<!-- 未折叠卡片 -->
				<view class="card" v-if="item.unfold">
					<!-- 项目名称 -->
					<view class="card-item">
						<view class="card-item-name">项目名称</view>
						<view class="card-item-content">{{item.subName ?? "--"}}</view>
					</view>

					<!-- 总投资（万元） -->
					<view class="card-item">
						<view class="card-item-name">总投资（万元）</view>
						<view class="card-item-content">{{item.amtTotal ?? "--"}}</view>
					</view>

					<!-- 年度计划投资-申报单位（万元） -->
					<view class="card-item">
						<view class="card-item-name">年度计划投资-申报单位（万元）</view>
						<view class="card-item-content">{{item.yearAmt ?? "--"}}</view>
					</view>

					<!-- 已完成投资（万元）-->
					<view class="card-item">
						<view class="card-item-name">已完成投资（万元）</view>
						<view class="card-item-content">{{item.yearAmtSj ?? "--"}}</view>
					</view>

					<!-- 当前状态 -->
					<view class="card-item">
						<view class="card-item-name">当前状态</view>
						<view class="card-item-content">{{item.status || "--"}}</view>
					</view>

					<!-- 功能按钮 -->
					<view class="card-item">
						<!-- 项目查看按钮(特殊) -->
						<view class="card-btn fat-btn special-btn" @click="goToDetail(item.id,item.subName)"
							v-if="item.usersub == 1">
							项目查看</view>
						<!-- 项目查看按钮 -->
						<view class="card-btn fat-btn project-btn" @click="goToDetail(item.id,item.subName)" v-else>项目查看
						</view>
						<!-- 关注按钮 -->
						<view class="card-btn fat-btn focus-btn" @click="changeFocus(item.id,item.isAttention)"
							v-if="!item.isAttention">关注</view>
						<view class="card-btn fat-btn focus-btn-no" @click="changeFocus(item.id,item.isAttention)" v-else>
							取消关注</view>
					</view>

					<!-- 周月年报按钮 -->
					<view class="card-item bottom-item">
						<view class="card-btn thin-btn report-btn" @click="goToReport('weekly',item.id,item.subName)">周报
						</view>

						<view class="card-btn thin-btn report-btn" @click="goToReport('monthly',item.id,item.subName)">月报
						</view>

						<view class="card-btn thin-btn more-btn" @click="goToReport('more',item.id,item.subName)">更多操作
						</view>
					</view>

					<!-- 编号 -->
					<view class="card-fold-option"
						:class="item.status_fgw === '2' ? 'card-fold-red' :item.status_fgw === '1' ?'card-fold-yellow':''">
						<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

						<view class="card-fold-center" @click.stop="changeFoldItem(false,item.id)">
							<view class="card-fold-btn card-unfold-btn"></view>
						</view>

						<view class="card-fold-chaos"></view>
					</view>
				</view>

				<!-- 折叠卡片 -->
				<view class="card-fold" v-else>
					{{item.subName ?? "--"}}

					<view class="card-fold-option"
						:class="item.status_fgw === '2' ? 'card-fold-red' :item.status_fgw === '1' ?'card-fold-yellow':''">
						<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

						<view class="card-fold-center" @click.stop="changeFoldItem(true, item.id)">
							<view class="card-fold-btn"></view>
						</view>

						<view class="card-fold-chaos"></view>
					</view>
				</view>
			</view>

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

			<view class="gap-bottom"></view>
		</view>

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

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

<style lang="scss">
	.card-fold {
		position: relative;
		width: 100%;
		min-height: 152rpx;
		margin-bottom: 20rpx;
		padding: 24rpx 30rpx 52rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.card-fold-option {
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 38rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: linear-gradient(270deg, #CADDFF 4%, rgba(219, 232, 255, 0) 100%);
		z-index: 999;

		.card-fold-count {
			flex: 1;
			font-size: 28rpx;
			color: #1869F6;
		}

		.card-fold-center {
			flex: 1;

			.card-fold-btn {
				width: 32rpx;
				height: 20rpx;
				margin: 0 auto;
				background-image: url("@/static/icon-fold.png");
				background-size: 100% 100%;
			}

			.card-unfold-btn {
				transform: rotate(180deg);
			}
		}

		.card-fold-chaos {
			flex: 1;
		}
	}

	.card-fold-red {
		background: linear-gradient(270deg, #FF8080 0%, rgba(219, 232, 255, 0) 100%);

		.card-fold-count {
			color: #FF0000;
		}

		.card-fold-center {
			.card-fold-btn {
				background-image: url("@/static/icon-fold-red.png");
			}
		}
	}

	.card-fold-yellow {
		background: linear-gradient(270deg, #FFAA00 4%, rgba(219, 232, 255, 0) 100%);

		.card-fold-count {
			color: #E19703;
		}

		.card-fold-center {
			.card-fold-btn {
				background-image: url("@/static/icon-fold-yellow.png");
			}
		}
	}

	.bottom-item {
		margin-bottom: 20rpx;
	}

	.project-btn {
		width: 48% !important;
		background: #1869F6;
	}

	.focus-btn {
		width: 48% !important;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 3rpx solid #1869F6;
		color: #1869F6;
	}

	.focus-btn-no {
		width: 48% !important;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 3rpx solid #FF2D2D;
		color: #FF2D2D;
	}

	.more-btn {
		background-color: #fff;
		color: #1869F6;
		font-size: 32rpx;
	}
</style>