subject_gxj/xj_project_app/pages/projectInfo/detail/index.vue

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

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

	import {
		getProjectInfoDetail,
	} from "@/api/work/projectInfo.js"

	import {
		getProjectPreFlow,
	} from "@/api/work/preFlow.js"

	let projectName = ref("项目信息")

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

	let scrollTop = ref(0)
	let backBtnShow = ref(false)

	let popupShow = ref(false)
	let popupTitle = ref(null)
	let callShow = ref(false)

	// 展示弹窗
	function showPopup(type, text) {
		let callShowList = ['tel', 'tel_lead']
		if (callShowList.includes(type)) {
			callShow.value = true
		}
		popupTitle.value = text
		popupShow.value = true
	}
	// 关闭弹窗
	function hidePopup() {
		popupShow.value = false
		callShow.value = false
	}
	// 复制该项
	function pasteItem() {
		uni.setClipboardData({
			data: popupTitle.value
		});
	}
	// 拨打电话
	function callItem() {
		plus.device.dial(popupTitle.value, true);
	}

	let fileShowFlag = ref(false)
	let fileAddre = ref(null)

	function showFile(type, filePath) {
		uni.navigateTo({
			url: `/pages/projectInfo/media/index?type=${type}&filePath=${filePath}`
		})
	}

	// 基本信息
	let baseInfoList = ref([{
		description: '项目名称',
		key: "sub_name",
		value: ''
	}, {
		description: '申请单位',
		key: "unitName",
		value: ''
	}, {
		description: '主体单位',
		key: "mainName",
		value: ''
	}, {
		description: '监管单位',
		key: "manageName",
		value: ''
	}, {
		description: '审批单位',
		key: "approveName",
		value: ''
	}, {
		description: '建设性质',
		key: "propKindName",
		value: ''
	}, {
		description: '行业分类',
		key: "indusName",
		value: ''
	}, {
		description: '项目类型',
		key: 'kindName',
		value: ''
	}, {
		description: '责任主体',
		key: 'subjectName',
		value: ''
	}, {
		description: '隐藏状态',
		key: 'isHideName',
		value: ''
	}])

	// 资金信息
	let sourceInfoList = ref([{
			description: '投资性质',
			key: "kindNature",
			value: ""
		}, {
			description: '总投资金额（万元）',
			key: "amt_total",
			value: ""
		},
		{
			description: '到位资金（万元）',
			key: "amt_comptotal",
			value: ""
		},
		{
			description: '年度计划投资-发改委（万元）',
			key: "amt_year",
			value: ""
		},
		{
			description: '年度计划投资-申报单位（万元）',
			key: "sumYearAmt",
			value: ""
		},
		{
			description: '年度实际投资（万元）',
			key: "sumYearAmtSj",
			value: ""
		},
	])
	let fundSource = ref({})

	// 资金来源
	let subSourceInfoList = ref([]);

	function filterData(data) {
		let baseInfoData = data.projectsInfo
		for (let i in baseInfoList.value) {
			baseInfoList.value[i].value = baseInfoData[baseInfoList.value[i].key] || "--"
		}
		// 资金信息
		for (let i in sourceInfoList.value) {
			sourceInfoList.value[i].value = baseInfoData[sourceInfoList.value[i].key] != null ? baseInfoData[sourceInfoList
				.value[i].key] : "--";
		}
		fundSource.value = data.projectsInfo
		// 年度计划投资-申报单位（万元）
		let sumYearAmt = sourceInfoList.value.find(item => item.key === "sumYearAmt");
		sumYearAmt.value = data.sumYearAmt;
		//年度实际投资（万元）
		let sumYearAmtSj = sourceInfoList.value.find(item => item.key === "sumYearAmtSj");
		sumYearAmtSj.value = data.sumYearAmtSj;

		// 资金来源
		for (let i in data.subSource) {
			subSourceInfoList.value.push({
				description: data.subSource[i].sourceName + "（万元）",
				value: data.subSource[i].amt
			})
		}

	}

	let preFlowList = ref([]);

	onLoad((option) => {
		projectName.value = option.subName
		getProjectInfoDetail({
			subId: option.id
		}).then(res => {
			filterData(res.data)
		})

		getProjectPreFlow({
			subId: option.id
		}).then(res => {
			let obj = {
				"0": "未开始办理",
				"1": "开始办理",
				"2": "办理完成",
				"3": "退回"
			}
			res.data.list.forEach(item => {
				item.statusConf = obj[item.statusConf]
			})
			preFlowList.value = res.data.list;
		})
	})

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop
		// backBtnShow.value = e.scrollTop > 90
	})
