high-mini/pages/goods/recording/recording.vue

<template>
	<view>

		<view v-if="recordInfo == '' " class="mart60 fotct font14 fcor666">
			<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
		</view>

		<view class="width90" v-for="recod in recordInfo" :key="recod.id">
			<view class="width100 font15 height20 mart10">
				<view class="flleft width50 fcor666">
					金币充值
				</view>
				<view class="flright width50 fotrt fcorred" v-if="typeId == 1">
					+{{recod.gold}}
				</view>
				<view class="flright width50 fotrt fcorred" v-else>
					-{{recod.gold}}
				</view>
			</view>
			<view class="width100 fcor999 font14 mart5">
				{{recod.createTime | formatDate('-')}}
			</view>
			<view class="line1f2 mart15"></view>
		</view>
		<view class="loading-text">{{ loadingText }}</view>
	</view>
</template>

<script>
	import {
		getUserGoldRecList
	} from '../../../Utils/Api.js';
	let app = getApp();
	export default {
		data() {
			return {
				typeId: '',
				recordInfo: [],
				imagewxUrl: app.globalData.imageWxImg,
				imgadres:'noorder.png',
				pageNum: 1,
				pageSize: 10,
				isNoMoreData: false,
				loadingText: ''
			}
		},
		onLoad(option) {
			this.typeId = option.id;
			if (this.typeId == 1) {
				uni.setNavigationBarTitle({
					title: '充值记录'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '消费记录'
				})
			}
			this.getUserGoldRecLists();
		},
		filters: {
			//过滤器 用于格式化时间
			formatDate: function(value, spe = '/') {
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			}
		},
		onReachBottom() {
			this.getUserGoldRecLists();
		},
		methods: {
			getUserGoldRecLists() {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.isNoMoreData) {
					uni.hideLoading()
					this.loadingText = '到底了';
					return false;
				}
				let pagenum = this.pageNum;
				let params = {
					pageNum: pagenum,
					goldType: this.typeId,
					pageSize: this.pageSize
				}
				getUserGoldRecList(params).then(res => {
					if (res.return_code == '000000') {
						uni.hideLoading();
						this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
						if(res.return_data.total == (this.pageNum * this.pageSize)){
							this.isNoMoreData = true;
						}
						this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
						this.recordInfo = this.recordInfo.concat(res.return_data.list);
					} else {
						this.recordInfo = [];
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f9;
	}

	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}

	.bordr {
		border-top: 1px solid #fcfcfc;
	}

	.height60 {
		height: 60px;
		line-height: 60px;
	}

	.pictime {
		margin-left: 20px;
	}

	.arrow {
		width: 8px;
		height: 8px;
		border-top: 2px solid #999;
		border-right: 2px solid #999;
		position: absolute;
		left: 30%;
		top: 22px;
		transform: rotate(135deg);
	}

	.line1f2 {
		width: 100%;
		height: 1px;
		background-color: #f2f2f2;
	}
</style>