purchase-let/pageQuota/balanceDetail/index.vue

<template>
	<up-sticky bgColor="#fff">
		<up-tabs :list="tabsLst" :itemStyle="{width:'33vw',paddingBottom:'20rpx'}" lineColor='#50C758' :current='mark'
			@change="tabsChange"></up-tabs>
	</up-sticky>
	<block v-if="lists.length>0">
		<view class="content" v-if='type==1||type==2'>
			<view class="li" v-for="(item,index) in lists" :key="index">
				<view class="li-top">
					<text>{{item.title}}</text>
					<text style="font-weight: bold;" :style="{color:item.type=='in'?'#50C758':'red'
					}">{{ item.type=='in'?'+':'-' }}{{item.amount}}</text>
				</view>
				<view class="li-top" style="margin-bottom: 0;">
					<text style="font-size: 24rpx;color: grey;">{{item.create_time}}</text>
					<text style="font-size: 24rpx;color: grey;">余额 {{item.before_balance}}</text>
				</view>
			</view>
		</view>
		<view class="content" v-if='type==3'>
			<view class="li" v-for="(item,index) in lists" :key="index">
				<view class="li-top">
					<text>{{item.title}}</text>
					<text style="font-weight: bold;" :style="{color:!item.financial_pm?'#50C758':'red'
					}">{{ !item.financial_pm?'+':'-' }}{{item.number}}</text>
				</view>
				<view class="li-top" style="margin-bottom: 0;">
					<text style="font-size: 24rpx;color: grey;">{{item.create_time}}</text>
				</view>
			</view>
		</view>
		<view class="content" v-if='type==4'>
			<view class="li" v-for="(item,index) in lists" :key="index">
				<view class="li-top">
					<text>{{item.order_sn}}</text>
					<text style="font-weight: bold;" :style="{color:!item.status?'#50C758':'red'
					}">{{ !item.status?'+':'-' }}{{item.number}}</text>
				</view>
				<view class="li-top" style="margin-bottom: 0;">
					<text style="font-size: 24rpx;color: grey;">{{item.create_time}}</text>
				</view>
			</view>
		</view>
	</block>
	<up-empty v-else mode="history" style="margin-top: 20vh;" text='没有更多内容了'>
	</up-empty>

	<view style="height: 50rpx;">

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	import {
		getFundList
	} from "@/api/address.js"

	const navLists = ['', '采购款明细', '余额明细', '礼品券明细', '返还金明细']
	const tabsLst = reactive([{
			name: '全部'
		},
		{
			name: '收入'
		},
		{
			name: '支出'
		},
	]);

	const mark = ref(0)
	const tabsChange = (e) => {
		mark.value = e.index
		getLists()
	}

	const lists = ref([])
	let type = ref('')
	const getLists = async (isPullDown = false) => {
		let res = await getFundList({
			type: type.value,
			mark: mark.value || ''
		})
		lists.value = res.data.lists
		if (isPullDown) uni.stopPullDownRefresh()

	}

	onLoad((opt) => {
		type.value = opt.type
		uni.setNavigationBarTitle({
			title: navLists[type.value]
		})
		getLists()
	})

	onPullDownRefresh(() => {
		getLists(true)
	})
</script>

<style lang="scss">
	.content {
		background-color: white;
		width: 690rpx;
		padding: 20rpx;
		margin: 0 auto;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 100rpx;

		.li {
			margin-top: 20rpx;
			border-bottom: 1px solid #EDF2FA;
			padding-bottom: 20rpx;

			.li-top {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
			}

		}

	}
</style>