</script>

<template>
	<view class="container">
		<page-title>项目详情</page-title>
		<!-- 基本信息 -->
		<view class="item-card base-info">
			<view class="item-title">
				<view class="item-title-pic">
					<view class="item-title-center item-title-baseInfo">
						<view class="item-title-icon">
							<image src="@/static/icon-baseInfo.png" mode=""></image>
						</view>
						<view class="item-title-text">基本信息</view>
					</view>
				</view>
				<view class="item-title-empty"></view>
			</view>

			<view class="item-info" v-for="item in baseInfoList">
				<view class="item-info-description">{{item.description}}</view>
				<view class="item-info-name" @click="showPopup(item.key,item.value)">{{item.value}}</view>
			</view>

			<view class="item-info">
				<view class="item-info-description">计划开工时间</view>
				<view class="item-info-name" @click="showPopup('beginTime',fundSource.begin_date)">
					{{fundSource.begin_date || "--"}}
				</view>
			</view>

			<view class="item-info">
				<view class="item-info-description">计划完工时间</view>
				<view class="item-info-name" @click="showPopup('endTime',fundSource.end_date)">
					{{fundSource.end_date || "--"}}
				</view>
			</view>

			<view class="item-info item-info-half item-info-start">
				<view class="item-info-description">负责人</view>
				<view class="item-info-name" @click="showPopup('nameZrr',fundSource.name_zrr)">
					{{fundSource.name_zrr || "--"}}
				</view>
			</view>

			<view class="item-info item-info-half item-info-start">
				<view class="item-info-description item-info-icon">
					<u-icon name="phone" color="#343437" size="20"></u-icon>
				</view>
				<view class="item-info-name number" @click="showPopup('tel',fundSource.tel)">{{fundSource.tel || "--"}}</view>
			</view>

			<view class="item-info item-info-half item-info-start">
				<view class="item-info-description">总负责人</view>
				<view class="item-info-name" @click="showPopup('name_lead',fundSource.name_lead)">
					{{fundSource.name_lead || "--"}}
				</view>
			</view>

			<view class="item-info item-info-half item-info-start">
				<view class="item-info-description item-info-icon">
					<u-icon name="phone" color="#343437" size="20"></u-icon>
				</view>
				<view class="item-info-name number" @click="showPopup('tel_lead',fundSource.tel_lead)">
					{{fundSource.tel_lead || "--"}}
				</view>
			</view>

			<view class="item-info">
				<view class="item-info-description">建设内容及规模</view>
			</view>
			<view class="item-info-content" @click="showPopup('content',fundSource.content)">{{fundSource.content}}</view>

		</view>

		<!-- 问题状态 -->
		<view class="item-card fund-source">
			<view class="item-title">
				<view class="item-title-pic">
					<view class="item-title-center item-title-question">
						<view class="item-title-icon">
							<image src="@/static/icon-question.png" mode=""></image>
						</view>
						<view class="item-title-text">问题状态</view>
					</view>
				</view>
				<view class="item-title-empty"></view>
			</view>

			<view class="item-info lamp-info">
				<view class="item-info-description">红黄灯</view>
				<view class="item-info-name">
					<view class="lamp" v-if="!fundSource.status_fgw">
						<image src="@/static/lamp-green.svg" alt=""></image>
						<text style="color: #05A22F;">绿灯</text>
					</view>

					<view class="lamp" v-if="fundSource.status_fgw === '1'">
						<image src="@/static/lamp-yellow.svg" alt=""></image>
						<text style="color: #E47907;">黄灯</text>
					</view>

					<view class="lamp" v-if="fundSource.status_fgw === '2'">
						<image src="@/static/lamp-red.svg" alt=""></image>
						<text style="color: #F91818;">红灯</text>
					</view>
				</view>
			</view>

			<view class="item-info">
				<view class="item-info-description">问题原因</view>
			</view>
			<view class="item-info-content" @click="showPopup('colorReason',fundSource.colorReason)">
				{{fundSource.colorReason ?? "无"}}
			</view>
		</view>

		<!-- 资金信息 -->
		<view class="item-card fund-source">
			<view class="item-title">
				<view class="item-title-pic">
					<view class="item-title-center item-title-fundSource">
						<view class="item-title-icon">
							<image src="@/static/icon-fundSource.png" mode=""></image>
						</view>
						<view class="item-title-text">资金信息</view>
					</view>
				</view>
				<view class="item-title-empty"></view>
			</view>

			<view class="item-info" v-for="item in sourceInfoList">
				<view class="item-info-description">{{item.description}}</view>
				<view class="item-info-name money" @click="showPopup(item.key,item.value)">{{item.value}}</view>
			</view>
		</view>

		<!-- 资金来源 -->
		<view class="item-card fund-source">
			<view class="item-title">
				<view class="item-title-pic">
					<view class="item-title-center item-title-subSource">
						<view class="item-title-icon">
							<image src="@/static/icon-subSource.svg" mode=""></image>
						</view>
						<view class="item-title-text">资金来源</view>
					</view>
				</view>
				<view class="item-title-empty"></view>
			</view>

			<view class="item-info" v-for="item in subSourceInfoList">
				<view class="item-info-description">{{item.description}}</view>
				<view class="item-info-name money" @click="showPopup(item.key,item.value)">{{item.value}}</view>
			</view>
		</view>


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

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

		<u-popup :show="popupShow" @close="hidePopup()" mode="bottom" :round="20" closeOnClickOverlay>
			<view class="popup-content">
				<view class="popup-item popup-title">{{popupTitle}}</view>
				<view class="popup-item" @click="pasteItem()">复制</view>
				<view class="popup-item" v-show="callShow" @click="callItem()">拨打</view>
				<view class="popup-item popup-close" @click="hidePopup()">关闭</view>
			</view>
		</u-popup>
	</view>
