subject_gxj/xj_project_app/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 only-card">
				<view class="card-item first-card-item">
					<view class="card-item-name">行业单位</view>
					<input v-model="searchInfo.unitName" class="card-item-input" placeholder="请填写行业单位"
						placeholder-style="color: #D8D8D8" maxlength="20" />
				</view>

				<view class="card-item">
					<view class="card-item-name">科室</view>
					<input v-model="searchInfo.departName" class="card-item-input" placeholder="请填写科室"
						placeholder-style="color: #D8D8D8" maxlength="20" />
				</view>

				<view class="card-item">
					<view class="card-btn fat-btn empty-btn" @click="getList()">搜索</view>
				</view>
			</view>

			<view class="card" v-for="(item,index) in contactList" :key="index">
				<card-title :numerator="index+1" :denominator="listTotal"></card-title>

				<view class="card-item">
					<view class="card-item-name">行业单位</view>
					<view class="card-item-content">{{item.unitName || "--"}}</view>
				</view>
				<view class="card-item" v-if="item.departName">
					<view class="card-item-name">科室</view>
					<view class="card-item-content">{{item.departName || "--"}}</view>
				</view>

				<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 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 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>

		<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;
	}

	.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;
		}
	}
</style>