jp-railway/pages/oawork/noticeList.vue

<template>
	<view>
		<u-navbar :title="title">
			<!-- <view class="slot-wrap">
				<u-icon name="search" 
				@click="gotoUrl('pages/search/searchResult?type='+listForm.typeId)"
				size="48" color="#777777"></u-icon>
			</view>	 -->
		</u-navbar>
		
			<u-popup v-model="show"  height="600"
			 :closeable="true"
			 mode="bottom" border-radius="30" >
					<view class="showInfo">
						<view class="row">
							<view class="name">
								标题
							</view>
							<view class="value">
								{{showInfo.name}}
							</view>
						</view>
						<view class="row" v-if="infoList.length"
						
						 >
							<view class="name">
								附件
							</view>
							<view class="url"  >
								<view class="urlitem" v-for="(item,i) in infoList"
								 :key="i"
								 
								  @click="downInfo(item)" >
									{{item.name}}  下载
								</view>
							</view>
						</view>
						<view class="row" v-else >
							<u-divider 
							 :isnone="true" nonetext="未上传附件" 
							></u-divider>
						</view>
					</view>
			</u-popup>
			
		<view class="news">
			
			<view class="news-item" v-for="(item,i) in list" 
			
			@click="ckInfo(item)" :key="i">
				<view class="content">
					<view class="news-title">
						{{item.name}}
					</view>
					<view class="information">
						<view class="classify">
							{{item.typeN}}
						</view>
						
						<view class="date">
							{{substrDate(item.uploadTime)}}
						</view>
						
					</view>
				</view>
				
				<view class="img">
					
				</view>
				
			</view>
		   </view>
		<u-divider  v-if="list.length==recordsTotal"
		 :isnone="list.length==0" nonetext="没有找到相关内容" 
		>已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/addressbook.js'
	
	export default {
		data() {
			return {
				title:"内网公告",
				list:[],
				listForm:{
					pageIndex:1,
					// typeId:"",
					// title:"",
					pageSize:20,
				},
				recordsTotal:0,
				imgurl:'',
				show:false,
				showInfo:{
					url:"",
				},
				
			}
		},
		onLoad(op){
			// if(op.title){
			// 	this.title=op.title
			// }
			// this.listForm.typeId=op.id
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		computed:{
			infoList(){
				var url=this.showInfo.url;
				if(url){
					
					return JSON.parse(url)
				}
				return []
			}
		},
		methods: {
			downInfo(item){
				window.location.href=item.url
				
			},
			ckInfo(item){
				// var url="/pages/news/articleDetails?id="+id;
				// uni.navigateTo({
				// 	url:url
				// })
				this.showInfo=item;
				this.show=true
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			getList(){
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.networkNoticeList(this.listForm).then((res) => {
					uni.hideLoading();
					this.list = [
						...this.list,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.showInfo{
	padding: 60rpx;
	.row{
		display: flex;
		font-size: 32rpx;
		margin-top: 12rpx;
		.name{
			margin-right: 16rpx;
			
			color: #9E9E9E;
		}
		.value{
			font-size: 36rpx;
			font-weight: bold;
		}
		.url{
			font-size: 32rpx;
			color: #00BCD4;
			.urlitem{
					margin-bottom: 12rpx;
			}
		}
	}
	
}

	/deep/.u-slot-content {
		display: block;
		text-align: right !important;
		margin-right: 16px;
		color: #333333;
	}
.news{
		.news-item{
			padding:30rpx;
			margin: 20rpx;
			background: #fff;
			border-radius: 10px;
			.news-title{
				font-size: 42rpx;
				font-weight: bold;
			}
			.information{
				    display: flex;
				    justify-content: space-between;
					color: #9E9E9E;
			}
		}
	}

</style>