ykz-wx/pages/feedback/index.vue

<template>
	<view class="switchRecord-container">
		<!--顶部导航栏-->
		<scroll-view class="scroll-view" scroll-x="true" @scroll="scroll">
			<view class="scroll-view-item" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
				:class="navIndex==index ? 'activite' : ''" @tap="checkIndex(index)">
				{{tab.name}}
			</view>
		</scroll-view>
		<!-- 内容 -->
		<swiper :current="navIndex" @change="tabChange" class="swiper_content">
			<swiper-item class="swiper_item">
				<DetailedFeedbackList v-if="globalParameter.isLeader" :listArray="listArray" />
				<FeedbackList v-else :listArray="listArray" @click="onClick" @nextPage="onNextPage" />
			</swiper-item>
			<swiper-item class="swiper_item">
				<DetailedFeedbackList v-if="globalParameter.isLeader" :listArray="listArray" />
				<FeedbackList v-else :listArray="listArray" @click="onClick" @nextPage="onNextPage" />
			</swiper-item>
			<swiper-item class="swiper_item">
				<DetailedFeedbackList v-if="globalParameter.isLeader" :listArray="listArray" />
				<FeedbackList v-else :listArray="listArray" @click="onClick" @nextPage="onNextPage" />
			</swiper-item>
			<swiper-item class="swiper_item">
				<DetailedFeedbackList v-if="globalParameter.isLeader" :listArray="listArray" />
				<FeedbackList v-else :listArray="listArray" @click="onClick" @nextPage="onNextPage" />
			</swiper-item>
		</swiper>
		<!-- 新增 -->
		<view class="feedback-add-icon" @click="onClickAdd">
			<image class="add-icon" src="/static/image/add-icon.svg" mode="aspectFit"></image>
			<view class="add-title">登记</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from "vue"
	import * as link from '@/lib/link'
	import rest from '@/stores/rest'
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { aesEncrypt, aesDecrypt } from "@/lib/encryption";
	import { formatDate } from '@/lib/util'
	import FeedbackList from './FeedbackList.vue'
	import DetailedFeedbackList from './DetailedFeedbackList.vue'

	import { useUserStore } from '@/lib/store';
	const store = useUserStore();
	const globalParameter = computed(() => store.getGlobalParameter);

	const queryParams = ref({
		pageNo: 1,
		pageSize: 10,
		fkzt: '',
		zjhm: '',
	})
	const scrollTop = ref(0)
	const navIndex = ref(0)
	const tabBars = ref([
		{
			name: '全部',
			id: 0
		},
		{
			name: '待受理',
			id: 1
		},
		{
			name: '受理中 ',
			id: 2
		},
		{
			name: '已办结 ',
			id: 3
		}
	])

	const scroll = (e : any) => {
		console.log("scroll", e);
		scrollTop.value = e.detail.scrollTop;
	};
	const checkIndex = (idx : number) => {
		if (navIndex.value !== idx) {
			navIndex.value = idx;
			switch (idx) {
				case 0:
					queryParams.value.fkzt = ''
					break;
				case 1:
					queryParams.value.fkzt = '1'
					break;
				case 2:
					queryParams.value.fkzt = '2'
					break;
				case 3:
					queryParams.value.fkzt = '3'
					break;
			}
			queryParams.value.pageNo = 1
			list.value = []
			getList()
		}
	}
	const tabChange = async (e : any) => {
		let _idx = e.detail.current
		checkIndex(_idx)
	}

	const listArray = ref([])
	const list = ref() //处方列表
	const total = ref(0)
	const status = ref('loading')

	const getList = async () => {
		try {
			// loaded.value = true;
			let res = await rest.get('/zyyp/feedback/page', queryParams.value, globalParameter.value.authCode)
			let _list = res.list


			if (queryParams.value.pageNo === 1) {
				list.value = _list;
			} else {
				list.value = list.value.concat(_list);
			}
			getFormattedData(list.value)
			total.value = res.total
			if (res.total && queryParams.value.pageNo >= total.value / queryParams.value.pageSize) {
				status.value = "noMore"
			}

		} catch (e) {
		} finally {
		}
	}


	const titleArray = [
		{ title: '办件编号', key: 'id' },
		{ title: '登记时间', key: 'createTime' },
	];
	const leaderArray = [
		{ title: '编号', key: 'id' },
		{ title: '内容', key: 'fkxq' },
	]

	const getFormattedData = (listData) => {
		const selectedArray = globalParameter.value.isLeader ? leaderArray : titleArray;
		const formattedData = listData.map(item => {
			const formattedItem = selectedArray.map(titleItem => {
				let value = item[titleItem.key];
				if (titleItem.key === 'createTime') {
					value = formatDate(item[titleItem.key], '{y}-{m}-{d} {h}:{i}:{s}');
				}
				return {
					title: titleItem.title,
					value: value
				};
			});
			return {
				...item,
				formattedData: formattedItem,
			};
		});
		listArray.value = formattedData;
		console.log("查询", listArray.value)
	};

	const onNextPage = () => {
		if (!list.value || queryParams.value.pageNo > (total.value / queryParams.value.pageSize)) {
			return false;
		}
		if (queryParams.value.pageNo < total.value / queryParams.value.pageSize) {
			status.value = "loading";
		} else {
			status.value = "noMore"
			return;
		}
		queryParams.value.pageNo++;
		getList();
	}

	const onClick = (e) => {
		link.goBJDetails(e.id)
	}
	const onClickAdd = () => {
		link.goBJDetails()
	}

	onLoad((data) => {
		// alert("onLoad:" + JSON.stringify(globalParameter.value))
		queryParams.value.zjhm = aesDecrypt(data.hzsfzh)
	})

	onShow(() => {
		queryParams.value.pageNo = 1;
		queryParams.value.zjhm = globalParameter.value.zjhm;
		getList()
	})
