|
@@ -1,81 +1,213 @@
|
|
|
<template>
|
|
|
- <view class="wrap">
|
|
|
- <u-navbar title="添加车牌">
|
|
|
- <view slot="right" v-if="isLogin" @click="gotoLink" style=" margin-right: 10px;"> 跳过</view>
|
|
|
- </u-navbar>
|
|
|
- <view class="key-input">
|
|
|
- <u-message-input :focus="true" :value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></u-message-input>
|
|
|
+ <view>
|
|
|
+ <view class="wrap" v-if="!kongResult">
|
|
|
+ <u-navbar title="车牌查询" :is-back="false">
|
|
|
+ </u-navbar>
|
|
|
+ <view class="key-input">
|
|
|
+ <u-message-input :focus="true" :value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></u-message-input>
|
|
|
+ </view>
|
|
|
+ <ucarkeyboard ref="uKeyboard" mode="car" :showTips="true" :confirmBtn="false" :mask-close-able="false" :tooltip="false" v-model="keyShow" @change="valChange" @backspace="backspace"></ucarkeyboard>
|
|
|
+
|
|
|
+ <!-- <view class="carNone" v-if="kongResult">
|
|
|
+ <img src="static/img/暂无数据-缺省页.png" alt="">
|
|
|
+ <p>没有找到停车信息</p>
|
|
|
+ </view> -->
|
|
|
+ <u-button class="login-btn" type="success" shape="circle" @click="keepCar">查询</u-button>
|
|
|
+
|
|
|
+ <view style="padding: 20px;">
|
|
|
+ <b>停车场收费说明:</b><br>
|
|
|
+ 缴费后请于规定时间离场,离场会自动抬杆。如果找不到停车信息,或者临牌停车,请至集中缴费处缴纳现金。
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="wrap" v-if="kongResult">
|
|
|
+ <u-navbar title="停车缴费">
|
|
|
+
|
|
|
+ </u-navbar>
|
|
|
+
|
|
|
+ <view >
|
|
|
+ <view class="">
|
|
|
+ <view class="cartitle"> 缴费信息</view>
|
|
|
+ <view class="info" >
|
|
|
+ <view class="info-name">
|
|
|
+ 车牌号
|
|
|
+ </view>
|
|
|
+ <view class="info-text">
|
|
|
+ {{detail.carNumber}}
|
|
|
+ <a @click="goToBack" class="color4fc5f7 marginl5">修改</a>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="info" >
|
|
|
+ <view class="info-name" style="font-size: 16px;">
|
|
|
+ 停车费
|
|
|
+ </view>
|
|
|
+ <view class="info-text" style="font-size: 16px;">
|
|
|
+
|
|
|
+ {{detail.price}}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cartitle"> 停车详情</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>
|
|
|
+ <u-button class="login-btn" type="success" shape="circle" @click="pay()">支付离场</u-button>
|
|
|
+
|
|
|
+ <u-button class="login-btn2" type="default" shape="circle" @click="keepCar">刷新</u-button>
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
- <ucarkeyboard ref="uKeyboard" mode="car" :showTips="true" :confirmBtn="false" :mask-close-able="false" :tooltip="false" v-model="keyShow" @change="valChange" @backspace="backspace"></ucarkeyboard>
|
|
|
- <view class="default">
|
|
|
- <u-checkbox-group>
|
|
|
- <u-checkbox class="tips" v-model="form.defaultFlag" shape="circle" @change="checkboxChange()">设为默认车辆</u-checkbox>
|
|
|
- </u-checkbox-group>
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
- <u-button class="login-btn" type="success" shape="circle" @click="keepCar">保存</u-button>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import * as userApi from '@/apis/user.js'
|
|
|
+
|
|
|
+ import * as API from '@/apis/parking.js'
|
|
|
import ucarkeyboard from '@/components/Ucarkeyboard.vue'
|
|
|
|
|
|
+ import {
|
|
|
+ wxPayJs
|
|
|
+ } from '@/utils/wxpay'
|
|
|
+ import {
|
|
|
+ aliPayJs
|
|
|
+ } from '@/utils/alipay'
|
|
|
+
|
|
|
export default {
|
|
|
components: {
|
|
|
ucarkeyboard
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- isLogin:false,
|
|
|
+
|
|
|
maxlength:8,
|
|
|
keyShow: true,
|
|
|
- code:"",
|
|
|
- codeId:"",
|
|
|
+ detail:{},
|
|
|
form: {
|
|
|
- carNum: '鄂',
|
|
|
- defaultFlag: true,
|
|
|
+ carNum: '鄂DD12345',
|
|
|
+ parkId: "",
|
|
|
},
|
|
|
+
|
|
|
+ kongResult: false,
|
|
|
}
|
|
|
},
|
|
|
onLoad(op) {
|
|
|
- if (op.jpcode) {
|
|
|
- var str1 = op.jpcode.slice(0, 19);
|
|
|
- var str2 = op.jpcode.slice(20, 21);
|
|
|
- var str3 = op.jpcode.slice(22);
|
|
|
-
|
|
|
- if (str1 == 'jp_team51_charge_id') {
|
|
|
- if (str2 == 'A') {
|
|
|
- this.code = str2;
|
|
|
- this.codeId = str3;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- if(op.login){
|
|
|
- this.isLogin=true;
|
|
|
+ if(op.id){
|
|
|
+ this.form.parkId=op.id
|
|
|
+ }else{
|
|
|
+ uni.showModal({
|
|
|
+ content:"参数错误"
|
|
|
+ })
|
|
|
}
|
|
|
+
|
|
|
},
|
|
|
onReady() {
|
|
|
this.$refs.uKeyboard.changeCarInputMode();
|
|
|
},
|
|
|
methods: {
|
|
|
- gotoLink(){
|
|
|
- if (this.code == 'A') {
|
|
|
- uni.redirectTo({
|
|
|
- url: '/pages/searchPile/stationAndPile/chargingPileDetails?id=' + this.codeId
|
|
|
- })
|
|
|
- } else if (this.isLogin){
|
|
|
- uni.redirectTo({
|
|
|
- url: '/pages/index/index'
|
|
|
+ //微信支付
|
|
|
+ payWx() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+
|
|
|
+ API.parkingWxPay({
|
|
|
+ id: this.detail.id,
|
|
|
+ openId: this.carhelp.getOpenId()
|
|
|
+ }).then(data => {
|
|
|
+ debugger
|
|
|
+ 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"
|
|
|
})
|
|
|
- }else {
|
|
|
- uni.navigateBack({
|
|
|
- url: '/pages/user/car/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //支付宝支付
|
|
|
+ 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/search?id=" + this.form.parkId,
|
|
|
+ }
|
|
|
+ console.log(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:"请用微信或支付宝打开"
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- checkboxChange() {
|
|
|
- this.form.defaultFlag = !this.form.defaultFlag;
|
|
|
- },
|
|
|
+
|
|
|
+ goToBack() {
|
|
|
+ this.kongResult=false
|
|
|
+ },
|
|
|
+
|
|
|
// 按键被点击(点击退格键不会触发此事件)
|
|
|
valChange(val) {
|
|
|
if(this.form.carNum.length>=this.maxlength){
|
|
@@ -102,15 +234,24 @@
|
|
|
},
|
|
|
keepCar() {
|
|
|
console.log(this.form)
|
|
|
+ if (this.form.carNum.length <7) {
|
|
|
+ uni.showToast({
|
|
|
+ title:"车牌号至少输入7位"
|
|
|
+ })
|
|
|
+ return false;
|
|
|
+ }
|
|
|
uni.showLoading({
|
|
|
title: "加载中",
|
|
|
mask: true,
|
|
|
})
|
|
|
- userApi.addRegUserCar(this.form).then((res) => {
|
|
|
+ API.carPayDetail(this.form).then((res) => {
|
|
|
+
|
|
|
uni.hideLoading();
|
|
|
|
|
|
- this.gotoLink()
|
|
|
+ this.detail = res.data;
|
|
|
+ this.kongResult=true;
|
|
|
}).catch(error => {
|
|
|
+ uni.hideLoading()
|
|
|
uni.showToast({
|
|
|
title: error,
|
|
|
icon: "none"
|
|
@@ -126,6 +267,50 @@
|
|
|
}
|
|
|
</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;
|
|
|
}
|
|
@@ -152,4 +337,8 @@
|
|
|
border-color: #00B962 !important;
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
+ .login-btn2 {
|
|
|
+ margin: 28px;
|
|
|
+
|
|
|
+ }
|
|
|
</style>
|