guosen-ldt-client/pagesB/pages/agent/myIncome/myIncome.vue

<template>
	<view>
		<mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view class="card" v-for="(item,index) in list" :key="index">
				<view class="top">
					<view class="center">
						<image class="avatar" :src="item.avatar" mode=""></image>
						<text class="nickname">{{item.nickName}}</text>
					</view>
					<view class="center">
						<text class="time">{{item.createTime}}</text>
					</view>
				</view>
				<view class="bottom">
					<text class="name">{{item.shopName}}</text>
					<view class="data">
						<text class="margin-right-10">+</text>
						<text class="text-price" style="font-size: 36rpx;">{{item.fee}}</text>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				downOption:{
					auto:false
				},
			}
		},
		onLoad() {

		},
		methods: {
			downCallback() {
				setTimeout(() => {
					uni.showToast({
						title: "刷新成功",
						icon: "none"
					})
					this.mescroll.resetUpScroll();
				}, 1000)
			},
			upCallback(mescroll) {
				let params = {
					agenter:this.vuex_userId,
					current:mescroll.num,
					size:mescroll.size,
				}
				try {
					this.$api.agenter.earningsDetail(params).then(res => {
						let data = res.data.records
						let total = res.data.total
						mescroll.endBySize(data.length, total);
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(data); //追加新数据
					})
				} catch (e) {
					this.mescroll.endErr()
				}
			},
		}
	}
</script>

<style lang="scss">
	.card{
		padding: 20rpx  40rpx;
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 170rpx;
		
		.top{
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			border-bottom: 1rps solid #EEEEEE;
			
			.avatar{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
			}
			
			.nickname{
				color: #666666;
				margin-left: 10rpx;
			}
			.time{
				color: #666666;
			}
		}
		
		.bottom{
			display: flex;
			justify-content: space-between;
			
			.name{
				color: #252525;
				font-size: 32rpx;
				font-weight: 800;
			}
			
			.data{
				font-size: 36rpx;
				font-weight: 800;
				color: #EF9944;
			}
		}
	}
</style>