shuzi/pages/user/teamList.vue

<template>
	<view class="content">
		<empty v-if="list && list.length == 0"></empty>
		<view class="" style="background-color: #fff;">
			<view class="content-box" v-for="item in list">
				<view class="content-box-left">
					<view class="left-img"><image :src="item.avatar" mode=""></image></view>
					<view class="right-title">
						<!-- <view class="top">{{ item.nickname }}</view> -->
						<view class="bottom">ID:{{ item.uid }}</view>
						<view class="bottom " style="font-size: 24rpx;">昵称:{{ item.nickname }}</view>
					</view>
				</view>
				<view class="content-box-right">
					<view class="box-right">
						参与金额:
						<span>{{ item.sells }}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { myspread } from '@/api/user.js';
import empty from '@/components/empty';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		empty
	},
	data() {
		return {
			list: [],
			key: '',
			page: 1,
			limit: 20,
			loadingType: 'more'
		};
	},
	computed: {
		...mapState(['wlgsbList'])
	},
	onLoad(opt) {
		this.key = opt.type * 1;
	},
	onShow() {
		this.loadData();
	},
	onReachBottom() {
		this.loadData();
	},
	onReady() {},
	methods: {
		...mapMutations(['setSbList']),
		//获取收入支出信息
		async loadData(source) {
			let obj = this;
			if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
				//防止重复加载
				return;
			}
			// 修改当前对象状态为加载中
			obj.loadingType = 'loading';
			myspread({ page: obj.page, limit: obj.limit, grade: obj.key }).then(({ data }) => {
				obj.list = obj.list.concat(data.list);
				console.log(obj.list);
				obj.page++;
				if (obj.limit == data.list.length) {
					//判断是否还有数据， 有改为 more， 没有改为noMore
					obj.loadingType = 'more';
					return;
				} else {
					//判断是否还有数据， 有改为 more， 没有改为noMore
					obj.loadingType = 'noMore';
				}
			});
		}
	}
};
</script>

<style lang="scss">
.content,
page {
	height: auto;
	min-height: 100%;
	background: #111;
}
.content-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	// margin: 30rpx 0;
	background-color: #111;
	padding: 0 20rpx 10rpx;
	border-bottom: 1px solid #fff;
	.content-box-left {
		display: flex;

		.left-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.right-title {
			margin-left: 15rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.top {
				font-weight: 500;
				font-size: 30rpx;
			}

			.bottom {
				color: #fff;
			}
		}
	}

	.content-box-right {
		display: flex;
		flex-direction: column;
		width: 230rpx;
		color: #fff;
		.state {
			color: red;
		}
		span {
			color: #fff;
			font-size: 28rpx;
		}
	}
}
</style>