jp-railway/pages/homePage/homePage.vue

<template>
	<view>
		<!-- 吸顶搜索框 -->
		<view class="sticky" v-if="flag">
			<input type="text" @click="gotoUrl('pages/search/searchResult')" placeholder="请输入搜索内容">
		</view>
		<!-- 轮播图 -->
		<view class="slideshow">
			<view class="wrap">
				<view class="search-box"  @click="gotoUrl('pages/search/searchResult')" >
					<u-search color="black"
					
					 search-icon-color="#fff" placeholder-color="#fff" bg-color="#8a7170"
						placeholder="请输入搜索内容" :show-action="false" input-align="center"></u-search>
				</view>
				<u-swiper mode="none" @click="swiperclick" img-mode="scaleToFill" 
				:list="list" :title="true" height="422"></u-swiper>
			</view>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<view class="title">
				公告
			</view>
			<view class="content">
				<u-notice-bar :volume-icon="false"
				padding=" 32rpx 0 " duration="4000" @click="noticeclick"
				 type="none" :is-circular="false" @change="noticechange"
				 mode="vertical" :list="toplistShow"></u-notice-bar>
				
			</view>
			<view class="date" v-if="toplist.length">
				{{toplist[topindex].createTime}}
			</view>
		</view>
		<!-- 宫格 -->
		<view class="grid">
			<u-grid :col="4" :border="false">
				<u-grid-item @click="ckList(noticeList[0],'铁路概况')" >
					<img src="../../assets/img/tlgk.png" alt="">
					<view class="grid-text">铁路概况</view>
				</u-grid-item>
				<u-grid-item  @click="ckList(noticeList[1],'机构设置')">
					<img src="../../assets/img/jgsz.png" alt="">
					<view class="grid-text">机构设置</view>
				</u-grid-item>
				<u-grid-item  @click="ckList(noticeList[2],'政务动态')">
					<img src="../../assets/img/zwdt.png"   alt="">
					<view class="grid-text">政务动态</view>
				</u-grid-item>
				<u-grid-item  @click="ckList(noticeList[3],'党建动态')" >
					<img src="../../assets/img/djdt.png" alt="">
					<view class="grid-text">党建动态</view>
				</u-grid-item>
				<u-grid-item  @click="ckList(noticeList[4],'法制宣传')"  >
					<img src="../../assets/img/fzxc.png" alt="">
					<view class="grid-text">法制宣传</view>
				</u-grid-item>
				<u-grid-item  @click="ckList(noticeList[8],'纪检监察')">
					<img src="../../assets/img/jjjc.png" alt="">
					<view class="grid-text">纪检监察</view>
				</u-grid-item>
				<u-grid-item  @click="ckList(noticeList[9],'文明创建')" >
					<img src="../../assets/img/wmcj.png" alt="">
					<view class="grid-text">文明创建</view>
				</u-grid-item>
				<u-grid-item @click="ckList(noticeList[5],'为您服务')">
					<img src="../../assets/img/wnfw.png"  alt="">
					<view class="grid-text">为您服务</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 新闻资讯 -->
		<view class="news"  style="padding-bottom: 0px;">
			<view class="title">
				<view class="icon">
					<img src="../../assets/img/news.png" alt="">
				</view>
				<view class="text">
					新闻资讯
				</view>

			</view>
			<view class="news-item" v-for="(item,i) in footlist" @click="ckInfo(item.id)" :key="i" >
				<view class="content">
					<view class="news-title">
						{{item.title}}
					</view>
					<view class="information">
						<view class="classify">
							{{item.typeName}}
						</view>
						<view class="date">
							{{item.createTime}}
						</view>

					</view>
				</view>

				<view class="img">
					<img  v-if="item.pic" :src="item.pic" alt="">
					<img  v-else src="@/assets/img/default_img.png" alt="">
					
				</view>

			</view>
		</view>
		<u-divider bg-color="#F2F4F4" @click="ckList(noticeList[10],'新闻资讯')" border-color="#CFD2D5">点击查看更多</u-divider>
		<tabbar  
		current="0"></tabbar>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/news.js'

	import tabbar from "../../components/Tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				noticeList:[
					"2044eba8-776d-4195-b54f-b3d00928ed98",//	铁路概况0
					"86e29bf7-9e8f-4a28-9361-1001705d3dc6",//	机构设置	1	
					"939fbcca-8c31-478f-a7dc-6c649648164e",//	政务动态	2
					"f57b8b67-db9a-4110-bc9b-7ec382a07954",//	党建动态	3
					"39599bb3-78e9-4e84-99b5-2d6a5c1c40e3",//	法治宣传	4
					"7288376a-b582-4e9a-98fa-c218e35b5c30",//	为您服务5
					"696d571d-54ba-4954-804e-74f4310e4d6a",//	公众参与6
					"ee0ea72a-75bf-4970-ad34-11e3132bc6a3",//	图片新闻7		
					"8e7f6d22-2b5b-4efc-b354-dbcddb46a8b3",//	纪检监察8	
					"a4870553-44e0-4172-91db-263cedf5938f",//	文明创建9	
					"de3958c2-0010-4009-b7e1-15bfdcc60cef",//	通知公告10
				],
				flag: false,
				scrollTop: "",
				list: [
				],
				toplist:[],
				footlist:[],
				topindex:0,
			}
		},
		onLoad(){
			 
				this.getSwiperList()
				this.getList("de3958c2-0010-4009-b7e1-15bfdcc60cef",5,"toplist");//通知公告
				this.getList("ee0ea72a-75bf-4970-ad34-11e3132bc6a3",5,"footlist");//新闻资讯-图片新闻
			
			
		},
		computed:{
			toplistShow(){
				var sz=[];
				for(var i in this.toplist){
					var item=this.toplist[i]
					sz.push(item.title)
				}
				return sz;
			}
		},
		methods: {
			noticeclick(e){
				var id=this.toplist[e].id;
				this.ckInfo(id);
			},
			noticechange(e){
				this.topindex=e
			},
			ckList(id,title){
				var url="/pages/news/news?id="+id+"&title="+title;
				uni.navigateTo({
					url:url
				})
			},
			ckInfo(id){
				var url="/pages/news/articleDetails?id="+id;
				uni.navigateTo({
					url:url
				})
			},
			swiperclick(index){
				
				var id=this.list[index].id;
				this.ckInfo(id);
			},
			getList(id,pageSize,sz){
				
				API.tabList({
					pageSize: pageSize,
					typeId:id,
				}).then((response) => {
					uni.hideLoading();
					this[sz]=response.data
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getSwiperList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.swiperList({
					pageSize: 5,
					
				}).then((response) => {
					uni.hideLoading();
					this.list=[]
					for(var i in response.data){
						var item=response.data[i]
						this.list.push({
							id:item.id,
							image:item.url,
							title:item.title
						})
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
				//console.log(this.scrollTop);
				if (this.scrollTop >= 200) {
					this.flag = true;
				} else {
					this.flag = false;
				}
			},

		},



	}
</script>


<style scoped lang="scss">
	page {
		padding-bottom: 50px;
	}

	.sticky {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		border-bottom: 1px solid #fff;
		padding: 16rpx 40rpx;
		background-color: #fff;

		uni-input {
			background-color: #E8E8E8;
			height: 32px;
			line-height: 32px;
			border-radius: 8px;
			text-align: center;
		}
	}



	.u-search {


		/deep/.uni-input-placeholder {
			font-weight: bold;
		}

		/deep/.uni-input-input {
			color: #ffffff !important;
			font-weight: bold;
		}
	}

	.search-box {
		width: 100%;
		background-color: #4F3C27;
		padding: 16rpx 40rpx;
		position: absolute;
		line-height: 32px;
		color: #ffffff !important;
		opacity: 0.4;
		z-index: 999;
		opacity: 0.4;
	}


	// 公告
	.notice {
		background-color: rgba(255, 255, 255, 1);
		line-height: 40px;
		display: flex;
		padding: 0 32rpx;

		.title {
			color: rgba(31, 74, 153, 1);
			font-size: 18px;
			font-weight: bold;
		}

		.content {
			width: 380rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: rgba(51, 51, 51, 1);
			margin-left: 14px;
		}

		.date {
			color: rgba(119, 119, 119, 1);
			margin-left: auto;
		}
	}

	// 宫格
	.grid {
		img {
			width: 80rpx;
			height: 80rpx;
		}

		.grid-text {
			color: rgba(51, 51, 51, 1);
			margin-top: 8rpx;
		}
	}

	// 新闻资讯
	.news {
		padding: 40rpx 32rpx;
		background-color: rgba(244, 244, 244, 1);

		.title {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}

		.news-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;

			.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;
				}

				.information {
					margin-top: 44rpx;
					display: flex;
					justify-content: space-between;
					color: #777777;
				}
			}
		}

		.img {
			width: 224rpx;
			border-radius: 5px;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>