<template>
	<view>
		<view class="list-view" v-if="list.length > 0">
			<view class="list-item" v-for="(item, index) in list" :key="index" hover-class="hover"    >
				<view class="content-box">
					<view class="des-box"> 
						<view class="tit">{{ item.change_type_text}}</view> 
						<view class="time">{{ item.createtime_text }}</view>
					</view>
				</view>		
				<view class="green" v-if="item.change_point < 0 ">{{item.change_point}}</view>
		
				<view class="red" v-if="item.change_point >=0">{{'+' + item.change_point}}</view>
			</view>
			<uni-load-more :status="loadmore" :content-text="contentText" />
		</view>	 
		<view class="zanwuimg" v-if="list.length == 0"> 
		  <image src="../../static/img/null.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				page:1,
				ifBottomRefresh:false,
				loadmore: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				list:[], 
			}
		},
		onReachBottom() { 
			if (this.loadmore == 'noMore') return
			this.page += 1
			this.ifBottomRefresh = true
			this.getdata() 
		},
		onShow() {
		},
		onLoad(options) {
			this.getdata()  
		},
		methods: {
			getdata(){
				let data = {
					page:this.page
				}
				this.$api.pointlist(data,res=>{ 
					if(res.code == '1'){ 
						this.list= this.list.concat(res.data.list.data) 
						this.loadmore = this.list.length < res.data.list.total ? 'more' : 'noMore' 
					}
				})
			},  
		}
	}
</script>


<style lang="scss">
	page {
	    background: #fff;
	} 
 
.list-view {
	position: relative;
	width: 100%;
	overflow: hidden;
} 
.list-item {
	width: 100%;
	padding: 30rpx 28rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: 1rpx solid #eaeef1;
}

.item-last::after {
	left: 0 !important;
}

.content-box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.des-box {
	min-height: 80rpx;
	padding-left: 28rpx;
	box-sizing: border-box;
	vertical-align: top;
	color: #333;
	font-size: 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tit {
	font-size: 26rpx;
	max-width: 420rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.source {
	margin: 12rpx 0;
}
.time {
	color: #888;
}

.green {
	font-size: 38rpx;
	font-weight: 500;
	color: #ff1e0f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 20rpx;
}

.red {
	color: #4caf50 !important;
	font-size: 38rpx;
	font-weight: 500; 
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 20rpx;
}
.tip {
	margin-top: 50rpx;
	display: flex;
	justify-content: center;
	align-content: center;
	font-size: 24rpx;
	color: #888;
} 
</style>

