JP-ChargeTeam51/pages/parking/outPayment.vue

<template>
	<view>
		<u-navbar title="无车辆扫码停车" :is-back="false"></u-navbar>
		<view class="main">
			<view class="park-name">
				<img src="../../static/img/if-location-pin@2x.png" alt="">
				<text>{{detail.parkName}}</text>
			</view>
			<view class="infos"  v-if="!detail.id">
				已抬杆，欢迎下次光临
			</view>	
			<view class="infos" v-if="detail.id">
				<view class="item">
					<view class="title">
						车牌号
					</view>
					<view class="content">
						{{detail.carNum}}
					</view>
				</view>
				<view class="item">
					<view class="title">
						停车费
					</view>
					<view class="content">
						{{detail.price}}元
					</view>
				</view>
				
			</view>
			
		</view>
		<view class="details"  v-if="detail.id">
			<view class="detail-item">
				<view class="title">
					进场时间
				</view>
				<view class="content">
					{{detail.inParkingTime}}
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					离场时间
				</view>
				<view class="content">
						{{detail.outParkingTime}}
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					停车时长
				</view>
				<view class="content">
					{{detail.parkingTimeStr}}
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					收费标准
				</view>
				<view class="content">
					{{detail.hourCost}}元/小时
				</view>
			</view>
		</view>
		<view class="payment" v-if="detail.id">
			<p>付款方式</p>
			<view class="methods">
				<view class="recharge-radio" >
					<u-radio-group v-model="value"  :wrap="true" width="100%">
						<u-radio active-color="#0076ff"  v-for="(item, index) in list" :key="index"
							:name="item.id" :disabled="item.disabled" width="100%">
							<view class="recharge-radio-item">
								<u-icon :name="item.icon" custom-prefix="custom-icon" :color="item.color" size="48">
								</u-icon>
								<view class="recharge-radio-name oldTextjp2" oldstyle="font-size:18px">
									{{item.name}}
								</view>
							</view>
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			
		</view>
		
		<u-button @click='submit()' v-if="detail.id">缴纳停车费</u-button>
		<view class="box">
			
		</view>
		<!-- // @confirm="confirm" -->
		<u-modal v-model="showModel"
				:show-cancel-button="false"
				
				confirm-text="确定"
				title="扫码支付" >
					<view    style="
							text-align: center;
						">
						<img id="qrcode2" :src="qrCodeImg" >
					</view>
					<view    style="
							text-align: center;
						">请使用支付宝扫码</view>
					
				</u-modal>
		<img id="qrcode" style="display: none;" >
			
			<u-modal v-model="show" @confirm="confirmPhone" :confirm-text="confirmText" confirm-color="#606266" :show-cancel-button="true" ref="uModal"
					:asyncClose="true" :title="title" :content="content" :content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
				
		<view class="service"  @click="openModal">
			联系停车场客服
		</view>
	</view>
</template>

