<template>
	<view class="myOrder">
		<u-empty text="暂无消费记录" font-size="26" mode="order" v-if="list.length===0"></u-empty>
		<view v-if="list.length>0">
			<view v-for="(item,index) in list" :key="index" class="item">
				<view class="top">
					<view class="name">
						星巴克咖啡
					</view>
					<view class="Number">
						<text v-if="item.Type==2">-</text>
						<text v-if="item.Type==1">+</text>
						{{item.Number}}
					</view>
				</view>
				<view class="top">
					<view class="CreateDate">
						{{item.CreateDate}}
					</view>
					<view class="Remark">
						{{item.Remark}}
					</view>
				</view>
			</view>
			<u-loadmore :status="status" :load-text="loadText" :font-size="24" bg-color="#f5f5f5" />
		</view>
	</view>
</template>

<script>
	import util from '@/plugin/utils.js'
	export default {
		data() {
			return {
				list: [],
				msg: {
					pageIndex: 1,
					pageSize: 10,
					Type: 0,
				},
				pageCount: 0,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				status: "loadmore",
			}
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: '/api/AppletCoffee/GetMyCoffeeCouponsPageList',
						data: this.msg
					},
					res => {
						uni.hideLoading()
						this.pageCount = res.data.pageCount
						if (this.msg.pageIndex === 1) {
							this.list = res.data.pageData
						} else {
							this.list = this.list.concat(res.data.pageData)
						}
						if (this.pageCount == 1) {
							this.status = "nomore";
						}
					},
					err => {
						uni.hideLoading()
					}
				);
			},
		},
		onReachBottom() {
			if (this.msg.pageIndex < this.pageCount) {
				util.debounce(async () => {
					this.msg.pageIndex++
					await this.getData()
				})
				this.status = "loading";
			} else {
				this.status = "nomore";
			}
		},
		onLoad() {
			this.getData()
			uni.setNavigationBarTitle({
				title: "我的消费"
			})
		}
	}
</script>

<style lang="scss" scoped>
	.myOrder {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding: 35rpx 0;
	}

	.item {
		width: 684rpx;
		background-color: #FFFFFF;
		border-radius: 4rpx;
		margin: 0 auto;
		padding: 16rpx 40rpx;
		margin-bottom: 24rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 0;

			.name {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
			}

			.orderStatus {
				font-size: 30rpx;
				color: #000000;
			}

			.CreateDate {
				font-size: 24rpx;
				color: #666666;
			}

			.Remark {
				font-size: 20rpx;
				color: #CFCFCF;
			}
		}
	}
</style>
