parkPay.vue 6.79 KB

Edit Raw Blame History

<template>
	<view>

		<!-- 	<view class="order-time">
            剩余支付时间: {{appOrderTimeout}}
        </view> -->

		<view class="order-title">
			订单详情
		</view>
		<view class="order-info">
			车牌号：{{mycarNumber | tranNull}}
		</view>
		<view class="order-line"></view>
		<view class="order-info">
			停车场：{{parkName | tranNull}}
		</view>
		<view class="order-line"></view>
		<view class="order-info">
			进场时间：{{parkInTime | tranNull}}
		</view>
		<view class="order-line"></view>
		<view class="order-info">
			停车时间：{{staytime | timeFormatter}}
		</view>
		<view class="order-line"></view>
		<view class="order-info">
			总计费用：{{due |toFixed2}}元
		</view>
		<view class="order-line"></view>

		<view class="flex-row-justify-between">
			<view class="order-info">
				需支付金额
			</view>
			<view class="flex-row-justify-end">
				<view class="order-info" style="font-weight:bold;font-size:18px;">
					{{orderFee | toFixed2}}
				</view>
				<view class="order-info" style="margin-right: 50upx;margin-left: 0px;">
					元
				</view>
			</view>
		</view>
		<!-- <view class="uni-list-cell-pd pos-rel">
			<input class="" type="number"
				style="background-color: #fff;height:40px;line-height: 40px;padding-left: 15px;font-size: 20px;" v-model="rechargeNum"
				@input="checkNum" :maxlength="maxlength" placeholder="确认支付金额(单位:元)">
			<view class="pos-abs paywarp">
				元
			</view>
		</view> -->
		<view class="order-line-bold"></view>

		<view class="order-title">
			支付方法
		</view>
		<view class="order-line"></view>

		<view class="orderwaysview">
			<!--<image src="../../static/orderInfo/orderinfo-wechat.png" class="orderways"></image>-->
			<view class="order-info" style="margin-left: 15px;">
				商户余额
			</view>
			<image src="../../static/orderInfo/orderinfo-sel.png" class="orderwaysSel"></image>

		</view>

		<view class="order-line"></view>
		<button @click="payClick" class="button-sp-area" type="primary" plain="true">确认支付</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				businessId: '',
				orderId: '',
				mycarNumber: '',
				parkName: '',
				parkInTime: '',
				staytime: '',
				due: '',
				orderFee: '',
				// appOrderTimeout:'0',
				totalFee: '', //应收
				// rechargeNum: '',
				// maxlength: 6 //默认一个长度
			}
		},
		onLoad(params) {
			wx.showShareMenu({
				withShareTicket: true
			})
			let data = JSON.parse(params.optionData)
			this.mycarNumber = data.carNumber
			this.parkName = data.parkName;
			this.parkInTime = data.parkInTime;
			this.staytime = data.parkDuration;
			this.due = data.totalFee;
			this.orderFee = data.unPayFee;
			// this.rechargeNum = data.unPayFee / 100;
			this.orderId = data.orderId;
		},
		onShow() {},
		methods: {
			checkNum(e) {
				let value = e.detail.value;
				let dot = value.indexOf('.'); //包含小数点
				let reg = /^[0-9]+$/; //正整数
				if (dot > -1) {
					this.maxlength = dot + 3; //长度是小数点后两位
					if (value.length > dot + 3) {}
				}
				if (reg.test(value)) { //如果是正整数不包含小数点
					this.maxlength = 6;
				}
			},
			payClick() {
					let that = this;
					let orderFee = that.orderFee;

					let paramsData = {
						payType: '35',
						paySrcType: '101',
						orderId: that.orderId,
						payFee: (orderFee * 100).toString(),
					}
					// 获取 接口
					that.$myRequest({
						url: that.$common.accountPay,
						method: 'POST',
						data: that.$common.requestSign(paramsData)
					}).then(res => {
						console.log('余额支付:' + res)
						uni.showToast({
							title: "支付成功",
							icon: 'success',
							duration: 2000
						});
						setTimeout(function() {
							let pages = getCurrentPages(); //当前页
							let beforePage = pages[pages.length - 2];
							uni.navigateBack({
								success: function() {
									beforePage.onLoad();
								}
							})
						}, 2000);
					})

				},

			// payClick() {
			// 	let that = this;
			// 	let orderFee = that.orderFee;
			// 	let rechargeNum = that.rechargeNum;
			// 	if (rechargeNum <= 0) {
			// 		return uni.showToast({
			// 			title: '不能输入小于等于0的金额',
			// 			icon: 'error'
			// 		})
			// 	} else if (rechargeNum === " ") {
			// 		return uni.showToast({
			// 			title: '金额不能为空',
			// 			icon: 'error'
			// 		})
			// 	} else if (rechargeNum > orderFee) {
			// 		return uni.showToast({
			// 			title: '金额不能大于需支付金额',
			// 			icon: 'error'
			// 		})
			// 	} else {

			// 		let paramsData = {
			// 			payType: '35',
			// 			paySrcType: '101',
			// 			orderId: that.orderId,
			// 			payFee: (rechargeNum * 100).toString(),
			// 		}
			// 		// 获取 接口
			// 		that.$myRequest({
			// 			url: that.$common.accountPay,
			// 			method: 'POST',
			// 			data: that.$common.requestSign(paramsData)
			// 		}).then(res => {
			// 			console.log('余额支付:' + res)
			// 			uni.showToast({
			// 				title: "支付成功",
			// 				icon: 'success',
			// 				duration: 2000
			// 			});
			// 			setTimeout(function() {
			// 				let pages = getCurrentPages(); //当前页
			// 				let beforePage = pages[pages.length - 2];
			// 				uni.navigateBack({
			// 					success: function() {
			// 						beforePage.onLoad();
			// 					}
			// 				})
			// 			}, 2000);
			// 		})
			// 	}

			// },
		}
	}
