WechatOwnerService/pages/tempParkingFee/tempParkingFee.vue
2022-08-27 14:35:42 +08:00

316 lines
8.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>
</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) {
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>