</script>


<style lang="scss">
	.switchRecord-container {
		display: flex;
		background-color: #f2f2f2;
		flex-direction: column;
		height: calc(100vh);
		position: relative;

		.scroll-view {
			background-color: #fff;
			color: #3D3D3D;
			display: flex;
			overflow-x: auto;
			white-space: nowrap;
			box-sizing: border-box;
		}

		.scroll-view-item {
			display: inline-block;
			width: calc(100% / 4);
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			position: relative;
			/* 添加相对定位 */
			box-sizing: border-box;
			/* 确保边框在总宽度内计算 */

			&::after {
				content: '';
				display: inline-block;
				width: 50%;
				/* 默认宽度为50% */
				margin: 0 auto;
				position: absolute;
				bottom: 0;
				left: 25%;
				/* 使其居中 */
				height: 2rpx;
				/* 默认未选中的高度 */
				background: #fff;
				/* 默认未选中的颜色 */
				z-index: 1;
			}

			&.activite {
				font-weight: 600;
				color: #1E92F0;

				&::after {
					background: #1E92F0;
					height: 4rpx;
					width: 50%;
				}
			}
		}

		.swiper_content {
			background-color: #f2f2f2;
			flex: 1;
		}

		.feedback-add-icon {
			position: absolute;
			bottom: 300rpx;
			right: 32rpx;
			width: 120rpx;
			height: 120rpx;
			@include flex-center;
			flex-direction: column;
			border-radius: 50%;
			background-color: #fff;
			box-shadow: 0px 4px 10px 0px rgba(216, 216, 216, 0.8), inset 0px 4px 10px 0px rgba(216, 216, 216, 0.3);

			.add-icon {
				margin-top: 16rpx;
				width: 55rpx;
				height: 55rpx;
			}

			.add-title {
				color: #1E92F0;
				font-size: 24rpx;
				font-weight: 600;
			}
		}
	}
</style>