sct/pagesT/Distribution/IncomeDetails.vue

<template>
	<!-- 提现明细 -->
	<view class="IncomeDetails">
		<view class="navbar">
			<view v-for="(item, index) in tab_list" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(item, index)">
				{{ item.name }}
				<view class="current-line"></view>
			</view>
		</view>
		<scroll-view class="income-ul" @scrolltolower="scrollBootom" scroll-y="true" style="height:100%">
			<view class="income-li clearfix" @click="goPage('/pagesT/Distribution/Application?id=' + item.id)" v-for="(item, index) in withdrawals_list" :key="index">
				<view class="float_left income-label">
					<view class="income-label-text">提现到{{ item.type === 1 ? '微信钱包' : item.type === 2 ? '支付宝' : item.type === 3 ? '银行卡' : '' }}</view>
					<view class="income-time">{{ $_utils.formatDate(item.createTime) }}</view>
				</view>
				<view class="float_right">
					<view class="income-money">
						+
						<text style="margin-left: 6upx;">{{ item.money }}</text>
					</view>
					<view class="status-text">
						{{ item.auditStatus === 1 ? '待审核' : item.auditStatus === 2 ? '打款成功' : item.auditStatus === 3 ? '无效' : item.auditStatus === 4 ? '待打款' : '' }}
					</view>
				</view>
			</view>
			<u-loadmore margin-top="20" v-if="withdrawals_list.length" :status="loading_status" />
		</scroll-view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			tabCurrentIndex: 0,
			isLoding: false,
			loading_status: 'loadmore',
			//   1待审核 4待打款  2打款成功  3失效
			tab_list: [
				{
					name: '全部',
					value: 0
				},
				{
					name: '待审核',
					value: 1
				},
				{
					name: '待打款',
					value: 4
				},
				{
					name: '已打款',
					value: 2
				},
				{
					name: '无效',
					value: 3
				}
			],
			page: 1,
			pageSize: 10,
			auditStatus: 0,
			withdrawals_list: []
		};
	},
	onLoad() {
		this.text_set = this.$store.state.distributionTextSet;
		if (this.text_set.commission_r) {
			uni.setNavigationBarTitle({
				title: (this.text_set.withdrawal || '提现') + '明细'
			});
		}
	},
	onShow() {
		this.CommissionWithdrawalsGetAll();
	},
	methods: {
		scrollBootom() {
			if (this.pageTotal / this.pageSize > this.page) {
				this.page += 1;
				this.CommissionWithdrawalsGetAll();
			}
		},
		tabClick(row, index) {
			this.auditStatus = row.value;
			this.tabCurrentIndex = index;
			this.page = 1;
			this.CommissionWithdrawalsGetAll();
		},
		async CommissionWithdrawalsGetAll() {
			this.loading_status = 'loading';
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				auditStatus: this.auditStatus
			};
			this.$u.api.CommissionWithdrawalsGetAll({
				...params
			}).then(data=>{
				if (this.page === 1) {
					this.withdrawals_list = data.data
				} else {
					this.withdrawals_list = this.withdrawals_list.concat(data.data);
				}
				this.pageTotal = data.pageTotal;
				this.loading_status =  this.$_utils.loadStatus(this.page, this.pageSize, this.pageTotal);
			});
		}
	}
};
</script>

<style lang="scss">
.income-ul {
	.income-li {
		background-color: #FFFFFF;
		padding: 20upx;
		border-bottom: 1upx solid #f5f5f5;
		.income-label {
			.income-time {
				font-size: 24upx;
				color: #999;
				padding-top: 10upx;
			}
		}
		.float_right {
			text-align: right;
			.income-money {
				color: #333;
				font-size: 32upx;
				font-weight: bold;
			}
			.status-text {
				font-size: 24upx;
				padding-top: 10upx;
				color: #fd463e;
			}
		}
	}
}

.navbar {
	display: flex;
	height: 88upx;
	background: #fff;
	position: relative;
	z-index: 10;
	border-bottom: 1upx solid #eee;

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28upx;
		color: #666666;
		position: relative;
		font-weight: 300;

		&.current {
			font-weight: 500;
			font-size: 32upx;
			color: #fd463e;
			.current-line {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 10upx;
				transform: translateX(-50%);
				width: 40upx;
				height: 6upx;
				background: #fd463e;
				border-radius: 6upx;
			}
		}
	}
}
</style>