dxh/pages/index/loveList.vue

<template>
	<view class="content">
		<view class="ss-wrap flex" v-if="!showss" @click="showss = true">
			<image src="../../static/icon/Rectangle.png" mode=""></image>输入（捐赠者或捐赠单位）名称搜索
		</view>
		<input type="text" placeholder="输入（捐赠者或捐赠单位）名称搜索" v-model="keyword" class="ss" v-if="showss" :focus="showss" confirm-type="search" @confirm="getLoveList('reload')">
		<view class="love-list-wrap">
			<view class="tab-tit flex">
				<view class="tit">
					捐赠时间
				</view>
				<view class="tit" style="width: 30%;">
					捐献者/单位
				</view>
				<view class="tit" style="width: 20%;">
					捐赠金额
				</view>
				<view class="tit">
					捐赠意向
				</view>
			</view>
			<scroll-view scroll-y="true" :style="{'height': height}" class="love-list" @scrolltolower="getLoveList()">
				<espempty v-if="loaded && loveList.length == 0"></espempty>
				<view class="tab-tit flex tab-val" v-for="item in loveList" @click="showP(item)">
					<view class="tit clamp">
						{{item.pay_time | getTime}}
					</view>
					<view class="tit clamp" style="width: 30%;">
						{{item.donate_er || '佚名'}}
					</view>
					<view class="tit clamp" style="width: 20%;">
						{{item.money*1}}
					</view>
					<view class="tit clamp">
						{{item.intention || '红十字会人道事...'}}
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="zz-wrap">
				<view class="top">
					捐赠详情
				</view>
				<view class="tit">
					捐赠时间：
				</view>
				<view class="con">
					{{showPD.pay_time | getTime}}
				</view>
				<view class="tit">
					捐献者/单位：
				</view>
				<view class="con">
					{{showPD.donate_er || '佚名'}}
				</view>
				<view class="tit">
					捐赠金额：
				</view>
				<view class="con">
					{{showPD.money*1}}
				</view>
				<view class="tit">
					捐赠意向：
				</view>
				<view class="con">
					{{showPD.intention || '红十字会人道事业'}}
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import espempty from '@/components/espempty';
	import {
		getLove
	} from '@/api/index.js';
	export default {
		components: {
			espempty
		},
		data() {
			return {
				height: '',
				loveList: [],
				page: 1,
				limit: 50,
				keyword: '',
				showss: false,
				loadingType: 'more',
				loaded: false,
				showPD:{}
			}
		},
		filters: {
			getTime(val) {
				let date = new Date(val * 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();
				return Y + '/' + M + '/' + D;
			},
		},
		onLoad() {
			this.getLoveList()
		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.love-list').boundingClientRect();
					query.exec(function(res) {
						obj.height = (resu.windowHeight - res[0].top - 10) + 'px';
						console.log(obj.height)
					});
				},
				fail: res => {}
			});
		},
		methods: {
			showP(item) {
				this.showPD = item
				this.$refs.popup.open()
			},
			//获取红会爱心榜 
			getLoveList(type) {
				let obj = this
				if(type == 'reload') {
					obj.page = 1
					obj.loveList = []
					obj.loadingType = 'more'
					obj.loaded = false
				}
				if(obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
					return
				}
				obj.loadingType = 'loading'
				getLove({
					page: obj.page,
					limit: obj.limit,
					name: obj.keyword
				}).then(res => {
					obj.loveList = obj.loveList.concat(res.data.data)
					obj.page++
					if(obj.limit == res.data.data.length) {
						obj.loadingType = 'more'
					}else {
						obj.loadingType = 'noMore'
					}
					obj.loaded = true
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-top: 20rpx;
		height: auto;
		min-height: 100%;
		background-color: #fff;
	}

	.ss-wrap {
		width: 695rpx;
		height: 62rpx;
		background: #f5f5f5;
		border-radius: 31rpx;
		margin: auto;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		font-weight: 500;
		color: #99999F;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 15rpx;
		}
	}

	.ss {
		width: 695rpx;
		height: 62rpx;
		background: #f5f5f5;
		border-radius: 31rpx;
		margin: auto;
		padding-left: 30rpx;
	}

	.love-list-wrap {
		width: 694rpx;
		// height: 873rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 30rpx;
		margin: 30rpx auto;
		overflow: hidden;
		.tab-tit {
			line-height: 65rpx;
			border-bottom: 1px solid #F2F2F2;

			.tit {
				width: 25%;
				text-align: center;
				font-size: 24rpx;
				font-weight: bold;
				color: #FF4C4C;
			}
		}

		.tab-val {
			.tit {
				color: #101010;
			}
		}
	}
	.zz-wrap {
		background-color: #fff;
		width: 600rpx;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		.top {
			text-align: center;
			padding: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
		.tit {
			font-size: 28rpx;
			font-weight: bold;
			padding-bottom: 10rpx;
		}
		.con {
			font-size: 28rpx;
			padding-bottom: 20rpx;
			text-indent: 2em;
		}
	}
</style>