<template>
	<view class="getTheDetails">
		<far-bottom></far-bottom>
		<view >
			<view class="bg" style="padding: 30upx;background-color: #FF4444;color: #FFFFFF;border-radius: 15upx 15upx 0 0;">
				<view class="dis-flex" style="padding-bottom: 20upx;">
					<view class="flex-box  f-32">
						{{transferRecord.transfer.title}}
					</view>
					<view class="flex-box f-28  t-r" style="line-height: 46upx;">
						共{{transferRecord.transfer.allnum}}份,剩{{transferRecord.transfer.surplus}}份
					</view>
				</view>
				<view class="dis-flex">
					<view class="flex-box f-w f-48">
						¥{{transferRecord.transfer.allmoney}}
					</view>
					<view class="flex-box f-28  t-r" style="line-height: 70upx;">
						{{transferRecord.transfer.createtime}}
					</view>
				</view>
				
			</view>
			<view class="f-34 t-c b-f" style="height: 120upx;line-height: 120upx;">
				领取记录
			</view>
		</view>
		<view  style="margin-top: 10upx;">
			<view class="dis-flex b-f" v-for="(item,index) in record" :key="index" style="margin-bottom: 10upx;border-radius: 10upx;">
				<view class="t-c" style="flex: 0.2;padding: 20upx;padding-top: 40upx;">
					<image :src="item.avatar" mode="aspectFill" style="width: 110upx;height: 110upx;border-radius: 50%;"></image>
				</view>
				<view  style="flex: 0.8;padding: 20upx;">
					<view class="dis-flex">
						<view class="flex-box f-30">
							{{item.nickname}}
						</view>
						<view class="flex-box t-r f-w f-28">
							¥{{item.money}}
						</view>
					</view>
					<view class="dis-flex f-24" style="color: #999999;padding: 10upx 0;">
						<view  style="flex: 0.4;">
							<text class="iconfont icon-wode"></text>
							<text style="padding-left: 10upx;">{{item.realname}}</text>
						</view>
						<view class=" t-r"  style="flex: 0.6;">
							{{item.createtime}}
						</view>
					</view>
					<view class="f-24" style="color: #999999;">
						<text class="iconfont icon-dianhua"></text>
						<text>{{item.mobile}}</text>
					</view>
				</view>
			</view>
		</view>
		<load-more :isMore="isMore" v-if="count > 1"></load-more>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import noneMores from '@/components/template/nonemores.vue';
	import loadMore from '@/components/template/loadmore.vue';
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	export default{
		components:{
			loadMore
		},
		data(){
			return{
				page:1,
				transferRecord:{
					transfer:{
						allmoney:'',
						allnum:'',
						createtime:'',
						surplus:'',
						title:''
					}
				},
				isMore:false,
				count:0,
				record:[]
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getTheDetails();
		},
		methods:{
			getTheDetails(flag){
				App._post_form(`&p=member&do=getTransferRecord&id=${this.id}&page=${this.page}`,{},res=>{
					if(flag){
						this.record.push(...res.data.record);
					}else{
						this.transferRecord = res.data;
						this.count = res.data.allpage;
						this.record = res.data.record;
					}
					
				})
			}
		},
		onReachBottom() {
			if(this.page == this.count){
				this.isMore = true;
				return
			};
			this.page++;
			this.getTheDetails(true);
		},
	}
</script>

<style lang="scss" scoped>
	.getTheDetails{
		padding: 30upx;
	}
	.bg{
		background: url(../../../../static/chooseCade/BG.png) no-repeat right ;
		background-size: 30% 100%;
	}
</style>
<style>
	page{
		background-color: #F8F8F8;
	}
</style>