</script>

<style scoped lang="scss">
	.order-time {
		padding: 5px 0;
		background: #f0ad4e;
		text-align: center;
		color: #fff;
	}

	.order-title {
		font-size: 18px;
		margin-left: 16px;
		margin-top: 15px;
		font-weight: bold;
		color: #404040;
	}

	.order-info {
		font-size: 14px;
		margin-left: 15px;
		margin-top: 12px;
		color: #404040;
	}

	.order-line {
		background: #D9D9D9;
		height: 1px;
		margin-top: 12px;
		margin-left: 15px;
		padding: 0px;
		overflow: hidden;
		/* 透明度 */
		opacity: 0.5;
	}

	.order-line-bold {
		background: #FAFAFA;
		height: 12px;
		margin-top: 12px;
		padding: 0px;
		overflow: hidden;
	}

	.flex-row-justify-between {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.flex-row-justify-end {
		display: flex;
		flex-direction: row;
		/* 水平对齐*/
		align-items: baseline;

	}

	.order-discount {
		color: #C8C7CC;
		margin-right: 20 upx;
		/* margin-right: 12px ; */
		/* margin-top:12px ; */

	}

	.orderwaysview {
		display: flex;
		flex-direction: row;
	}

	.orderways {
		width: 18px;
		height: 18px;
		margin-left: 15px;
		margin-top: 14px;
	}

	.orderwaysSel {
		width: 16px;
		height: 16px;
		margin-left: auto;
		margin-right: 14px;
		margin-top: 14px;
		/* justify-content:flex-end; */
	}

	.button-sp-area {
		margin: 0 auto;
		width: 60%;
		margin-top: 40px;

	}

	.paywarp {
		top: 12px;
		right: 30px;
		font-size: 20px;
		height: 40px;
		line-height: 40px;
	}
</style>