<template>
	<view class="page">
		<u-navbar title="我的订单" :border-bottom="false" :background="bgc" title-color='#3D3D3D' back-icon-color="#3D3D3D"
			title-size='36' height='44'></u-navbar>
		<scroll-view class="list" scroll-y="true" @scrolltolower="onScrollToLower" style="height: 90vh;">
			<view class="list_item" v-for="(item,index) in wateringList" :key="index" @scrolltolower="onReachBottom">
				<view class="top">
					<view class="bh">
						设备编号：{{item.deviceNo}}
					</view>
					<view class="wc" v-if="item.status == 2">
						已支付
					</view>
					<view class="wc" v-if="item.status == 1">
						未支付
					</view>
					<view class="wc" v-if="item.status == 3">
						已退款
					</view>
					<view class="wc" style="color: #ccc;" v-if="item.status == 4">
						已取消(用户)
					</view>
					<view class="wc" style="color: #ccc;" v-if="item.status == 5">
						已取消(系统)
					</view>
					<view class="wc" v-if="item.status == 6">
						支付中
					</view>
					<view class="wc" v-if="item.status == 7">
						退款中
					</view>
				</view>
				<view class="item_xx">
					<view class="">
						订单号
					</view>
					<view class="">
						{{item.billNo}}
					</view>
				</view>
				<view class="item_xx">
					<view class="">
						购买套餐：
					</view>
					<view class="">
						{{item.suitName}}
					</view>
				</view>
				<view class="item_xx">
					<view class="">
						金额
					</view>
					<view class="">
						￥{{item.suitPrice}}
					</view>
				</view>
				<view class="item_xx">
					<view class="">
						租借店铺：
					</view>
					<view class="">
						{{item.storeName}}
					</view>
				</view>
				<view class="bot">
					<view class="time">
						{{item.createTime}}
					</view>
					<view class="pagexq" @click="btnxq(item.billId)">
						订单详情
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;text-align: center;color: #ccc;margin-top: 50rpx;">
				-已经到底了-
			</view>
		</scroll-view>
		<view class="" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;">
			<image style="width: 100%;height: 100vh;"
				src="https://api.ccttiot.com/smartmeter/img/static/u5AWkMT3khOhGPKrUPMH" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curtitidx: 0,
				storeId: {},
				bgc: {
					// background:'linear-gradient(to right, #FFEFEF 20%, #D9F6FF 100%)'
				},
				pagenum: 1,
				wateringList: [],
				pagesize: 10, // 一页多少数据
				isLoading: false, // 是否正在加载数据  
				noMoreData: false, // 是否没有更多数据  
				total: 0,
				showflag: false
			}
		},
		onLoad(option) {
			this.getlist()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创亿康',
				path: '/pages/index/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创亿康',
				query: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			// 滚动到底部
			onScrollToLower() {
				if (this.total > this.wateringList.length) {
					this.getlist() // 上拉加载更多  
				} else {
                    
				}
			},
			// 跳转详情 billId参数
			btnxq(billId) {
				uni.navigateTo({
					url: '/page_user/mydetail?billId=' + billId
				})
			},
			// 请求订单列表
			getlist() {
				this.$u.get('/app/bill/rechargeList?pageNum=' + this.pagenum + '&pageSize=' + this.pagesize).then((
					res) => {
					if (res.code == 200) {
						this.total = res.total
						if (res.rows.length > 0) {
							// 有数据，追加到列表  
							this.wateringList = this.wateringList.concat(res.rows)
							this.pagenum++
						} else {
							// 没有更多数据  
							this.noMoreData = true;
						}
						this.isLoading = false;
					} else if (res.code == 401) {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title {
		padding-bottom: 15rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 15rpx;
	}

	page {
		background: #F4F5F7;
	}

	.page {
		width: 750rpx;
		height: 100vh;
		overflow: hidden;

		.list {
			width: 100%;
			// height: 90vh;
			// overflow: scroll;
			padding-bottom: 100rpx;
			box-sizing: border-box;

			.list_item {
				width: 658rpx;
				height: 418rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				margin-top: 20rpx;
				padding: 24rpx 30rpx;
				box-sizing: border-box;

				.top {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #D8D8D8;
					padding-bottom: 20rpx;
					box-sizing: border-box;

					.bh {
						font-size: 28rpx;
						color: #3D3D3D;
					}

					.wc {
						font-size: 28rpx;
						color: #8883F0;
					}
				}

				.bot {
					margin-top: 22rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 28rpx;
					padding-top: 20rpx;
					box-sizing: border-box;
					border-top: 1px solid #D8D8D8;

					.time {
						font-size: 24rpx;
						color: #808080;
					}

					.pagexq {
						width: 142rpx;
						height: 48rpx;
						background: #8883F0;
						border-radius: 26rpx 26rpx 26rpx 26rpx;
						text-align: center;
						line-height: 48rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						border-radius: 20rpx;
					}
				}

				.item_xx {
					margin-top: 22rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					color: #3D3D3D;
				}
			}
		}
	}
</style>