parking_h5/pages/center/monthly/monthly.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" >
			<!-- <scroll-view scroll-y style="height: 100%; width: 100%;" v-for="(monthlyItem, index) in  monthlyList" :key="monthlyItem.id"> -->
				<view class="monthly-list">
					<view class="monthly-list-item"  v-for="(monthlyItem, index) in  monthlyList" :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>
							<!-- <u-button class="btn" v-if="monthlyItem.feeStatus=='0'" type="error" size="mini" @click="cancelMonth(monthlyItem.monthId)">取消缴费</u-button> -->
						</view>
					</view>
					
				</view>
			<!-- </scroll-view> -->
		</mescroll-body>
		<u-modal v-model="canclShow" 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 {
				id:'',
				canclShow: false,
				monthlyList: [],
				monthList:'',
				beginTime:'',
				endTime:'',
				time:[],
			}
		},
		methods: {
			customBack(){
				this.$u.route({
					type:'switchTab',
					url: 'pages/center/index'
				});
			},
			/*下拉刷新的回调*/
			downCallback(){
				// 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				// this.getMessageList()
				this.$u.api.getMonthList({pageSize:pageSize ,pageNum: pageNum})
				.then(res=>{
					if(res.code == 200){
					console.log('res',res)
					// 接口返回的当前页数据列表 (数组)
					let curPageData = res.data.rows;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					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 = data.pages; 
					
					//设置列表数据
					if(page.num == 1) this.monthlyList = []; //如果是第一页需手动置空列表
					this.monthlyList = this.monthlyList.concat(curPageData); //追加新数据
					
					// 请求成功,隐藏加载状态
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					this.mescroll.endByPage(curPageLen, totalPage); 
					setTimeout(()=>{
						this.mescroll.endSuccess(curPageLen)
					},20)
					this.monthList=[],
					res.data.rows.forEach(item => {
						const obj = {
							beginTime: item.beginTime,
							endTime: item.endTime,
						}
						this.monthList.push(obj)
						console.log(obj)
					});
					this.time = this.monthList[0]
					let Date1 = this.time.beginTime;
					let Date2 = this.time.endTime;
					// Date1 = Date1.valueOf() + 24 * 60 * 60 * 1000
					Date1 = new Date(Date1)
					const year = Date1.getFullYear()
					const month = Date1.getMonth()+1
					const day = Date1.getDate()
					Date2 = new Date(Date2)
					const year2 = Date2.getFullYear()
					const month2 = Date2.getMonth()+1
					const day2 = Date2.getDate()
					this.beginTime = year + '.' + month + '.' + day
					console.log(this.beginTime)
					this.endTime = year2 + '.' + month2 + '.' + day2
					}else{
						this.mescroll.endErr()
					}
				}).catch(err=>{
					// console.log('err',err);
					// this.$refs.uToast.show({
					// 	title: err.msg,
					// 	type: 'error',
					// });
				});
				
			},
			cancelMonth(monthId){
				this.id=monthId;
				this.canclShow = true;
				console.log('monthId',monthId)
			},
			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',
					});
				})
		}
	}
	}
</script>

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