subject_gxj/xj_project_app_2024_2_18/pages/contact/index.vue

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

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

	import {
		getContactList,
	} from "@/api/work/contact.js";

	let searchInfo = ref({
		unitName: null,
		departName: null,
	});
	let contactList = ref([]);
	let listTotal = ref(0);

	function getList() {
		getContactList(searchInfo.value).then(res => {
			contactList.value = res.data.list;
			listTotal.value = res.data?.list.length ?? 0
		})
	};

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

	function showPopup(text) {
		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);
	}

	onLoad(() => {
		getList();
	})
</script>

<template>
	<view class="container">
		<page-title>联系人</page-title>

		<view class="cards-list">
			<view class="card card-only">
				<view class="card-search-item">
					<view class="card-item-name">行业单位</view>
					<input v-model="searchInfo.unitName" class="card-item-input" style="direction: rtl;"
						placeholder="请填写行业单位" placeholder-style="color: #D8D8D8;text-align: right;font-size:28rpx;"
						maxlength="20" />
				</view>

				<view class="card-search-item">
					<view class="card-item-name">所在科室</view>
					<input v-model="searchInfo.departName" class="card-item-input" style="direction: rtl;"
						placeholder="请填写科室" placeholder-style="color: #D8D8D8;text-align: right;font-size:28rpx;"
						maxlength="20" />
				</view>
			</view>
			<view class="search-btn" @click="getList()">搜索</view>
			<view class="card card-only" v-for="(item,index) in contactList" :key="index">
				<!-- <card-title :numerator="index+1" :denominator="listTotal"></card-title> -->
				<view class="one-only-card">
					<text class="card-name-num">{{(index+1<10?'0'+(index+1):index+1)}}</text>
					<view class="card-item ">
						<!-- <view class="card-item-name">行业单位</view> -->
						<view class="card-item-content only-item">{{item.unitName || "--"}}</view>
					</view>
					<view class="card-item spe-item" v-if="item.departName">
						<!-- <view class="card-item-name">科室</view> -->
						<view class="card-item-content spe-item-content">{{item.departName || "--"}}</view>
					</view>
				</view>
				<view class="line" style="margin-top: 14rpx;"></view>
				<view class="card-item-layer" style="margin-top: 15rpx;" v-if="item.zrrName || item.zrrTel">
					<view class="card-item" v-if="item.zrrName || item.zrrTel">
						<view class="card-item-name">项目负责人</view>
						<view class="card-item-content">{{item.zrrName || "--"}}</view>
					</view>
					<view class="card-item" @click="showPopup(item.zrrTel)" v-if="item.zrrName || item.zrrTel">
						<view class="card-item-name">联系人电话</view>
						<view class="card-item-content zrrTel">{{item.zrrTel || "--"}}</view>
					</view>
				</view>



				<view class="line" v-if="item.leadName || item.leadTel"></view>
				<view class="card-item-layer" v-if="item.leadName || item.leadTel">
					<view class="card-item" v-if="item.leadName || item.leadTel">
						<view class="card-item-name">分管领导人</view>
						<view class="card-item-content">{{item.leadName || "--"}}</view>
					</view>
					<view class="card-item" @click="showPopup(item.leadTel)" v-if="item.leadName || item.leadTel">
						<view class="card-item-name">联系人电话</view>
						<view class="card-item-content zrrTel">{{item.leadTel || "--"}}</view>
					</view>
				</view>

				<view class="line" v-if="item.ptName || item.telPt"></view>
				<view class="card-item-layer" v-if="item.ptName || item.telPt">
					<view class="card-item" v-if="item.ptName || item.telPt">
						<view class="card-item-name">平台管理人</view>
						<view class="card-item-content">{{item.ptName || "--"}}</view>
					</view>
					<view class="card-item" @click="showPopup(item.telPt)" v-if="item.ptName || item.telPt">
						<view class="card-item-name">联系人电话</view>
						<view class="card-item-content zrrTel">{{item.telPt || "--"}}</view>
					</view>
				</view>

			</view>
		</view>

		<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>
	.zrrTel {
		color: #1763E7 !important;
	}

	.leadTel {
		color: #16AD49 !important;
	}

	.ptTel {
		color: #FF530F !important;
	}
	
	.card-item-layer {
		width: 100%;
		padding: 16rpx 0;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		gap: 10rpx;
	}

	.search-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
		margin-top: 32rpx;
		width: 328rpx;
		height: 72rpx;
		background: #002F69;
		border-radius: 38rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: 500;
	}



	.card-search-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20rpx;

		.card-item-name {
			font-weight: 500;
			font-size: 28rpx;
			color: #B5B5B5;
		}

		.card-item-input {
			flex-grow: 1;
		}

		.card-item-content {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
	}

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

		.popup-item {
			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;
		}
	}

	.line {
		width: 100%;
		height: 2rpx;
		border-top: 2rpx dashed #DDDDDD;
	}

	.card-name-num {
		width: 64rpx;
		height: 64rpx;
		min-width: 64rpx;
		border-radius: 4rpx;
		border: 2rpx solid #F4F4F4;
		font-size: 24rpx;
		color: #B5B5B5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.one-only-card {
		width: 100%;
		display: flex;
		justify-content: space-between;
		gap: 16rpx;

		.only-item {
			font-weight: 500 !important;
			font-size: 28rpx !important;
			color: #002F69 !important;
		}

		.spe-item {
			text-align: right;

			.spe-item-content {
				font-weight: 500 !important;
				font-size: 28rpx !important;
				color: #6C90C1 !important;

			}
		}
	}
</style>