<template>
	<view class="logs">
		<block v-if="logs.length > 0">
			<view class="logs-item" v-for="(item, index) in logs" :key="index">
				<view class="logs-item-flex">
					<view class="title">充值DT积分</view>
					<view class="price">{{item.amount}}</view>
				</view>
				<view class="logs-item-flex">
					<view class="time">{{item.created_at}}</view>
					<view class="status">{{item.status_text}}</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="vertical pages-empty">
				<u-empty
					icon="http://cdn.uviewui.com/uview/empty/list.png"
					textColor="#999"
					text="暂无充值记录"
				>
				</u-empty>
			</view>
		</block>
	</view>
</template>

<script>
	import { log } from '@/apis/interfaces/account.js'
	export default {
		data() {
			return {
				logs: [],
				pages: {}
			};
		},
		created() {
			log().then(res => {
				this.logs = res.data
				this.pages = res.pages
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		}
	}
</script>

<style lang="scss">
	// 数据为空
	.pages-empty{
		height: 80vh;
	}
	// 记录
	.logs{
		background-color: $window-color;
		min-height: 100vh;
		overflow: hidden;
		box-sizing: border-box;
		padding: 10rpx 0;
		.logs-item{
			border-radius: $radius;
			background: white;
			margin: ($margin - 10) $margin;
			padding: $padding;
			&-flex{
				display: flex;
				justify-content: space-between;
				.title{
					font-weight: bold;
					font-size: 32rpx;
				}
				.price{
					font-size: 30rpx;
					font-weight: bold;
					line-height: 40rpx;
					color: $text-price;
				}
				.time,
				.status{
					font-size: 26rpx;
					line-height: 40rpx;
					color: gray;
				}
			}
		}
	}
</style>
