parking_pda/pages/ownersquery/ownersinfo/ownersinfo.vue

<template>
	<view>
		<u-navbar
		 title="停车记录查询" 
		 title-color="#fff" 
		 :custom-back="customBack" 
		 :border-bottom="false" 
		 back-icon-color="#CCE8FF" 
		 :background="{background: 'linear-gradient(145deg, #41AFF9 0%, #2D8CFB 100%)' }"></u-navbar>
		 
		 <!-- <u-empty class="u-m-t-50" text="很棒!没有欠费订单!" mode="list" v-if="listEmpty"></u-empty> -->
		 <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" >
		 <view class="owelist">
		 	<view class="owelist-item" v-for="(item,index) in owelist" :key="item.id">
		 		<view class="item-header u-flex u-row-between">
		 			<view class="vehicle-no">{{item.vehicleNo}}</view>
					<view class="space-name">{{item.spaceName}}</view>
		 		</view>
				<view class="road-name u-flex">
					<u-icon name="map-fill" color="#3397FA" size="36"></u-icon>
					{{item.roadName}}
				</view>
				<view class="info-item">订单号：{{item.orderId}}</view>
				<view class="info-item">进场时间：{{item.inTime}}</view>
				<view v-if="item.orderStatus != 1" class="info-item">出场时间：{{item.outTime}}</view>
				<view v-if="item.orderStatus != 1" class="info-item">停车时长：{{item.duration}}</view>
				<view class="info-item">收费员：{{item.payeeName}}</view>
				<view v-if="item.orderStatus != 1" class="info-item">支付金额：<span class="amount">{{item.payAmount}}元</span></view>
				<view class="info-item">订单状态：{{item.orderStatus|filterOrderStatus}}</view>
				<view>
					<button v-if="item.orderStatus == 1"  size="mini" type="primary" @click="onParkIn(item)">入场小票</button>
					<button v-if="item.orderStatus != 1"  size="mini" type="warn" @click="onParkLeave(item)">出场小票</button>
				</view>
		 	</view>
		 </view>
		 </mescroll-body>
		 <view class="button-wrap" v-if="owelist.length&&owelist.length>=1">
		 	<!-- <button class="button" type="primary" @click="all()">全部缴费</button> -->
		 	<button class="button" type="primary" @click="confirmPrice()">全部缴费</button>
		 </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}}</text>场停车欠费，共
		 			<text>{{payTipsItem.price}}</text>元
		 		</view>
		 	</view>
		 </u-modal>
		 <u-modal
		 v-model="payWayPop"
		 :title-style="{color: '#404040'}"
		 title="缴费方式"
		 :show-confirm-button="false"
		 :show-cancel-button="false">
		 	<view class="slot-content">
		 		<view class="pay-way">
					<view class="pay-way-item" @click="cashPay">
		 				<image src="/static/img/payway-xj.png" mode=""></image>
		 				<view>现金支付</view>
		 			</view>
		 			<view class="pay-way-item" @click="scanPay">
		 				<image src="/static/img/payway-scan.png" mode=""></image>
		 				<view>扫码收费</view>
		 			</view>
					<view class="pay-way-item" @click="qrPay">
						<image src="/static/img/payway-qr.png" mode=""></image>
						<view>收款码</view>
					</view>
		 		</view>
		 		<button class="pay-way-close-btn" @click="payWayPop = false">关闭</button>
		 	</view>
		 </u-modal>
		 <u-popup class="popup cashPay-popup" v-model="showCash" :mask-close-able="false" mode="center" border-radius="20" width="90%">
		 	<view class="popup-title">本次收到缴费</view>
		 	<view class="popup-body u-flex">
				<view class="u-flex-1 ">您确认已收取现金<span style="color: red;">{{payTipsItem.price}}</span>元吗？</view>
		 		<!-- <view class="u-flex-1 change">找零{{changeMoney}}元</view> -->
		 	</view>
		 	<view class="popup-footer u-flex">
		 		<view class="popup-btn1" ><u-button type="primary" @click="consfimPayway">确认</u-button> </view>
		 		<view class="popup-btn2" ><u-button type="primary" :plain="true"@click="closecashPayway">关闭</u-button> </view>
		 	</view>
		 </u-popup>
		 <u-popup class="popup qrcode-popup" v-model="showQrcode" :mask-close-able="false" mode="center" border-radius="20" width="90%">
		 	<tki-qrcode
		 	    ref="qrcode"
		 	    cid="tki-qrcode-canvas"
		 	    :val="qrcontent"
		 	    :size="200"
		 	    unit="px"
		 	    background="#000000"
		 	    foreground="#ffffff"
		 	    pdground="#ffffff"
		 	    :iconSize="40"
		 	    :onval="true"
		 	    :loadMake="false"
		 	    :usingComponents="true"
		 	    :showLoading="false"
		 	    loadingText="loadingText"
		 	     />
		 	<view class="qrcode-popup-btn" @click="hideQrcode">关闭</view>
		 </u-popup>
		 <u-toast ref="uToast" />
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	//#ifdef APP-PLUS
	let device = uni.requireNativePlugin("DeviceInfo");
	//#endif
	import tkiQrcode from "tki-qrcode";
	export default{
		components:{
			tkiQrcode
		},
		mixins: [MescrollMixin], // 使用mixin
		data(){
			return{
				change:'0',
				// cashMoney:'',
				showCash:false,
				qrcontent:'',
				showQrcode:false,
				payParams:{
					orderList:[],
					code:'',
					cashMoney:'',
				},
				currentItem: [],
				payWayPop: false,
				payTipsItem: {
					num: '',
					price: ''
				},
				payTipsPop: false,
				vehicleNo:'',
				listEmpty:false,
				owelist:[],
				pagination:Object.assign({}, {pageNo: 1,pageSize: 10}),
			}
		},
		onLoad(page){
			this.vehicleNo = page.vehicleNo;
			console.log('this.vehicleNo',this.vehicleNo)
		},
		onShow(){
			// this.owelist = [];
		},
		onReachBottom() {
			// this.getData();
		},
		computed:{
			changeMoney(){
				if(this.payParams.cashMoney>this.payTipsItem.price){
					return this.payParams.cashMoney-this.payTipsItem.price
				}else{
					return 0
				}
			}
		},
		methods:{
			cashPay(){
				this.showCash = true;
				
			},
			closecashPayway(){
				this.showCash = false;
			},
			consfimPayway(){
				if(this.payParams.cashMoney<this.payTipsItem.price){
					this.$refs.uToast.show({
						title: '支付金额小于欠费金额，不能支付',
						type: 'error',
					});
					
				}else{
					this.$u.api.cashPay(this.payParams)
					.then(res=>{
						uni.showLoading({
							 title: '查询支付状态中'
						});
						this.timer = setInterval(() => {
						  this.handlePayQuery(res.data.polyOrderId)
						}, 3000);
					}).catch(err=>{
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error',
						});
					});
				}
				
			},
			qrPay(){
				console.log('this.payParams',this.payParams);
				this.$u.api.gzbankPolypay(this.payParams)
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					this.showPayway = false;
					this.showQrcode = true;
					setTimeout(()=>{
						this.qrcontent = res.data.qrCodeUrl;
					},500)
					
					// 启动定时器查询订单状态
					uni.showLoading({
						 title: '等待支付中'
					});
					this.timer = setInterval(() => {
					  this.handlePayQuery(res.data.polyOrderId)
					}, 3000);
					console.log('gzbankPolypay',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('gzbankPolypay ',err)
				});
				
			},
			hideQrcode(){
				this.showQrcode = false;
			},
			scanPay(){
				setTimeout(() =>{
					uni.scanCode({
					    onlyFromCamera: true,
						scanType:['barCode','qrCode'],
					    success:  (res) => {
							console.log(res)
							this.payParams.code = res.result;
							this.$u.api.gzbankSwept(this.payParams)
							.then(res=>{
								// 启动定时器查询订单状态
								uni.showLoading({
									 title: '查询支付状态中'
								});
								this.timer = setInterval(() => {
								  this.handlePayQuery(res.data.polyOrderId)
								}, 3000);
					
							}).catch(err=>{
								//#ifdef APP-PLUS
								plus.nativeUI.toast(err.msg);
								//#endif
							});
							
					    },
						fail:function(err){
							//#ifdef APP-PLUS
							plus.nativeUI.toast('扫码失败');
							ALog.info({msg:'条码类型：err' + err});
							//#endif
						}
					});
				},2000)
			},
			handlePayQuery(polyOrderId){
				this.$u.api.payQuery({polyOrderId:polyOrderId})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					// 支付成功后的页面跳转
					if (res.data.payStatus==1) {
						uni.hideLoading();
					  clearInterval(this.timer)
					  this.$refs.uToast.show({
					  	title:'支付成功',
					  	type: 'success',
					  	url:'pages/index/index',
						// params: {
						// 	vehicleNo:this.orderVehicleNo,
						// },
						duration:10000
					  });
					};
					console.log('handlePayQuery',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('handlePayQuery ',err)
				});
				
			},
			// 缴费提示弹框确认
			payTipsPopConfirm() {
				this.payWayPop = true
			},
			// 全部缴费确认
			confirmPrice(){
				let orderNum = 0, price = 0
				this.currentItem = []
				this.owelist.forEach(item => {
					console.log(item)
					if ((item.orderStatus == 2||item.orderStatus == 3) && item.payStatus !== 1 ) {
						price += item.payAmount
						orderNum ++
						this.currentItem.push(item.orderId);
						this.payParams.orderList.push(item.orderId);
					}
				})
				this.payTipsItem.num = orderNum
				this.payTipsItem.price = price
				if (orderNum !== 0 && price !== 0) {
					this.payTipsPop = true
				} else {
					this.$refs.uToast.show({
						title: '没有需要支付的订单',
						type: 'warning'
					})
				}
			},
			customBack(){
				uni.reLaunch({
				    url: '/pages/index/index'
				});
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			},
			upCallback(page){
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				this.$u.api.vehicleList({vehicleNo:this.vehicleNo,pageNum:pageNum,pageSize:pageSize})
				.then(res=>{
					// uni.hideLoading();
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					//设置列表数据
					let curPageData = res.data.rows; 
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length; 
					let totalPage = res.data.pages; 
					
					if(page.num == 1) this.owelist = []; //如果是第一页需手动置空列表
					this.owelist = this.owelist.concat(curPageData); //追加新数据
					
					// 请求成功,隐藏加载状态
					//后台接口有返回列表的总页数 totalPage
					this.mescroll.endByPage(curPageLen, totalPage);
					
					this.leaveDetail = res.data;
					// for (let item of res.data.rows) {
					// 	this.owelist.push(item)
					// }
					if(this.owelist.length<=0){this.listEmpty = true};
				
					console.log('vehicleList',res)
				}).catch(err=>{
					// uni.hideLoading();
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('vehicleList ',err)
				});
				
			},
			onParkIn(item){
				this.$u.route({
					url:'pages/receipts/receiptsIn',
					params: {
							orderId:item.orderId
						}
				});
				// this.$u.api.printIn({orderId:item.orderId})
				// .then(res => {
				// 	if(res.code == 200){
				// 		//#ifdef APP-PLUS
				// 		device.print(res.data);
				// 		//#endif
				// 		plus.nativeUI.toast('打印成功');
				// 	}
				// })
				// .catch(err=>{
				// 	plus.nativeUI.toast('打印失败');
				// });
				
			},
			onParkLeave(item){
				this.$u.route({
					url:'pages/receipts/receiptsOut',
					params: {
							orderId:item.orderId
						}
				});
				// this.$u.api.printLeave({orderId:item.orderId})
				// .then(res => {
				// 	if(res.code == 200){
				// 		//#ifdef APP-PLUS
				// 		device.print(res.data);
				// 		//#endif
				// 		plus.nativeUI.toast('打印成功');
				// 	}
				// })
				// .catch(err=>{
				// 	plus.nativeUI.toast('打印失败');
				// });
			}
			
		}
	}
</script>

<style lang="scss">
	@import  './ownersinfo.scss'
</style>