jp-railway/pages/news/list.vue

<template>
	<view>
		<u-navbar title="">
			
		</u-navbar>
		
		<view class="news">
			<table  class="table" v-if="recordsTotalList" >
				<tr>
					<td class="tb31">荣誉类型</td>
					<td class="tb32">荣誉细则<span class="tb33"><br>(点击下方内容可查看详情)</span></td>
				</tr>
				<template v-for="(not,j) in noticeList">
					<template v-if="not.list.length">
						<tr v-for="(item,i) in not.list" :class="{trtop:i==0}" @click="ckInfo(item.id)" :key="i+'_'+j">
							<td v-if="i==0" class="tb1" :rowspan="not.list.length" v-html="htmlShow(not.name)" ></td> <td  class="tb2">{{item.title}}</td>
						</tr>
						
					</template>
				</template>
				
			</table>
			
		   </view>
		<u-divider  v-if="recordsTotal==noticeList.length"
		 :isnone="recordsTotalList==0" nonetext="没有找到相关内容" 
		border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/news.js'
	
	export default {
		data() {
			return {
				title:"列表",
				list:[],
				list2:[],
				listForm:{
					pageIndex:1,
					typeId:"",
					title:"",
					pageSize:999,
				},
				noticeList:[
					{
						id:"7288376a-b582-4e9a-98fa-c218e35b5c30",
						name:"个人荣誉",
						list:[]
					},
					{
						
						id:"86e29bf7-9e8f-4a28-9361-1001705d3dc6",
						name:"集体荣誉",
						list:[]
					}	
				],
				noticeList2:[
					{
						id:"9dbeddd2-a863-42d0-a145-260fe008bdbb",
						name:"个人荣誉",
						list:[]
					},
					{
						id:"412eff92-a443-42f7-98c6-5c67d9e64ad8",
						name:"集体荣誉",
						list:[]
					}	
				],
				recordsTotal:0,
				recordsTotalList:0,
				imgurl:'',
				listBl:false,
				listBl2:false,
			}
		},
		onLoad(op){
		},
		
		 
		onReady() {
			uni.showLoading({
				title: "加载中",
				mask: true,
			})
			//86e29bf7-9e8f-4a28-9361-1001705d3dc6
				//7288376a-b582-4e9a-98fa-c218e35b5c30
			var _this=this;
			// this.getList("86e29bf7-9e8f-4a28-9361-1001705d3dc6","")
			// this.getList("7288376a-b582-4e9a-98fa-c218e35b5c30","2")
				this.getList2()
				
			// this.getList(this.list,"9dbeddd2-a863-42d0-a145-260fe008bdbb",this.listBl)
			// this.getList(this.list2,"412eff92-a443-42f7-98c6-5c67d9e64ad8",this.listBl2)
			
		},
		methods: {
			htmlShow(str){
				var t="";
				for(var i in str){
					t+=str[i]+"<br/>"
				}
				return  t
			},
			ckInfo(id){
				var url="/pages/news/articleDetails?id="+id;
				uni.navigateTo({
					url:url
				})
			},
			getList2Set(i){
				var item=this.noticeList[i];
				API.pageList({
					
						pageIndex:1,
						typeId:item.id,
					
						pageSize:999,
					
				}).then((res) => {
					//bl=true
					item=this.noticeList[i];
					item.list=res.data.data
					this.recordsTotalList+=item.list.length
					this.recordsTotal++;
					
					if(this.recordsTotal==this.noticeList.length){
						uni.hideLoading()
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
				
			},
			getList2(){
				for(var i in this.noticeList){
					this.getList2Set(i)
				}
				
			},
			getList(id,cb){
				
				API.pageList({
					
						pageIndex:1,
						typeId:id,
					
						pageSize:999,
					
				}).then((res) => {
					//bl=true
					this['list'+cb]=res.data.data
					this['listBl'+cb]=true
					if(this.listBl2&&this.listBl2){
						uni.hideLoading()
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table{
		border-collapse:collapse;
		width: 100%;
		border: 1px solid;
		.trtop{
			    border-top: 2px solid;
		}
		td{
			border: 1px solid;
			text-align: center;
			margin: 0;
			padding: 10px 0px;
			
		}
		.tb1{
			font-weight: bold;
			font-size: 18px;
			width: 20%;
			max-width: 200rpx;
			min-width: 150rpx;
		}
		.tb2{
			
			font-size: 14px;
		}
		.tb32,.tb31{
			font-weight: bold;
			font-size: 14px;
		}
		.tb33{
			font-weight: normal;
			font-size: 12px;
			color: #565656;
		}
	}
	page{
		background-color: #ffffff;
		font-family: 'Regular';
	}
	/deep/.u-slot-content {
		display: block;
		text-align: right !important;
		margin-right: 16px;
		color: #333333;
	}
.news{
	padding: 40rpx 32rpx;

  .news-item{
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 40rpx;
	  	max-height:100px;
	  .content{
		  display: flex;
		  flex-direction: column;
		  justify-content: space-between;
		  .news-title{
			  color: rgba(51, 51, 51, 1);
			  font-size: 16px;
			  text-align: justify;
			  width: 438rpx;
			  // white-space: nowrap;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  font-weight: bold;
		  }
		  
		  .information{
			  margin-top: 8rpx;
			  display: flex;
			  justify-content: space-between;
			  color: #777777;
		  }
	  }
  }
.img{
	width: 224rpx;
	border-radius: 5px;
	overflow: hidden;
	img{
		border-radius: 5px;
        width: 100%;
		height: 100%;
	}
}
}
/deep/.u-divider{
	background-color: #ffffff !important;
	color: rgba(182, 189, 195, 1);
	font-size: 12px;
	font-weight: bold;
}
</style>