digitalMen/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>