|
|
@@ -40,13 +40,27 @@
|
|
|
<img class="pay-log" :src="require(`./static/images/unlicensed/pay.svg`)" />
|
|
|
<span class="info">您已缴费成功，欢迎下次光临</span>
|
|
|
</div>
|
|
|
+ <!-- 出场临牌：失败 -->
|
|
|
+ <div class="fail-box" v-if="type === 'outFail'">
|
|
|
+ <img class="out-fail-log" :src="require(`./static/images/unlicensed/no-car-out.svg`)" />
|
|
|
+ <k-button disabledColor="#D1D2D9" @click="scanCarCode">
|
|
|
+ <template v-slot:left>
|
|
|
+ <img class="unlicensed-scan" :src="`${require(`./static/images/unlicensed-scan.png`)}`" />
|
|
|
+ </template>
|
|
|
+ 重新扫码
|
|
|
+ </k-button>
|
|
|
+<!-- <span class="info">您已缴费成功，欢迎下次光临</span>-->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { qrCodes,unlicensedCarCheckIn } from "@/api/parking";
|
|
|
import uni from '@/utils/uniHooks';
|
|
|
import { initWxJsSdkConfig } from '@/utils/login';
|
|
|
-import { getPlatform } from '@/utils/index';
|
|
|
+import { getPlatform,getUrlParams } from '@/utils/index';
|
|
|
+import {mapState} from "vuex";
|
|
|
+
|
|
|
export default {
|
|
|
name: 'parkingFeeMsg',
|
|
|
data() {
|
|
|
@@ -56,6 +70,11 @@ export default {
|
|
|
vehicleNo: '',
|
|
|
};
|
|
|
},
|
|
|
+ computed:{
|
|
|
+ ...mapState({
|
|
|
+ unlicensedInfo: (state) => state.unlicensedInfo,
|
|
|
+ })
|
|
|
+ },
|
|
|
async created() {
|
|
|
setTimeout(() => {
|
|
|
uni.setNavigationBarTitle({
|
|
|
@@ -67,37 +86,32 @@ export default {
|
|
|
await initWxJsSdkConfig(['checkJsApi', 'scanQRCode']);
|
|
|
}
|
|
|
console.log(this.$route.query);
|
|
|
- if (this.$route.query?.type) {
|
|
|
- this.type = this.$route.query?.type;
|
|
|
- }
|
|
|
- if (this.type === 'success') {
|
|
|
- this.vehicleNo = this.$route.query?.vehicleNo;
|
|
|
- }
|
|
|
+ this.pageInit()
|
|
|
},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
+ pageInit(){
|
|
|
+ if (this.$route.query?.type) {
|
|
|
+ this.type = this.$route.query?.type;
|
|
|
+ }
|
|
|
+ if (this.type === 'success') {
|
|
|
+ this.vehicleNo = this.$route.query?.vehicleNo;
|
|
|
+ }
|
|
|
+ this.$store.commit('SET_UNLICENSED_INFO', {});
|
|
|
+ },
|
|
|
// 无牌车闸机扫码
|
|
|
scanCarCode() {
|
|
|
const runScanFn = (res) => {
|
|
|
- if (res.scanType == 'QR_CODE' && res.scanType) {
|
|
|
- console.log(res.result);
|
|
|
- // 获取二维码参数之后，模拟提取参数
|
|
|
- const url = res.result;
|
|
|
- if (url.indexOf('auth/') === -1) {
|
|
|
- // 单纯的code
|
|
|
- console.log('提取到的参数', res.result);
|
|
|
- // this.getPaperCouponInfo(res.result);
|
|
|
- } else {
|
|
|
- // 从url中提取参数
|
|
|
- const start = url.indexOf('auth/');
|
|
|
- const end = url.indexOf('?');
|
|
|
- const params = url.slice(start, end).split('/');
|
|
|
- if (params && params.length) {
|
|
|
- const couponCode = params[1];
|
|
|
- console.log('提取到的参数', couponCode);
|
|
|
- // this.getPaperCouponInfo(couponCode);
|
|
|
- }
|
|
|
- }
|
|
|
+ /*
|
|
|
+ 针对微信的小程序码进行的兼容改造
|
|
|
+ 微信扫码结束之后的返回参数 {"errMsg": "scanCode:ok", "scanType": "WX_CODE", "charSet": "ISO8859-1", "rawData": "bGsoP3gyT1Aud3QpbW1JeHRfVHJsUjg4JnR5cGU9dW5saWNlbnNlZElu", "path": "pages/automatic/automaticIndex?scene=code%3D9988%26type%3DunlicensedIn"}
|
|
|
+ */
|
|
|
+ if(res.scanType && res.scanType === 'WX_CODE') {
|
|
|
+ const params = getUrlParams(`?${decodeURIComponent(res.path.replace(/.*scene=/g, ''))}`)
|
|
|
+ this.$store.commit('SET_UNLICENSED_INFO', params);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.qrCodesRule(params.code);
|
|
|
+ })
|
|
|
}
|
|
|
};
|
|
|
// 微信小程序
|
|
|
@@ -127,6 +141,62 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ // 处理扫码结果: 组装参数，剩余流程，在 缴费支付页面 实现
|
|
|
+ async qrCodesRule(code) {
|
|
|
+ try {
|
|
|
+ const qrCodesres = await qrCodes(code); // 无牌车扫码
|
|
|
+ // 记录buildingId，确保 buildingId 是最新的数据
|
|
|
+ window.localStorage.setItem('buildingId', qrCodesres.buildingId);
|
|
|
+ // 如果是无牌车扫码：出场
|
|
|
+ console.log('模拟出场', this.unlicensedInfo?.type);
|
|
|
+ this.$store.commit('cachedViews/DEL_CACHED_VIEW', {
|
|
|
+ name: 'parkingFeeDetail',
|
|
|
+ });
|
|
|
+ if (this.unlicensedInfo?.type === 'unlicensedOut') {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$router.replace({
|
|
|
+ path: 'parkingFeeDetail',
|
|
|
+ query: {
|
|
|
+ gateId: qrCodesres.gateId,
|
|
|
+ vehicleNo: '',
|
|
|
+ type: 'unlicensedOut'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 300)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 如果是无牌车扫码：入场
|
|
|
+ const unlicensedCarCheckInres = await unlicensedCarCheckIn({ // 获取无牌车牌
|
|
|
+ gateId: qrCodesres.gateId
|
|
|
+ });
|
|
|
+ // 前往 缴费支付页面
|
|
|
+ this.$router.replace({
|
|
|
+ path: 'parkingFeeMsg',
|
|
|
+ query: {
|
|
|
+ type: 'success',
|
|
|
+ vehicleNo: unlicensedCarCheckInres.vehicleNo
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } catch (err) {
|
|
|
+ // 车场扫描道闸入口，发现无车/车场扫描道闸入口，发现有牌车 >>> 停止往下执行,默认提示报错信息
|
|
|
+ if (/CAR_HAS_PLATE/.test(err.code)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (/CAR_NOT_FOUND/.test(err.code)) {
|
|
|
+ setTimeout(() => {
|
|
|
+ // 如果是其他错误的话，则继续往下执行
|
|
|
+ this.$router.replace({
|
|
|
+ path: 'parkingFeeMsg',
|
|
|
+ query: {
|
|
|
+ type: this.unlicensedInfo?.type === 'unlicensedOut' ? 'outFail' : 'fail'
|
|
|
+ // this.type
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.pageInit()
|
|
|
+ }, 300)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
goHome() {
|
|
|
this.$router.replace({
|
|
|
path: 'home',
|
|
|
@@ -138,11 +208,12 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.bg {
|
|
|
- background-color: #fbfcff;
|
|
|
+ background-color: #FBFCFF;
|
|
|
}
|
|
|
.pay-box {
|
|
|
text-align: center;
|
|
|
- margin-top: 84px;
|
|
|
+ //margin-top: 84px;
|
|
|
+ padding-top: 84px;
|
|
|
.pay-log {
|
|
|
width: 523px;
|
|
|
display: block;
|
|
|
@@ -161,9 +232,10 @@ export default {
|
|
|
|
|
|
.success-box,
|
|
|
.fail-box {
|
|
|
- margin-top: 123px;
|
|
|
+ //margin-top: 123px;
|
|
|
+ //padding-top: 123px;
|
|
|
text-align: center;
|
|
|
- padding: 0 24px;
|
|
|
+ padding: 123px 24px 0;
|
|
|
.icon {
|
|
|
width: 80px;
|
|
|
height: 80px;
|
|
|
@@ -177,6 +249,7 @@ export default {
|
|
|
font-size: 36px;
|
|
|
line-height: 50px;
|
|
|
color: #333333;
|
|
|
+ margin-bottom: 42px;
|
|
|
}
|
|
|
.status-info {
|
|
|
font-family: 'PingFang SC';
|
|
|
@@ -189,25 +262,24 @@ export default {
|
|
|
}
|
|
|
.card-box {
|
|
|
height: 230px;
|
|
|
- margin-top: 39px;
|
|
|
+ margin-top: 42px;
|
|
|
margin-bottom: 52px;
|
|
|
background: #fbfcff;
|
|
|
border: 1px solid #d9dbe0;
|
|
|
border-radius: 4px;
|
|
|
display: flex;
|
|
|
- // align-items: center;
|
|
|
- // padding-top: 53px;
|
|
|
- // padding-left: 18px;
|
|
|
- // padding-bottom: 34px;
|
|
|
|
|
|
img {
|
|
|
width: 288px;
|
|
|
height: 142px;
|
|
|
- margin-top: 62px;
|
|
|
display: block;
|
|
|
+ margin: auto 0;
|
|
|
}
|
|
|
.car-number {
|
|
|
- margin-top: 68px;
|
|
|
+ //margin-top: 68px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
.number {
|
|
|
font-size: 50px;
|
|
|
line-height: 56px;
|
|
|
@@ -218,9 +290,17 @@ export default {
|
|
|
}
|
|
|
.tips {
|
|
|
color: #999999;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .out-fail-log {
|
|
|
+ width: 535px;
|
|
|
+ height: 410px;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto 68px;
|
|
|
+ }
|
|
|
+
|
|
|
.unlicensed-scan {
|
|
|
width: 60px;
|
|
|
height: 60px;
|
john
