subject_gxj/xj_project_app/pages/questionTrace/index.vue

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

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

	import {
		goToPage
	} from "@/utils/common.js"

	import {
		getQuestionTraceList,
		openQuestionTrace,
		closeQuestionTrace,
	} from "@/api/work/questionInputAndTrace.js"

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

	// 参数
	let searchInfo = ref({
		pageNo: 1,
		pageSize: 10,
		status: 0
	})

	// 获取列表
	function getList() {
		if (searchInfo.value.pageNo == 1) {
			loading.value = true
		}
		getQuestionTraceList(searchInfo.value).then(res => {
			loading.value = false
			questionProjectList.value = questionProjectList.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 listTotal = ref(0)
	let questionProjectList = ref([])

	// 触底加载flag
	let moreListFlag = true

	// 去项目查看
	function goToDetail(id, subName) {
		goToPage(`/pages/projectInfo/detail/index?id=${id}&subName=${subName}`)
	}

	// 去问题跟踪
	function goToInput(id) {
		goToPage(`/pages/questionTrace/input/index?id=${id}`)
	}

	// 去搜索页
	function searchClick() {
		goToPage('/pages/questionTrace/search/index')
	}

	// 开关问题
	function changeQuestionStatu(status, id) {
		let statusList = ["已关闭", "处理中"]
		if (!statusList.includes(status)) {
			return uni.showToast({
				title: "当前问题状态异常。",
				icon: "error",
				duration: 2000
			})
		}

		if (status === "已关闭") {
			openQuestionTrace({
				id
			}).then(res => {
				changeQuestionStatuLocal(res, id)
			})
		}

		if (status === "处理中") {
			closeQuestionTrace({
				id
			}).then(res => {
				changeQuestionStatuLocal(res, id)
			})
		}
	}

	// 改变本地状态
	function changeQuestionStatuLocal(res, id) {
		if (res.code !== 200) {
			return uni.showToast({
				title: "问题状态切换失败。",
				icon: "error",
				duration: 2000
			})
		}
		let changeItem = questionProjectList.value.find(item => item.id === id);
		changeItem.stu = changeItem.stu === "处理中" ? "已关闭" : "处理中";
		uni.showToast({
			title: "问题状态切换成功。",
			icon: "success",
			duration: 2000
		})
	}

	onLoad(() => {
		uni.$on('questionTraceSearch', resolve => {
			searchInfo.value = Object.assign(searchInfo.value, resolve);
			searchInfo.value.pageNo = 1;
			questionProjectList.value = [];
			listTotal.value = 0;
			moreListFlag = true;
			getList();
		})
		getList();
	})

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

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

	onPullDownRefresh(() => {
		searchInfo.value.pageNo = 1;
		questionProjectList.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 questionProjectList" :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.sub_name || "--"}}</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.sub_name || "--"}}</text>
					</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" @click="goToDetail(item.sub_id,item.sub_name)">项目查看</view>
					<view class="card-btn empty-btn" @click="goToInput(item.id)">问题跟踪</view>
				</view>

				<view class="card-bottom-btn" :class="item.stu === '已关闭' ?'open' :''"
					@click="changeQuestionStatu(item.stu,item.id)">
					{{item.stu === "已关闭"?"问题打开":"问题关闭"}}
				</view>
			</view>

			<empty-show v-if="questionProjectList.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">
	.card {
		position: relative;
		padding: 0 40rpx 110rpx;
		overflow: hidden;
	}

	.card-bottom-btn {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 32rpx;
		color: #FF813E;
		background-color: #FFECE2;
	}

	.open {
		color: #00B893;
		background-color: #DFFFF9;
	}
</style>