mirror of
https://gitee.com/java110/WechatOwnerService.git
synced 2026-02-24 05:46:04 +08:00
324 lines
9.2 KiB
Vue
324 lines
9.2 KiB
Vue
<template>
|
||
<view>
|
||
<view class="plate-context">
|
||
<view class="ak_row_black">
|
||
</view>
|
||
<view class="ak_row_title">
|
||
<text>{{communityName}}</text>
|
||
</view>
|
||
|
||
<view class="tips_block">
|
||
</view>
|
||
|
||
<view class='tips'>
|
||
<text>点击方框输入车牌号</text>
|
||
</view>
|
||
<view class="plate-input-body">
|
||
<view class="plate-input-content" @click="showCarNumberKeyboard">
|
||
<view bindtap="showCarNumberKeyboard" data-id="0"
|
||
:class="inputOnFocusIndex=='0'?'plate-nums-foc':'plate-nums-first'">
|
||
<text class="plate-num-text">{{inputPlates.index0}}</text>
|
||
</view>
|
||
<view bindtap="inputClick" data-id="1"
|
||
:class="inputOnFocusIndex=='1'?'plate-nums-foc':'plate-nums-first'">
|
||
<text class="plate-num-text">{{inputPlates.index1}}</text>
|
||
</view>
|
||
<view bindtap="inputClick" data-id="2"
|
||
:class="inputOnFocusIndex=='2'?'plate-nums-foc':'plate-nums-first'">
|
||
<text class="plate-num-text">{{inputPlates.index2}}</text>
|
||
</view>
|
||
<view bindtap="inputClick" data-id="3"
|
||
:class="inputOnFocusIndex=='3'?'plate-nums-foc':'plate-nums-first'">
|
||
<text class="plate-num-text">{{inputPlates.index3}}</text>
|
||
</view>
|
||
<view bindtap="inputClick" data-id="4"
|
||
:class="inputOnFocusIndex=='4'?'plate-nums-foc':'plate-nums-first'">
|
||
<text class="plate-num-text">{{inputPlates.index4}}</text>
|
||
</view>
|
||
<view bindtap="inputClick" data-id="5"
|
||
:class="inputOnFocusIndex=='5'?'plate-nums-foc':'plate-nums-first'">
|
||
<text class="plate-num-text">{{inputPlates.index5}}</text>
|
||
</view>
|
||
<view bindtap="inputClick" data-id="6"
|
||
:class="inputOnFocusIndex=='6'?'plate-nums-foc':'plate-nums-first'">
|
||
<text class="plate-num-text">{{inputPlates.index6}}</text>
|
||
</view>
|
||
<view bindtap="inputClick" data-id="7" class="green-border"
|
||
:class="inputOnFocusIndex=='7'?'plate-nums-foc':'plate-nums-first'">
|
||
<text class="plate-num-text">{{inputPlates.index7}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class=" temp-history">
|
||
<view class="padding"><text>往期记录</text></view>
|
||
<view class="flex justify-start">
|
||
<view class="padding-left" v-for="(item,index) in carNums" :key="index"
|
||
@tap="_loadTempFee(item.carNum)">{{item.carNum}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class='plate-input-flag' bindtap='changeplate'>
|
||
<text>{{carNumBtn}}</text>
|
||
</view>
|
||
|
||
<view class="plat-btn-black"></view>
|
||
<view class="cu-bar btn-group" style="margin-top: 30px;">
|
||
<button @click="_queryCarNum" :disabled="carNum.length< 7"
|
||
class="cu-btn bg-green shadow-blur round lg">立即查询</button>
|
||
</view>
|
||
|
||
<view class="temp-remark">
|
||
<view>临停支付说明</view>
|
||
<view>1、若因特殊原因无法查询车辆信息，请联系停车场人工处理：</view>
|
||
<view>2、查询缴费前请仔细核对停车场及车牌号：</view>
|
||
<view>3、若长时间无法加载页面，请检查网络是否畅通或扫码重试。</view>
|
||
</view>
|
||
</view>
|
||
|
||
<select-car-num ref="popupCarNumber" type="bottom" @confirm="confirmGuaCarNumber" @getCarNum="getCarNum"
|
||
:gua="false"></select-car-num>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import selectCarNum from '../../components/select-carnum/select-carnum.vue';
|
||
import mapping from '../../constant/MappingConstant.js'
|
||
import {
|
||
getTempCarFeeOrder
|
||
} from '../../api/fee/feeApi.js'
|
||
import {
|
||
isNotNull
|
||
} from '../../lib/java110/utils/StringUtil.js'
|
||
import {
|
||
refreshUserOpenId,
|
||
getOpenIdFromAliPay
|
||
} from '../../api/user/userApi.js'
|
||
import {
|
||
isWxOrAli
|
||
} from '../../lib/java110/utils/EnvUtil.js';
|
||
|
||
import {
|
||
queryWaitPayFeeTempCar
|
||
} from '@/api/car/carApi.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
flag: true,
|
||
inputPlates: {
|
||
index0: "",
|
||
index1: "",
|
||
index2: "",
|
||
index3: "",
|
||
index4: "",
|
||
index5: "",
|
||
index6: "",
|
||
index7: ""
|
||
},
|
||
carNum: '',
|
||
paId: '',
|
||
appId: '',
|
||
aliAppId: '',
|
||
openId: '',
|
||
machineId: '',
|
||
communityId:'',
|
||
carNums: []
|
||
}
|
||
},
|
||
components: {
|
||
selectCarNum
|
||
},
|
||
mounted() {
|
||
// #ifdef H5
|
||
if (isWxOrAli() == "ALIPAY") {
|
||
const oScript = document.createElement('script');
|
||
oScript.type = 'text/javascript';
|
||
oScript.src = 'https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js';
|
||
document.body.appendChild(oScript);
|
||
}
|
||
// #endif
|
||
},
|
||
onLoad(options) {
|
||
this.paId = options.paId;
|
||
this.appId = options.appId;
|
||
this.openId = options.openId;
|
||
this.machineId = options.machineId;
|
||
this.communityId = options.communityId;
|
||
uni.setStorageSync(mapping.W_APP_ID, this.appId)
|
||
if (!isNotNull(this.openId)) {
|
||
//刷新 openId
|
||
if (isWxOrAli() == 'ALIPAY') {
|
||
this._refreshAliPayOpenId();
|
||
} else {
|
||
this._refreshWechatOpenId();
|
||
}
|
||
return;
|
||
}
|
||
this._loadExistsCarNum();
|
||
},
|
||
methods: {
|
||
showCarNumberKeyboard() {
|
||
this.$refs.popupCarNumber.open()
|
||
},
|
||
// 车牌号选择键盘
|
||
confirmCarNumber(value) {
|
||
this.car_number = value
|
||
this.$refs.popupCarNumber.close()
|
||
},
|
||
getCarNum: function(_list) {
|
||
this.inputPlates.index0 = _list[0].title;
|
||
this.inputPlates.index1 = _list[1].title;
|
||
let _title = _list[2].title;
|
||
if (_title.length > 0) {
|
||
this.inputPlates.index2 = _title[0];
|
||
} else {
|
||
this.inputPlates.index2 = '';
|
||
}
|
||
if (_title.length > 1) {
|
||
this.inputPlates.index3 = _title[1];
|
||
} else {
|
||
this.inputPlates.index3 = '';
|
||
}
|
||
if (_title.length > 2) {
|
||
this.inputPlates.index4 = _title[2];
|
||
} else {
|
||
this.inputPlates.index4 = '';
|
||
}
|
||
if (_title.length > 3) {
|
||
this.inputPlates.index5 = _title[3];
|
||
} else {
|
||
this.inputPlates.index5 = '';
|
||
}
|
||
if (_title.length > 4) {
|
||
this.inputPlates.index6 = _title[4];
|
||
} else {
|
||
this.inputPlates.index6 = '';
|
||
}
|
||
if (_title.length > 5) {
|
||
this.inputPlates.index7 = _title[5];
|
||
} else {
|
||
this.inputPlates.index7 = '';
|
||
}
|
||
this.carNum = this.inputPlates.index0 + this.inputPlates.index1 + this.inputPlates.index2 + this
|
||
.inputPlates.index3;
|
||
this.carNum += (this.inputPlates.index4 + this.inputPlates.index5 + this.inputPlates.index6 + this
|
||
.inputPlates.index7);
|
||
},
|
||
confirmGuaCarNumber: function() {
|
||
|
||
},
|
||
_queryCarNum: function() {
|
||
let _that = this;
|
||
getTempCarFeeOrder({
|
||
paId: this.paId,
|
||
carNum: this.carNum,
|
||
couponIds: ''
|
||
}).then(_data => {
|
||
if (_data.code != 0) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '未查到停车费'
|
||
})
|
||
return;
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/tempCarFee/tempCarFee?paId=' + _that.paId + '&carNum=' + _that
|
||
.carNum + "&appId=" + _that.appId + "&openId=" + _that.openId +
|
||
"&machineId=" + this.machineId
|
||
})
|
||
})
|
||
},
|
||
_refreshAliPayOpenId: function() {
|
||
// console.log("判断微信还是支付宝");
|
||
// console.log(isWxOrAli());
|
||
let _that = this;
|
||
ap.getAuthCode({
|
||
appId: this.aliAppId,
|
||
scopes: ['auth_base'],
|
||
}, function(res) {
|
||
uni.showToast({
|
||
title:JSON.stringify(res),
|
||
icon:'none'
|
||
})
|
||
ap.alert(JSON.stringify(res));
|
||
getOpenIdFromAliPay({
|
||
authCode:res.authCode,
|
||
communityId:_that.communityId
|
||
}).then(_data=>{
|
||
_that.openId = _data.data;
|
||
_that._loadExistsCarNum();
|
||
})
|
||
});
|
||
|
||
},
|
||
_refreshWechatOpenId: function() {
|
||
// console.log("判断微信还是支付宝");
|
||
// console.log(isWxOrAli());
|
||
let _redirectUrl = window.location.href;
|
||
refreshUserOpenId({
|
||
redirectUrl: _redirectUrl,
|
||
wAppId: this.appId,
|
||
}).then(_data => {
|
||
console.log(_data, 123)
|
||
if (_data.code == 0) {
|
||
window.location.href = _data.data.openUrl;
|
||
return;
|
||
}
|
||
});
|
||
},
|
||
_loadExistsCarNum: function() {
|
||
let _that = this;
|
||
let _openType = "WECHAT";
|
||
if(isWxOrAli == 'ALIPAY'){
|
||
_openType = 'ALIPAY'
|
||
}
|
||
queryWaitPayFeeTempCar({
|
||
openId: this.openId,
|
||
machineId: this.machineId,
|
||
openType:_openType
|
||
}).then(_json => {
|
||
_that.carNums = _json.data;
|
||
if (_json.data && _json.data.length == 1) {
|
||
_that.carNum = _json.data[0].carNum;
|
||
_that._queryCarNum();
|
||
}
|
||
})
|
||
},
|
||
_loadTempFee: function(_carNum) {
|
||
this.carNum = _carNum;
|
||
if (_carNum.length > 0) {
|
||
this.inputPlates.index0 = _carNum[0];
|
||
}
|
||
if (_carNum.length > 1) {
|
||
this.inputPlates.index1 = _carNum[1];
|
||
}
|
||
if (_carNum.length > 2) {
|
||
this.inputPlates.index2 = _carNum[2];
|
||
}
|
||
if (_carNum.length > 3) {
|
||
this.inputPlates.index3 = _carNum[3];
|
||
}
|
||
if (_carNum.length > 4) {
|
||
this.inputPlates.index4 = _carNum[4];
|
||
}
|
||
if (_carNum.length > 5) {
|
||
this.inputPlates.index5 = _carNum[5];
|
||
}
|
||
if (_carNum.length > 6) {
|
||
this.inputPlates.index6 = _carNum[6];
|
||
}
|
||
if (_carNum.length > 7) {
|
||
this.inputPlates.index7 = _carNum[7];
|
||
}
|
||
//查询
|
||
this._queryCarNum();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import "./tempParkingFee.css";
|
||
</style>
|