|
|
@@ -1,18 +1,21 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <u-navbar title="无车辆扫码停车" back-icon-name="close" back-icon-size="30"></u-navbar>
|
|
|
+ <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>玉桥公园停车场</text>
|
|
|
+ <text>{{detail.parkName}}</text>
|
|
|
</view>
|
|
|
- <view class="infos">
|
|
|
+ <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">
|
|
|
- 临D101010
|
|
|
+ {{detail.carNum}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
@@ -20,20 +23,20 @@
|
|
|
停车费
|
|
|
</view>
|
|
|
<view class="content">
|
|
|
- 10.00元
|
|
|
+ {{detail.price}}元
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
- <view class="details">
|
|
|
+ <view class="details" v-if="detail.id">
|
|
|
<view class="detail-item">
|
|
|
<view class="title">
|
|
|
进场时间
|
|
|
</view>
|
|
|
<view class="content">
|
|
|
- 2022-06-01 12:00:00
|
|
|
+ {{detail.inParkingTime}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="detail-item">
|
|
|
@@ -41,7 +44,7 @@
|
|
|
离场时间
|
|
|
</view>
|
|
|
<view class="content">
|
|
|
- 2022-06-01 17:20:22
|
|
|
+ {{detail.outParkingTime}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="detail-item">
|
|
|
@@ -49,7 +52,7 @@
|
|
|
停车时长
|
|
|
</view>
|
|
|
<view class="content">
|
|
|
- 5小时23分钟
|
|
|
+ {{detail.parkingTimeStr}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="detail-item">
|
|
|
@@ -57,11 +60,11 @@
|
|
|
收费标准
|
|
|
</view>
|
|
|
<view class="content">
|
|
|
- 4.00/小时
|
|
|
+ {{detail.hourCost}}元/小时
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="payment">
|
|
|
+ <view class="payment" v-if="detail.id">
|
|
|
<p>付款方式</p>
|
|
|
<view class="methods">
|
|
|
<view class="recharge-radio" >
|
|
|
@@ -82,20 +85,61 @@
|
|
|
|
|
|
</view>
|
|
|
|
|
|
- <u-button>缴纳停车费</u-button>
|
|
|
+ <u-button @click='submit()' v-if="detail.id">缴纳停车费</u-button>
|
|
|
<view class="box">
|
|
|
|
|
|
</view>
|
|
|
- <view class="service">
|
|
|
+ <!-- // @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: '微信',
|
|
|
@@ -109,14 +153,148 @@
|
|
|
color: '#1677ff',
|
|
|
},
|
|
|
],
|
|
|
- value:0
|
|
|
+ value:0,
|
|
|
+ channelId:'',
|
|
|
+ detail:{}
|
|
|
+ }
|
|
|
+ },onLoad(op) {
|
|
|
+ this.getPhone()
|
|
|
+ if(op.id){
|
|
|
+ this.channelId=op.id
|
|
|
+ this.getInfo()
|
|
|
+ }else{
|
|
|
+ uni.showModal({
|
|
|
+ content:"参数错误"
|
|
|
+ })
|
|
|
}
|
|
|
- },
|
|
|
- methods: {
|
|
|
|
|
|
+
|
|
|
+ }, 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>
|
|
|
|
|
|
@@ -221,11 +399,13 @@
|
|
|
color: rgba(0, 90, 217, 100);
|
|
|
font-size: 16px;
|
|
|
text-align: center;
|
|
|
- padding-bottom: 20px;
|
|
|
- // position: absolute;
|
|
|
- // bottom:20px;
|
|
|
- // left: 0;
|
|
|
- // right: 0;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #fff;
|
|
|
+ z-index: 999;
|
|
|
|
|
|
}
|
|
|
</style>
|
zhengkaixin