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" 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/introduce/introduce.vue'
	export default {
		components: {
			aboutUs
		},
		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()
			changeTaber(2)
			this.getCaseList()
		},
		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>
	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;
	}

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


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