xhlred/pages/form/myDonate.vue

<template>
	<view class="content">
		<view class="top">
			我的捐赠
		</view>
		<view class="total">
			<view class="total-left">
				捐赠总额
			</view>
			<view class="total-right">
				{{ sum }}元
			</view>
		</view>
		<view class="box">
		<view class="box-item" v-for="item in list" :key="item.id">
			<view class="header">
				明细
			</view>
			<view class="main">
				<view class="main-left">
					<view class="project">
						{{item.intention}}
					</view>
					<view class="time">
						<!-- {{item.pay_time}} -->
						{{getRecTime(item.pay_time)}}
					</view>
				</view>
				<view class="mian-right">
					{{item.money}}元
				</view>
			</view>
			
		</view>
		</view>
		<empty v-if="list.length === 0"></empty>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import { MyDonaList } 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,
				sum:3,
				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';
				MyDonaList({
					page: obj.page,
					limit: obj.limit
				}).then(({
					data
				}) => {
					console.log(data)
					obj.sum = data.sum
					// obj.list = data.list
					obj.list = obj.list.concat(data.list);
					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;
	}
	.total{
		padding: 18rpx 24rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #e0e0e0;
	}
	.box{			
		padding: 0 24rpx;
		.box-item{
			padding: 24rpx 0;
			border-bottom: 1rpx solid #e0e0e0;
			.header{
				color: #999999;
				font-size: 24rpx;
			}
			.main{
				margin-top: 22rpx;
				display: flex;
				justify-content: space-between;
				.mian-right{
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
				}
				.main-left{
					.project{
						color: #333;
						font-size: 28rpx;
					}
					.time{
						margin-top: 6rpx;
						color: #999999;
						font-size: 22rpx;
					}
				}
			}
		}
		
	}
	

	
</style>