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>
		<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}}</view>
							<view class="pay-center-item">出场时间：{{payItem.outTime}}</view>
							<view class="pay-center-item">停留时间：{{payItem.duration}}</view>
							<view class="pay-center-item">应付金额：<span class="pay-amount">{{payItem.payAmount}}</span></view>
						</view>
						<view class="pay-bottom">
							<!-- <u-cell-item title="去支付" @click="paythis(payItem.orderId)" style="color: #008CFF;"></u-cell-item> -->
							<u-cell-item title="去支付" @click="choosePayWay(payItem.orderId)" style="color: #008CFF;"></u-cell-item>
						</view>
					</view>
				</view>
			</scroll-view>
		</mescroll-body>
		<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>
		<!-- 缴费提示-->
		<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="gyBankPay">
						<image src="../../static/img/gy-bank-pay-icon.png" mode=""></image>
						<view>贵州银行</view>
					</view>
					<view class="pay-way-item" @click="wechatPay">
						<image src="../../static/img/wechat-pay-icon.png" mode=""></image>
						<view>微信支付</view>
					</view>
				</view>
				<button class="pay-way-close-btn" @click="payWayPop = false">关闭</button>
			</view>
		</u-modal>
		<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";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				currentPayUrl: "",
				payList: [],
				list: [
					{index:0,name: '未缴费',orderStatu:3,pageNum:1,total:null}
				],
				orderList: [],
				PayUrl: "",
				payTipsPop: false,
				payWayPop: false,
				// 选中去支付的单条条目
				currentItem: [],
				// 缴费提示类目
				payTipsItem: {
					num: '',
					price: ''
				},
				code: null,
			};
		},
		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(){
			// let locationLocaturl = window.location.hash;
			// this.orderId = getUrlParams(locationLocaturl,"orderId"); // 截取orderId
			// console.log('this.orderId',this.orderId);
			// if (this.orderId) {
			// 	this.handleGetOrderinfo(this.orderId);
			// }
			// this.code = getUrlParams(locationLocaturl,"code");
			// if (this.code) {
			// 	this.handleGetWXInfo(this.code)
			// }
			
		},
		methods: {
			customBack(){
				this.$u.route({
					type:'switchTab',
					url: 'pages/index/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.getOrderList({pageSize:pageSize ,pageNum: pageNum, paying: true})
				.then(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.payList = []; //如果是第一页需手动置空列表
					this.payList = this.payList.concat(curPageData); //追加新数据
					
					// 请求成功,隐藏加载状态
					//方法一(推荐): 后台接口有返回列表的总页数 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) {
				console.log(item)
				this.currentItem = []
				this.currentItem.push(item)
				this.payWayPop = true
			},
			// 贵阳银行支付
			gyBankPay(list) {
				this.$u.api.payGzbank({orderList: this.currentItem}).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',
					});
				});
			},
			// 微信支付
			wechatPay() {
				const openId = this.$store.state.vuex_wxinfo.openId
				if (openId) {
					this.getWXPay(this.currentItem)
				} else {
					this.getCode()
				}
			},
			// 全部缴费确认
			confirmPrice() {
				let orderNum = 0, price = 0
				this.currentItem = []
				this.payList.forEach(item => {
					console.log(item)
					if (item.orderStatus !== 2 && item.payStatus !== 1 ) {
						price += item.payAmount
						orderNum ++
						this.currentItem.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'
					})
				}
			},
			// 缴费提示弹框确认
			payTipsPopConfirm() {
				this.payWayPop = true
			},
			getCode () {
				var local = window.location.href // 获取页面url
				let locationLocaturl = window.location.search;
				this.code = getUrlParams(locationLocaturl,"code"); // 截取code
				if (this.code == null || this.code === '') { // 如果没有code，则去请求
					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
				} else {
					this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
				}
			},
			handleGetWXInfo (code) { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
				let _this = this
				this.$u.api.getWXInfo(code).then((res) => {
					if (res.code === 200 ) {
						this.$u.vuex('vuex_wxinfo', res.data);
						// 继续支付
						this.getWXPay(this.currentItem)
					}
				}).catch((err) => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				})
			},
			async getWXPay(list){
				let params = {
					orderList: list,
					openid:this.$store.state.vuex_wxinfo.openId
				};
				await this.$wxApi.config();
				this.$pay.wechatPay(params).then(res =>{
					if(res.code == 0){
						// 成功
						this.$u.route({
							url:'pages/payLists/payLists',
						});
					}else if(res.code == 1){
						// 取消
						// uni.redirectTo({
						// 	url: '/pages/userCenter/myOrder/myOrder'
						// })
					}else if(res.code == 2){
						this.$refs.uToast.show({
							title: '支付失败，请检查!',
							type: 'error',
							// url: '/pages/user/index'
						});
					}
				});
			},
			handleGetOrderinfo(orderId){
				this.$u.api.getOrderinfo({id:orderId})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					this.orderInfo = res.data;
					console.log('handleGetOrderinfo',JSON.parse(JSON.stringify(res)));
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('handleGetOrderinfo ',err)
				});
				
			},
		}
	};
</script>

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

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