<template>
	<view class="content">
		<uni-nav-bar left-icon="left" title="消费记录" color="#000000" backgroundColor="transparent" :fixed="true"
			:statusBar="true" :border="false" @clickLeft="back"></uni-nav-bar>
		<!-- 内容 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
			<view class="coupon">
				<view v-for="(item, index) in listData" :key="index" class="coupon_item"
					:style="'border:' + (index == listData.length - 1 ? 'none' : '')">
					<view class="coupon_item_1">
						<view>{{ item.content }}</view>
						<view>{{ item.addtime }}</view>
					</view>
					<view class="coupon_r">{{ item.change_money }}</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
export default {
	data() {
		return {
			z_imgPath: this.$z_img2 + 'mine/',
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			arr: ['全部', '充值', '消费'],
			show: 1,
			listData: [],

			// 是否显示参与
			downOption: {
				auto: false
			}
		}
	},
	onLoad(e) {
		// setTimeout(() => {
		//   this.listData=[
		//     {
		//       content:'哈哈哈哈哈哈哈哈哈',
		//       addtime:'2333-23-23 23:23:23',
		//       change_money:233
		//     }
		//   ]
		// }, 1000);
	},
	methods: {
		back() {
			uni.navigateBack()
		},
		getlist(v) {
			this.show = v
			this.loadData(1)
		},

		/*下拉刷新的回调 */
		downCallback() {
			//联网加载数据
			this.loadData(1)
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			//联网加载数据
			this.loadData(page.num)
		},
		loadData(pageNo) {
			// 模拟接口
			let that = this
			that.req({
				url: 'profitPay',
				Loading: true,
				data: {
					page: pageNo
					// type: that.show
				},
				success(res) {
					console.log(res)
					that.mescroll.endByPage(res.data.data.length, res.data.last_page)
					if (pageNo == 1) {
						that.listData = res.data.data
					} else {
						that.listData = that.listData.concat(res.data.data)
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.coupon_r>image {
	width: 32rpx;
	height: 32rpx;
	margin-left: 10rpx;
}

.coupon_r {
	font-size: 24rpx;
	/* font-family: 'zcq'; */
	color: #333333;
}

.coupon_item_1>view:nth-of-type(2) {
	font-size: 20rpx;
	color: #676767;
	margin-top: 10rpx;
}

.coupon_item_1>view:nth-of-type(1) {
	font-size: 24rpx;
	// font-weight: bold;
	color: #333333;
}

.coupon_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
	box-sizing: border-box;
	// background-color: rgba(255, 255, 255, 0.08);
	// margin-top: 20rpx;
	// border-radius: 10rpx;
	position: relative;

	&::after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 2rpx;
		background: rgba(255, 255, 255, 0.3);
	}
}

.coupon {
	width: 690rpx;
	margin: 20rpx auto;
	background-color: #FFFFFF;
	padding: 0 32rpx;
	border-radius: 16rpx;
	/* background: #11141D;
		box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7);
		 */
	box-sizing: border-box;
	/* border-radius: 20rpx; */
}

.content {
	width: 100vw;
	min-height: 100vh;
	box-sizing: border-box;
	color: #fff;
	background-color: #F7F7F7;

	.head {
		position: fixed;
		top: 0;
		z-index: 20;

		.header_title {
			height: 70rpx;
			line-height: 70rpx;
			width: 100%;
			box-sizing: border-box;
			font-weight: bold;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;

			>view:nth-of-type(1) {
				display: flex;
				align-items: center;
			}

			>view:nth-of-type(2) {
				width: 520rpx;
				text-align: center;
				/* margin: auto; */
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
}
</style>