subject_gxj/xj_project_app/pages/important/index.vue

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

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

	import {
		getImportantKind,
		getImportantList
	} from "@/api/work/important.js";

	import {
		timeFormat
	} from "@/utils/timeFormatter.js";

	// ====================================选择开始时间
	let beginDateStart = ref(null)
	let beginTimeShow = ref(false)

	function showBeginTimeChoose() {
		beginTimeShow.value = true
	}

	function beginTimeClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			searchInfo.value.beginDate = time
		}
		beginTimeShow.value = false
	}
	// ====================================选择结束时间
	let beginDateEnd = ref(null)
	let endTimeShow = ref(false)

	function showEndTimeChoose() {
		endTimeShow.value = true
	}

	function endTimeClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			searchInfo.value.endDate = time
		}
		endTimeShow.value = false
	}
	// ====================================选择专题类型
	let kindList = ref([]);
	let kindListFull = ([]);

	function getKindList() {
		getImportantKind().then(res => {
			kindList.value = [res.data.type.map(item => item.title)];
			kindListFull = res.data.type;
		})
	};

	let kindShow = ref(false)

	function showKindChoose() {
		kindShow.value = true
	}

	function kindClose(e) {
		if (e) searchInfo.value.kind = e.value[0];
		kindShow.value = false;
	}

	// =========================================搜索
	let scrollTop = ref(0);
	let moreListFlag = true; // 触底加载flag

	let searchInfo = ref({
		pageNo: 1,
		pageSize: 10,
		kind: null, //当前页面
		host: null, //主持人姓名
		title: null, //会议主题
		beginDate: null, //会议时间段_开始时间
		endDate: null, //会议时间段_结束时间
	});

	let projectList = ref([]);
	let listTotal = ref(0);

	function reSearch() {
		searchInfo.value.pageNo = 1;
		projectList.value = [];
		moreListFlag = true;
		getList();
	};

	function getList() {
		let params = Object.assign({}, searchInfo.value);
		if (params.beginDate) {
			params.beginDate = params.beginDate.replace('/', '-');
			params.beginDate = params.beginDate.replace('/', '-');
		}
		if (params.endDate) {
			params.endDate = params.endDate.replace('/', '-');
			params.endDate = params.endDate.replace('/', '-');
		}
		getImportantList(params).then(res => {
			projectList.value = projectList.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;
		})
	};

	function goToPage(id) {
		uni.navigateTo({
			url: `/pages/important/detail/index?id=${id}`
		})
	}

	onLoad(() => {
		let now = new Date();
		let year = now.getFullYear();
		let month = now.getMonth() + 1 < 10 ? `0${now.getMonth() + 1< 10}` : now.getMonth() + 1;
		let day = now.getDate() < 10 ? `0${now.getDate()}` : now.getDate();
		beginDateStart.value = `${year}/${month}/${day}`; // 开始时间
		beginDateEnd.value = `${year}/${month}/${day}`; // 结束时间

		getKindList();
		getList();
	})

	onPullDownRefresh(() => {
		try {
			searchInfo.value = {
				pageNo: 1,
				pageSize: 10,
				kind: null, //当前页面
				host: null, //主持人姓名
				title: null, //会议主题
				beginDate: null, //会议时间段_开始时间
				endDate: null, //会议时间段_结束时间
			};

			reSearch();
		} finally {
			uni.stopPullDownRefresh()
		}
	})

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

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
</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" @click="showBeginTimeChoose()">
					<view class="card-item-name">开始日期</view>
					<view class="card-item-description">
						<view v-if="searchInfo.beginDate">{{searchInfo.beginDate}}</view>
						<view v-else class="remind-text">请选择开始日期</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 计划结束日期 -->
				<view class="card-item" @click="showEndTimeChoose()">
					<view class="card-item-name">结束日期</view>
					<view class="card-item-description">
						<view v-if="searchInfo.endDate">{{searchInfo.endDate}}</view>
						<view v-else class="remind-text">请选择结束日期</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 事项 -->
				<view class="card-item">
					<view class="card-item-name">事项</view>
					<input v-model="searchInfo.xxx" class="card-item-input" placeholder="请填写事项" placeholder-style="color: #D8D8D8"
						maxlength="20" />
				</view>

				<!-- 专题类型 -->
				<view class="card-item" @click="showKindChoose()">
					<view class="card-item-name">专题类型</view>
					<view class="card-item-description">
						<view v-if="searchInfo.kind">{{searchInfo.kind}}</view>
						<view v-else class="remind-text">请选择状态</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
			</view>

			<view class="search-btn" @click="reSearch()">确定</view>

			<view class="card" v-for="(item,index) in projectList" :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.kindName || "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">日期</view>
					<view class="card-item-content">{{item.meetingDate || "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">主题</view>
					<view class="card-item-content zrrTel">{{item.meetingTitle || "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">主持人</view>
					<view class="card-item-content">{{item.host || "--"}}</view>
				</view>

				<view class="card-item" @click="goToPage(item.id)">
					<view class="card-btn fat-btn empty-btn">查看详情</view>
				</view>
			</view>

			<empty-show v-if="projectList.length===0"></empty-show>
		</view>

		<!-- 开始时间 -->
		<u-datetime-picker :show="beginTimeShow" @confirm="beginTimeClose" @cancel="beginTimeClose" @close="beginTimeClose"
			v-model="beginDateStart" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose"
			v-model="beginDateEnd" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 专题类型 -->
		<u-picker :show="kindShow" :columns="kindList" @confirm="kindClose" @cancel="kindClose" @close="kindClose"
			closeOnClickOverlay></u-picker>

		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<style lang="scss" scoped>
	.search-btn {
		width: 98%;
		height: 84rpx;
		margin: 40rpx auto 56rpx;
		line-height: 84rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 36rpx;
		background: #1763E7;
		border-radius: 16rpx;
	}
</style>