JP-ChargeTeam51/pages/parking/pay.vue

<template>
	<view>

		<view class="carNone" v-if="kongResult">
			<u-navbar title="停车缴费" :is-back="false">

			</u-navbar>
			<img src="@/assets/static/img/暂无数据-缺省页.png" alt="">
			<p>未查询到停车数据</p>
			<u-button class="login-btn2" type="default" shape="circle" @click="channelPayDetail">刷新</u-button>

		</view>
		<view class="wrap" v-if="!kongResult">
			<view>

				<view class="">
					<h2 style="
										    text-align: center;
										    font-size: 36px;
										      padding-top: 30px;
										"> 停车缴费</h2>
					<h2 style="
					    text-align: center;
					    font-size: 46px;
					    color: #53b56b;
					"> {{detail.price.toFixed(2)}}<span style="font-size: 16px;">元</span></h2>
					<view class="cartitle"> 缴费信息</view>
					<view class="info">
						<view class="info-name">
							车牌号
						</view>
						<view class="info-text">
							{{detail.carNumber}}

						</view>
					</view>

					<view class="info">
						<view class="info-name" style="font-size: 16px;">
							停车费
						</view>
						<view class="info-text" style="font-size: 16px;">
							{{detail.total.toFixed(2)}}元
						</view>
					</view>
					<view class="info">
						<view class="info-name" style="font-size: 16px;">
							折扣
						</view>
						<view class="info-text" style="font-size: 16px;">
							{{detail.discountMoney.toFixed(2)}}元
						</view>
					</view>

					<view class="cartitle"> 停车详情</view>
					<view class="info">
						<view class="info-name">
							每小时费用
						</view>
						<view class="info-text">

							{{detail.hourCost.toFixed(2)}}元
						</view>
					</view>
					<view class="info">
						<view class="info-name">
							停车位置
						</view>
						<view class="info-text">

							{{detail.parkingName}}
						</view>
					</view>
					<view class="info">
						<view class="info-name">
							入场时间
						</view>
						<view class="info-text">

							{{detail.inParkingTime}}
						</view>
					</view>
					<view class="info">
						<view class="info-name">
							停车时间
						</view>
						<view class="info-text">

							{{detail.parkingTimeStr}}
						</view>
					</view>

					<view class="info" v-if="detail.disTimesStr!=null && detail.disTimesStr">
						<view class="info-name">
							优惠时长
						</view>
						<view class="info-text">

							{{detail.disTimesStr}}
						</view>
					</view>


				</view>
				<u-button class="login-btn" type="success" shape="circle" @click="pay()">支付离场</u-button>

				<u-button class="login-btn2" type="default" shape="circle" @click="channelPayDetail">刷新</u-button>


			</view>


		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/parking.js'

	import {
		wxPayJs
	} from '@/utils/wxpay'
	import {
		aliPayJs
	} from '@/utils/alipay'

	export default {
		components: {

		},
		data() {
			return {


				form: {

					channelId: "",
				},
				detail: {
					price: 0,
					total: 0,
					discountMoney: 0,
					hourCost: 0
				},
				kongResult: true,
			}
		},
		onLoad(op) {
			if (op.id) {
				this.form.channelId = op.id
			} else {
				uni.showModal({
					content: "参数错误"
				})
			}

		},
		onReady() {
			this.channelPayDetail()
		},
		methods: {
			channelPayDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.channelPayDetail(this.form).then(data => {
					uni.hideLoading()
					this.detail = data.data
					this.kongResult = false;
				}).catch(error => {
					this.kongResult = true;
					uni.hideLoading()
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//微信支付
			payWx() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.parkingWxPay({
					id: this.detail.id,
					openId: this.carhelp.getOpenId()
				}).then(data => {

					data.data.url = window.location.href.split("#")[0] + "/#/car/payResult";

					uni.hideLoading()
					wxPayJs(data.data)
				}).catch(error => {
					uni.hideLoading()
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//支付宝支付
			payAli() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.parkingTradeWebPay({
					id: this.detail.id,
					openId: this.carhelp.getOpenIdALI()
				}).then(response => {
					uni.hideLoading()
					let opthions = {
						tradeNo: response.data.tradeOrder.tradeNo,
						succUrl: window.location.href.split("#")[0] + "/#/pages/parking/payResult?id=" + response.data
							.tradeOrder.tradeNo,
						cancelUrl: window.location.href.split("#")[0] + "/#/pages/parking/pay?id=" + this.form.channelId,
					}
					//(opthions);
					aliPayJs(opthions);
				}).catch(error => {
					uni.hideLoading()
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//支付
			pay() {
				var IS_WEIXIN = /MicroMessenger/.test(window.navigator.userAgent)
				var IS_ALI = /AlipayClient/.test(window.navigator.userAgent)


				if (IS_WEIXIN) {
					this.payWx();
				} else if (IS_ALI) {
					this.payAli();
				} else {
					this.payWx();
					uni.showModal({
						content: "请用微信或支付宝打开"
					})
				}
			},




		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.cartitle {
		font-size: 16px;
		margin-left: 20px;
		font-weight: bold;
		margin-top: 5px;
	}

	.color4fc5f7 {
		color: #4fc5f7;
		margin-left: 5px;
	}

	.info {
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		margin: 0 40px;
		// height: 48px;
		line-height: 48px;
		background-color: rgba(255, 255, 255, 100);
		color: rgba(16, 16, 16, 100);


		border-bottom: 1px solid #ededed;

		.info-text {

			/*			line-height: 23px;*/
			//	padding: 13px 0 12px;
			//width: 200px;
			text-align: right;
		}
	}

	.carNone {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		img {
			width: 100%;
			height: 100%;
		}

		p {
			margin-top: -60px;
		}
	}

	.u-char-item {
		width: 29px !important;
	}

	.u-drawer {
		z-index: -1 !important;
	}

	::v-deep .u-char-item {
		width: 30px !important;
		height: 40px !important;
		font-size: 18px !important;
	}

	.key-input {
		padding-top: 24px;
	}

	.default {
		margin: 16px 28px;
	}

	.login-btn {
		margin: 28px;
		background-color: #00B962 !important;
		border-color: #00B962 !important;
		color: #fff !important;
	}

	.login-btn2 {
		margin: 28px;

	}
</style>