parking_h5/pages/payLists/payLists.vue

<template>
	<view>
		<!-- <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>
					</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>元
			</view>
			<view class="button-wrap" v-if="payList.length&&payList.length>=1">
				<!-- <button class="button" type="primary" @click="all()">全部缴费</button> -->
				<button class="button" type="primary" @click="confirmPrice()">全部缴费</button>
			</view>
		</view>

		<!-- 缴费提示-->
		<u-modal v-model="payTipsPop" :title-style="{color: '#404040'}" title="缴费提示" :show-confirm-button="true"
			confirm-text="立即缴费" :confirm-style="{backgroundColor: '#3397FA', color: '#fff'}" :show-cancel-button="true"
			cancel-text="取消" :cancel-style="{backgroundColor: '#EBF1FF', color: '#3397FA'}"
			@confirm="payTipsPopConfirm">
			<view class="slot-content">
				<view class="pay-tips">
					<text>{{payTipsItem.num || 0}}</text>场停车欠费，共
					<text>{{payTipsItem.price || 0}}</text>元
				</view>
			</view>
		</u-modal>
		<!-- 支付方式 -->
		<PaymentMethod :payWayPop="payWayPop" :exportFlag="exportFlag" :curOrderList="currentItem" :jumpUrl="jumpUrl"
			@closePaymentMethod="closePaymentMethod"></PaymentMethod>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import getUrlParams from "../../utils/getUrlParams.js";
	import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			PaymentMethod
		},
		data() {
			return {
				totalPayAmount: '',
				totalCount: '',
				currentPayUrl: "",
				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,
				// 选中去支付的单条条目
				currentItem: [],
				// 缴费提示类目
				payTipsItem: {
					num: '',
					price: ''
				},
				code: null,
				jumpUrl: ''
			};
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		},
		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'
				});
			},
			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) {
			// 	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',
			// 			});
			// 		});

			// },
			paythis(orderId) {
				let orderList = [];
				orderList.push(orderId);
				this.$u.api.payGzbank({
					orderList: orderList
				}).then(res => {
					let payUrl = res.data.url;
					this.currentPayUrl = encodeURIComponent(res.data.url);
					// return;
					this.$u.route({
						url: 'pages/payLists/pay',
						params: {
							currentPayUrl: this.currentPayUrl
						}
					});
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				});
			},
			all() {
				this.payList.forEach((item, index, arr) => {
					console.log(item)
					if (item.orderId) {
						this.orderList.push(item.orderId)
					}
				});

				this.$u.api.payGzbank({
					orderList: this.orderList
				}).then(res => {
					let payUrl = res.data.url;
					this.currentPayUrl = encodeURIComponent(res.data.url);
					// console.log('this.currentPayUrl',this.currentPayUrl);
					// return;
					this.$u.route({
						url: 'pages/payLists/pay',
						params: {
							currentPayUrl: this.currentPayUrl
						}
					});
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				});
			},
			// 去支付,选择支付方式
			choosePayWay(item) {
				this.currentItem = []
				this.currentItem.push(item)
				this.payWayPop = true
			},
			// 全部缴费确认
			confirmPrice() {
				let orderNum = 0,
					price = 0
				this.currentItem = []
				this.payList.forEach(item => {
					if (item.orderStatus !== 4 && item.payStatus !== 1) {
						price += Number(item.payAmount)
						orderNum++
						this.currentItem.push(item.orderId)
					}
				})
				this.payTipsItem.num = orderNum
				this.payTipsItem.price = price.toFixed(2)
				if (orderNum !== 0 && price !== 0) {
					this.payTipsPop = true
				} else {
					this.$refs.uToast.show({
						title: '没有需要支付的订单',
						type: 'warning'
					})
				}
			},
			// 缴费提示弹框确认
			payTipsPopConfirm() {
				this.payWayPop = true
			},
			handleGetOrderinfo(orderId) {
				this.$u.api.getOrderinfo({
						id: orderId
					})
					.then(res => {
						this.orderInfo = res.data;
						console.log('handleGetOrderinfo', JSON.parse(JSON.stringify(res)));
					}).catch(err => {
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error',
						});
					});

			},
			closePaymentMethod() {
				this.payWayPop = false
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #F6F6FF;
	}

	/* #endif */
</style>

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