<template>
	<view class="recordlistStyle" :style="{ height: contentHeight }">
		<u-empty v-if="g.length == 0" text="暂无相关购买记录" mode="list"></u-empty>
		<view
			v-if="g.length > 0"
			style="
        height: calc(100vh );
        width: calc(100vw);
        overflow: hidden;
      "
		>
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
				<view class="recordList">
					<view class="r_list_item" v-for="(x, i) in g" :key="i">
						<view class="list_top">
							<text>支付金额：{{x.Money}}</text>
							<text>支付时间：{{x.PayTimeStr}}</text>
						</view>	
						<view class="list_top">
							<text>等级名称：{{x.GradeName}}</text>
							<text>过期时间：{{x.ExpiryDateStr}}</text>
						</view>	
						<view class="list_top" style="border-bottom:1px dashed #d1d1d1;padding-bottom:10px;">
							<text>
								支付状态：<text v-if="x.PayState==1">已支付</text><text v-if="x.PayState==0">未支付</text>
						    </text>	
						</view>	
						<view class="list_top_last">
							<view style="width:13%;">
								备注：
							</view>	
							<view style="width:86%">
								{{x.Remark}}
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#f3f4f6" />
			</scroll-view>
		</view>

		<view class="loading" v-if="loading">
			<u-loading mode="flower" size="48">></u-loading>
			<Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageTitle: '购买记录',
			mainColor: '',
			contentHeight: 0,
			g: [],
			loading: false,
			msg: {
				pageIndex: 1,
				pageSize: 10
			},
			page_count: 1,
			status: 'loadmore',
			loadText: {
				loadmore: '轻轻上拉，加载更多',
				loading: '努力加载中',
				nomore: '没有更多了'
			}
		};
	},
	created() {
		this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
		this.mainColor = this.$uiConfig.mainColor;
	},
	mounted() {
		let currentPages = getCurrentPages();
		let u = '/' + currentPages[currentPages.length - 1].route;
		let pages = wx.getStorageSync('basedata') ? wx.getStorageSync('basedata').bar_title : [];
		pages.forEach(x => {
			if (x.value == u) {
				this.pageTitle = x.new_name ? x.new_name : x.name;
			}
		});
		uni.setNavigationBarTitle({
			title: this.pageTitle
		});
	},
	onLoad: function(option) {
		//option为object类型，会序列化上个页面传递的参数

		this.loading = true;
		this.init();
	},
	methods: {
		init() {
			this.request2(
				{
					url: '/api/AppletUser/GetVipBuyPageList',
					data: this.msg
				},
				res => {
					if (res.resultCode == 1) {
						this.loading = false;
						 this.g = this.g.concat(res.data.pageData);
						 this.page_count = res.data.pageCount;
						if (this.page_count == 1) {
							this.status = 'nomore';
						}
					}
				}
			);
		},
		lower(e) {
			if (this.msg.pageIndex < this.page_count) {
				this.msg.pageIndex++;
				this.status = 'loading';
				this.init();
			} else {
				this.status = 'nomore';
			}
		}
	}
};
</script>
<style>
.recordlistStyle {
	width: 100%;
	height: 100%;
	background: #f3f4f6;
}
.recordlistStyle .recordList{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top:10px;
}
.recordlistStyle .r_list_item{
	width: 94%;
	height: auto;
	border-radius: 6px;
	background-image: url(../../../static/images/shareTop.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	margin-bottom:15px;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column;
	padding: 10px;
	color: #FFFFFF;
}
.recordlistStyle .loading {
  width: 180rpx;
  height: 180rpx;
  background: #000000;
  opacity: 0.7;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 50%;
  top: 30%;
  margin-left: -100rpx;
  z-index: 999;
}
.recordlistStyle .list_top{
	width: 100%;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: justify;
	justify-content: space-between;
	margin-bottom: 6px;
}
.list_top_last{
	padding-top: 3px;
	justify-content: flex-start;
	width: 100%;
	display: flex;
	flex-direction: wrap;
	margin-bottom: 6px;
	align-items: top;
}
</style>
