newTianLi/pages/case/case.vue

<template>
	<view class="center">
		<heard></heard>
		<view class="test_title">案例展示</view>
		<view class="box" v-if="isShow">
			<view class="caseBox" v-for="(item, index) in caseList" @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="caseDetail.content" v-else></view>
		<aboutUs class="aboutUs"></aboutUs>
	</view>
</template>
<script>
import { changeTaber } from '@/utils/tarberChange.js';
import { caseslist, casesDetail } from '@/api/index.js';
import { getTime } from '@/utils/time.js';
import aboutUs from '@/components/public/introduce.vue'
import heard from '@/components/public/heard.vue';
export default {
	components: {
		aboutUs,heard
	},
	data() {
		return {
			isShowtishi: false, //false不展示
			isShow: true,
			imgUrl: 'http://tianli.liuniu946.com',
			caseList: [],
			caseCid: 27,
			// limit:,
			// page:1,
			total: '', //数据总量
			pageSize: 5, //每页数据量
			pageNum: 1, //当前页
			caseDetail: {}
		};
	},

	onLoad() {
		// this.loadData();
		// this.handlePage()
		this.getCaseList();
	},
	onShow() {
		this.$nextTick(function() {
			changeTaber(2);
		});
	},
	methods: {
		async loadData() {
			const obj = this;
		},
		handlePage(params) {
			console.log(params);
			this.pageNum = params.current;

			this.getCaseList();
		},
		//获取案例
		getCaseList() {
			let obj = this;
			caseslist({
				category_id: obj.caseCid,
				page: obj.pageNum,
				limit: obj.pageSize
			}).then(({ data }) => {
				data.list.forEach(e => {
					e.createtime = getTime(e.createtime);
				});
				console.log(data, '111111');
				obj.caseList = data.list;
				obj.total = data.count;
				if (data.list.length < 5) {
					this.isShowtishi = true;
				} else {
					this.isShowtishi = false;
				}
			});
		},
		//大概，
		nav(id) {
			this.isShow = false;
			casesDetail({}, id).then(res => {
				console.log(res, '111111');
				this.caseDetail = res.data;
				// }).catch(err => {
				// 	this.gsjj = err.data
				// 	console.log("2222222222")
				// 	console.log(err, 'cuoww')
				// })
			});
		}
	}
};
</script>

<style lang="scss" scoped>

.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;
	padding-bottom: 150rpx;
	.pagination {
		position: fixed;
		bottom: 0;
		left: 0;
		bottom: 232rpx;
	}

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