jmpc/src/views/contribution.vue

<template>
	<div class="contribution">
			<div class="boxtitle">
				当前位置：首页 > 爱心榜
			</div>
			<div class="boxSearch">
				<input type="text" v-model="searchValue" placeholder="请输入捐赠者" required />
				<img src="@/assets/img/nsearch.png" class="searchImg" @click="search">
			</div>
		<div class="jmbox">
			<div class="center">
				<div class="title">
					<div class="time"> 公示时间 </div>
					<div class="name"> 捐赠者 </div>
					<div class="price"> 捐赠金额 </div>
					<div class="intention"> 捐赠意向 </div>
					<div class="remarks"> 备注 </div>
				</div>
				<div style="padding: 10px;color: #999999;" v-show="sum == 0">
					------暂无更多数据------
				</div>
				<div class="list" v-for="l in list">
					<div class="item">
						<div class="time"> {{ getTime(l.createtime) }} </div>
						<div class="name"> {{ l.contact }} </div>
						<div class="price"> {{ l.amount }} </div>
						<div class="intention"> {{ l.order_name }} </div>
						<div class="remarks"> {{ l.remarks }} </div>
					</div>
				</div>
			</div>
			<div class="pagec">
				<div class="fristPage" @click="page = 1">
					第一页
				</div>
				<div class="pagetoomuch" v-show="totalPage>10">
					<div class="nextPage" v-show="page-4>0">
						...
					</div>
					<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
					:class="{isChoose:count == page}" v-if="count>page-5&&count<page+4 &&count!=totalPage">
						{{ count }}
					</div>
					<div class="nextPage" v-show="page+4<totalPage">
						...
					</div>
					<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
					:class="{isChoose:count == page}" v-if="count==totalPage">
						{{ count }}
					</div>
				</div>
				
				<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
				:class="{isChoose:count == page}" v-show="totalPage<=10">
					{{ count }}
				</div>
				<div class="nextPage" @click='nextPage'>
					下一页
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getTime } from '../utils/utils.js'
import { getlaveList,getlaveListsearch } from '@/request/api.js'

import jmBox from '@/components/box.vue'
	export default {
		components: {
			jmBox,
		},
		data() {
			return {
				loadingType: 'loadmore',
				searchValue: '',
				navList: {
					title: '爱心榜',
				},
				page: 1,
				limit: 10,
				sum: 0,
				list: [],
			}
		},
		computed: {
			// 总页数
			totalPage() {
				return Math.ceil(this.sum/this.limit)
			}
		},
		mounted() {
			this.getlave()
		},
		methods: {
			search() {
				getlaveListsearch({page:this.page,limit:this.limit},this.searchValue).then(res => {
					this.list = res.data.data
					this.sum = res.data.count
				})
			},
			pageChoose(count) {
				this.page = count
			},
			getTime(time) {
				return getTime(time)
			},
			// 下一页
			nextPage() {
				this.page++ 
				if (this.page > this.totalPage) {
					this.page = this.totalPage
				}
			},
			// 爱心榜
			getlave() {
				getlaveList({page:this.page,limit:this.limit}).then(res => {
					this.list = res.data.data
					this.sum = res.data.count
				})
			},
			getCategory(id) {
				if (id == 20) {
					return '疫情防控'
				} else if(id == 21){
					return 'AED救护及科普'
				} else if(id == 22){
					return '红十字会人道事业（非定向捐款）'
				}
			}
		},
		watch: {
			page() {
				this.getlave()
			}
		}
	}
</script>

<style lang="scss" scoped>
$red: #D82020;
.pagetoomuch {
	display: flex;
}
.boxSearch {
	padding-right: 10px;
	position: relative;
	top: 20px;
	input {
		padding-right: 10px;
		position: absolute;
		right: 10px;
		min-width: 180px;
		border-radius: 10px;
		border: solid 1px #CCCCCC;
		padding: 5px 10px;
		padding-right: 30px;
		height: 15px;
		outline: none; // 设置点击后无效果
	}
	.searchImg {
		width: 15px;
		margin: auto 0;
		position: absolute;
		top: 5px;
		right: 20px;
	}
}
.jmbox {
	height: 600px;
	padding: 70px 0;
}
.contribution {
	box-shadow: 1px 1px 6px #e1e1e1;
	border-top: solid 2px $red;
	background-color: #fff;
	.boxtitle {
		padding: 10px;
		background-color: #F2F2F2;
	}
	.center {
		text-align: center;
		.time,.price,.remarks,.name,.intention {
			border: solid 1px #F2F2F2;
			padding: 5px;
		}
		.time,.price,.remarks {
			flex: 1;
		}
		.name,.intention {
			flex: 2;
		}
		.title {
			color: $red;
			display: flex;
			justify-content: space-around;
		}
		.list {
			.item {
				display: flex;
				justify-content: space-around;
			}
		}
	}
	.pagec {
		display: flex;
		float: right;
		margin: 20px 30px;
		.fristPage,.pageNum,.nextPage {
			margin-left: 3px;
			border: solid 1px #F2F2F2;
			line-height: 30px;
			text-align: center;
		}
		.fristPage,.nextPage {
			padding: 0 10px;
		}
		.pageNum {
			width: 30px;
			height: 30px;
		}
		.isChoose {
			background-color: $red;
			color: #fff;
		}
	}
}
</style>