<script>
	import * as Pay from '@/apis/weixin.js'
	import QRCode from 'qrcodejs2'
	import * as newsApi from '@/apis/news.js'
	
	import {
		convertCanvasToImage,
		} from '@/utils'
	import {
		wxPayJs
	} from '@/utils/wxpay'
	import {
		aliPayJs
	} from '@/utils/alipay'
	import * as API from '@/apis/parking.js'
	export default {
		data() {
			return {
					title:"客服电话",
					confirmText:"拨打电话",
				content:'',
				show:false,
				showModel:false,
					qrCodeImg:"",
				list: [{
						id:'0',
						name: '微信',
						icon: 'wechat-pay-fill',
						color: '#22ac38',
					},
					{
						id:'1',
						name: '支付宝',
						icon: 'alipay-fill',
						color: '#1677ff',
					},
				],
				value:0,
				channelId:'',
				detail:{}
			}
		},onLoad(op) {
			 this.getPhone()
			if(op.id){
				this.channelId=op.id
				this.getInfo()
			}else{
				uni.showModal({
					content:"参数错误"
				})
			}
			
			
		},	methods: {
			getPhone(){
				newsApi.findConfigureByKey({
					key:'consumerPhone'
				}).then((res) => {
									
					this.content = res.data.value;
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			openModal() {
				 
				this.show = true;
			},
			confirmPhone(){
				
				
				this.show = false;
				uni.makePhoneCall({
					phoneNumber:this.content //仅为示例
				});
			},
			confirm(){
				uni.redirectTo({
					url:"/pages/parking/paymentResult"
				})
			},
			submit(){
				if(this.value=="0"){
					this.wxpy()
				}else{
					this.alpy()
				}
				
			},
			alpy(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.parkTradePrecreatePay({
					id: this.detail.id,
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					
					let qrcode = new QRCode('qrcode', {
						width: 200,
						height: 200,
						text: response.data,
						correctLevel: QRCode.CorrectLevel.M,
					
					})
				//	this.outOrderNo=response.data.outOrderNo;
					var canvas = document.getElementsByTagName('canvas')[0];
					this.qrCodeImg = convertCanvasToImage(canvas);
					uni.hideLoading()
					this.showModel=true
						
				}).catch(error => {
						uni.showToast({
						
							title: error
						})
				})
			},
			wxpy(){
				
				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"
					})
				})
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.generateTemporaryCarNum({
					openId:this.carhelp.getOpenId(),
					channelId:this.channelId
				}).then((res) => {
					
					uni.hideLoading();
					
					this.detail = res.data;
					
				}).catch(error => {
						uni.hideLoading()
					// uni.showToast({
					// 	title: error,
					// 	icon: "none"
					// })
					uni.showModal({
						title:"提示",
						content:error,
						showCancel:false,
					})
				})
			}
		}
	}
	
</script>
 

<style lang="scss" scoped>
	
	.main{
		height: 200px;
		padding: 20px 23px;
		background: linear-gradient(#1F55FF,#27ABFF);
		
		.park-name{
		    line-height: 20px;
			color: rgba(255, 255, 255, 100);
			font-size: 20px;
			position: relative;
			text{
				margin-left: 25px;
			}
			img{
				width: 20px;
				height: 20px;
				margin-right: 8px;
				position: absolute;
				
			}
		}
		.infos{
			margin-top: 28px;
			color: #fff;
			font-size: 24px;
			.item{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
		}
	}

  .details{
	  width: 89.3%;
	  padding: 20px 20px 5px;
	  margin: auto;
	  border-radius: 12px;
	  background-color: #fff;
	  position: relative;
	  top: -30px;
	  left: 0;
	  right: 0;
	  .detail-item{
		  display: flex;
		  justify-content: space-between;
		  margin-bottom: 15px;
		  .title{
			  color: #86898c;
		  }
	  }
  }
  .payment{
	  width: 89.3%;
	  margin:0 auto ;
	  .methods{
		  border-radius: 8px;
		  background-color: #fff;
		  margin-top: 12px;
		  padding: 0px 12px;
		  .recharge-radio {
		
		  	.recharge-radio-item {
		  		display: flex;
		  		align-items: center;
				
		  	}
		  
		  	.recharge-radio-name {
		  		margin-left: 8px;
		  	}
		  }
		  /deep/.u-radio-group {
		  	width: 100%;
		  }
		  /deep/.u-radio {
		  	position: relative;
		  }
		  
		  /deep/.u-radio__icon-wrap {
		  	position: absolute;
		  	right: 0;
		  }
	  }
	  
  }
  .u-btn{
  		  width: 89.3%;
  		  background-color: #0051db;
  		  border-radius: 12px;
  		  color: #fff;
  		  margin-top: 20px;
  }
  .box{
	  width: 100%;
	  height: 14vh;
  }
  .service{
  		color: rgba(0, 90, 217, 100);
  		font-size: 16px;
  		text-align: center;
  		position: fixed;
  		    bottom: 0px;
  		    left: 0;
  		    right: 0;
  		    height: 40px;
  		    background-color: #fff;
			    z-index: 999;
		
  }
</style>