newTianLi/pages/news/news.vue

<template>
	<view class="center">
		<view class="img">
			<image src="../../static/img/logo.png" mode=""></image>
		</view>
		<view class="test_title">
			新闻动态
		</view>
		<view class="box" v-if="isShow">
			<view class="caseBox" v-for="(item,index) in newsList"  @click="nav(item.id)">
				<view class="caseBox-img">
					<image :src="imgUrl+item.coverimage" mode=""></image>
				</view>
				<view class="caseBox-right">
					<view class="title">
						{{item.title}}
					</view>
					<view class="date">
						{{item.createtime}}
					</view>
					<view class="content">
						{{item.synopsis}}
					</view>
				</view>
			</view>
			<view class="tishi" v-if="isShowtishi">
				已加载全部数据~~
			</view>
			

			<view class="pagInation">
				<!-- prevText	String	上一页	左侧按钮文字
			     nextText	String	下一页	右侧按钮文字
                 current	Number	1	当前页
                 total	Number	0	数据总量
                 pageSize	Number	10	每页数据量
                 showIcon	Boolean	false	是否以 icon 形式展示按钮 
				 @change	点击页码按钮时触发	e={type,current} current为当前页，
				 type值为：next/prev，表示点击的是上一页还是下一个-->
				<!-- 	<uni-pagination title="标题文字" prevText="" nextText="" pageSize="10" total="20" @change="" ></uni-pagination> -->
				<!-- <uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination> -->
				<uni-pagination class="pagination" prevText="上一页" nextText="下一页" @change="handlePage" show-icon="false" :total="total" :current="pageNum" :pageSize="pageSize"></uni-pagination>
			</view>
		</view>
		<view class="xianqingye" v-html="newsDetail.content" v-else>	
		</view>
		<aboutUs class="aboutUs"></aboutUs>
	</view>

</template>
<script>
	import {changeTaber} from '@/utils/tarberChange.js'
	import {newslist,newsDetail} from '@/api/index.js'
	import {getTime} from '@/utils/time.js'
	
	import aboutUs from '@/components/introduce/introduce.vue'
	export default {
		components: {
			aboutUs
		},
		data() {
			return {
				isShowtishi:false,//false不展示
				isShow:true,
				imgUrl: 'http://tianli.liuniu946.com',
				newsList: [],
				newsCid:30,
				// limit:,
				// page:1,
				total: '',//数据总量
				pageSize: 5,//每页数据量
				pageNum: 1,//当前页
				newsDetail:{}
			}
		},

		onLoad() {
			// this.loadData();
			// this.handlePage()
			this.$nextTick(function(){
				changeTaber(3)
			})
			this.getNewsList()
		},
		methods: {
			async loadData() {	
				const obj = this;
			},
			
			//分页
			handlePage(params) {
				console.log(params)
				this.pageNum = params.current;
				this.getNewsList()
			},
			//获取案例
			getNewsList() {
				let obj = this
				newslist({
					category_id: obj.newsCid,
					page: obj.pageNum,
					limit: obj.pageSize
				}).then(({data}) => {					
					data.list.forEach(e => {
						e.createtime = getTime(e.createtime)
					})
				console.log(data, '111111')
				obj.newsList = data.list
				obj.total = data.count
				if(data.list.length < 5) {
					this.isShowtishi = true
				}else{
					this.isShowtishi = false
				}
				})
			},
			//大概，
		nav(id) {
			this.isShow = false;
			newsDetail({}, id).then(res => {
					console.log(res, "111111")
					this.newsDetail =res.data
				// }).catch(err => {
				// 	this.gsjj = err.data
				// 	console.log("2222222222")
				// 	console.log(err, 'cuoww')
				// })
			})
		},
		
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;

	}

	.center {
		height: 100%;
	}

	.img {
		margin: 17rpx 0 17rpx 41rpx;
		width: 208rpx;
		height: 52rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
.aboutUs {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		margin-bottom: 100rpx;
	}
	.pagination {
		position: fixed;
		bottom: 0;
		left: 0;
		bottom:232rpx;
	}
			
	.tishi{
		font-size: 16rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #C7C9D1;
		line-height: 101px;
	}

	.test_title {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 60rpx;
		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;
		background-color: #0165B5;
	}

	.box {
		display: flex;
		flex-direction: column;

		align-items: center;

		.caseBox {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			width: 90%;
			height: 100%;

			.caseBox-img {
				flex-shrink: 1;
				width: 240rpx;
				height: 160rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.caseBox-right {
				margin-left: 30rpx;
				width: 440rpx;
				display: flex;
				flex-direction: column;


				.title {
					margin-top: -70rpx;
					font-size: 18rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #535962;
					max-width: 420rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

				}

				.date {
					margin-top: 10rpx;
					font-size: 11rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #A1A1A1;
					line-height: 20rpx;
				}

				.content {
					font-size: 15rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #A1A1A1;
					line-height: 46rpx;
					max-width: 420rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}


	// .uni-pagination__child-btn{

	// }
	// 	.pagInation > .uni-pagination>.uni-pagination__btn > .uni-pagination__child-btn > span{

	// }
</style>