</template>

<style lang="scss" scoped>
	@font-face {
		font-family: TITLETEXT;
		src: url('@/font/RuiZiAoYunJingShenPinBoJianMianFei-Shan(REEJI-PinboGB-Flash)-2.ttf');
	}

	.container {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 130rpx 0 50rpx 0;
		background: linear-gradient(180deg, #1869F6 0%, #EAF0FA 64%, #EAF0FA 100%);
	}

	.item-card {
		position: relative;
		width: 92%;
		left: 4%;
		min-height: 200rpx;
		padding: 16rpx 28rpx 40rpx;
		background-color: #fff;
		border-radius: 24rpx 0 24rpx 24rpx;

		.item-title {
			position: absolute;
			top: -62rpx;
			left: 0;
			display: flex;
			align-items: flex-end;
			height: 64rpx;
			width: calc(100% - 30rpx);
			margin-left: 30rpx;
			box-sizing: border-box;
			border-radius: 40rpx 40rpx 0 0;
			line-height: 50rpx;

			.item-title-pic {
				flex: 3;
				height: 54rpx;
				margin-right: -2rpx;
				background-color: #fff;
				border-radius: 24rpx 0 0 0;
			}

			.item-title-center {
				display: flex;
				width: 100%;
				height: 98%;
				padding-left: 30rpx;
				border-radius: 24rpx 0 24rpx 0;
				box-shadow: inset 0 -8rpx 14rpx 0rpx rgba(0, 22, 59, 0.49);

				.item-title-icon {
					display: flex;
					flex-direction: column;
					justify-content: center;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.item-title-text {
					flex: 1;
					margin-left: 18rpx;
					font-size: 32rpx;
					font-family: TITLETEXT;
					color: #fff;
				}
			}

			.item-title-baseInfo {
				background: linear-gradient(120deg, #005CFF 40%, #FFFFFF 100%);
			}

			.item-title-question {
				background: linear-gradient(120deg, #FF0000 20%, #FFFFFF 100%);
			}

			.item-title-fundSource {
				background: linear-gradient(120deg, #FF530F 20%, #FFFFFF 98%);
			}

			.item-title-subSource {
				background: linear-gradient(120deg, #FFAA00 12%, #FFFFFF 100%);
			}

			.item-title-constructStep {
				background: linear-gradient(120deg, #04A201 40%, #FFFFFF 100%);
			}

			.item-title-startData {
				background: linear-gradient(120deg, #6201A2 40%, #FFFFFF 100%);
			}

			.item-title-empty {
				flex: 4;
				height: 64rpx;
				border-radius: 24rpx 24rpx 0 0;
				background-color: #fff;
			}
		}

		.item-info {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			width: 100%;
			min-height: 80rpx;

			.item-info-description {
				display: flex;
				flex-direction: column;
				justify-content: center;
				min-width: 160rpx;
				font-size: 32rpx;
				color: #9E9E9E;
			}

			.item-info-icon {
				min-width: 0;
			}

			.item-info-name {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 32rpx;
				color: #343437;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.money {
				color: #FF530F;
			}

			.number {
				color: #1869F6;
			}

			.new {
				color: #1869F6;
			}

			.wait {
				color: #FF813E;
			}

			.done {
				color: #06BC43;
			}
		}

		.item-info-half {
			width: 50%;
			padding-right: 4%;
		}

		.item-info-start {
			justify-content: start;

			.item-info-name {
				margin-left: 32rpx;
			}
		}

		.item-info-content {
			width: 100%;
			min-height: 168rpx;
			padding: 20rpx;
			margin-top: 30rpx;
			box-sizing: border-box;
			background: #EAF0FA;
			border-radius: 20rpx;
		}

		.item-table {
			width: 100%;
			padding-bottom: 40rpx;
			border-bottom: 2rpx solid #EAF0FA;
		}

		.item-table-bottom {
			padding-bottom: 0;
			border-bottom: none;
		}

		.item-empty {
			width: 100%;
			height: 200rpx;
		}
	}

	.base-info {
		margin-top: 164rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.fund-source {
		margin-top: 96rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.construct-step {
		margin-top: 96rpx;
	}

	.record-data {
		margin-top: 96rpx;
	}

	.start-data {
		margin-top: 96rpx;
	}

	.popup-content {
		text-align: center;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #f3f3f3;

		.popup-item {
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
			min-height: 100rpx;
			line-height: 100rpx;
			color: #343437;
			font-size: 32rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #EAF0FA;
		}

		.popup-title {
			color: #9E9E9E;
			border-radius: 20rpx 20rpx 0 0;
		}

		.popup-close {
			margin-top: 20rpx;
			border-top: 2rpx solid #EAF0FA;
		}
	}

	.gap-bottom {
		width: 100%;
		height: 60rpx;
	}

	.lamp-info {
		align-items: center !important;
	}

	.lamp {
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 104rpx !important;
			height: 104rpx !important;
			margin-right: 20rpx;
		}

		text {
			font-size: 32rpx;
		}
	}
</style>