subject_gxj/xj_project_app/pages/search/index.vue

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

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

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

	import {
		getPolicyList,
	} from "@/api/work/policy.js";

	import {
		getContactList,
	} from "@/api/work/contact.js";
	import {
		addFocus,
		cancelFocus
	} from "@/api/work/focus.js";
	// 搜索项目
	const searchTabs = [{
		name: '项目'
	}, {
		name: '文件'
	}, {
		name: '联系方式'
	}];
	const activeTabs = ref('项目');
	const searchTabsClick = function(e) {
		activeTabs.value = e.name;
		searchPlaceholder.value = searchPlaceholderObj[e.name];
		reSearch(e.name);
	};

	// 搜索输入
	let searchPlaceholderObj = {
		"项目": "请输入项目名称",
		"文件": "请输入文件名称",
		"联系方式": "行业单位名称/责任人姓名/领导姓名",
	}
	let searchPlaceholder = ref('请输入项目名称');
	let searchContent = ref(null);
	const searchClean = function() {
		searchContent.value = null;
	};

	// 搜索功能
	let searchInfo = ref({
		pageNo: 1,
		pageSize: 10,
	});
	let paramsObj = {
		"项目": "subName",
		"文件": "title",
		"联系方式": "name",
	};

	const getList = function(type) {
		let params = Object.assign({}, searchInfo.value);
		params[paramsObj[type]] = searchContent.value;

		if (type === "项目") {
			getProjectInfoList(params).then(res => {
				itemList.value = itemList.value.concat(res.data.list);
				listTotal.value = res.data.total;
				if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list.length))
					moreListFlag = false;
			})
		}

		if (type === "文件") {
			getPolicyList(params).then(res => {
				itemList.value = itemList.value.concat(res.data.list);
				listTotal.value = res.data.total;
				if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list.length))
					moreListFlag = false;
			})
		}

		if (type === "联系方式") {
			getContactList(params).then(res => {
				itemList.value = res.data.list;
				listTotal.value = res.data.list.length;
				moreListFlag = false;
			})
		}
	}
	const reSearch = function(type) {
		searchInfo.value.pageNo = 1;
		moreListFlag = true;
		itemList.value = [];
		listTotal.value = 0;
		getList(type);
	};

	// 搜索结果
	let itemList = ref([]);
	let listTotal = ref(0);

	// 折叠/展开
	const changeFoldItem = (status, id) => {
		let item = itemList.value.find(item => item.id === id);
		item.unfold = status;
	}

	const projectDetail = function(id, subName) {
		uni.navigateTo({
			url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}`
		})
	}

	const fileDetail = function(title, id) {
		uni.navigateTo({
			url: `/pages/policy/detail/index?title=${title}&id=${id}`,
		});
	}

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

	const showPopup = function(text) {
		callShow.value = true;
		popupTitle.value = text
		popupShow.value = true
	}
	const hidePopup = function() {
		popupShow.value = false
		callShow.value = false
	}

	const pasteItem = function() {
		uni.setClipboardData({
			data: popupTitle.value
		});
	}
	const callItem = function() {
		plus.device.dial(popupTitle.value, true);
	}

	onLoad(() => {
		getList("项目")
	})

	onPullDownRefresh(() => {
		try {
			reSearch(activeTabs.value);
		} finally {
			uni.stopPullDownRefresh()
		}
	})

	let moreListFlag = true;
	onReachBottom(() => {
		if (!moreListFlag) {
			return uni.showToast({
				title: "已经到底了。",
				icon: "none",
				duration: 2000
			})
		}
		searchInfo.value.pageNo++;
		getList(activeTabs.value);
	})

	function goToReport(type, subId, subName) {
		if (type === 'wtdb') {
			uni.navigateTo({
				url: `/pages/problemSupervision/index?type=${type}&subId=${subId}&subName=${subName}`
			})
		} else if (type === 'qtldjbm') {
			uni.navigateTo({
				url: `/pages/leadersList/index?type=${type}&subId=${subId}&subName=${subName}`
			})
		} else if (type === 'xcyx') {
			uni.navigateTo({
				url: `/pages/projectImageAndVideo/index?type=${type}&subId=${subId}&subName=${subName}`
			})
		} else if (type === 'more') {
			uni.navigateTo({
				url: `/pages/projectBtnList/index?type=${type}&subId=${subId}&subName=${subName}`
			})

		} else {
			uni.navigateTo({
				url: `/pages/projectInfo/report/index?type=${type}&subId=${subId}&subName=${subName}`
			})
		}
	}

	function goToDetail(id, subName) {
		uni.navigateTo({
			url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}`
		})
	}
	// 收藏/取消
	function changeFocus(id, status) {
		let item = itemList.value.find(item => item.id === id);

		if (status) {
			cancelFocus({
				subId: id
			}).then(res => {
				if (res.code === 200) {
					item.isAttention = 0;
				}
			}).catch(() => {
				uni.showToast({
					title: "更改收藏状态失败。",
					icon: "none",
					duration: 2000
				})
			})
		} else {
			addFocus({
				subId: id
			}).then(res => {
				if (res.code === 200) {
					item.isAttention = 1;
				}
			}).catch(() => {
				uni.showToast({
					title: "更改收藏状态失败。",
					icon: "none",
					duration: 2000
				})
			})
		}
	}

	let scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop
	})
