mall-front-app/pages/commission/components/commission-log.vue

<!-- 分销首页：明细列表  -->
<template>
	<view class="distribution-log-wrap">
		<view class="header-box">
			<image class="header-bg" :src="sheep.$url.static('/static/images/title2.png')" />
			<view class="ss-flex header-title">
				<view class="title">实时动态</view>
				<text class="cicon-forward" />
			</view>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="loadmore" class="scroll-box log-scroll"
			scroll-with-animation="true">
			<view v-if="state.pagination.list">
				<view class="log-item-box ss-flex ss-row-between" v-for="item in state.pagination.list" :key="item.id">
					<view class="log-item-wrap">
						<view class="log-item ss-flex ss-ellipsis-1 ss-col-center">
							<view class="ss-flex ss-col-center">
								<image class="log-img" :src="sheep.$url.static('/static/images/notice.png')" mode="aspectFill" />
							</view>
							<view class="log-text ss-ellipsis-1">
                {{ item.title }} {{ fen2yuan(item.price) }} 元
              </view>
						</view>
					</view>
					<text class="log-time">{{ dayjs(item.createTime).fromNow() }}</text>
				</view>
			</view>

			<!-- 加载更多 -->
			<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" color="#333333"
				@tap="loadmore" />
		</scroll-view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { reactive } from 'vue';
	import _ from 'lodash';
	import dayjs from 'dayjs';
  import BrokerageApi from '@/sheep/api/trade/brokerage';
  import { fen2yuan } from '../../../sheep/hooks/useGoods';

	const state = reactive({
		loadStatus: '',
		pagination: {
      list: [],
      total: 0,
      pageNo: 1,
      pageSize: 1,
		},
	});

	async function getLog() {
    state.loadStatus = 'loading';
    const { code, data } = await BrokerageApi.getBrokerageRecordPage({
      pageNo: state.pagination.pageNo,
      pageSize: state.pagination.pageSize
		});
    if (code !== 0) {
      return;
    }
    state.pagination.list = _.concat(state.pagination.list, data.list);
    state.pagination.total = data.total;
    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
	}

	getLog();

	// 加载更多
	function loadmore() {
    if (state.loadStatus === 'noMore') {
      return;
    }
    state.pagination.pageNo++;
    getLog();
  }
</script>

<style lang="scss" scoped>
	.distribution-log-wrap {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		z-index: 3;
		position: relative;

		.header-box {
			width: 690rpx;
			height: 76rpx;
			position: relative;

			.header-bg {
				width: 690rpx;
				height: 76rpx;
			}

			.header-title {
				position: absolute;
				left: 20rpx;
				top: 24rpx;
			}

			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 30rpx;
			}

			.cicon-forward {
				font-size: 30rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 30rpx;
			}
		}

		.log-scroll {
			height: 600rpx;
			background: #fdfae9;
			padding: 10rpx 20rpx 0;
			box-sizing: border-box;
			border-radius: 0 0 12rpx 12rpx;

			.log-item-box {
				margin-bottom: 20rpx;

				.log-time {
					// margin-left: 30rpx;
					text-align: right;
					font-size: 24rpx;
					font-family: OPPOSANS;
					font-weight: 400;
					color: #c4c4c4;
				}
			}

			.loadmore-wrap {
				// line-height: 80rpx;
			}

			.log-item {
				// background: rgba(#ffffff, 0.2);
				border-radius: 24rpx;
				padding: 6rpx 20rpx 6rpx 12rpx;

				.log-img {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.log-text {
					max-width: 480rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
</style>