|
|
@@ -1,58 +1,68 @@
|
|
|
<!-- 车辆查询 -->
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <view class="container-title">
|
|
|
- <text>输入车牌，查询车费</text>
|
|
|
+ <view class="container-vehicle">
|
|
|
+ <u-image width="100%" height="100%" src="/static/img/vehicle-icon.png" />
|
|
|
</view>
|
|
|
- <!-- 车牌输入 -->
|
|
|
- <view class="container-input" @click="vehicleNoInputClick">
|
|
|
- <u-message-input :maxlength="8" width="60" font-size="40" :disabled-keyboard="true" v-model="form.vehicleNo" />
|
|
|
+ <view class="container-content">
|
|
|
+ <view class="container-content-search">
|
|
|
+ <view class="container-content-search-title">输入车牌查询</view>
|
|
|
+ <view class="container-content-search-input" @click="clickCarKeyboard">
|
|
|
+ <u-message-input :maxlength="8" width="55" font-size="40" :disabled-keyboard="true" v-model="form.vehicleNo" />
|
|
|
+ </view>
|
|
|
+ <!-- 车牌号键盘 -->
|
|
|
+ <u-keyboard
|
|
|
+ ref="uKeyboard"
|
|
|
+ mode="car"
|
|
|
+ @change="keyboardChange"
|
|
|
+ @confirm="keyboardConfirm"
|
|
|
+ @backspace="backspace"
|
|
|
+ v-model="carKeyboard.show"
|
|
|
+ />
|
|
|
+ <!-- 选择颜色 -->
|
|
|
+ <u-action-sheet :list="colorPop.colorList" @click="confirmColor" v-model="colorPop.show" />
|
|
|
+ </view>
|
|
|
+ <view class="container-content-choose">
|
|
|
+ <view class="container-content-choose-text">点击选择车牌</view>
|
|
|
+ <view class="container-content-choose-icon">
|
|
|
+ <u-icon name="arrow-up" v-if="toggle"></u-icon>
|
|
|
+ <u-icon name="arrow-down" v-else></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="container-content-list">
|
|
|
+ <radio-group @change="radioChange">
|
|
|
+ <view class="container-content-list-item" v-for="(item, index) in vehicleList" :key="index">
|
|
|
+ <view class="left">{{ item.label }}</view>
|
|
|
+ <view class="right">
|
|
|
+ <radio :value="item.value" :checked="item.value === form.vehicleNo" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </radio-group>
|
|
|
+ </view>
|
|
|
+ <view class="container-content-confirm">
|
|
|
+ <u-button type="primary" :loading="loading" :disabled="!form.vehicleNo" @click="submitVehicleConfirm">确认</u-button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <!-- 车辆下拉 -->
|
|
|
- <view class="container-select">
|
|
|
- <u-collapse ref="refValue" :head-style="{ fontSize: '28rpx' }">
|
|
|
- <u-collapse-item title="点击选择车牌" align="center">
|
|
|
- <scroll-view class="container-select-scroll" scroll-y="true">
|
|
|
- <u-cell-group v-if="vehicleList.length">
|
|
|
- <u-cell-item :title="item.value" v-for="(item, index) in vehicleList" :key="index" :arrow="false">
|
|
|
- <u-radio-group v-model="form.vehicleNo" @change="radioGroupChange">
|
|
|
- <u-radio :name="item.value" :key="index" />
|
|
|
- </u-radio-group>
|
|
|
- </u-cell-item>
|
|
|
- </u-cell-group>
|
|
|
- <template v-else>
|
|
|
- <view class="container-select-empty">暂无绑定车牌</view>
|
|
|
- </template>
|
|
|
- </scroll-view>
|
|
|
- </u-collapse-item>
|
|
|
- </u-collapse>
|
|
|
- </view>
|
|
|
- <view class="container-btn">
|
|
|
- <u-button type="primary" :loading="loading" :disabled="!form.vehicleNo" @click="submitVehicleInquiry">确定</u-button>
|
|
|
- </view>
|
|
|
- <!-- 选择颜色 -->
|
|
|
- <u-action-sheet :list="bindVehiclePop.colorList" @click="confirmColor" v-model="bindVehiclePop.colorShow" />
|
|
|
- <!-- 车牌号键盘 -->
|
|
|
- <u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @confirm="keyboardConfirm" @backspace="backspace" v-model="keyboardshow" />
|
|
|
- <u-toast ref="uToast" />
|
|
|
+ <parmas-loss-pop :show="lossPopShow" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { base64Encrypt } from '@/utils';
|
|
|
+import ParmasLossPop from '@/components/params-loss-pop/params-loss-pop.vue';
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ ParmasLossPop
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
form: {
|
|
|
- vehicleNo: '',
|
|
|
- parkNo: ''
|
|
|
+ vehicleNo: ''
|
|
|
},
|
|
|
- vehicleList: [],
|
|
|
- keyboardshow: false,
|
|
|
- loading: false,
|
|
|
- showChangeVehicleNo: false,
|
|
|
- bindVehiclePop: {
|
|
|
- colorShow: false,
|
|
|
+ carKeyboard: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ colorPop: {
|
|
|
+ show: false,
|
|
|
colorList: [
|
|
|
{
|
|
|
text: '蓝色',
|
|
|
@@ -80,8 +90,11 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
- parkNo: null,
|
|
|
- parkInfo: {}
|
|
|
+ toggle: false,
|
|
|
+ loading: false,
|
|
|
+ vehicleList: [],
|
|
|
+ parkInfo: {},
|
|
|
+ lossPopShow: false
|
|
|
};
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
@@ -90,68 +103,25 @@ export default {
|
|
|
this.form.parkNo = parkNo;
|
|
|
this.getVehicleInquiryList(parkNo);
|
|
|
} else {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '参数丢失, 返回首页',
|
|
|
- showCancel: false,
|
|
|
- success: function (res) {
|
|
|
- if (res.confirm) {
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/index/index'
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
+ this.lossPopShow = true;
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
/**
|
|
|
- * @description: 车牌输入框点击
|
|
|
- * @return {*}
|
|
|
- */
|
|
|
- vehicleNoInputClick() {
|
|
|
- this.keyboardshow = true;
|
|
|
- this.form.vehicleNo = '';
|
|
|
- },
|
|
|
- /**
|
|
|
- * @description: 单击车牌
|
|
|
- * @param {*} e
|
|
|
+ * @description: 点击车牌输入框
|
|
|
* @return {*}
|
|
|
*/
|
|
|
- radioGroupChange(e) {
|
|
|
- this.form.vehicleNo = e;
|
|
|
+ clickCarKeyboard() {
|
|
|
+ this.carKeyboard.show = true;
|
|
|
},
|
|
|
/**
|
|
|
- * @description: 颜色下拉确认
|
|
|
- * @return {*}
|
|
|
- */
|
|
|
- confirmColor() {
|
|
|
- this.bindVehiclePop.colorShow = false;
|
|
|
- },
|
|
|
- /**
|
|
|
- * @description: 车牌键盘输入变化
|
|
|
+ * @description: 车牌键盘变化(将每次按键的值拼接到value变量中，注意+=写法)
|
|
|
* @param {*} val
|
|
|
* @return {*}
|
|
|
*/
|
|
|
keyboardChange(val) {
|
|
|
- // 将每次按键的值拼接到value变量中，注意+=写法
|
|
|
this.form.vehicleNo += val;
|
|
|
},
|
|
|
- /**
|
|
|
- * @description: 键盘输入完成确认时
|
|
|
- * @return {*}
|
|
|
- */
|
|
|
- keyboardConfirm() {
|
|
|
- this.bindVehiclePop.colorShow = true;
|
|
|
- },
|
|
|
- /**
|
|
|
- * @description: 退格键被点击
|
|
|
- * @return {*}
|
|
|
- */
|
|
|
- backspace() {
|
|
|
- // 删除value的最后一个字符
|
|
|
- if (this.form.vehicleNo.length) this.form.vehicleNo = this.form.vehicleNo.substr(0, this.form.vehicleNo.length - 1);
|
|
|
- },
|
|
|
/**
|
|
|
* @description: 获取当前用户车辆
|
|
|
* @return {*}
|
|
|
@@ -170,10 +140,35 @@ export default {
|
|
|
} catch (error) {}
|
|
|
},
|
|
|
/**
|
|
|
- * @description: 确认车费查询
|
|
|
+ * @description: 车牌键盘确认
|
|
|
* @return {*}
|
|
|
*/
|
|
|
- async submitVehicleInquiry() {
|
|
|
+ keyboardConfirm() {
|
|
|
+ this.colorPop.show = true;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description: 车牌键盘删除键(删除value的最后一个字符)
|
|
|
+ * @return {*}
|
|
|
+ */
|
|
|
+ backspace() {
|
|
|
+ if (this.form.vehicleNo.length) this.form.vehicleNo = this.form.vehicleNo.substr(0, this.form.vehicleNo.length - 1);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description: 选取颜色弹框确认
|
|
|
+ * @return {*}
|
|
|
+ */
|
|
|
+ confirmColor() {
|
|
|
+ this.colorPop.show = false;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description:
|
|
|
+ * @param {*} e
|
|
|
+ * @return {*}
|
|
|
+ */
|
|
|
+ radioChange(e) {
|
|
|
+ this.form.vehicleNo = e.detail.value;
|
|
|
+ },
|
|
|
+ async submitVehicleConfirm() {
|
|
|
const { vehicleNo } = this.form;
|
|
|
const reg =
|
|
|
/^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/;
|
