mnsx/user/page/recode.vue

<template>
	<view class="content">
		<empty v-if="loaded && list.length == 0"></empty>
		<view v-for="(item, index) in list" :key="index" class="order-item flex">
			<view class="title-box flex_item">
				<!-- <view class="title-avatar"><image src=""></image></view> -->
				<view class="list_tpl">
					<view class="title">
						<text>UID: {{item.uid}}</text>
					</view>
					<view class="time">
						<text>{{item.pay_time | time}}</text>
					</view>
				</view>
			</view>
			<view class="money">
				￥{{item.price}}
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import { getRechargeList } from '@/api/wallet.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	export default {
		data() {
			return {
				list: [],
				loadingType: 'more',
				page: 1,
				limit: 10,
				loaded: false
			}
		},
		filters: {
			time(val) {
				let str = ''
				if(val) {
					let date = new Date(parseInt(val) * 1000);
					let year = date.getFullYear();
					let mon = date.getMonth() + 1;
					let day = date.getDate();
					let hours = date.getHours();
					let minu = date.getMinutes();
					let sec = date.getSeconds();
					return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
				}
			}
		},
		components: {
			uniLoadMore,
			empty
		},
		onReachBottom() {
			this.loadData()
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			loadData() {
				let obj = this
				if(obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
					return 
				}
				obj.loadingType = 'loading'
				getRechargeList({
					page: obj.page,
					limit: obj.limit
				}).then(({data}) => {
					console.log(data)
 					let arr = data.list.map( item => {
						return item
					})
					obj.list = obj.list.concat(arr)
					if(data.list.length == obj.limit) {
						obj.page++
						obj.loadingType = 'more'
					}else {
						obj.loadingType = 'noMore'
					}
					this.loaded = true
				}).catch( err => {
					if(obj.page == 1) {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-item {
		padding: 20rpx 30rpx;
		line-height: 1.5;
		background-color: #fff;
		border-bottom: #F0F0F0 1rpx solid;
		.title-box {
			width: 100%;
			.title-avatar{
				width: 100rpx;
				height: 100rpx;
				margin-right: 25rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 100%;
					background-color: red;
				}
			}
			.list_tpl{
				width: 85%;
				.title {
					font-size: $font-lg;
					color: $font-color-base;
					overflow:hidden;            //超出的文本隐藏
					text-overflow:ellipsis;     //溢出用省略号显示
					white-space:nowrap; 
				}
				.time {
					margin-top: 15rpx;
					font-size: 22rpx;
					color: $font-color-light;
				}
			}
		}
		.money {
			color: #901B21;
			font-size: $font-lg;
		}
	}
</style>