|
@@ -1,43 +1,110 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <u-navbar title-color="#fff" :custom-back="customBack" :bpay-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%;">
|
|
|
- <view class="page-box">
|
|
|
- <view class="pay" v-for="(payItem, index) in payList" :key="payItem.id">
|
|
|
- <view class="pay-top u-flex">
|
|
|
- <view class="pay-top-left u-flex-1">
|
|
|
- <view class="car">{{payItem.vehicleNo}}</view>
|
|
|
- <view class="addr">{{payItem.roadName}}</view>
|
|
|
- </view>
|
|
|
- <view class="pay-top-right">{{payItem.orderStatus | filterOrderStatus}}</view>
|
|
|
- </view>
|
|
|
- <view class="pay-center">
|
|
|
- <view class="pay-center-item">停车泊位:{{payItem.spaceName}}</view>
|
|
|
- <view class="pay-center-item">入场时间:{{payItem.inTime || 0}}</view>
|
|
|
- <view class="pay-center-item" v-if="payItem.orderStatus !== 1">出场时间:{{payItem.outTime || 0}}
|
|
|
- </view>
|
|
|
- <view class="pay-center-item" v-if="payItem.orderStatus !== 1">停车时长:{{payItem.duration || 0}}
|
|
|
- </view>
|
|
|
- <view class="pay-center-item" v-if="payItem.orderStatus !== 1">免费时长:{{payItem.freeDuration || 0}}
|
|
|
- </view>
|
|
|
- <!-- 计费时长=停车时长-免费时长 -->
|
|
|
- <view class="pay-center-item" v-if="payItem.orderStatus !== 1">计费时长:{{payItem.calcDuration || 0}}
|
|
|
- </view>
|
|
|
- <view class="pay-center-item">应付金额:<span class="pay-amount">{{payItem.payAmount || 0}}</span>
|
|
|
- </view>
|
|
|
- <view class="pay-center-item" v-if="payItem.deviceType && payItem.deviceType != 1">车位锁设备号:{{payItem.deviceNo}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="pay-bottom">
|
|
|
- <u-cell-item title="去支付" @click="choosePayWay(payItem.orderId)" style="color: #008CFF;">
|
|
|
- </u-cell-item>
|
|
|
+ <!-- <u-navbar title-color="#fff" :custom-back="customBack" :bpay-bottom="false" back-icon-color="#CCE8FF"
|
|
|
+ :background="{background: '#008CFF' }" title="停车缴费"></u-navbar> -->
|
|
|
+ <view class="swiper-wrap">
|
|
|
+ <view class="u-tabs-box">
|
|
|
+ <u-tabs-swiper activeColor="#008CFF" ref="tabs" :list="list" :current="current" @change="change"
|
|
|
+ :is-scroll="false" swiperWidth="100%"></u-tabs-swiper>
|
|
|
+ </view>
|
|
|
+ <swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
|
|
|
+ @animationfinish="animationfinish" disable-touch>
|
|
|
+ <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
|
|
|
+ <!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"> -->
|
|
|
+ <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
|
|
|
+ <view class="page-box">
|
|
|
+ <view class="pay" v-for="(payItem, index) in payList[index]"
|
|
|
+ :key="payItem.id">
|
|
|
+ <view v-if="item.index==0">
|
|
|
+ <view class="pay-top u-flex">
|
|
|
+ <view class="pay-top-left u-flex-1">
|
|
|
+ <view class="car">{{payItem.vehicleNo}}</view>
|
|
|
+ <view class="addr">{{payItem.roadName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="pay-top-right">{{payItem.orderStatus | filterOrderStatus}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pay-center">
|
|
|
+ <view class="pay-center-item">订单编号:{{payItem.orderId}}</view>
|
|
|
+ <view class="pay-center-item">停车泊位:{{payItem.spaceName}}</view>
|
|
|
+ <view class="pay-center-item">入场时间:{{payItem.inTime || 0}}</view>
|
|
|
+ <view class="pay-center-item" v-if="payItem.orderStatus !== 1">
|
|
|
+ 出场时间:{{payItem.outTime || 0}}
|
|
|
+ </view>
|
|
|
+ <view class="pay-center-item" v-if="payItem.orderStatus !== 1">
|
|
|
+ 免费时长:{{payItem.freeDuration || 0}}
|
|
|
+ </view>
|
|
|
+ <!-- 计费时长=停车时长-免费时长 -->
|
|
|
+ <view class="pay-center-item" v-if="payItem.orderStatus !== 1">
|
|
|
+ 计费时长:{{payItem.calcDuration || 0}}
|
|
|
+ </view>
|
|
|
+ <view class="pay-center-item" v-if="payItem.orderStatus !== 1">
|
|
|
+ 累计停车时长:{{payItem.duration || 0}}
|
|
|
+ </view>
|
|
|
+ <view class="pay-center-item">应付金额:<span
|
|
|
+ class="pay-amount">{{payItem.payAmount || 0}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="pay-center-item" v-if="payItem.deviceType && payItem.deviceType != 1">
|
|
|
+ 车位锁设备号:{{payItem.deviceNo}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pay-bottom">
|
|
|
+ <u-cell-item title="去支付" @click="choosePayWay(payItem.orderId)"
|
|
|
+ style="color: #008CFF;">
|
|
|
+ </u-cell-item>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view v-if="item.index==1">
|
|
|
+ <view class="pay-top u-flex">
|
|
|
+ <view class="pay-top-left u-flex-1">
|
|
|
+ <view class="car">{{payItem.vehicleNo}}</view>
|
|
|
+ <view class="addr">{{payItem.parkingName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="pay-top-right">{{payItem.orderStatus | filterOrderStatus}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pay-center">
|
|
|
+ <view class="pay-center-item">订单编号:{{payItem.orderId}}</view>
|
|
|
+ <view class="pay-center-item">入场通道:{{payItem.entranceName}}</view>
|
|
|
+ <view class="pay-center-item">入场时间:{{payItem.inTime || 0}}</view>
|
|
|
+ <view class="pay-center-item">出场通道:{{payItem.outEntranceName}}</view>
|
|
|
+ <view class="pay-center-item" v-if="payItem.orderStatus !== 1">
|
|
|
+ 出场时间:{{payItem.outTime || 0}}
|
|
|
+ </view>
|
|
|
+ <view class="pay-center-item" v-if="payItem.orderStatus !== 1">
|
|
|
+ 免费时长:{{payItem.freeDuration || 0}}
|
|
|
+ </view>
|
|
|
+ <!-- 计费时长=停车时长-免费时长 -->
|
|
|
+ <view class="pay-center-item" v-if="payItem.orderStatus !== 1">
|
|
|
+ 计费时长:{{payItem.calcDuration || 0}}
|
|
|
+ </view>
|
|
|
+ <view class="pay-center-item" v-if="payItem.orderStatus !== 1">
|
|
|
+ 累计停车时长:{{payItem.duration || 0}}
|
|
|
+ </view>
|
|
|
+ <view class="pay-center-item">应付金额:<span
|
|
|
+ class="pay-amount">{{payItem.payAmount || 0}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="pay-center-item" v-if="payItem.deviceType && payItem.deviceType != 1">
|
|
|
+ 车位锁设备号:{{payItem.deviceNo}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pay-bottom">
|
|
|
+ <u-cell-item title="去支付" @click="choosePayWay(payItem.orderId)"
|
|
|
+ style="color: #008CFF;">
|
|
|
+ </u-cell-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-loadmore :status="loadStatus[index]" bg-color="#F6F6FF"></u-loadmore>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </mescroll-body>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- </mescroll-body> -->
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
<view class="bottom">
|
|
|
<view class="bottom-total">
|
|
|
累计欠费<span class="total">{{totalCount}}</span>笔,合计<span class="total">{{totalPayAmount}}</span>元
|
|
@@ -61,7 +128,7 @@
|
|
|
</view>
|
|
|
</u-modal>
|
|
|
<!-- 支付方式 -->
|
|
|
- <PaymentMethod :payWayPop="payWayPop" :curOrderList="currentItem" :jumpUrl="jumpUrl"
|
|
|
+ <PaymentMethod :payWayPop="payWayPop" :exportFlag="exportFlag" :curOrderList="currentItem" :jumpUrl="jumpUrl"
|
|
|
@closePaymentMethod="closePaymentMethod"></PaymentMethod>
|
|
|
<u-toast ref="uToast" />
|
|
|
</view>
|
|
@@ -81,9 +148,34 @@
|
|
|
totalPayAmount: '',
|
|
|
totalCount: '',
|
|
|
currentPayUrl: "",
|
|
|
- payList: [],
|
|
|
- list: [],
|
|
|
+ payList: [
|
|
|
+ [],
|
|
|
+ [],
|
|
|
+ [],
|
|
|
+ []
|
|
|
+ ],
|
|
|
+ list: [{
|
|
|
+ index: 0,
|
|
|
+ name: '路段',
|
|
|
+ orderStatus: null,
|
|
|
+ pageNum: 1,
|
|
|
+ total: null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 1,
|
|
|
+ name: '停车场',
|
|
|
+ orderStatus: 1,
|
|
|
+ pageNum: 1,
|
|
|
+ total: null
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ current: 0,
|
|
|
+ swiperCurrent: 0,
|
|
|
+ dx: 0,
|
|
|
+ loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
|
|
|
+ isLoadMore: false, //是否加载中
|
|
|
orderList: [],
|
|
|
+ exportFlag: false,
|
|
|
PayUrl: "",
|
|
|
payTipsPop: false,
|
|
|
payWayPop: false,
|
|
@@ -117,67 +209,167 @@
|
|
|
onLoad() {
|
|
|
const href = location.href.split('#')
|
|
|
this.jumpUrl = href[0] + '#/pages/center/order/order'
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
onShow() {
|
|
|
// onShow 刷新数据
|
|
|
if (this.mescroll) {
|
|
|
this.mescroll.triggerDownScroll();
|
|
|
}
|
|
|
-
|
|
|
+ this.list[this.current].pageNum = 1
|
|
|
+ this.orderList = [
|
|
|
+ [],
|
|
|
+ [],
|
|
|
+ [],
|
|
|
+ []
|
|
|
+ ]
|
|
|
+ this.orderListArr(this.list[this.current], this.swiperCurrent)
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
+ reachBottom() {
|
|
|
+ if (this.payList[this.current].length >= this.list[this.current].total) {
|
|
|
+ this.loadStatus.splice(this.list[this.current].index, 1, 'nomore')
|
|
|
+ return
|
|
|
+ };
|
|
|
+ this.loadStatus.splice(this.list[this.current].index, 1, 'loading')
|
|
|
+ this.orderListArr(this.list[this.current], this.swiperCurrent)
|
|
|
+ },
|
|
|
+ // tab栏切换
|
|
|
+ change(index) {
|
|
|
+ this.swiperCurrent = index
|
|
|
+ this.current = index
|
|
|
+ //重新初始化
|
|
|
+ this.payList = [
|
|
|
+ [],
|
|
|
+ [],
|
|
|
+ [],
|
|
|
+ []
|
|
|
+ ]
|
|
|
+ this.list[index].pageNum = 1
|
|
|
+ if (index == 1) {
|
|
|
+ this.exportFlag = true
|
|
|
+ } else {
|
|
|
+ this.exportFlag = false
|
|
|
+ }
|
|
|
+ this.orderListArr(this.list[index], index)
|
|
|
+ },
|
|
|
+ transition({
|
|
|
+ detail: {
|
|
|
+ dx
|
|
|
+ }
|
|
|
+ }) {
|
|
|
+ this.$refs.tabs.setDx(dx)
|
|
|
+ },
|
|
|
+ animationfinish({
|
|
|
+ detail: {
|
|
|
+ current
|
|
|
+ }
|
|
|
+ }) {
|
|
|
+ this.$refs.tabs.setFinishCurrent(current)
|
|
|
+ this.swiperCurrent = current
|
|
|
+ this.current = current
|
|
|
+ },
|
|
|
customBack() {
|
|
|
this.$u.route({
|
|
|
type: 'switchTab',
|
|
|
url: 'pages/index/index'
|
|
|
});
|
|
|
},
|
|
|
- /*下拉刷新的回调*/
|
|
|
- downCallback() {
|
|
|
- // 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
|
|
|
- this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
|
|
|
+ orderListArr(orderType, index) {
|
|
|
+ let pageNum = orderType.pageNum; // 页码, 默认从1开始
|
|
|
+ let pageSize = orderType.total; // 页长, 默认每页10条
|
|
|
+ if (index == 0) {
|
|
|
+ this.$u.api.getOrderList({
|
|
|
+ // pageSize: pageSize,
|
|
|
+ pageNum: pageNum,
|
|
|
+ paying: true
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ for (const item of res.data.pageInfo.rows) {
|
|
|
+ this.payList[orderType.index].push(item)
|
|
|
+ }
|
|
|
+ this.list[this.current].total = res.data.pageInfo.total
|
|
|
+ this.list[orderType.index].pageNum++
|
|
|
+ if (this.payList[this.current].length >= this.list[this.current].total) {
|
|
|
+ this.loadStatus.splice(this.list[orderType.index].index, 1, 'nomore')
|
|
|
+ };
|
|
|
+ this.totalCount = res.data.costInfo.totalCount;
|
|
|
+ this.totalPayAmount = res.data.costInfo.totalPayAmount;
|
|
|
+
|
|
|
+ }).catch(err => {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: err.msg,
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$u.api.getRoomParkingApi({
|
|
|
+ pageNum: pageNum,
|
|
|
+ paying: true
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ for (const item of res.data.pageInfo.rows) {
|
|
|
+ this.payList[orderType.index].push(item)
|
|
|
+ }
|
|
|
+ this.list[this.current].total = res.data.pageInfo.total
|
|
|
+ this.list[orderType.index].pageNum++
|
|
|
+ if (this.payList[this.current].length >= this.list[this.current].total) {
|
|
|
+ this.loadStatus.splice(this.list[orderType.index].index, 1, 'nomore')
|
|
|
+ };
|
|
|
+ this.totalCount = res.data.costInfo.totalCount;
|
|
|
+ this.totalPayAmount = res.data.costInfo.totalPayAmount;
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
+ /*下拉刷新的回调*/
|
|
|
+ // 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.getOrderList({
|
|
|
- pageSize: pageSize,
|
|
|
- pageNum: pageNum,
|
|
|
- paying: true
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- // 接口返回的当前页数据列表 (数组)
|
|
|
- let curPageData = res.data.pageInfo.rows;
|
|
|
- // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
|
|
- let curPageLen = curPageData.length;
|
|
|
- // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
|
|
|
- let totalPage = res.data.pageInfo.pages;
|
|
|
- // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
|
|
|
- let totalSize = res.data.pageInfo.total;
|
|
|
- // 接口返回的是否有下一页 (true/false)
|
|
|
- // let hasNext = data.pages;
|
|
|
+ // upCallback(page) {
|
|
|
+ // console.log(page)
|
|
|
+ // let pageNum = page.num; // 页码, 默认从1开始
|
|
|
+ // let pageSize = page.size; // 页长, 默认每页10条
|
|
|
+ // // this.getMessageList()
|
|
|
+ // this.$u.api.getOrderList({
|
|
|
+ // pageSize: pageSize,
|
|
|
+ // pageNum: pageNum,
|
|
|
+ // paying: true
|
|
|
+ // })
|
|
|
+ // .then(res => {
|
|
|
+ // // 接口返回的当前页数据列表 (数组)
|
|
|
+ // let curPageData = res.data.pageInfo.rows;
|
|
|
+ // // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
|
|
+ // let curPageLen = curPageData.length;
|
|
|
+ // // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
|
|
|
+ // let totalPage = res.data.pageInfo.pages;
|
|
|
+ // // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
|
|
|
+ // let totalSize = res.data.pageInfo.total;
|
|
|
+ // // 接口返回的是否有下一页 (true/false)
|
|
|
+ // // let hasNext = data.pages;
|
|
|
|
|
|
- //设置列表数据
|
|
|
- if (page.num == 1) this.payList = []; //如果是第一页需手动置空列表
|
|
|
- this.payList = this.payList.concat(curPageData); //追加新数据
|
|
|
- this.totalCount = res.data.costInfo.totalCount;
|
|
|
- this.totalPayAmount = res.data.costInfo.totalPayAmount;
|
|
|
- // 请求成功,隐藏加载状态
|
|
|
- //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
|
|
- this.mescroll.endByPage(curPageLen, totalPage);
|
|
|
- setTimeout(() => {
|
|
|
- this.mescroll.endSuccess(curPageLen)
|
|
|
- }, 20)
|
|
|
- }).catch(err => {
|
|
|
- this.$refs.uToast.show({
|
|
|
- title: err.msg,
|
|
|
- type: 'error',
|
|
|
- });
|
|
|
- });
|
|
|
+ // //设置列表数据
|
|
|
+ // if (page.num == 1) this.payList = []; //如果是第一页需手动置空列表
|
|
|
+ // this.payList = this.payList.concat(curPageData); //追加新数据
|
|
|
+ // this.totalCount = res.data.costInfo.totalCount;
|
|
|
+ // this.totalPayAmount = res.data.costInfo.totalPayAmount;
|
|
|
+ // // 请求成功,隐藏加载状态
|
|
|
+ // //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
|
|
+ // this.mescroll.endByPage(curPageLen, totalPage);
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.mescroll.endSuccess(curPageLen)
|
|
|
+ // }, 20)
|
|
|
+ // }).catch(err => {
|
|
|
+ // this.$refs.uToast.show({
|
|
|
+ // title: err.msg,
|
|
|
+ // type: 'error',
|
|
|
+ // });
|
|
|
+ // });
|
|
|
|
|
|
- },
|
|
|
+ // },
|
|
|
paythis(orderId) {
|
|
|
let orderList = [];
|
|
|
orderList.push(orderId);
|