cxc-szcx-uniapp/pages/document/index.vue

<template>
	<view :class="['content',{'gray':store.isgray==1}]">
		<customNav>
			<view class="nav_box f-row aic jcb">
				<view class="back f-row aic" @click="back">
					<uni-icons type="left" size="20" color="#fff"></uni-icons>
				</view>
				<view class="search f-row aic">
					<input type="text" v-model="searchKey" @confirm="search" @blur="showicon=true&&!searchKey"
						@focus="showicon=false" />
					<view class="f-row aic" v-if="showicon">
						<image src="../../static/search.png" mode=""></image>
						<text>搜索</text>
					</view>
				</view>
			</view>
		</customNav>
		<view class="list">
			<view class="item" v-for="item,i in list" :key="i"
				@click="jump(`/pages/document/detail?data=${JSON.stringify(item)}&id=${id}`,item)">
				<view class="title">
					{{item._title}}
				</view>
				<view class="time_box f-row aic">
					<view class="time">
						{{item._time}}
					</view>
					<view class="look f-row aic" v-if="item._depart">
						{{item._depart}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	import {
		onReachBottom,
		onPullDownRefresh,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		gongwenlistApi,
		faguiApi,
		zhiduApi,
		gonggaolistApi,
		cjzhiduApi
	} from '@/api/api.js';
	import {
		useStore
	} from '@/store';
	const store = useStore();
	import customNav from '@/bpm/customNav.vue';
	import {
		beforeJump,
		opendocument
	} from '@/utils/index.js';
	const showicon = ref(true)
	const searchKey = ref('')
	const list = ref([])
	let pageNo = 1
	let pageSize = 15
	let loading = false
	/**公文接口*/
	const bpmlist = () => {
		loading = true
		gongwenlistApi({
			pageNo,
			pageSize,
			fwbt: formatSearchkey()
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'fwbt', 'fwtime', null)]
			}
			loading = false
		}).catch((err) => {
			console.log('err', err);
		})
	}

	/**制度接口*/
	const zhidu = () => {
		loading = true
		let getzhidu = zhiduid == 0 ? zhiduApi : cjzhiduApi
		getzhidu({
			pageNo,
			pageSize,
			zdmc: formatSearchkey()
		}).then((res) => {
			if (res.success) {
				let str = zhiduid == 0 ? 'zbbm_dictText' : 'sbbm'
				list.value = [...list.value, ...formatObj(res.result.records, 'zdmc', str, null)]
			}
			loading = false
		}).catch((err) => {
			console.log('err', err);
		})
	}
	/**法规接口*/
	const fagui = () => {
		loading = true
		faguiApi({
			pageNo,
			pageSize,
			flfgmc: formatSearchkey()
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'flfgmc', 'ssbm', null)]

			}
			loading = false
		}).catch((err) => {
			console.log('err', err);
		})
	}

	/**公告接口*/
	const gonggaolist = () => {
		loading = true
		gonggaolistApi({
			pageNo,
			pageSize,
			neirong:formatSearchkey()
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'neirong', 'fbdw', 'createTime')]
			}
			loading = false
		}).catch((err) => {
			console.log('err', err);
		})
	}
	const formatObj = (arr, title, time, depart) => {
		arr.map((item) => {
			item['_title'] = item[title]
			item['_time'] = item[time]
			item['_depart'] = item[depart]
		})
		return arr
	}
	const formatSearchkey = () => {
		if (searchKey.value.trim()) {
			return '*' + searchKey.value + '*'
		}
	}
	const search = () => {
		pageNo = 1
		loading = false
		list.value = []
		getlist()
	}
	watch(searchKey, (nval, oval) => {
		if (!nval.trim()) {
			getlist()
		}
	})
	const back = () => {
		uni.navigateBack()
	}
	const jump = (url, item) => {
		if (id.value == 3) {
			return opendocument(item.mingcheng)
		}
		beforeJump(url, () => {
			uni.navigateTo({
				url
			})
		})
	}
	const id = ref(null)
	let zhiduid = null
	onLoad((options) => {
		id.value = options.id
		zhiduid = options.zhiduid
		getlist()
	})
	const getlist = () => {
		if (id.value == 0) {
			bpmlist()
		} else if (id.value == 1) {
			gonggaolist()
		} else if (id.value == 2) {
			zhidu()
		} else if (id.value == 3) {
			fagui()
		}
	}
	onPullDownRefresh(() => {
		pageNo = 1
		loading = false
		list.value = []
		getlist()
		uni.stopPullDownRefresh()
	})
	onReachBottom(() => {
		if (loading) return
		pageNo++
		getlist()
	})
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding-top: v-bind(cusnavbarheight);
		padding-bottom: 24rpx;

	}

	.list {
		padding: 0 30rpx;

		.item {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
			border-radius: 16rpx;
			padding: 30rpx;
			margin-top: 24rpx;
			position: relative;

			.dot {
				width: 12rpx;
				height: 12rpx;
				background: #ED361D;
				position: absolute;
				border-radius: 50%;
				left: 9rpx;
				top: 44rpx;
			}

			.title {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.time_box {
				font-size: 24rpx;
				color: #888888;



				.look {
					position: relative;
					margin-left: 60rpx;

					&::after {
						position: absolute;
						content: ' ';
						width: 2rpx;
						height: 20rpx;
						background: #999999;
						top: 50%;
						transform: translateY(-50%);
						left: -30rpx;
					}
				}
			}

			image {
				width: 28rpx;
				height: 22rpx;
				margin-left: 62rpx;
				margin-right: 8rpx;
			}
		}
	}



	.nav_box {
		position: absolute;
		bottom: 14rpx;
		width: 100%;
		left: 0;
	}

	.back {
		padding: 0 30rpx;
	}

	.search {
		position: relative;
		padding-right: 30rpx;
		flex: 1;

		view {
			position: absolute;
			left: 28rpx;
			top: 50%;
			transform: translateY(-50%);

			font-size: 28rpx;
			color: #999999;

		}

		input {
			flex: 1;
			height: 72rpx;
			background: #F8F8F8;
			border-radius: 44rpx;
			padding: 0 28rpx;
			color: #333333;
		}

		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 16rpx;
		}
	}
</style>