zj-mobile-oa/pages/noticeFile/noticeFile.vue

<template>
	<scroll-view>
		<view class="detail content">
			<view class="title">通知公告</view>
			<u-line length="95%" margin="auto" color="#000"/>
			
			<scroll-view scroll-y="true" style="padding: 30rpx 60rpx;box-sizing: border-box;height: calc(100vh - 900rpx);">
				<view v-for="(it,idx) in info" :key="idx" class="detailItem" v-if="info.length">
					<view v-if="!isCardInfo">{{it.GGBT}}</view>
					<view v-if="!isCardInfo">{{it.FBSJ ? it.FBSJ.slice(0,10) : null}}</view>
					
					<view v-if="isCardInfo">{{it.WJBT}}</view>
					<view v-if="isCardInfo">{{it.FBRQ ? it.FBRQ.slice(0,10) : null}}</view>
				</view>
				<view v-else>
					暂无通知。
				</view>
			</scroll-view>
		</view>
		<view class="overview content">
			<view class="title">已发布文件</view>
			<view class="cardList">
				<view v-for="(it,idx) in cardList" :key="idx" :style="{'background-color':it.color}" class="card" @click="clickCard(it)">
					<view :style="{'background': it.iconColor}">
						<image :src="it.icon"></image>
					</view>
					<view>{{it.text}}</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {ref} from "vue"
	import { onReady, onShow } from "@dcloudio/uni-app"
	import { ApiRequest } from "@/utils/request.js"
	
	const info = ref([])
	const s4 = new SM4Util()
	
	const isCardInfo = ref(false)	
	const cardList = ref([
		{
			icon: "../../static/notice/u31.svg",
			iconColor: "linear-gradient(to bottom, rgb(0,196,213), rgb(0,218,151))",
			text: "党建工作",
			color: "rgb(200,245,225)",
			code: "P0102"
		},
		{
			icon: "../../static/notice/u32.svg",
			iconColor: "linear-gradient(to bottom, rgb(53,153,253), rgb(137,100,244))",
			text: "委发文件",
			color: "rgb(255,219,224)",
			code: "P0103"
		},
		{
			icon: "../../static/notice/u33.svg",
			iconColor: "linear-gradient(to bottom, rgb(0,136,255), rgb(0,181,255))",
			text: "行政工作",
			color: "rgb(207,232,245)",
			code: "P0101"
		},
		{
			icon: "../../static/notice/u34.svg",
			iconColor: "linear-gradient(to bottom, rgb(226,76,246), rgb(254,86,224))",
			text: "相关知识",
			color: "rgb(255,236,207)",
			code: "P0104"
		}
	])
	
	//获取所有通知消息
	function getNotice(){
		ApiRequest({
			url: '/g2app/dataabase/queryDataByColWithPage3',
			method: 'POST',
			data:{
				colums: "ID,GGBT,FBSJ,FBFW",
				order: "FBSJ",
				pageno: 1,
				pagesize: 999,
				sqlwhere: "and FBZT=1 and GGBK='C01' and (FBFWMANUSERID like '%0c67561f-5d0d-48fd-a90b-90d69a98fbac%' or FBFWMANUSERID='全部')",
				tablename: "SX_TZGG"
			}
		}).then(res=>{
			if(res.code === 0 && res.success){
				info.value = res.data
			}
		})
	}
	
	//点击卡片获取通知
	function clickCard(it){
		isCardInfo.value = true
		ApiRequest({
			url: '/g2app/dataabase/queryMainDataAndChildDataWithPage',
			method: 'POST',
			data: JSON.stringify({
				data: s4.encryptData_CBC(JSON.stringify({
					tablename: "SX_FBLIST",
					pageno: 1,
					pagesize: 999,
					childtablename: "SX_FBLIST_02",
					colums: "ID,WJBT,FBBM,LM ,GKFW,FBRQ",
					childcolums: "TOP 1 ID,USERID,READSTATUS",
					order: "FBRQ desc",
					sqlwhere: `and LM in('${it.code}') and ( GKFW ISNULL OR GKFW LIKE '0c67561f-5d0d-48fd-a90b-90d69a98fbac')`
				}))
			})
		}).then(obj=>{
			let res = strToJson(s4.decryptData_CBC(obj.data))
			info.value = res.data
		})
	}
	
	onReady(()=>{
		getNotice()
	})
</script>

<style lang="scss" scoped>
	body{
		background-color: #0063d0;
	}	
	.content{
		margin: 50rpx;
		background-color: #fff;
		border-radius: 20rpx;
		width: calc(100vw - 100rpx);
	}
	.title{
		padding: 30rpx 60rpx;
		font-size: 50rpx;
		font-weight: 600;
	}
	.detail{
		height: calc(100vh - 750rpx);
		.detailItem{
			display: flex;
			justify-content: space-between;
			font-size: 40rpx;
			>uni-view{
				margin: 20rpx 0;
			}
		}
	}
	.overview{
		height: 500rpx;
		.cardList{
			height: 50%;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-around;
			.card{
				width: 23%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 500;
				border-radius: 10rpx;
				>uni-view:nth-of-type(1){
					width: 150rpx;
					height: 150rpx;
					margin-right: 100rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				uni-image{
					width: 70rpx;
					height: 70rpx;
				}
			}
		}
	}
</style>