parking_h5/pages/center/monthly/monthly1.vue

<template>
	<!-- 包月 -->
	<view class="monthly">
		<!-- <u-navbar
		 title-color="#fff" 
		 :custom-back="customBack" 
		 :border-bottom="false" 
		 back-icon-color="#CCE8FF" 
		 :background="{background: '#008CFF' }" title="我的包月"></u-navbar> -->
		 <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			 <view class="monthly-list">
			 	<view class="monthly-list-item"  v-for="(monthlyItem, index) in  dataList" :key="monthlyItem.id">
			 		<view class="monthly-list-item-top">
			 			<view class="mlit-left">
			 				<view>{{monthlyItem.vehicleNo}}</view>
			 				<view>{{monthlyItem.roadName}}</view>
			 			</view>
			 			<view class="mlit-right u-flex">
			 			<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 0">未缴费</view>
			 			<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 1">已缴费</view>
			 			<view class="mlit-right-item" v-if="monthlyItem.energyType === 1">汽油车</view>
			 			<view class="mlit-right-item" v-if="monthlyItem.energyType === 2">新能源</view>
			 			</view>
			 		</view>
			 		<view class="monthly-list-item-bottom" >
			 			<view class="mlib-item">
			 				<view>有效期限</view>:
			 				<view>{{(monthlyItem.beginTime.split('-')).join('.')}}-{{(monthlyItem.endTime.split('-')).join('.')}}</view>
			 			</view>
			 			<view class="mlib-item">
			 				<view>剩余天数</view>:
			 				<view>{{monthlyItem.surplusDays}}天</view>
			 			</view>
			 		</view>
			 		<view v-if="monthlyItem.feeStatus=='0'" class="button-wrap u-flex u-row-right">
			 			<view class="tool-btn" 
			 			:class="{'tool-btn-cancel':monthlyItem.feeStatus=='0'}" 
			 			v-if="monthlyItem.feeStatus=='0'" 
			 			@click="cancelMonth(monthlyItem.monthId)">取消订单</view>
			 		</view>
			 		<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays > 2" class="button-wrap u-flex u-row-right">
			 			<view class="tool-btn">已缴费</view>
			 		</view>
			 		<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays < 3" class="button-wrap u-flex u-row-right">
			 			<view class="tool-btn" @click="goRenewal(monthlyItem)">去续费</view>
			 		</view>
			 	</view>
			 </view>
		 </mescroll-body>
		<u-modal v-model="cancelShow" content="确认取消该订单？" @confirm="confirm" :show-cancel-button="true"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				cancelShow: false,
				mescroll: null,
				dataList: []
			}
		},
		onShow() {
			// onShow 刷新数据
			if(this.mescroll){
				this.mescroll.triggerDownScroll();
			}
		},
		methods: {
			customBack(){
				this.$u.route({
					type:'switchTab',
					url: 'pages/center/index'
				});
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新的回调
			downCallback(){
				// 下拉刷新和上拉加载调同样的接口
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			// 上拉加载的回调
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				this.$u.api.getMonthList({
					pageSize: pageSize,
					pageNum: pageNum,
				})
				.then(res =>{
					console.log(res)
					if (res.code === 200) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.data.rows; 
						// 接口返回的当前页数据长度 
						let curPageLen = curPageData.length; 
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						let totalPage = res.data.pages; 
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						let totalSize = res.data.total; 
						// 接口返回的是否有下一页 (true/false)
						let hasNext = res.data.page < res.data.pages; 
						
						//设置列表数据
						if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据
						
						// 请求成功,隐藏加载状态
						this.mescroll.endByPage(curPageLen, totalPage);
						setTimeout(()=>{
							this.mescroll.endSuccess(curPageLen)
						}, 20)
					}
				})
				.catch(err => {
					this.$refs.uToast.show({
						title: '操作失败!',
						type: 'error'
					})
				})
			},
			confirm(){
				this.$u.api.cancelMonth({monthId: this.id})
				.then(res=>{
					if(res.code === 200){
					this.$refs.uToast.show({ 
						title: res.msg,
						type: 'success',
					});
					this.downCallback()
					}else{
						
					}
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				})
			},
			/**
			 * 去续费
			 * */
			goRenewal(item) {
				this.$u.route({
					url: 'pages/handleMonthly/handleMonthly',
					params: {
						roadNo: item.roadNo,
						vehicleNo: item.vehicleNo
					}
				})
			 }
		}
	}
</script>

<style lang="scss" scoped>
@import './monthly.scss';
</style>