|
|
@@ -1,73 +1,116 @@
|
|
|
<template>
|
|
|
<!-- 包月 -->
|
|
|
<view class="monthly">
|
|
|
- <view class="monthly-list">
|
|
|
- <view class="monthly-list-item" v-for="(item, index) in monthlyList" :key="index">
|
|
|
- <view class="monthly-list-item-top">
|
|
|
- <view class="mlit-left">
|
|
|
- <view>{{item.name}}</view>
|
|
|
- <view>{{item.parking}}</view>
|
|
|
+ <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" >
|
|
|
+ <view class="monthly-list-item-top">
|
|
|
+ <view class="mlit-left">
|
|
|
+ <view>{{monthlyItem.vehicleNo}}</view>
|
|
|
+ <view>{{monthlyItem.roadName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="mlit-right" v-if="monthlyItem.energyType === 1">汽油车</view>
|
|
|
+ <view class="mlit-right" v-if="monthlyItem.energyType === 3">新能源</view>
|
|
|
+ </view>
|
|
|
+ <view class="monthly-list-item-bottom" >
|
|
|
+ <view class="mlib-item">
|
|
|
+ <view>包期</view>:
|
|
|
+ <view>{{beginTime}}-{{endTime}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="mlib-item">
|
|
|
+ <view>剩余天数</view>:
|
|
|
+ <view>{{monthlyItem.surplusDays}}天</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="mlit-right" v-if="item.carType === 1">汽油车</view>
|
|
|
- <view class="mlit-right" v-if="item.carType === 3">新能源</view>
|
|
|
</view>
|
|
|
- <view class="monthly-list-item-bottom">
|
|
|
- <view class="mlib-item">
|
|
|
- <view>包期</view>:
|
|
|
- <view>{{item.dateRange}}</view>
|
|
|
- </view>
|
|
|
- <view class="mlib-item">
|
|
|
- <view>剩余天数</view>:
|
|
|
- <view>{{item.balance}}天</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </scroll-view>
|
|
|
+ </mescroll-body>
|
|
|
+ <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 {
|
|
|
- monthlyList: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- name: '贵A37W45',
|
|
|
- parking: '甜蜜小镇D18组团停车场',
|
|
|
- dateRange: '2021.04.21-2021.05.20',
|
|
|
- balance: '20',
|
|
|
- carType: 1
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: '贵A37W45',
|
|
|
- parking: '甜蜜小镇D18组团停车场',
|
|
|
- dateRange: '2021.04.21-2021.05.20',
|
|
|
- balance: '20',
|
|
|
- carType: 3
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: '贵A37W45',
|
|
|
- parking: '甜蜜小镇D18组团停车场',
|
|
|
- dateRange: '2021.04.21-2021.05.20',
|
|
|
- balance: '20',
|
|
|
- carType: 1
|
|
|
- }
|
|
|
- ]
|
|
|
+ monthlyList: [],
|
|
|
+ monthList:'',
|
|
|
+ beginTime:'',
|
|
|
+ endTime:'',
|
|
|
+ time:[],
|
|
|
}
|
|
|
},
|
|
|
- onShow () {
|
|
|
- this.getCarsLicenseList()
|
|
|
- },
|
|
|
methods: {
|
|
|
- getCarsLicenseList () {
|
|
|
- this.$u.apiurl.mycarsUrl()
|
|
|
- .then(res => {
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
- }
|
|
|
+ /*下拉刷新的回调*/
|
|
|
+ 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=>{
|
|
|
+ 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
|
|
|
+ }).catch(err=>{
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: err.msg,
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
tianhui