</script>

<template>
	<view class="container">
		<page-title>搜索</page-title>

		<view class="switch">
			<u-tabs :list="searchTabs" @click="searchTabsClick" itemStyle="width:33%"
				inactiveStyle="color:#343437;font-weight: 500;font-size: 32rpx;margin-bottom:25rpx"
				activeStyle="color:#1763E7;font-weight: 500;font-size: 32rpx;margin-bottom:25rpx" lineColor="#1763E7"
				lineWidth="68rpx" lineHeight="10rpx"></u-tabs>
		</view>

		<!-- 搜索 -->
		<view class="search">
			<view class="search-input">
				<view class="search-icon"></view>
				<input :placeholder='searchPlaceholder' v-model="searchContent"
					placeholder-style="color: #D8D8D8;font-size:24rpx" />
			</view>

			<view class="search-clean" :class="searchContent?.length>0?'':'search-hide'" @click="searchClean()"></view>
		</view>
		<view class="search-btn" @click="reSearch(activeTabs)">
			搜索
		</view>

		<!-- 列表 -->
		<view v-if="activeTabs === '项目'" class="cards-list">
			<view v-for="(item,index) in itemList" :key="index">
				<!-- 未折叠卡片 -->
				<view class="card card-padding" v-if="item.unfold">
					<!-- 项目名称 -->
					<view class="card-item">
						<view class="card-item-name">项目名称</view>

						<view class="card-item-content">{{item.subName ?? "--"}}</view>
					</view>

					<!-- 总投资（万元） -->
					<view class="card-item">
						<view class="card-item-name">总投资（万元）</view>
						<view class="card-item-content">{{item.amtTotal ?? "--"}}</view>
					</view>

					<!-- 年度计划投资-申报单位（万元） -->
					<view class="card-item">
						<view class="card-item-name">年度计划投资-申报单位（万元）</view>
						<view class="card-item-content">{{item.yearAmt ?? "--"}}</view>
					</view>

					<!-- 已完成投资（万元）-->
					<view class="card-item">
						<view class="card-item-name">已完成投资（万元）</view>
						<view class="card-item-content">{{item.yearAmtSj ?? "--"}}</view>
					</view>

					<!-- 当前状态 -->
					<view class="card-item">
						<view class="card-item-name">当前状态</view>
						<view class="card-item-content">{{item.status ?? "--"}}</view>
					</view>

					<!-- 功能按钮 -->
					<view class="card-item">
						<!-- 项目查看按钮(特殊) -->
						<view class="card-btn fat-btn special-btn" @click="goToDetail(item.id,item.subName)"
							v-if="item.usersub == 1">
							项目查看</view>
						<!-- 项目查看按钮 -->
						<view class="card-btn fat-btn project-btn" @click="goToDetail(item.id,item.subName)" v-else>项目查看
						</view>
						<!-- 关注按钮 -->
						<view class="card-btn fat-btn focus-btn" @click="changeFocus(item.id,item.isAttention)"
							v-if="!item.isAttention">关注</view>
						<view class="card-btn fat-btn focus-btn-no" @click="changeFocus(item.id,item.isAttention)" v-else>
							取消关注</view>
					</view>

					<!-- 周月年报按钮 -->
					<view class="card-item bottom-item">
						<view class="card-btn thin-btn report-btn" @click="goToReport('weekly',item.id,item.subName)">周报
						</view>

						<view class="card-btn thin-btn report-btn" @click="goToReport('monthly',item.id,item.subName)">月报
						</view>

						<view class="card-btn thin-btn more-btn" @click="goToReport('more',item.id,item.subName)">更多操作
						</view>
					</view>

					<!-- 编号 -->
					<view class="card-fold-option"
						:class="item.status_fgw === '2' ? 'card-fold-red' :item.status_fgw === '1' ?'card-fold-yellow':''">
						<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

						<view class="card-fold-center" @click.stop="changeFoldItem(false,item.id)">
							<view class="card-fold-btn card-unfold-btn"></view>
						</view>

						<view class="card-fold-chaos"></view>
					</view>
				</view>

				<!-- 折叠卡片 -->
				<view class="card-fold" v-else>
					{{item.subName ?? "--"}}

					<view class="card-fold-option"
						:class="item.status_fgw === '2' ? 'card-fold-red' :item.status_fgw === '1' ?'card-fold-yellow':''">
						<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

						<view class="card-fold-center" @click.stop="changeFoldItem(true, item.id)">
							<view class="card-fold-btn"></view>
						</view>

						<view class="card-fold-chaos"></view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="activeTabs === '文件'" class="cards-list">
			<view class="card" v-for="(item,index) in itemList" :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.columnName?? "--"}}</view>
				</view>

				<!-- <view class="card-item">
					<view class="card-item-name">时间</view>
					<view class="card-item-content">{{item.rptDate??"--"}}</view>
				</view> -->

				<view class="card-item">
					<view class="card-item-name">文件名</view>
					<view class="card-item-content">{{item.title??"--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-btn fat-btn" @click="fileDetail(item.title,item.id)">文件查看</view>
				</view>
			</view>
		</view>

		<view v-if="activeTabs === '联系方式'" class="cards-list">
			<view v-for="(item,index) in itemList" :key="index">
				<view class="card" v-if="item.isZj">
					<card-title :numerator="index+1" :denominator="listTotal"></card-title>

					<view class="card-name">
						<view class="card-name-title">
							<text class="card-name-description">单位名称</text>
						</view>
						<text class="card-name-text">{{item.title ?? "--"}}</text>
					</view>

					<view class="card-item">
						<view class="card-item-name">来源</view>
						<view class="card-item-content">中介服务信息</view>
					</view>

					<view class="card-item">
						<view class="card-item-name">法人姓名</view>
						<view class="card-item-content">{{item.legalName ?? "--"}}</view>
					</view>

					<view class="card-item" @click="showPopup(item.legalPhone)">
						<view class="card-item-name">法人电话</view>
						<view class="card-item-content phone">{{item.legalPhone ?? "--"}}</view>
					</view>

					<view class="card-item">
						<view class="card-item-name">业务负责人</view>
						<view class="card-item-content">{{item.businessOwner ?? "--"}}</view>
					</view>

					<view class="card-item" @click="showPopup(item.leadTel)">
						<view class="card-item-name">业务负责人电话</view>
						<view class="card-item-content phone">{{item.businessPhone ?? "--"}}</view>
					</view>
				</view>

				<view class="card" v-else>
					<card-title :numerator="index+1" :denominator="listTotal"></card-title>

					<view class="card-name">
						<view class="card-name-title">
							<text class="card-name-description">单位</text>
						</view>
						<text class="card-name-text">{{item.unitName ?? "--"}}</text>
					</view>
					<view class="card-name" v-if="item.departName">
						<view class="card-name-title">
							<text class="card-name-description">科室</text>
						</view>
						<text class="card-name-text">{{item.departName ?? "--"}}</text>
					</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 phone">{{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 phone">{{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 phone">{{item.telPt || "--"}}</view>
					</view>
				</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>

<style lang="scss" scoped>
	.project-btn {
		width: 48% !important;
		background: #1869F6;
	}

	.focus-btn {
		width: 48% !important;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 3rpx solid #1869F6;
		color: #1869F6;

	}

	.focus-btn-no {
		width: 48% !important;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 3rpx solid #FF2D2D;
		color: #FF2D2D;
	}

	.more-btn {
		background-color: #fff;
		color: #1869F6;

		font-size: 32rpx;
	}

	.switch {
		position: absolute;
		top: 14%;
		left: 4%;
		width: 92%;
		height: 110rpx;
		padding-top: 30rpx;
		margin: 0 auto 32rpx;
		background-color: #fff;
		border-radius: 28rpx;
	}

	.search {
		position: absolute;
		top: 380rpx;
		left: 4%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 70%;
		height: 68rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 34rpx;

		.search-input {
			display: flex;

			input {
				width: 70%;
			}

			.search-icon {
				width: 28rpx;
				height: 32rpx;
				margin-right: 26rpx;
				background-image: url('@/static/search-black.png');
				background-size: 100% 100%;
			}
		}

		.search-clean {
			width: 30rpx;
			height: 30rpx;
			background-image: url('@/static/search-clean.png');
			background-size: 100% 100%;
		}

		.search-hide {
			background: none;
		}
	}


	.search-btn {
		position: absolute;
		top: 380rpx;
		right: 4%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 19%;
		height: 68rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #1763E7;
		color: #fff;
		border-radius: 34rpx;
	}

	.cards-list {
		top: 492rpx;

		.phone {
			color: #1763E7;
		}

		.leader-phone {
			color: #06BC43;
		}
	}

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

	.card-padding {
		padding: 16rpx 40rpx 60rpx;
		overflow: hidden;
	}

	.card-fold {
		position: relative;
		width: 100%;
		min-height: 152rpx;
		margin-bottom: 20rpx;
		padding: 24rpx 30rpx 52rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.card-fold-option {
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 38rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: linear-gradient(270deg, #CADDFF 4%, rgba(219, 232, 255, 0) 100%);
		z-index: 999;

		.card-fold-count {
			flex: 1;
			font-size: 28rpx;
			color: #1869F6;
		}

		.card-fold-center {
			flex: 1;

			.card-fold-btn {
				width: 32rpx;
				height: 20rpx;
				margin: 0 auto;
				background-image: url("@/static/icon-fold.png");
				background-size: 100% 100%;
			}

			.card-unfold-btn {
				transform: rotate(180deg);
			}
		}

		.card-fold-chaos {
			flex: 1;
		}
	}

	.card-fold-red {
		background: linear-gradient(270deg, #FF8080 0%, rgba(219, 232, 255, 0) 100%);

		.card-fold-count {
			color: #FF0000;
		}

		.card-fold-center {
			.card-fold-btn {
				background-image: url("@/static/icon-fold-red.png");
			}
		}
	}

	.card-fold-yellow {
		background: linear-gradient(270deg, #FFAA00 4%, rgba(219, 232, 255, 0) 100%);

		.card-fold-count {
			color: #E19703;
		}

		.card-fold-center {
			.card-fold-btn {
				background-image: url("@/static/icon-fold-yellow.png");
			}
		}
	}
</style>