xwc/pages/user/energy-detials.vue

<template>
	<view>
		<hua-page-head :pageTitle="pageTitle"></hua-page-head>

		<mescroll-body ref="mescrollRef" :up="{
		  	noMoreSize: 10,
		  	empty: {
		  		icon: '/static/images/order_null.png',
		  		tip: '暂无抵用券明细~',
		  		fixed: false
		  	}
		  }" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<hua-record-list :data='data' :type="1"></hua-record-list>
		</mescroll-body>

	</view>
</template>

<script>
	import {
		energyLog
	} from '@/api/shop.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				data: [],
				pageTitle: "抵用券明细"
			}
		},

		methods: {

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				energyLog({
					page_no: num,
					page_size: size
				}).then(({
					data,
					code
				}) => {
					if (code != 1) return this.mescroll.endErr()
					if (num === 1) this.data = []
					this.data = [...this.data, ...data.list]
					this.mescroll.endSuccess(data.list.length, !!data.more)
				}).catch(err => {
					this.mescroll.endErr()
				})
			}
		},

	}
</script>

<style lang="scss">
	.noData {
		position: relative;
		height: calc(100vh - var(--status-bar-height));

		.wrap {
			text-align: center;
			// position: absolute;
			// top: 50%;
			// left: 50%;
			// transform: translate(-50%,-50%);
			margin-top: 100rpx;

			image {
				width: 330rpx;
				height: 330rpx;
				margin: 20rpx auto;
			}

			.tit {
				color: #AAAAAA;
			}
		}
	}
</style>