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

<template>
	<view class="container">
		<page-title>{{projectName}}</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" :class="item.type?item.type:''" @click="showPopup(item.key,item.value)">
					{{item.value}}
				</view>
			</view>
		</view>

		<view class="item-card person-info">
			<view class="item-title">
				<view class="item-title-pic">
					<view class="item-title-center item-title-constructStep">
						<view class="item-title-icon">
							<image src="@/static/icon-fix.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 legalPersonInfo">
				<view class="item-info-description">{{item.description}}</view>
				<view class="item-info-name" :class="item.type?item.type:''" @click="showPopup(item.key,item.value)">
					{{item.value}}
				</view>
			</view>
		</view>

		<view class="item-card person-info">
			<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-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 businessPersonInfo">
				<view class="item-info-description">{{item.description}}</view>
				<view class="item-info-name" :class="item.type?item.type:''" @click="showPopup(item.key,item.value)">
					{{item.value}}
				</view>
			</view>
		</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>

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

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

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

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

	function showPopup(type, text) {
		let callShowList = ['simCode', 'tel1', 'simCode1', 'tel2', 'simCode2']
		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() {
		// uni.makePhoneCall({
		// 	phoneNumber: popupTitle.value
		// })
		plus.device.dial(popupTitle.value, true);
	}

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

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

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

	// 基础信息
	let baseInfoList = 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"
	}, {
		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: ""
	}])

	// 法人信息
	let legalPersonInfo = ref([{
		description: "姓名",
		key: "nameJur1",
		value: ""
	}, {
		description: '性别',
		key: "sex1",
		value: ""
	}, {
		description: '电话',
		key: "tel1",
		value: '',
		type: 'number'
	}, {
		description: '移动电话',
		key: "simCode1",
		value: '',
		type: 'number'
	}, {
		description: '传真',
		key: "faxCode1",
		value: '',
		type: 'number'
	}, {
		description: '电子邮箱',
		key: "email1",
		value: '',
		type: 'email'
	}, {
		description: '护照号码',
		key: "passport1",
		value: '',
		type: 'passport'
	}])

	let businessPersonInfo = ref([{
		description: '姓名',
		key: "nameJur2",
		value: ''
	}, {
		description: '性别',
		key: "sex2",
		value: ""
	}, {
		description: '电话',
		key: "tel2",
		value: '',
		type: 'number'
	}, {
		description: '移动电话',
		key: "simCode2",
		value: '',
		type: 'number'
	}, {
		description: '传真',
		key: "faxCode2",
		value: '',
		type: 'number'
	}, {
		description: '电子邮箱',
		key: "email2",
		value: '',
		type: 'email'
	}, {
		description: '护照号码',
		key: "passport2",
		value: '',
		type: 'passport'
	}])

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

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

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

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

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

<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 4% 50rpx;
		background: linear-gradient(180deg, #1869F6 0%, #EAF0FA 64%, #EAF0FA 100%);
	}

	.item-card {
		position: relative;
		width: 100%;
		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: 4;
				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-fundSource {
				background: linear-gradient(120deg, #FF530F 20%, #FFFFFF 98%);
			}

			.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;
			width: 100%;
			height: 80rpx;

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

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

			.number {
				color: #1869F6;
			}

			.email {
				color: #FF530F;
			}

			.passport {
				color: #09B200;
			}
		}
	}

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

	.person-info {
		margin-top: 96rpx;
	}

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

		.popup-item {
      // display: flex;
      // align-items: center;
      // justify-content: center;
			// height: 100rpx;
      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;
		}
	}
</style>