great_distribution/pages/cashList/index.vue

<template>
	<view class="consume-content" :style="{'--status-bar-': statusBarHeight}">
		<view class="consume-content-info">
			<!-- 头部主要内容 开始 -->
			<view class="consume-content-header">
				<customNavbar title="收支明细" bgColor="var(--gd-bgm-color)" :customNavbarInfo="{}" :contentStyle="{}"
					:leftStyle="{color: '#fff'}"></customNavbar>
				<!--  tab 开始 -->
				<u-tabs 
				:list="list1" 
				@click="clickTabs" 
				lineColor="var(--gd-bgm-color)"
				:activeStyle="{ color: 'rgba(127, 127, 127, 1)' }"
				:inactiveStyle="{ color: 'rgba(127, 127, 127, 1)' }"
				:scrollable="false"
				></u-tabs>
				<!--  tab 结束 -->
			</view>
			<!-- 头部主要内容 结束 -->
			
			<!--  收支列表 开始  -->
			<view class="consume-content-list">
				<customScrollList
				ref="customScrollList" 
				@load="load"
				@paging="paging"
				@refresh="refresh"
				 >
					<view v-if="orderWithdrawList.length>0" style="width: 100%;padding: 0 30rpx;box-sizing: border-box;">
						<view v-for="(item,index) in orderWithdrawList" :key="index">
							<view class="custom-list-item">
								<view class="custom-list-item-left">
									<text>申请状态：{{ withdrawStatus(item.status) }}</text>
									<text>提现类型：{{ withdrawType(item.withdrawType)  }}</text>
									<text>支付方式：{{ payWay(item.payWay) }}</text>
									<text>支付状态：{{ payStatus(item.payStatus) }}</text>
									<text>手续费：{{ item && item.servicePrice }}</text>
									<text>提现时间：{{ item && item.createTime }}</text>
								</view>
								<text 
								class="custom-list-item-right">{{ item.withdrawPrice }}</text>
							</view>
						</view>
					</view>
				</customScrollList>
			</view>
			<!--  收支列表 结束  -->
		</view>
	</view>
</template>

<script>
	import {
		navigateTo
	} from "@/utils/util.js"
	export default {
		data() {
			return {
				title: '收支明细',
				statusBarHeight: 0, // 状态栏安全距离
				monry: 123456.789,
				moneyValue: null,
				tool: [ // 我的工具
					{
						title: "支付设置",
						icon: this.$commonConfig.staticUrl + 'balance/zhifu.png',
						url: '/pages/invitationStatistics/index'
					},
					{
						title: "余额提现",
						icon: this.$commonConfig.staticUrl + 'balance/mingxi.png',
						url: '/pages/balance/index'
					},
				],
				list1: [
					{
						name: '全部',
						key: '',
					}, 
					{
						name: '提现中',
						key: 0,
					},
					{
						name: '提现成功',
						key: 1,
					},
					{
						name: '提现失败',
						key: 2,
					}
				],
				serialType: '',
				orderWithdrawList: []
			}
		},
		onLoad() {

		},
		onShow() {
			this.statusBarHeight = getApp().globalData.statusBarHeight
		},
		methods: {
			/**
			 * @author ygh
			 * @data 2023-12-20
			 */
			navigateToFun() {
				navigateTo('/pages/cash/index')
			},
			/**
			 * 数字显示格式化
			 *
			 */
			numFormat(num = 0) {
				if (num < 100000) {
					return num
				} else if (num > 100000) {
					return (num / 10000).toFixed(2)
				}
			},
			/**
			 * 选择tabs
			 */
			clickTabs(item) {
				console.log('item', item);
				if(this.serialType == item.key) return
				this.serialType = item.key
				this.$refs.customScrollList.refresh()
			},
			/**
			 * 获取数据
			 */
			async load(paging) {
				try{
					this.$refs.customScrollList.showPullUp = true
					let res = await this.$u.api.orderWithdrawList({
						noSign: 1,
						userid: this.distribution_user_info.userId,
						pageNum: 1,
						pageSize: 10,
						serialType: this.serialType
					})
					
					if(res && res.code ===200) {
						if(res.data.rows){
							this.orderWithdrawList = this.orderWithdrawList.concat(res.data.rows)
						}else {
							this.orderWithdrawList = []
						}
						this.$refs.customScrollList.loadSuccess({
							list: this.orderWithdrawList,
							total: this.orderWithdrawList.length
						})
					} else {
						this.$refs.customScrollList.loadSuccess({
							list: [],
							total: res.data.total || this.orderWithdrawList.length
						})
					}
					
				}catch(e){
					//TODO handle the exception
					console.error("e===",e)
					this.$refs.customScrollList.loadSuccess({
						list: [],
						total: res.data.total || this.orderWithdrawList.length
					})
				}
			},
			paging(paging){
				console.log("下拉  加载数据")
			},
			/**
			 * 下拉触底
			 */
			async refresh(paging){
				console.log("上拉  加载数据")
				//this.$refs.customScrollList.showEmpty = true
				try{
					//this.$refs.customScrollList.showPullUp = true
					let res = await this.$u.api.orderWithdrawList({
						pageNum: paging.page,
						pageSize: paging.size
					})
					if(res && res.code ===200) {
						if(res.data.performList){
							this.orderWithdrawList = [].concat(res.data.performList)
						}else {
							this.orderWithdrawList = []
						}
						// this.orderWithdrawList = null
						this.$refs.customScrollList.refreshSuccess({
							list: this.orderWithdrawList,
							total: this.orderWithdrawList.length
						})
					} else {
						this.$refs.customScrollList.refreshSuccess({
							list: [],
							total: res.data.total || this.orderWithdrawList.length
						})
					}
				}catch(e){
					//TODO handle the exception
					console.error("e===",e)
					this.$refs.customScrollList.refreshSuccess({
						list: [],
						total: res.data.total || this.orderWithdrawList.length
					})
				}
			},
			/**
			 * 支付方式
			 */
			payWay(type){
				let src = ''
				switch(type) {
					case 'cahsh': src="现金"; break;
					case 'wecaht.applet': src="微信小程序支付"; break;
					case 'alipay': src="支付宝"; break;
				}
				return src
			},
			/**
			 * 支付状态
			 */
			payStatus(type){
				let src = ''
				switch(type) {
					case '0': src="未支付"; break;
					case '1': src="已支付"; break;
					case '2': src="支付中"; break;
					case '3': src="支付失败"; break;
					case '4': src="支付退款"; break;
				}
				return src
			},
			/**
			 * 提现方式
			 */
			withdrawType(type){
				let src = ''
				switch(type) {
					case 'wechat': src="微信零钱"; break;
					case 'bank': src="银行卡"; break;
				}
				return src
			},
			/**
			 * 申请状态
			 */
			withdrawStatus(type){
				let src = ''
				switch(type) {
					case '0': src="申请中"; break;
					case '1': src="提现成功"; break;
					case '2': src="提现失败"; break;
				}
				return src
			},
		}
	}
