newjzred/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" @click="lookzs(item)">
				<view class="header">
					明细
				</view>
				<view class="main">
					<view class="main-left">
						<view class="project">
							{{item.order_name}}
						</view>
						<view class="time">
							{{item.paytime_text.split(' ')[0]}}
							<!-- {{getRecTime(item.paytime)}} -->
						</view>
					</view>
					<view class="mian-right">
						{{item.amount}}元
					</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: []
			}
		},
		onLoad() {
			this.loadData();
		},
		onReachBottom() {
			this.loadData();
		},
		methods: {
			// 查看证书
			lookzs(item) {
				let date = new Date(item.paytime * 1000)
				let year = date.getFullYear()
				let month = date.getMonth() >= 9 ? date.getMonth() + 1 : '0' + (date
					.getMonth() + 1)
				let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
				uni.navigateTo({
					url: '/pages/form/donaSuccess?money=' + item.amount + '&name=' + encodeURI(item.name) +
						'&time=' + encodeURI(year + '年' + month + '月' + day + '日')
				})
			},
			async loadData() {
				let obj = this;
				if (obj.loadingType === 'noMore' || obj.loadingType == 'loading') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				obj.loadingType = 'loading';
				MyDonaList({
					page: obj.page,
					limit: obj.limit
				}).then(({
					data
				}) => {
					console.log(data)
					// obj.sum = data.sum
					obj.list = obj.list.concat(data.data);
					obj.page++;
					if (obj.limit == data.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)));
					}
				}
				console.log(f)
				return 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>