subject_gxj/xj_project_app/pages/oversee/index.vue

<script setup>
	import {
		ref
	} from 'vue'

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

	import {
		getOverseeList,
	} from "@/api/work/oversee.js"

	function backToBefore() {
		uni.reLaunch({
			url: "/pages/index"
		});
	};

	let scrollTop = ref(0)
	let loading = ref(true)

	// 参数
	let searchInfo = ref({
		pageNo: 1,
		pageSize: 10,
	})
	let show = ref(false)
	let content = ref('')

	function wacthMore(e) {
		show.value = true
		content.value = e
	}

	function searchClick() {
		goToPage('/pages/oversee/search/index')
	}

	function getList() {
		if (searchInfo.value.pageNo == 1) {
			loading.value = true
		}
		getOverseeList(searchInfo.value).then(res => {
			loading.value = false;
			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;
		}).catch(() => {
			loading.value = false
		})
	}

	let itemList = ref([])
	let listTotal = ref(0)

	// 触底加载flag
	let moreListFlag = true

	function gotoDetail(type, id, subName) {
		if (type === "project") {
			uni.navigateTo({
				url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/oversee/detail/index?id=${id}`
			})
		}
	}

	function goToPage(url) {
		uni.navigateTo({
			url
		})
	}

	onLoad((options) => {
		uni.$on('overseeSearch', resolve => {
			searchInfo.value = Object.assign({
				pageNo: 1,
				pageSize: 10
			}, resolve);
			searchInfo.value.pageNo = 1;
			itemList.value = [];
			listTotal.value = 0;
			moreListFlag =
				true;
			getList();
		})

		searchInfo.value = Object.assign(searchInfo.value, options, {
			projectsStatus: options.status
		});
		searchInfo.value.status = null;

		getList();
	});

	onUnload(() => {
		uni.$off('overseeSearch');
	});

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop
	})


	onPullDownRefresh(() => {
		searchInfo.value.pageNo = 1;
		itemList.value = [];
		moreListFlag = true;
		try {
			getList();
		} finally {
			uni.stopPullDownRefresh()
		}
	})

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

<template>
	<view class="container">
		<page-title @searchClick='searchClick' showSearch>问题清单</page-title>

		<view class="cards-list">
			<view class="card" v-for="(item,index) in itemList" :key="index">
				<view v-if="item.usersub == 1">
					<view style="height:20rpx"></view>

					<view class="special-item">
						<card-title :numerator="index+1" :denominator="listTotal" isSpecial></card-title>

						<view class="card-name">
							<view class="card-name-title">
								<text class="card-name-description">申报单位</text>
							</view>

							<text class="card-name-text">{{item.unitTitle || "--"}}</text>
						</view>
					</view>
				</view>

				<view 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.unitTitle || "--"}}</text>
					</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">项目名称</view>

					<view class="card-item-content">{{item.sub_name || "--"}}</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">
						<view class="text">
							{{item.title || "--"}}
						</view>
						<view class="morebtn" @click="wacthMore(item.title)">
							查看更多
						</view>
					</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">要求解决日期</view>
					<view class="card-item-content">{{item.date_conf || "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-btn" @click="gotoDetail('project',item.sub_id,item.sub_name)">项目查看</view>
					<view class="card-btn empty-btn" @click="gotoDetail('problem',item.id)">问题查看</view>
				</view>

				<view class="card-icon" :class="item.stu === '已关闭' ? 'question-closed' : 'question-not-close'"></view>
			</view>

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

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

		<u-popup :show="show" mode='center' @close="show=false" bgColor='transparent'>
			<view class="popup-box">
				<view class="box-title">问题描述</view>
				<view class="box-icon"><u-icon name="close" size="20" @click="show=false"></u-icon></view>
				<scroll-view scroll-y="true" style="height: 700rpx;">
					<text class="box-text">{{content}}</text>
				</scroll-view>
			</view>
		</u-popup>

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

<style lang="scss" scoped>
	.text {
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.popup-box {
		position: relative;
		width: 90vw;
		margin: auto;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 20rpx;

		// font-size: 30;
		.box-icon {
			position: absolute;
			top: 40rpx;
			right: 40rpx;

		}

		.box-title {
			width: 100%;
			font-size: 40rpx;
			font-weight: 500;
			font-family: OPPOSans-M;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 20rpx;
		}

		.box-text {
			letter-spacing: 3rpx;
		}

	}

	.morebtn {
		float: right;
		margin-top: 20rpx;
		width: 190rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0 10rpx 0;
		font-size: 20rpx;
		border-radius: 28rpx;
		background-color: #1869F6;
		color: #fff;


	}
</style>