ezpc/src/views/love/loveList.vue

<template>
	<div class="love-list">
		<div class="cate">
			<div class="hand" :class="{'red': currentUrl.indexOf('lovelist') != -1}" @click="gotos('/donate/lovelist')">款项捐赠公示</div>
			<div  class="hand" :class="{'red': currentUrl.indexOf('wuzhilist') != -1}" @click="gotos('/donate/wuzhilist')">物资捐赠公示</div>
		</div>
		<div style="padding-bottom: 15px;">款项到账后，我们将为捐赠者开具公益事业捐赠统一票据，如需请致电027-60229370，提供开票信息，谢谢合作！</div>
		<div class="search-wrap flex">
			<span class="name">
				捐赠者:
			</span><el-input class="inp" v-model="name" placeholder="请输入捐赠者"></el-input>
			<span class="name">
				金额:
			</span><el-input class="inp" v-model="money" placeholder="请输入金额"></el-input>
			<span class="name">
				捐赠时间:
			</span>
			<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
				start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
				value-format="yyyy-MM-dd" @change="dateChange">
			</el-date-picker>
			<div class="go" @click="search('re')">提交查询</div>
		</div>
		<div class="list-title flex">
			<div style="width: 35%">捐赠方</div>
			<div style="width: 15%">捐赠金额</div>
			<div style="width: 15%">捐赠时间</div>
			<div style="width: 35%">用途</div>
			<!-- <div style="width: 133px">备注</div> -->
		</div>
		<div class="list-item flex" v-for="(item, index) in tableData" :key="index">
			<div class="clamp" style="width: 35%">{{item.donate_er}}</div>
			<div class="clamp" style="width: 15%">{{item.money}}</div>
			<div class="clamp" style="width: 15%">{{item.time}}</div>
			<div class="clamp" style="width: 35%">{{item.intention}}</div>
			<!-- <div class="clamp" style="width: 133px">{{item.mask}}</div> -->
		</div>
		<div class="table-empty" v-if="tableData.length == 0">
			暂无更多捐赠数据
		</div>
		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页"
			@current-change="currentChange" :page-size="limit" hide-on-single-page></el-pagination>
	</div>
</template>

<script>
	import {
		loveList,
		searchLoveList
	} from '../../request/api.js'
	import {
		Message
	} from 'element-ui'
	export default {
		data() {
			return {
				sdata: '',
				tableData: [],
				total: 100,
				page: 1,
				limit: 14,
				name: '',
				money: '',
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				value1: '',
				value2: ''
			};
		},
		created() {
			// this.getLiveList()
			this.search()
		},
		computed: {
			currentUrl() {
				return this.$route.path
			}
		},
		methods: {
			gotos(path) {
				let currentUrl = this.$route.path
				if (currentUrl === path) {
					return
				} else {
					this.$router.push(path)
				}
			},
			dateChange(e) {
				console.log(e)
				if(e) {
					this.sdata = this.value2[0] + ' - ' + this.value2[1]
				}else {
					this.sdata = ''
				}
			},
			//分页页码改变触发事件
			currentChange(e) {
				console.log(e);
				this.page = e
				this.getLiveList()
			},
			getLiveList() {
				let obj = this
				let data = {
					page: obj.page,
					limit: obj.limit
				}
				loveList(data).then(res => {
					obj.tableData = res.data.list.map(item => {
						if (item.intention === '') {
							item.intention = '非定向捐款'
						}
						let date = new Date(item.add_time * 1000)
						let Y = date.getFullYear()
						let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() +
							1;
						let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
						item.time = Y + '/' + M + '/' + D
						return item
					})
					obj.total = res.data.count
					console.log(obj.tableData)
				})
			},
			search(type) {
				console.log(this.name)
				let obj = this
				if(type == 're') {
					obj.page = 1
					obj.tableData = []
				}
				let data = {
					page: obj.page,
					limit: obj.limit,
					key: obj.name,
					data: obj.sdata,
					money: obj.money
				}
				searchLoveList(data).then(res => {
					// console.log(res, 'dddddddddddd')
					let arr = res.data.data
					if (arr.length !== 0) {
						// Message.success('数据加载完成！')
					} else {
						Message('未找到数据。')
					}
					obj.total = res.data.count
					obj.tableData = arr.map(item => {
						if (item.intention === '') {
							item.intention = '非定向捐款'
						}
						let date = new Date(item.pay_time * 1000)
						let Y = date.getFullYear()
						let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() +
							1;
						let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
						item.time = Y + '/' + M + '/' + D
						return item
					})

				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	
	
	.love-list {
		height: 870px;
		position: relative;
	}

	/deep/ .el-table thead th {
		font-size: 18px;
		font-weight: bold;
		// color: #d82020;
		color: gray;
	}

	/deep/ .el-table tr td {
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #101010;
		padding: 11px 0;
		line-height: 1;
	}

	/deep/ .el-pagination {
		position: absolute;
		display: inline-block;
		bottom: 75px;
		right: 0;
		padding-right: 0;
	}

	.search {
		margin-left: 879px;
		padding-left: 13px;
		padding-right: 13px;
		width: 295px;
		height: 33px;
		line-height: 33px;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		border-radius: 10px;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		input {
			width: 235px;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			outline: none;
			border: none;
		}

		img {
			width: 20px;
			height: 20px;
		}
	}

	.tabb {
		border-right: 1px solid #000000;
		border-bottom: 1px solid #000000;
	}

	.list-title {
		// display: flex;
		text-align: center;
		border: 2px solid #ccc;
		line-height: 36px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #D82020;

		// border-top: none;
		div {
			border-right: 2px solid #ccc;

			&:last-of-type {
				border-right: none;
			}
		}

	}

	.list-item {
		text-align: center;
		border: 2px solid #ccc;
		font-size: 16px;
		line-height: 36px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #101010;
		border-top: none;

		div {
			border-right: 2px solid #ccc;
			font-size: 15px;
			font-weight: 500;
			&:last-of-type {
				border-right: none;

			}
		}
	}

	.table-empty {
		// width: 100%;
		text-align: center;
		border: 2px solid #F2F2F2;
		font-size: 16px;
		line-height: 36px;
		font-family: PingFang SC;
		font-weight: bold;
		border-top: none;
	}
	.search-wrap {
		font-size: 16px;
		align-items: center;
		padding: 0 0 20px 0;
		width: 100%;
		justify-content: space-between;
	
		.inp {
			width: 120px;
			color: #000000;
		}
	
		.name {
			// padding: 0 10px;
		}
	
		.go {
			width: 80px;
			height: 40px;
			background-color: #be0202;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	/deep/ .el-input__inner {
		// background: #dddddd;
	}
	/deep/ .el-range-input {
		// background: #dddddd;
	}
	/deep/ .el-date-editor {
		width: 300px;
	}
	.cate {
		font-size: 20px;
		display: flex;
		border-bottom: 1px solid #ddd;
		margin-bottom: 20px;
		div {
			width: 200px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.red {
		color: #be0202;
	}
</style>