kunpeng/pages/finance/Tdetails.vue

<template>
	<view class="center">
		<scroll-view scroll-y="true" >
			<empty v-if="list.loaded === true && list.length === 0"></empty>
			<view v-for="(item,index) in list" :key="index" >
				<view class="box">
					<view class="top">
						<view class="time">交易时间:{{item.add_time}}</view>
						<view class="type" v-if="item.status == 0">审核中</view>
						<view class="type1" v-if="item.status == 1">已完成</view>
						<view class="type2" v-if="item.status == -1">提现失败</view>
					</view>
					<view class="content flex">
						<view class="main flex">
							<image class="img" src="../../static/img/tbjl.png" mode=""></image>
							<view class="font">
								<view class="title">提币记录</view>
								<view class="font-money">提现金额：{{item.extract_price * 1}}{{item.money_type}}</view>
								<view class="font-money">手续费：{{item.service * 1}}{{item.service_type}}</view>
							</view>
						</view>
						<view class="money">
							合计：<text>{{item.real_get * 1}}{{item.money_type}}</text>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import { tbjl } from '@/api/finance.js';
export default{
	components: {
		empty,
		uniLoadMore,
	},
	data(){
		return {
			list: [],
			page: 1,
			limit: 10,
			loadingType: 'more', //加载更多状态
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.dataBase('refresh');
	},
	onLoad() {
		this.dataBase();
	},
	methods: {
		async dataBase(type = 'add',loading){
			let obj = this;
			let data = {
				page: obj.page,
				limit: obj.limit
			};
			if (type === 'add') {
				if (obj.loadingType === 'nomore') {
					return;
				}
				obj.loadingType = 'loading';
			} else {
				obj.loadingType = 'more';
			}
			if (type === 'refresh') {
				// 清空数组
				obj.page = 1;
				this.list = []
			}
			tbjl(data)
				.then(({data}) => {
					if(data.data.length > 0) {
						data.data.forEach(e => {
							e.add_time = obj.timestampToTime(e.add_time);
							obj.list.push(e);
							
						})
						
					}
					if (obj.limit == data.data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						obj.page++;
						obj.loadingType = 'more';
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						obj.loadingType = 'noMore';
					}
					if (type === 'refresh') {
						if (loading == 1) {
							uni.hideLoading();
						} else {
							uni.stopPullDownRefresh();
						}
					}
					obj.$set(obj.list, 'loaded', true);
				})
		},
		timestampToTime(timestamp) {
			var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			        var Y = date.getFullYear() + '-';
			        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
			        var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
			        var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
			        var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
			        var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
			        return Y+M+D+h+m+s;
		}
	}
}
</script>

<style lang="scss">
page {
	height: 100%;
	background: #FFFFFF;
}
.box {
	position: relative;
	padding: 20rpx;
	width: 90%;
	margin: 0 auto;
	margin-top: 10rpx;
	height: 216rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.time {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		.type {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #5771DF;
		}
		.type1 {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		.type2 {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #ff0000;
		}
	}
	.content {
		margin-top: 30rpx;
		.img{
			width: 60rpx;
			height: 66rpx;
		}
		.font{
			padding-left: 20rpx;
			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.font-money {;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
	}
	.money {
		position: absolute;
		bottom: 24rpx;
		right: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		text {
			color: #FA2740;
			font-size: 30rpx;
		}
	}
}
</style>