new-zx-front-app/pages/user/wallet/consumptionLog.vue

<template>
	<!-- 消费分来源 -->
	<s-layout class="wallet-wrap" :bgStyle="{ 'backgroundColor': '#ffffff' }" title="" navbar="normal">

		<view class="model-box ss-flex-col">
			<scroll-view class="list-box" scroll-y="true" @touchmove.stop>
				<!-- 查积分记录 -->
				<view v-if="state.pagination.total > 0 && state.integralType" style="padding: 20rpx;">
					<view class="list-item ss-flex ss-col-center ss-row-between "
						v-for="(item, index)  in state.pagination.list" :key="item.id"
						style="padding:0;padding: 20rpx 0;border-bottom: 1px solid #c4c4c4;">
						<view class="ss-flex ss-col-center" style="width: 100%;">
							<view class="ss-flex ss-m-t-10"
								style="flex-direction: column;align-items: flex-start;width: 100%;" >
								<view class="name" style="width: 100%;"> {{ item.consumptionStatusName }} {{
									[11].includes(item.integralStatus) ? "（" + item.generateUserName + "）" : ""}}
									 {{ item.ancestorQuotaAmount > 0 ? `(超出金额:${points2point(item.ancestorQuotaAmount)})` : "" }}
									<text style="float: right;" class="color-red"
										:class="{ 'color-green': item.practicalIntegralPoints < 0 }">
										{{ item.practicalIntegralPoints > 0 ? '+' + points2point(item.practicalIntegralPoints) :
											points2point(item.practicalIntegralPoints)}}
									</text>

								</view>
								<view class="time " style="width: 100%;">
									{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM') }}
									<text style="float: right;">{{ t('wallet.balance') }}:{{
										points2point(item.afterIntegralPoints)}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 查峰值记录 -->
				<view v-else-if="!state.integralType && state.pagination.total > 0" style="padding: 20rpx;">
					<view class="list-item ss-flex ss-col-center ss-row-between "
						v-for="(item, index)  in state.pagination.list" :key="item.id"
						style="padding:0;padding: 20rpx 0;border-bottom: 1px solid #c4c4c4;">
						<view class="ss-flex ss-col-center" style="width: 100%;">
							<view class="ss-flex ss-m-t-10"
								style="flex-direction: column;align-items: flex-start;width: 100%;" >
								<view class="name" style="width: 100%;"> {{ item.consumptionStatusName }} {{
									[11].includes(item.integralStatus) ? "（" + item.generateUserName + "）" : ""}}
									 {{ item.ancestorQuotaAmount > 0 ? `(超出金额:${points2point(item.ancestorQuotaAmount)})` : "" }}
									<text style="float: right;" class="color-red"
										:class="{ 'color-green': item.maxAvailablePointsAmount < 0 }">
										{{ item.maxAvailablePointsAmount > 0 ? '+' + points2point(item.maxAvailablePointsAmount) :
											points2point(item.maxAvailablePointsAmount)}}
									</text>

								</view>
								<view class="time " style="width: 100%;">
									{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM') }}
									<text style="float: right;">{{ t('wallet.balance') }}:{{
										points2point(item.afterMaxAvailablePointsAmount)}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<s-empty v-else text="暂无数据" paddingTop="200" icon="/static/data-empty.png" />
				<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
					contentdown: t('common.click_to_load_more'),
				}" @tap="onLoadMore(true)" @scrolltolower="onLoadMore(true)" />
			</scroll-view>

		</view>
	</s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import {
	onLoad,
	onReachBottom
} from '@dcloudio/uni-app';
import {
	computed,
	reactive
} from 'vue';
import {
	points2point
} from '@/sheep/hooks/useGoods';
import _ from 'lodash';
import dayjs from 'dayjs';
import PointApi from '@/sheep/api/member/point';
import {
	resetPagination
} from '@/sheep/util';
import ConsumptionApi from '@/sheep/api/distri/consumption';
import { t } from '@/locale'
const userWallet = computed(() => sheep.$store('user').userWallet);
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const userInfo = computed(() => sheep.$store('user').userInfo);
const sys_navBar = sheep.$platform.navbar;

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


async function getLogList() {
	state.loadStatus = 'loading';
	// isFreeze为true是冻结佣金 isFreeze为false是已拿到的佣金
	let {
		code,
		data
	} = await ConsumptionApi.getConsumptionLog({
		pageNo: state.pagination.pageNo,
		pageSize: state.pagination.pageSize,
		integralType: state.integralType
	});
	if (code !== 0) {
		return;
	}
	let list = _.concat(state.pagination.list, data.list);
	state.pagination.list = list;
	state.pagination.total = data.total;
	state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
}




function onLoadMore() {
	if (state.loadStatus === 'noMore') {
		return;
	}
	state.pagination.pageNo++;
	getLogList();
}

onReachBottom(() => {
	onLoadMore();
});
onLoad((options) => {
	state.integralType = options.integralType;
	getLogList();
});
</script>

<style lang="scss" scoped>
.color-red {
	color: red;
}

.color-green {
	color: green;
}

.score-box {
	margin: 20rpx;
	border-radius: 20rpx;
	padding-top: 100rpx;
}

.avatar-box {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	overflow: hidden;

	.avatar-img {
		width: 100%;
		height: 100%;
	}
}

.value-box {
	width: 100rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	border-radius: 50%;
	border: 2px solid #f6f6f6;
}

.btn {
	width: 300rpx;
	background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	border-radius: 20rpx;
	font-size: 30rpx;
	font-weight: 500;
	line-height: 80rpx;
	color: $white;
	position: relative;
	z-index: 1;
}

.header-box {
	width: 100%;
	background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%) no-repeat;
	background-size: 750rpx 100%;
	padding: 0 0 120rpx 0;
	box-sizing: border-box;

	.score-box {
		height: 100%;

		.all-num {
			font-size: 50rpx;
			font-weight: bold;
			color: #fff;
			font-family: OPPOSANS;
		}

		.all-title {
			font-size: 26rpx;
			font-weight: 500;
			color: #fff;
		}

		.cicon-help-o {
			color: #fff;
			font-size: 28rpx;
		}
	}
}

// 筛选
.filter-box {
	height: 114rpx;
	background-color: $bg-page;

	.total-box {
		font-size: 24rpx;
		font-weight: 500;
		color: $dark-9;
	}

	.date-btn {
		background-color: $white;
		line-height: 54rpx;
		border-radius: 27rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: $dark-6;

		.ss-seldate-icon {
			font-size: 50rpx;
			color: $dark-9;
		}
	}
}


.list-box {
	// width: 600rpx;
	// padding: 0 30rpx;
	overflow-y: auto;
	height: 100vh;

	.list-item {

		background: #fff;
		// border-bottom: 1rpx solid #dfdfdf;
		padding: 30rpx;

		.name {
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			line-height: 28rpx;
			// margin-bottom: 20rpx;
		}

		.time {
			font-size: 24rpx;

			font-weight: 500;
			color: rgba(196, 196, 196, 1);
			line-height: 24px;
		}

		.add {
			font-size: 30rpx;

			font-weight: 500;
			color: #e6b873;
		}

		.minus {
			font-size: 30rpx;

			font-weight: 500;
			color: $dark-3;
		}
	}
}
</style>