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

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

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

	import {
		getPreFlowDetail,
		getProjectPreFlow
	} from "@/api/work/preFlow.js"

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

	// 触底加载flag
	let moreListFlag = true
	let scrollTop = ref(0)
	let loading = ref(true)

	let searchInfo = ref({
		pageNo: 1,
		pageSize: 10,
		type: null,
		beginDate: null,
		endDate: null
	});
	let getList = function() {
		if (searchInfo.value.pageNo == 1) {
			loading.value = true
		};
		if (searchInfo.value.type === 'qqsxblqk') {
			getProjectPreFlow(searchInfo.value).then(res => {
				loading.value = false;
				let obj = {
					"0": "未开始办理",
					"1": "开始办理",
					"2": "办理完成",
					"3": "退回"
				}
				res.data.list.forEach(item => {
					item.numStage = obj[item.numStage];
					item.status = item.status === "1" ? "需办理" : item.status === "2" ? "无需办理" : "--";
				})
				cardList.value = cardList.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;
			}).catch(() => {
				loading.value = false;
			})
		} else {
			getPreFlowDetail(searchInfo.value).then(res => {
				loading.value = false;
				let obj = {
					"0": "未开始办理",
					"1": "开始办理",
					"2": "办理完成",
					"3": "退回"
				}
				res.data.list.forEach(item => {
					item.numStage = obj[item.numStage];
					item.status = item.status === "1" ? "需办理" : item.status === "2" ? "无需办理" : "--";
				})
				cardList.value = cardList.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;
			}).catch(() => {
				loading.value = false;
			})
		}



	};

	onLoad(options => {
		searchInfo.value.type = options.type;

		if (searchInfo.value.type == 'qqsxblqk') {
			searchInfo.value = Object.assign(searchInfo.value, options)
		} else {
			if (options.beginDate) {
				let beginDate = options.beginDate;
				beginDate = beginDate.replace('/', '-');
				searchInfo.value.beginDate = beginDate.replace('/', '-');
			}
			if (options.endDate) {
				let endDate = options.endDate;
				endDate = endDate.replace('/', '-');
				searchInfo.value.endDate = endDate.replace('/', '-');
			}
		}
		getList();
	})

	onPullDownRefresh(() => {
		searchInfo.value.pageNo = 1;
		cardList.value = [];
		moreListFlag = true;
		try {
			getList();
		} 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" v-for="(item,index) in cardList" :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.subName ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">办理内容</view>
				</view>
				<view class="card-item">
					<u--textarea class="card-item-textarea" v-model="item.preFlowTitle" disabled></u--textarea>
				</view>

				<view class="card-item">
					<view class="card-item-name">手续阶段</view>
					<view class="card-item-content">{{item.numStage ?? "--"}}</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-item-name">延期日期</view>
					<view class="card-item-content">{{item.delay ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">办理单位</view>
					<view class="card-item-content">{{item.unitName ?? "--"}}</view>
				</view>
			</view>

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

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

		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<style lang="scss" scoped>
</style>