<template>
	<view class="box">
		<u-navbar :autoBack="true" title="积分日志" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>

		<view class="" style="width: 95%; margin: auto; margin-top: 20rpx">
			<view v-if="list.length > 0" class="item" v-for="item in list" :key="item.id">
				<view class="">任务：{{ item.created_at }} {{ item.memo }}</view>
				<view class="" style="color: #5ac725">+{{ item.score }}</view>
			</view>

			<u-empty v-else text="暂无积分日志" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			page: 1,
			list: []
		};
	},
	onLoad() {
		that = this;
		this.getScoreLog();
	},
	methods: {
		// 积分
		getScoreLog() {
			this.$api.getScoreLog({ main_body_id: 1, page: this.page, pageSize: 20 }, function (res) {
				that.list = [...that.list, ...res.data];
			});
		}
	},
	/* 页面触底 */
	onReachBottom() {
		if (this.isLoading) {
			return;
		} else {
			this.page++;
			this.getScoreLog();
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xbg_2.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	min-height: 100%;
	height: auto;
}
.item {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	border-bottom: 2rpx solid #e2e2e1;
	display: flex;
	justify-content: space-between;
	color: #909193;
}
</style>
