subject_gxj/xj_project_app/pages/overdue/fundsSource/index.vue

<template>
	<view class="container">
		<view class="back-btn" @click="backToBefore()">
			<u-icon name="arrow-left" color="#fff" size="20" customStyle="margin:0 auto"></u-icon>

			<text class="back-text">资金来源</text>
		</view>

		<view class="base-info company">
			<view class="info-item" v-for="item in sourceList">
				<view class="info-item-description">{{item.description}}</view>
				<view class="info-item-name">{{item.value}}</view>
			</view>

			<view class="info-item-description">建设内容及规模</view>
			<view class="info-item-content">{{fullInfo.content}}</view>

		</view>

		<view class="base-info project">
			<view class="info-item">
				<view class="info-item-description">计划开工时间</view>
				<view class="info-item-text">{{fullInfo.begin_date || "--"}}</view>
			</view>

			<view class="info-item">
				<view class="info-item-description">计划完工时间</view>
				<view class="info-item-text">{{fullInfo.end_date || "--"}}</view>
			</view>

			<view class="info-item info-item-short">
				<view class="info-item-description">负责人</view>
				<view class="info-item-text">{{fullInfo.name_zrr || "--"}}</view>
			</view>

			<view class="info-item info-item-short">
				<view class="info-item-description">
					<u-icon name="phone" color="#343437" size="20"></u-icon>
				</view>
				<view class="info-item-text number">{{fullInfo.tel || "--"}}</view>
			</view>

			<view class="info-item info-item-short">
				<view class="info-item-description">总负责人</view>
				<view class="info-item-text">{{fullInfo.name_lead || "--"}}</view>
			</view>

			<view class="info-item info-item-short">
				<view class="info-item-description">
					<u-icon name="phone" color="#343437" size="20"></u-icon>
				</view>
				<view class="info-item-text number">{{fullInfo.tel_lead || "--"}}</view>
			</view>

			<view class="info-item">
				<view class="info-item-description">责任主体</view>
				<view class="info-item-text">{{fullInfo.subjectName || "--"}}</view>
			</view>

			<view class="info-item">
				<view class="info-item-description">项目类型</view>
				<view class="info-item-text">{{fullInfo.kindName || "--"}}</view>
			</view>
		</view>
	</view>
</template>

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

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

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

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

	let fullInfo = ref({})

	let sourceList = ref([{
		description: '中央资金',
		key: "amt_ly1",
		value: ''
	}, {
		description: '政府债券',
		key: "amt_ly3",
		value: ''
	}, {
		description: '市绩资金',
		key: "amt_ly5",
		value: ''
	}, {
		description: '援疆资金',
		key: "amt_ly4",
		value: ''
	}, {
		description: '县级资金',
		key: "amt_ly6",
		value: ''
	}, {
		description: '企业资金',
		key: "amt_ly7",
		value: ''
	}, {
		description: '自治区资金',
		key: "amt_ly2",
		value: ''
	}, {
		description: '',
		value: ''
	}])

	function filterData(obj) {
		fullInfo.value = obj
		for (let i in sourceList.value) {
			sourceList.value[i].value = obj[sourceList.value[i].key] || "0"
		}
	}

	onLoad((option) => {
		getProjectInfoDetail({
			subId: option.id
		}).then(res => {
			filterData(res.data.projectsInfo)
		})
	})
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #EAF0FA;
	}

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

		.back-btn {
			position: absolute;
			top: 8%;
			left: 4%;
			display: flex;
			font-size: 40rpx;
			font-weight: 500;
			color: #FFF;

			.back-text {
				margin-left: 28rpx;
			}
		}
	}

	.base-info {
		position: absolute;
		left: 4%;
		display: flex;
		flex-wrap: wrap;
		width: 92%;
		padding: 40rpx;
		border-radius: 40rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

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

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

	.company {
		top: 14%;
		height: 582rpx;

		.info-item {
			display: flex;
			justify-content: space-between;
			width: 50%;
			height: 40rpx;
			padding-right: 4%;
		}

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

	.project {
		top: 52%;
		height: 484rpx;

		.info-item {
			display: flex;
			justify-content: flex-start;
			width: 100%;
			height: 40rpx;
			padding-right: 4%;

			.info-item-text {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 50rpx;
				font-size: 32rpx;
				color: #343437;
			}

			.number {
				color: #1869F6
			}
		}

		.info-item-short {
			width: 50%;
		}
	}
</style>