OfficeApp/pages/oaHome/accountLog.vue

<template>
	<view class="">
		<view class="head">

			<view class="money">
				收益明细（元）
				<view class="" style="margin-top: 35rpx;font-size: 35rpx;">
					￥ {{money ||0}}
				</view>
			</view>
		</view>

		<view class="cont">
			<view class="tit">
				收益明细
			</view>
			<view class="card" v-for="item,index in orderList" :key='index'>
				<view class="card-top">
					<view class="">
						<!-- 	2024-01-2 16:20:34 -->
						{{item.create_time}}
					</view>
					<view class="" style="color: #6A92EB;">
						<!-- 任务收益金额增加 -->
						{{item.type_desc}}
					</view>
				</view>
				<view class="card-top" style="margin-top: 30rpx;">
					<view class="tit" style="font-size: 28rpx;">
						<!-- 2024-01-2 16:20:34 -->
						{{item.remark}}
					</view>
					<view class="">
						<!-- 任务收益金额增加 -->
						{{item.change_amount_desc}}
					</view>
				</view>
			</view>
			<u-loadmore :status="status" v-if='orderList.length>0' />

			<view class="" v-if='orderList.length==0'>
				<u-empty icon="/static/newWork/index/empty.png" iconSize='200' width='300' height="300" marginTop='50'
					textColor='#BFD7FF' text="没有更多了~"></u-empty>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		account_log,
	} from "@/api/newTask.js"
	export default {
		data() {
			return {
				orderList: [],
				flag: false,
				status: "loadmore",
				page_no: 2,
				page_size: 20,
				money: ""
			}
		},
		methods: {
			async getFirstOrderLogList() {
				let res = await account_log({
					page_no: 1,
					page_size: 20
				})
				this.orderList = res.data.lists
			}
		},
		mounted() {
			this.getFirstOrderLogList()
		},
		onLoad(option) {
			this.money = option.money
		},
		onReachBottom() {
			if (this.flag) return
			let {
				page_no,
				page_size
			} = this
			let that = this
			this.status = "loading"
			this.page_no += 1
			this.flag = true
			account_log({
				page_no,
				page_size
			}).then(res => {
				that.orderList = that.orderList.concat(res.data.lists)
				this.flag = false
				if (!res.data.lists.length) {
					this.status = "nomore"
					this.flag = true
				}
			})
		},
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 750rpx;
		background-color: #2B63E3;
		height: 200rpx;
		position: relative;

		.money {
			width: 670rpx;
			background-color: rgba(255, 255, 255, .2);
			box-shadow: 0.5rpx 0.5rpx 200rpx 0.5rpx rgba(0, 0, 0, 0.1);
			height: 220rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			position: absolute;
			left: 50%;
			top: 100%;
			transform: translate(-50%, -50%);
			backdrop-filter: blur(50rpx);
			color: white;
			padding: 20rpx;

		}
	}

	.cont {
		// width: 690rpx;
		margin: 120rpx auto;
		padding: 20rpx;

		.tit {
			position: relative;
			padding-left: 20rpx;
			font-size: 30rpx;
			color: #1A1A1A;
			font-weight: bold;

		}

		.tit::before {
			content: "";
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			width: 6rpx;
			/* 左边框的宽度 */
			height: 25rpx;
			border-radius: 20rpx;
			background-color: #2B63E3;
		}

		.card {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.card-top {
				display: flex;
				justify-content: space-between;
			}
		}



	}
</style>