xhlred/pages/form/donateList.vue

<template>
	<view class="content">
		<view class="top">
			爱心公示栏
		</view>
		<view class="box">
			<view class="box-item" v-for="item in list" :key="item.id">
				<view class="price">
					金额：{{ item.money}}元
				</view>
				<view class="box-1">
					项目：{{ item.intention }}
				</view>
				<view class="box-1">
					姓名：{{ item._name}}
				</view>
				<view class="box-1">
					联系方式：{{ item._mobile }}
				</view>
				<view class="box-1">
					捐款时间：{{getRecTime(item.pay_time)}}
				</view>
				
				
			</view>
		</view>
		<empty v-if="list.length === 0"></empty>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {
		getDonaList
	} from '@/api/ask.js';
	import empty from '@/components/empty';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default{
		components: {
			empty,
			uniLoadMore
		},
		data() {
			return{
				page: 1,
				limit: 10,
				loadingType: 'more',
				list:[
					// { id: 0, price: '500.00', project: '疫情防控', name: '韩**', phone: '139****3217', time: '2020-10-24 16：42：53' },
					// { id: 1, price: '450.00', project: '会费缴纳', name: '江**', phone: '139****3217', time: '2020-10-24 16：42：53' },
					// { id: 2, price: '398.00', project: '红十字人道事业（非定向捐赠）',name: '阮**', phone: '139****3217', time: '2020-10-24 16：42：53' },
				]
			}
		},
		onLoad() {
			this.loadData();
		},
		methods:{
			async loadData() {
				let obj = this;
				if (obj.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				obj.loadingType = 'loading';
				getDonaList({
					page: obj.page,
					limit: obj.limit
				}).then(({
					data
				}) => {
					console.log(data)
					console.log()
					obj.list = obj.list.concat(data);
					obj.page++;
					if (obj.limit == data.length) {
						obj.loadingType = 'more';
					} else {
						obj.loadingType = 'noMore';
					}
				})
			},
			getRecTime(timestamp, fmt) {
				let d = new Date(timestamp * 1000),
					// f = fmt || 'yyyy/MM/dd', 
					f = fmt || 'yyyy.MM.dd hh:mm:ss',
					o = {
						'M+': d.getMonth() + 1, //月份 
						'd+': d.getDate(), //日 
						'h+': d.getHours(), //小时 
						'm+': d.getMinutes(), //分 
						's+': d.getSeconds(), //秒 
						'q+': Math.floor((d.getMonth() + 3) / 3), //季度 
						'S': d.getMilliseconds() //毫秒 
					};
				if (/(y+)/.test(f)) {
					f = f.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for (let k in o) {
					if (new RegExp('(' + k + ')').test(f)) {
						f = f.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
					}
				}
				return f;
				console.log(f)
			},
		}
	}
</script>

<style lang="scss">
	
	page, .content{
		height: 100vh;
		background-color: #FFFFFF;
	}
	.top{
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #E63931;
		color: #FFFFFF;
		padding: 22rpx 0;
	}
	.box{
		.box-item{
			
			margin-top: 12rpx;
			background-color: #f8f8f8;
			padding: 24rpx;
			border-bottom: 1rpx solid #e0e0e0;
			border-top: 1rpx solid #e0e0e0;
			padding-bottom: 24rpx;
			.price{
				padding: 6rpx 0;
				border-bottom: 1rpx solid #2F2F2F;
				margin-bottom: 12rpx;
			}
			.box-1{
				margin-top: 4rpx;
				font-size: 28rpx;
			}
			
		}
		
	}

	
</style>