subject_gxj/xj_project_app/pages/projectImage/index.vue

<script setup>
	import {
		ref,
		getCurrentInstance
	} from "vue";

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

	import {
		getJSDDlist,
		getHYFLlist,
		getJSXZlist,
		getXMLXlist,
		getProjectInfoList,
		getProjectGraphicList,
	} from "@/api/work/projectInfo.js";

	let searchInfo = ref({
		pageNo: 1,
		pageSize: 10,
		subName: null,
		propKind: null,
		indusKind: null,
		subjectId: null,
		kind: null,
		orderType: null,
	})

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

	const reSearch = function() {
		searchInfo.value.pageNo = 1;
		projectList.value = [];
		listTotal.value = 0;
		moreListFlag = true;
		getList();
	};

	let loading = ref(false);
	let moreListFlag = true;

	const getList = function() {
		const params = Object.assign({}, searchInfo.value);
		if (params.propKind) params.propKind = jsxzFull.find(item => item.value === params.propKind).key;
		if (params.indusKind) params.indusKind = hyflFull.find(item => item.value === params.indusKind).key;
		if (params.subjectId) params.subjectId = jsddFull.find(item => item.value === params.subjectId).key;
		if (params.kind) params.kind = xmlxFull.find(item => item.value === params.kind).key;
		if (params.orderType) params.orderType = orderFull.find(item => item.value === params.orderType).key;

		if (searchInfo.value.pageNo == 1) {
			loading.value = true
		};
		getProjectGraphicList(params).then(res => {
			loading.value = false
			projectList.value = projectList.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 jsxzFull = [];
	let jsxzColumns = ref([]);
	const getJSXZ = function() {
		getJSXZlist().then(res => {
			jsxzFull = res.data.list;
			jsxzColumns.value = [res.data.list.map(item => item.value)];
		})
	};
	let jsxzShow = ref(false);
	const jsxzShowChoose = function() {
		jsxzShow.value = true;
	}
	const jsxzClose = function(e) {
		if (e) searchInfo.value.propKind = e.value[0];
		jsxzShow.value = false;
	}

	// 行业分类
	let hyflFull = [];
	let hyflColumns = ref([]);
	const getHYFL = function() {
		getHYFLlist().then(res => {
			hyflFull = res.data.list;
			hyflColumns.value = [res.data.list.map(item => item.value)];
		})
	};
	let hyflShow = ref(false);
	const hyflShowChoose = function() {
		hyflShow.value = true;
	}
	const hyflClose = function(e) {
		if (e) searchInfo.value.indusKind = e.value[0];
		hyflShow.value = false;
	}

	// 建设地点
	let jsddFull = [];
	let jsddColumns = ref([]);
	const getJSDD = function() {
		getJSDDlist().then(res => {
			jsddFull = res.data.list;
			jsddColumns.value = [res.data.list.map(item => item.value)];
		})
	};
	let jsddShow = ref(false);
	const jsddShowChoose = function() {
		jsddShow.value = true;
	}
	const jsddClose = function(e) {
		if (e) searchInfo.value.subjectId = e.value[0];
		jsddShow.value = false;
	}

	// 项目类型
	let xmlxFull = [];
	let xmlxColumns = ref([]);
	const getXMLX = function() {
		getXMLXlist().then(res => {
			xmlxFull = res.data.list;
			xmlxColumns.value = [res.data.list.map(item => item.value)];
		})
	};
	let xmlxShow = ref(false);
	const xmlxShowChoose = function() {
		xmlxShow.value = true;
	}
	const xmlxClose = function(e) {
		if (e) searchInfo.value.kind = e.value[0];
		xmlxShow.value = false;
	}

	// 按金额排序
	let orderFull = [{
		key: null,
		value: "默认"
	}, {
		key: "asc",
		value: "升序"
	}, {
		key: "desc",
		value: "降序"
	}];
	let orderColumns = ref([
		["默认", "升序", "降序"]
	]);
	let orderShow = ref(false);
	const orderShowChoose = () => {
		orderShow.value = true;
	}
	const orderClose = function(e) {
		if (e) searchInfo.value.orderType = e.value[0];
		orderShow.value = false;
	}

	let modalshow = ref(false)

	const clickItem = id => {
		// modalshow.value = true
		uni.navigateTo({
			url: `/pages/projectImageAndVideo/index?subId=${id}`
		})
	}

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

	onLoad(() => {
		getJSXZ(); //获取建设性质
		getHYFL(); //获取行业分类
		getJSDD(); //获取建设地点
		getXMLX(); //获取项目类型
		reSearch();
	})

	let scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop
	})

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

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

<template>
	<view class="container">
		<page-title>项目形象进度</page-title>

		<view class="cards-list">
			<view class="card only-card">
				<!-- 项目名称 -->
				<view class="card-item first-card-item">
					<view class="card-item-name">项目名称</view>
					<input v-model="searchInfo.subName" class="card-item-input" placeholder="请填写项目名称"
						placeholder-style="color: #D8D8D8" maxlength="20" />
				</view>

				<!-- 建设性质 -->
				<view class="card-item" @click="jsxzShowChoose()">
					<view class="card-item-name">建设性质</view>
					<view class="card-item-description">
						<view v-if="searchInfo.propKind">{{searchInfo.propKind}}</view>
						<view v-else class="remind-text">请选择性质</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 行业分类 -->
				<view class="card-item" @click="hyflShowChoose()">
					<view class="card-item-name">行业分类</view>
					<view class="card-item-description">
						<view v-if="searchInfo.indusKind">{{searchInfo.indusKind}}</view>
						<view v-else class="remind-text">请选择分类</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 建设地点 -->
				<view class="card-item" @click="jsddShowChoose()">
					<view class="card-item-name">建设地点</view>
					<view class="card-item-description">
						<view v-if="searchInfo.subjectId">{{searchInfo.subjectId}}</view>
						<view v-else class="remind-text">请选择地点</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 项目类型 -->
				<view class="card-item" @click="xmlxShowChoose()">
					<view class="card-item-name">项目类型</view>
					<view class="card-item-description">
						<view v-if="searchInfo.kind">{{searchInfo.kind}}</view>
						<view v-else class="remind-text">请选择类型</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 按金额排序 -->
				<view class="card-item" @click="orderShowChoose()">
					<view class="card-item-name">按金额排序</view>
					<view class="card-item-description">
						<view v-if="searchInfo.orderType">{{searchInfo.orderType}}</view>
						<view v-else class="remind-text">请选择排序</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

			</view>

			<view class="search-btn" @click="reSearch()">确定</view>
			<view v-for="(item,index) in projectList" :key="index">
				<!-- 未折叠卡片 -->
				<view class="card card-padding" 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" @click="clickItem(item.id)">
						<view class="card-btn fat-btn">形象进度展示</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>

		<!-- 建设性质 -->
		<u-picker :show="jsxzShow" :columns="jsxzColumns" @confirm="jsxzClose" @cancel="jsxzClose" @close="jsxzClose"
			closeOnClickOverlay></u-picker>

		<!-- 行业分类 -->
		<u-picker :show="hyflShow" :columns="hyflColumns" @confirm="hyflClose" @cancel="hyflClose" @close="hyflClose"
			closeOnClickOverlay></u-picker>

		<!-- 建设地点 -->
		<u-picker :show="jsddShow" :columns="jsddColumns" @confirm="jsddClose" @cancel="jsddClose" @close="jsddClose"
			closeOnClickOverlay></u-picker>

		<!-- 项目类型 -->
		<u-picker :show="xmlxShow" :columns="xmlxColumns" @confirm="xmlxClose" @cancel="xmlxClose" @close="xmlxClose"
			closeOnClickOverlay></u-picker>

		<!-- 金额排序 -->
		<u-picker :show="orderShow" :columns="orderColumns" @confirm="orderClose" @cancel="orderClose" @close="orderClose"
			closeOnClickOverlay></u-picker>

		<u-modal :show="modalshow" title="提示" confirmText='退出' content='智慧工地在线正在建设中，请耐心等待!'
			@confirm='modalshow = false'></u-modal>
		<u-toast ref="uToastRef"></u-toast>
		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<style lang="scss" scoped>
	.search-btn {
		width: 98%;
		height: 84rpx;
		margin: 40rpx auto 56rpx;
		line-height: 84rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 36rpx;
		background: #1763E7;
		border-radius: 16rpx;
	}

	.card {
		padding: 40rpx;
		overflow: hidden;

		.card-value {
			position: absolute;
			top: 0;
			left: 0;
			width: 255rpx;
			height: 68rpx;
			padding-left: 40rpx;
			line-height: 68rpx;
			color: #1869F6;
			font-size: 32rpx;
			background: linear-gradient(90deg, #B2CEFF 0%, rgba(219, 232, 255, 0) 100%);
		}

		.card-online {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 422rpx;
			height: 68rpx;
			padding-right: 40rpx;
			text-align: right;
			line-height: 68rpx;
			color: #00737B;
			font-size: 32rpx;
			background: linear-gradient(270deg, #96F8FF 0%, rgba(219, 232, 255, 0) 100%);
		}

		.last-card-item {
			margin-bottom: 40rpx
		}
	}

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


	.card-padding {
		padding: 16rpx 40rpx 60rpx;
		overflow: hidden;
	}
</style>