fanyunAi/pages/user/commission/withdraw-log.vue

<!-- 提现记录 -->
<template>
	<!-- 记录卡片 -->
	<view>

		<view style="color: #000000;">
			<tn-nav-bar backgroundColor="#ffffff" :bottomShadow="false">提现记录</tn-nav-bar>
			<!-- <view :style="{height: tobheight+'px'}"></view> -->
		</view>
		<z-paging ref="paging" refresher-complete-delay="200" v-model="withdrawLog" @query="queryList">
			<view slot="top" class="z_tabs" :style="{marginTop: tobheight+'px'}"></view>
			<view class="wallet-log-box u-p-b-30">
				<view class="log-list" v-for="item in withdrawLog" :key="item.id">
					<view class="head u-flex u-col-center u-row-between">
						<view class="title">提现至{{ item.extract_type == 'wechat'?'微信零钱':'其他' }}</view>
						<view class="num">{{ item.extract_price }} 元</view>
					</view>
					<view class="status-box item  u-flex u-col-center u-row-between">
						<view class="item-title">申请状态</view>
						<view class="status-text" :style="{ color: stausMap[item.status] }">
							{{ item.status == 0?'申请中':item.status == 1?'已通过并打款':'已拒绝'}}</view>
					</view>
					<view v-if="item.status == 2" class="time-box item  u-flex u-col-center u-row-between">
						<text class="item-title">拒绝原因</text>
						<view class="time">{{ item.refuse_reason }}</view>
					</view>
					<!-- <view class="time-box item  u-flex u-col-center u-row-between">
				<text class="item-title">账户信息</text>
				<view class="time u-ellipsis-1">{{ item.apply_info | applyInfoFilter }}</view>
			</view> -->
					<!-- <view class="time-box item  u-flex u-col-center u-row-between">
				<text class="item-title">提现单号</text>
				<view class="time">{{ item.apply_sn }}</view>
			</view> -->
					<!-- <view class="time-box item  u-flex u-col-center u-row-between">
				<text class="item-title">手续费</text>
				<view class="time">{{ item.charge_money }} 元</view>
			</view> -->
					<view class="time-box item  u-flex u-col-center u-row-between">
						<text class="item-title">申请时间</text>
						<view class="time">{{ item.create_time }}</view>
					</view>
				</view>
				<!-- 更多 -->
				<!-- <u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" /> -->
				<!-- 空置页 -->
				<!-- <shopro-empty v-if="isEmpty" marginTop="300rpx" :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="暂无数据~"></shopro-empty> -->
			</view>
		</z-paging>
		<wike-loading-page :isLoading="isLoading"></wike-loading-page>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				isLoading: true,
				tobheight: 45,
				platform: this.$platform.get(),
				withdrawLog: [
					// {apply_type_text:'微信零钱',money:100,status:1,status_text:'已到账',apply_info:'51455454',apply_sn:'651515',charge_money:'0.8',createtime:'1676428876'},{apply_type_text:'微信零钱',money:100,status:1,status_text:'已到账',apply_info:'51455454',apply_sn:'651515',charge_money:'0.8',createtime:'1676428876'}
				],
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				isEmpty: false,
				stausMap: {
					0: '#999',
					1: '#EFAF41',
					2: '#70C140',
					'-1': '#ED5B56'
				}
			};
		},
		computed: {
			...mapGetters(['appInfo', 'isLogin', 'userInfo'])
		},
		filters: {
			applyInfoFilter: function(value) {
				if (!value) return '-';
				return Object.values(value).join(' | ');
			}
		},
		onLoad() {
			const that = this;
			if (this.platform == 'wxMiniProgram') {
				var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight
				var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop
				this.tobheight = (menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height)
			}
			// this.getLog();
		},
		// 触底加载更多
		// onReachBottom() {
		// 	if (this.currentPage < this.lastPage) {
		// 		this.currentPage += 1;
		// 		this.getLog();
		// 	}
		// },
		methods: {
			queryList(pageNo, pageSize) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				const params = {
					page: pageNo,
					limit: pageSize,
					// level: this.level,
				};
				this.$http('commission.cashoutLog', params).then(res => {
					if (res.code == 0) {
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});
						this.$refs.paging.complete(res.data.data);
						this.isLoading = false;
					}
				});
			},
			// 确认提交表单
			getLog() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('commission.cashoutLog', {
					// page: that.currentPage
				}).then(res => {
					if (res.code === 0) {
						that.withdrawLog = [...that.withdrawLog, ...res.data.data];
						that.isEmpty = !that.withdrawLog.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	// 记录卡片
	.log-list {
		min-height: 213rpx;
		background: #ffffff;
		margin-bottom: 10rpx;
		padding-bottom: 10rpx;

		.head {
			padding: 0 35rpx;
			height: 80rpx;
			border-bottom: 1rpx solid #eee;
			margin-bottom: 20rpx;

			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.num {
				font-size: 28rpx;
				font-weight: 500;
				color: #7063d2;
			}
		}

		.item {
			padding: 0 30rpx 10rpx;

			.item-icon {
				color: #c0c0c0;
				font-size: 36rpx;
				margin-right: 8rpx;
			}

			.item-title {
				width: 180rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #c0c0c0;
			}

			.status-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #05c3a1;
			}

			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: #c0c0c0;
			}
		}
	}
</style>