</script>

<style lang="scss" scoped>
	.consume-content {
		width: 100%;
		height: 100%;
		--header-h: 90rpx;

		.consume-content-info {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
		}
	}

	/** 头部主要内容 开始 */
	.consume-content-header {
		width: 100%;
		//height: var(--header-h);
		box-sizing: border-box;
		position: relative;

		::v-deep .u-search {
			padding: 0 30rpx !important;
		}

		::v-deep .u-search__action {
			color: #fff !important;
		}

		/**  余额 开始  */
		.consume-content-money {
			width: 100%;
			box-sizing: border-box;
			margin-top: 50rpx;
			padding-left: 66rpx;
			color: #fff;

			>text {
				font-size: 24rpx;
			}

			.consume-content-money-num {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				margin-top: 24rpx;

				>text:nth-child(1) {
					.balance-userinfo-util {
						font-size: 24rpx;
						margin-left: 5rpx;
					}

					::v-deep .u-count-num {
						font-weight: bold !important;
						font-size: 48rpx !important;
					}
				}

				>text:nth-child(2) {
					margin-top: 20rpx;
					font-size: 24rpx;
				}
			}
		}

		/**  余额 结束  */

		/**  提现 开始  */
		.consume-content-cash {
			width: 100%;
			box-sizing: border-box;
			position: absolute;
			top: 100%;
			transform: translateY(-50%);
			padding: 0 12rpx;

			.consume-content-consume-box {
				width: 100%;
				height: 100%;
				background-color: #fff;
				box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221, 221, 221, 0.5);
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 34rpx 30rpx 38rpx;

				>text {
					font-size: 28rpx;
					color: #363636;
				}

				.consume-content-consume-money {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 40rpx 0 20rpx;
					border-bottom: 2rpx solid #EEEEEE;

					::v-deep .u-cell__body {
						padding: 20rpx 0 !important;
					}

					.consume-content-consume-input {
						width: 100%;
						padding: 0 10rpx;
					}

					>text {
						flex-shrink: 0;
						flex-wrap: nowrap;
						white-space: nowrap;
					}

					.consume-content-consume-money-icon {
						font-size: 32rpx;
					}

					.consume-content-consume-money-all {
						color: var(--gd-but-color);
						font-size: 24rpx;
						cursor: pointer;
					}
				}

				.consume-content-consume-card {
					width: 100%;

					::v-deep .u-cell__body {
						padding: 20rpx 0 !important;
					}
				}

				.consume-content-consume-submit {
					width: 100%;
					height: 92rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					padding: 0 80rpx 0;
					margin-top: 70rpx;

					>view {
						width: 100%;
						height: 100%;
						border-radius: 46rpx;
						color: #fff;
						background-color: var(--gd-but-color);
						font-size: 28rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}

		/**  提现 结束  */
	}

	/** 头部主要内容 结束  **/
	
	/** 收支列表 开始  */
	.consume-content-list {
		width: 100%;
		height: 100%;
		background: #F7F7F9;
		// overflow: hidden;
		>view {
			width: 100%;
		}
	}
	
	.custom-list-item {
		width: 100%;
		border-bottom: 2rpx solid #EEEEEE;
		padding: 40rpx 10rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.custom-list-item-left {
			display: flex;
			flex-direction: column;
			font-family: SourceHanSansCN, SourceHanSansCN;
			>text {
				margin-bottom: 10rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #363636;
			}
			>text:last-child {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}
		.custom-list-item-right {
			font-size: 28rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			color: #363636;
			white-space: nowrap;
		}
	}
	/** 收支列表 结束  */
</style>