subject_gxj/xj_project_app/pages/enterpriseInfo/baseInfo/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 companyInfoList">
				<view class="info-item-description">{{item.description}}</view>
				<view class="info-item-name" :class="item.type?item.type:''">{{item.value}}</view>
			</view>
		</view>

		<view class="base-info project">
			<view class="info-item" v-for="item in projectInfoList">
				<view class="info-item-description">{{item.description}}</view>
				<view class="info-item-name" :class="item.type?item.type:''">{{item.value}}</view>
			</view>
		</view>
	</view>
</template>

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

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

	import {
		getEnterpriseInfoDetail,
	} from "@/api/work/enterpriseInfo.js"

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

	let companyInfoList = ref([{
		description: "单位简称",
		key: "titleAbb",
		value: "",
	}, {
		description: "所在地",
		key: "area",
		value: ""
	}, {
		description: "通信地址",
		key: "addre",
		value: ""
	}, {
		description: "单位代码类型",
		key: "kindUnit",
		value: ""
	}, {
		description: "代码类型",
		key: "kindCode",
		value: ""
	}, {
		description: "统一社会信用代码",
		key: "trustCode",
		value: "",
		type: "number"
	}])

	let projectInfoList = ref([{
		description: "成立日期",
		key: "dateFound",
		value: "",
	}, {
		description: "联系手机号",
		key: "simCode",
		value: "",
		type: "number"
	}, {
		description: "电子邮箱",
		key: "email",
		value: "",
		type: "email"
	}, {
		description: "单位性质",
		key: "unitPropId",
		value: ""
	}, {
		description: "是否独立法人",
		key: "isJur",
		value: ""
	}, {
		description: "单位传真",
		key: "fax",
		value: "",
		type: "number"
	}, {
		description: "单位类型",
		key: "unitKindId",
		value: ""
	}])

	function filterData(obj) {
		for (let i in companyInfoList.value) {
			companyInfoList.value[i].value =
				(obj[companyInfoList.value[i].key] != null) ? obj[companyInfoList.value[i].key] : "--"
		}

		for (let i in projectInfoList.value) {
			projectInfoList.value[i].value =
				(obj[projectInfoList.value[i].key] != null) ? obj[projectInfoList.value[i].key] : "--"
		}
	}

	onLoad((option) => {
		getEnterpriseInfoDetail({
			id: option.id
		}).then(res => {
			filterData(res.data.junitInfo)
		})
	})
</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%;
		width: 92%;
		padding: 10rpx 40rpx;
		border-radius: 40rpx;
		box-sizing: border-box;
		background-color: #fff;

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

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

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

			.number {
				color: #1869F6;
			}

			.email {
				color: #FF530F;
			}
		}
	}

	.company {
		top: 14%;
		height: 504rpx;
	}

	.project {
		top: 48%;
		height: 584rpx
	}
</style>