newTianLi/pages/case/case.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">


			<view class="caseBox" v-for="(item,index) in list">
				<view class="caseBox-img">
					<image :src="item.src" mode=""></image>
				</view>
				<view class="caseBox-right">
					<view class="title">
						{{item.title}}
					</view>
					<view class="date">
						{{item.date}}
					</view>
					<view class="content">
						{{item.content}}
					</view>
				</view>
			</view>
		</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 @change="handlePage" show-icon="true" :total="postCount" :current="pageNum"
				:pageSize="pageSize"></uni-pagination>
		</view>
		<aboutUs class="aboutUs"></aboutUs>
	</view>

</template>
<script>
	import {
		changeTaber
	} from '@/utils/tarberChange.js'
	import aboutUs from '@/components/introduce/introduce.vue'
	export default {
		components: {
			aboutUs
		},
		data() {
			return {
				// title: '',
				// src: '',
				// date: '',
				// content: '',
				postCount: 0,
				pageSize: 1,
				pageNum: 1,
				list: [{
					title: '1大家谁都',
					src: "../../static/img/introduce.png",
					date: '2021-06-08 16:26',
					content: 'qwenanckajnckjsanjknscjkanskjcnaskjncakjsncjka1111111111111111111111111111111111111'
				}, {
					title: '1大家谁都',
					src: "../../static/img/introduce.png",
					date: '2021-06-08 16:26',
					content: 'qwenanckajnckjsanjknscjkanskjcnaskjncakjsncjka'
				}],
			}
		},

		onLoad() {
			// this.loadData();
			changeTaber(2)
		},
		methods: {
			async loadData() {
				// uni.request({
				// 	url: '',
				// 	method: 'GET',
				// 	data: {},
				// 	success: res => {},
				// 	fail: () => {},
				// 	complete: () => {}
				// });
				const obj = this;
			},
			getPostListInfo(pageIndex) {
				console.log('pageIndex:' + pageIndex);
				uni.request({
					url: common.website_url + '/cnblogs/getPersonalBlogPostList/' + pageIndex,
					method: 'POST',
					success: res => {
						console.log('isSuccess');
						console.log('getPostListInfo:' + JSON.stringify(res.data));
						this.list = res.data;
					},
					fail: function(e) {
						console.log('接口调用失败:' + JSON.stringify(e));
					}
				});
			},

			getPersonalBlogInfo() {
				uni.request({
					url: common.website_url + '/cnblogs/getPersonalBlogInfo',
					method: 'POST',
					success: res => {
						//console.log('getPersonalBlogInfo:' + JSON.stringify(res.data));
						this.postCount = res.data.postCount;
						this.pageSize = res.data.pageSize;
					},
					fail: function(e) {
						console.log('接口调用失败:' + JSON.stringify(e));
					}
				});
			},
			getDetail(Title, Id, Url) {
				console.log('Title:' + Title + '  Id:' + Id);

				uni.navigateTo({
					url: '../post/post/post?Title=' + Title + '&Id=' + Id
				});
			},
			handlePage(params) {
				var pageIndex = params.current;

				console.log('this.pageNum:' + pageIndex);

				this.getPostListInfo(pageIndex);
			}


		}
	}
</script>

<style lang="scss">
	.center {
		height: 100%;
		
	}

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

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

	.aboutUs {
		width: 100%;
		position: fixed;

	}

	.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 {
			width: 240rpx;
			height: 160rpx;

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

		.caseBox-right {
			margin-left: 40rpx;

			.title {
				margin-top: -40rpx;
				font-size: 18rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #535962;
			
			}

			.date {
				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: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	}

	// .uni-pagination__child-btn{

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

	// }
</style>