yuebeilian-b/src/packages/user/fund/record-recharge.vue

<template>
	<view class="record-box">
		<Navbar title="充值明细" background-color="#fff" color="#333"></NavBar>
		<view class="container">
			<view class="top">
				<view class="title">
					充值明细
				</view>
				<view class="status" @click="openSearch">
					{{typeMap[status] || '全部'}}
					<IconText :code="`\ue84a`" :size="8" color="#666" class="icon"></IconText>
				</view>
			</view>
			<view class="noData" v-if="!list.length && !isLoading">
				<NoData :show="!list.length" topNum="10"></NoData>
			</view>
			<view class="list" v-else>
				<view class="item" v-for="item in list" :key="item.id">
					<view class="left" :class="{reject: item.status === 2}">
						<!-- <text>{{item.describe}}</text> -->
						<text>{{typeMap[item.status]}}</text>
						{{item.created}}
					</view>
					<view class="right" v-if="item.status !== 2">
						<text v-if="item.direction === 1" style="color: #FA402B;">-{{item.amount | moneyFormat}}</text>
						<text v-else style="color: #409763;">+{{item.amount | moneyFormat}}</text>
					</view>
				</view>
				<view class="data-tips">
					<text v-if="final">没有更多了</text>
					<text v-else>加载更多</text>
				</view>
			</view>
		</view>
		<BottomPopup ref="bottom_popup" title="请选择" :dataList="typeList" @selected="popupSelected" keyName="name">
		</BottomPopup>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Vue
	} from 'vue-property-decorator';
	import {
		namespace
	} from 'vuex-class';
	const baeModule = namespace('base');
	import {
		types
	} from '@/common/store';
	@Component({
		filters: {
			moneyFormat(val: any) {
				if (!+val) return '0.00';
				return (+val).toFixed(2);
			}
		}
	})
	export default class RechargeRecord extends Vue {
		img: string = this.$oss_url + 'zwdd.png';
		isLoading: boolean = false;
		list: any[] = [];
		sum: number = 0;
		isLoad: boolean = false;
		final: boolean = false;
		current: number = 1;
		size: number = 20;
		status: any = '';
		typeList: any[] = [
			{
				name: '全部',
				value: ''
			},{
				name: '待审核',
				value: 0
			},{
				name: '审核通过',
				value: 1
			},{
				name: '审核拒绝',
				value: 2
			}
		];
		typeMap: any = {
			0: '线下汇款(待审核)',
			1: '线下汇款(已审核)',
			2: '线下汇款(平台已拒绝)'
		};
		type: number = 0;

		onShow() {
			this.list = [];
			this.current = 1;
			this.final = false;
			this.getList();
		}

		onReachBottom() {
			if (this.final) return;
			this.current++;
			this.getList();
		}

		getList() {
			uni.showLoading({
				title: '加载中',
			});
			this.isLoading = true;
			return this.$http.get({
				url: this.$api.xxRechargeRecord,
				data: {
					page: this.current,
					size: this.size,
					status: this.status
				}
			}).then((res: any) => {
				this.list = [...this.list, ...res.list];
				this.isLoading = false;
				if (!res.list || (res.list.length < this.size)) {
					this.final = true;
				}
				uni.hideLoading();
			}).catch((err: any) => {
				console.log(err)
				uni.hideLoading();
				this.isLoading = false;
			})
		}

		openSearch() {
			(this.$refs.bottom_popup as any).open();
		}

		popupSelected(val: any) {
			this.status = val.value;
			this.list = [];
			this.current = 1;
			this.final = false;
			this.getList();
		}
	}
</script>

<style lang='scss' scoped>
	.record-box {
		min-height: 100%;
		@include flex-y();
		background: #F6F6F6;

		.container {
			flex: 1;
			width: 100%;
			box-sizing: border-box;
			overflow-y: auto;

			.top {
				@include flex-x();
				background: #fff;
				position: fixed;
				width: 100%;
				z-index: 20;
				height: vw(55);
				padding: 0 vw(18);
				box-sizing: border-box;
				margin-top: vw(1);
			}

			.noData {
				padding-top: vw(55);
			}

			.status {
				/* padding-right: vw(18); */
				@include word-vw(14, #666);
				@include flex-x(flex-start);

				.icon {
					margin-left: vw(6);
				}
			}

			.list {
				box-sizing: border-box;
				margin-top: vw(10);
				padding-top: vw(55);

				.item {
					/* box-shadow: 0px 1px 5px rgba(225, 225, 225, 0.5); */
					background: #fff;
					margin-top: vw(1);
					/* border-radius: vw(10); */
					height: vw(60);
					@include flex-x();

					view {
						padding: 0 vw(18);
						@include flex-y(center, flex-start);
						@include word-vw(12, #999);

						&.reject {
							text {
								color: #FA402B;
							}
						}

						text {
							margin-bottom: vw(5);
							@include word-vw(14, #333);
							font-weight: 450;
						}

						&.right {
							align-items: flex-end;
						}
					}
				}
			}
		}

		.data-tips {
			width: 100%;
			text-align: center;
			@include word-vw(12, $gray9);
			margin-top: 10px;
		}
	}
</style>