提交

package.json

@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "axios": "^1.2.1",
-    "car-number-vue3": "^1.0.2",
     "core-js": "^3.26.1",
     "element-plus": "^2.2.26",
     "vant": "4.0.2",

pnpm-lock.yaml

@@ -8,7 +8,6 @@ specifiers:
   ali-oss: ^6.17.1
   axios: ^1.2.1
   babel-eslint: ^10.1.0
-  car-number-vue3: ^1.0.2
   core-js: ^3.26.1
   element-plus: ^2.2.26
   eslint: ^6.8.0
@@ -22,7 +21,6 @@ specifiers:
 
 dependencies:
   axios: registry.npmmirror.com/axios/1.2.1
-  car-number-vue3: registry.npmmirror.com/car-number-vue3/1.0.2
   core-js: registry.npmmirror.com/core-js/3.26.1
   element-plus: registry.npmmirror.com/element-plus/2.2.26_vue@3.2.45
   vant: 4.0.2_vue@3.2.45
@@ -4098,15 +4096,6 @@ packages:
     version: 1.0.30001439
     dev: true
 
-  registry.npmmirror.com/car-number-vue3/1.0.2:
-    resolution: {integrity: sha512-KXQDRzaj1b8SxFa3D0tM15Hxn8hsQZZf7UURu0WYO7IgZmbFjOs3jt4beiihVo4aXdODFnNMYwY0gWaXvFovjg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/car-number-vue3/-/car-number-vue3-1.0.2.tgz}
-    name: car-number-vue3
-    version: 1.0.2
-    dependencies:
-      core-js: registry.npmmirror.com/core-js/3.26.1
-      vue: registry.npmmirror.com/vue/3.2.45
-    dev: false
-
   registry.npmmirror.com/case-sensitive-paths-webpack-plugin/2.4.0:
     resolution: {integrity: sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz}
     name: case-sensitive-paths-webpack-plugin

src/api/fingerboard.js

@@ -0,0 +1,20 @@
+import ajax from '@/utils/request.js';
+export function saveChepai(data) {
+  return ajax({
+    url: 'car/create',
+    method: 'POST',
+    urlType: 'slikRoad',
+    errorToast: '当前访问人数过多，请重试。',
+    data,
+  });
+}
+export function getChepai(data) {
+  return ajax({
+    noLoad: true,
+    url: '/car/info',
+    method: 'GET',
+    urlType: 'slikRoad',
+    errorToast: '当前访问人数过多，请重试。',
+    data,
+  });
+}

src/view/motorVehicle/components/fingerboard.vue

@@ -0,0 +1,125 @@
+<template>
+  <van-popup :overlay-style="{'background-color': 'rgba(0,0,0,0)'}" v-model:show="show" position="bottom" :style="{ height: '15em' }">
+    <div class="fingerboard">
+      <div class="tooltip">
+        <van-button
+          :type="isNew ? 'primary' : 'default'"
+          size="small"
+          @click="isNewFunc"
+        >
+          新能源
+        </van-button>
+        <van-button type="default" size="small" @click="() => changeShow(false)">
+          完成
+        </van-button>
+      </div>
+      <div
+        class="row"
+        v-for="(item, index) in jp"
+        :style="'width:' + item.length * 36 + 'px'"
+        :key="index"
+      >
+        <div
+          class="item"
+          v-for="(o, i) in item"
+          :key="index + i"
+          :style="o == 'delete'? 'flex: 3;padding-top: 5px' : ''"
+          @click="() => o !== 'delete' ? setKey(o) : deleteKey()"
+        >
+          <span v-text="o" v-if="o !== 'delete'"></span>
+          <svg
+            v-else
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="3604"
+            width="32"
+            height="32"
+            fill="#666"
+          >
+            <path
+              d="M856.2 890.5H402.4c-55.3-0.1-108-23.4-145.4-64.2L23 571c-30.7-33.4-30.7-84.8 0-118.2l233.9-255.1c37.3-40.8 90.1-64.1 145.4-64.2h453.8c92.7 0.2 167.8 75.4 167.8 168.1v420.7c0.1 92.8-75 168-167.7 168.2zM402.6 184.9c-41 0-80 17.2-107.8 47.4L60.9 487.6c-12.8 13.7-12.8 34.9 0 48.6l233.7 255.3c27.7 30.2 66.8 47.4 107.8 47.4h454c64.4-0.1 116.5-52.4 116.5-116.8V301.6c0-64.4-52.2-116.6-116.5-116.8H402.6z m323.7 471c-6.8 0-13.4-2.7-18.2-7.5l-100-100.2L508 648.4c-9.9 10.1-26.1 10.2-36.2 0.3-10.1-9.9-10.2-26.1-0.3-36.2l0.4-0.4 100-100.2-100-100.2c-10.1-9.9-10.3-26.1-0.4-36.2 9.9-10.1 26.1-10.3 36.2-0.4l0.4 0.4 100 100.2 100-100.2c10-10 26.2-10 36.2 0 10 10 10 26.2 0 36.2l-100 100.2 100.2 100.2c10 10 10 26.3-0.1 36.3-4.8 4.8-11.3 7.5-18.1 7.5z"
+              p-id="3605"
+            ></path>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script setup>
+import { ref, defineExpose, defineEmits } from 'vue';
+import { showToast } from 'vant';
+const show = ref(false);
+const isNew = ref(false);
+const emit = defineEmits(['changeIsNew']);
+
+const jp = [
+  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+  ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+  ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+  ['Z', 'X', 'C', 'V', 'B', 'N', 'M', 'delete'],
+];
+
+let fingerboardChepai = [];
+
+const setKey = key => {
+  // 键入内容
+  if (isNew.value) {
+    // 新能源7位
+    if (fingerboardChepai.length >= 7) return showToast('超出车牌位数限制');
+  } else {
+    // 燃油车6位
+    if (fingerboardChepai.length >= 6) return showToast('超出车牌位数限制');
+  }
+  if (fingerboardChepai.length === 0 && /[0-9]/.test(key)) return showToast('车牌首位必须为字母');
+  console.log(key)
+  key !== '' && fingerboardChepai.push(key);
+};
+
+const deleteKey = () => {
+  fingerboardChepai.pop();
+};
+
+const isNewFunc = () => {
+  isNew.value = !isNew.value;
+  emit('changeIsNew', isNew.value);
+};
+
+const changeShow = (F = false, defaultText = []) => {
+  show.value = F;
+  fingerboardChepai = defaultText;
+};
+defineExpose({
+  changeShow,
+});
+</script>
+
+<style scoped lang="scss">
+.fingerboard {
+  background-color: #eaf1f9;
+  height: 100%;
+  .tooltip {
+    text-align: right;
+    line-height: 1.5em;
+    padding: 5px;
+  }
+  .row {
+    margin: 0 auto;
+    line-height: 2.5em;
+    height: 2.5em;
+    font-size: 18px;
+    display: flex;
+    .item {
+      flex: 2;
+      width: 1em;
+      text-align: center;
+      margin: 0 3px 3px 0;
+      border-radius: 3px;
+      box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+      background-color: #fff;
+    }
+  }
+}
+</style>

src/view/motorVehicle/components/four.vue

@@ -6,19 +6,41 @@
       class="jiaotonglogo"
       :src="jiaotonglogo"
     />
-    <van-image width="313" height="30" class="chepai" :src="chepaifour" />
+    <van-image width="45" height="18" class="chepai" :src="chepaifour" />
     <van-image width="305" height="30" class="fourtitle1" :src="fourtitle1" />
     <van-image width="308" height="56" class="fourtitle2" :src="fourtitle2" />
     <van-image width="292" height="27" class="fourtitle4" :src="fourtitle4" />
+
+    <div class="chepai chepaihao" style="width: 363px">
+      <div class="item" style="font-size: 0;height: 30px;padding-top: 1px;">
+        <img :src="chepai" style="width: 25px; height: 21px" />
+      </div>
+      <div
+        class="item"
+        v-for="(item, index) in chepaiData"
+        :key="index"
+        v-text="item"
+      ></div>
+    </div>
+
+    <div class="precedence" v-text="car.carOrderUnreal"></div>
   </div>
 </template>
 <script setup>
+import { defineProps } from "vue";
 // import { onMounted, reactive } from "vue";
 import jiaotonglogo from '../../../assets/img/logo1.png';
+import chepai from '@/assets/img/chepai.png';
 import chepaifour from '@/assets/img/chepaifour.png';
 import fourtitle1 from '@/assets/img/fourtitle1.png';
 import fourtitle2 from '@/assets/img/fourtitle2.png';
 import fourtitle4 from '@/assets/img/fourtitle4.png';
+const props = defineProps({
+  car: {
+    type: Object,
+  }
+})
+const chepaiData = props.car.carId.split('');
 </script>
 <style scoped>
 .page_item {
@@ -35,6 +57,29 @@ import fourtitle4 from '@/assets/img/fourtitle4.png';
   left: 28px;
   position: absolute;
 }
+
+.chepaihao{
+  top: 149px;
+  left: 78px;
+  display: flex;
+}
+
+.chepai .item {
+  height: 100%;
+  width: 33px;
+  font-size: 26px;
+  color: #1e3c95;
+  line-height: 1em;
+  text-align: center;
+  display: inline-block;
+  border: 2px solid #1e3c95;
+  border-radius: 3px;
+  vertical-align: middle;
+}
+.chepai .item:not(:last-child) {
+  margin-right: 3px;
+}
+
 .fourtitle1 {
   top: 227px;
   left: 33px;
@@ -56,4 +101,14 @@ import fourtitle4 from '@/assets/img/fourtitle4.png';
   top: 22px;
   right: 27px;
 }
+
+.precedence{
+  position: absolute;
+  top: 284px;
+  left: 125px;
+  text-align: center;
+  width: 2.5em;
+  font-size: 26px;
+  color: #1e3c95;
+}
 </style>

src/view/motorVehicle/components/three.vue

@@ -4,20 +4,45 @@
       width="242"
       height="103"
       v-show="showSub"
+      @click="saveChepaiFunc"
       class="saveData"
       :src="saveData"
     />
 
     <van-image width="214" height="74" class="iis" :src="iis" />
 
-    <van-image width="330" height="53" class="chepai" :src="chepai" />
-
     <van-image width="327" height="71" class="jialing" :src="jialing" />
 
-    <label for="jialing" style="font-size: 60px;" class="label">
+    <label for="jialing" style="font-size: 60px" class="label">
       {{ labels.jialing }}
     </label>
-    <CarNumber defaultCarPlate="陕" :fontSize="35" borderColor="#00000000" class="label chepaiLabel" :width="330" :height="53"></CarNumber>
+    <div class="chepaiLabel">
+      <div
+        class="chepai"
+        :style="isNew ? 'width: 363px' : ''"
+        @click="showFingerboard"
+      >
+        <div class="item">
+          <img :src="chepai" style="width: 32px; height: 28px" />
+        </div>
+        <template v-if="isNew">
+          <div
+            :class="{ item: true, newClass: index == 6 }"
+            v-for="(item, index) in 7"
+            :key="index"
+            v-text="labels.chepai[index] !== '' ? labels.chepai[index] : ''"
+          ></div>
+        </template>
+        <template v-else>
+          <div
+            class="item"
+            v-for="(item, index) in 6"
+            :key="index"
+            v-text="labels.chepai[index] !== '' ? labels.chepai[index] : ''"
+          ></div>
+        </template>
+      </div>
+    </div>
     <input
       type="number"
       class="input"
@@ -31,26 +56,27 @@
   </div>
 </template>
 <script setup>
-import { ref } from 'vue';
-// import { onMounted, reactive } from "vue";
+import { ref, defineExpose, defineEmits } from 'vue';
 import { showToast } from 'vant';
+// import { onMounted, reactive } from "vue";
+import { saveChepai } from '@/api/fingerboard';
 import saveData from '@/assets/img/gethaibao.png';
 import iis from '@/assets/img/iis.png';
 import chepai from '@/assets/img/chepai.png';
 import jialing from '@/assets/img/jialing.png';
 const showSub = ref(true);
+const isNew = ref(false);
+const emit = defineEmits(['changeFinger', 'removeThis']);
 const labels = ref({
-  chepai: '',
+  chepai: [],
   jialing: '',
 });
 const blur = () => {
   // 失去焦点
-  showToast('blur');
   showSub.value = true;
 };
 const focus = () => {
   // 获得焦点
-  showToast('focus');
   showSub.value = false;
 };
 
@@ -58,6 +84,34 @@ const jialingInput = () => {
   if (labels.value.jialing >= 100) labels.value.jialing = 99;
   if (labels.value.jialing < 0) labels.value.jialing = 0;
 };
+const showFingerboard = () => {
+  // 显示键盘
+  emit('changeFinger', true, labels.value.chepai);
+};
+
+const saveChepaiFunc = () => {
+  // 保存车牌
+  if (isNew.value && labels.value.chepai.length != 7)
+    return showToast('请输入正确的车牌');
+  if (!isNew.value && labels.value.chepai.length != 6)
+    return showToast('请输入正确的车牌');
+  if (isNaN(labels.value.jialing)) return showToast('请输入正确的驾龄');
+  saveChepai({
+    carId: '陕' + labels.value.chepai.join(''),
+    drivingAge: labels.value.jialing,
+  }).then(() => {
+    window.localStorage.setItem('chepai', labels.value.chepai);
+    emit('removeThis', 2, '陕' + labels.value.chepai.join(''));
+  });
+};
+
+const setIsNew = value => {
+  isNew.value = value;
+};
+
+defineExpose({
+  setIsNew,
+});
 </script>
 <style scoped>
 .page_item {
@@ -82,9 +136,29 @@ const jialingInput = () => {
 }
 
 .chepai {
-  top: 280px;
-  left: 24px;
-  position: absolute;
+  min-width: 310px;
+  height: 49px;
+  background: #fff;
+  border-radius: 10px;
+  padding: 6px 6px 5px 6px;
+  box-sizing: border-box;
+}
+
+.chepai .item {
+  height: 100%;
+  width: 40px;
+  font-size: 38px;
+  color: #1e3c95;
+  line-height: 1em;
+  text-align: center;
+  display: inline-block;
+  border: 2px solid #1e3c95;
+  border-radius: 3px;
+  vertical-align: middle;
+}
+
+.chepai .item:not(:last-child) {
+  margin-right: 3px;
 }
 
 .jialing {
@@ -104,14 +178,24 @@ const jialingInput = () => {
 }
 
 .chepaiLabel {
+  position: absolute;
   top: 280px;
-  left: 24px;
+  left: 50%;
+  transform: translateX(-50%);
   height: 53px;
-  width: 330px;
 }
 
 .input {
   float: left;
   margin-left: -100%;
 }
+
+.newClass {
+  background: green;
+}
+</style>
+<style>
+.page_item .car__number__container .keyboard__container {
+  position: absolute;
+}
 </style>

src/view/motorVehicle/components/two.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="page_item">
-    
     <van-image
       width="267"
       height="94"
       class="saveData"
       :src="saveData"
+      @click="emits('toNext')"
     />
   </div>
 </template>
 <script setup>
+import { defineEmits } from "vue";
 // import { onMounted, reactive } from "vue";
 import saveData from '@/assets/img/saveData.png';
+const emits = defineEmits(['toNext']);
 </script>
 <style scoped>
 .page_item {

src/view/motorVehicle/index.js

@@ -1,11 +1,9 @@
 import App from './index.vue';
 import '@/assets/js/common';
 import { createApp } from 'vue';
-import CarNumber from 'car-number-vue3'
-import 'car-number-vue3/lib/carNumber.css'
 import { getPageParameters, environment } from '../../config/pageConfig';
 // 判断环境
 environment();
 window.$originData = getPageParameters();
 document.title = window.$originData.orginParames.title || '';
-createApp(App).use(CarNumber).mount('#app');
+createApp(App).mount('#app');

src/view/motorVehicle/index.vue

@@ -1,24 +1,32 @@
 <template>
-  <van-swipe class="motorVehicle" initial-swipe="2" :loop="false" vertical>
+  <van-swipe ref="swipe" class="motorVehicle" :loop="false" vertical>
     <van-swipe-item
       ><div class="page">
         <one></one></div
     ></van-swipe-item>
-    <van-swipe-item
+    <van-swipe-item v-if="showPage[1]"
       ><div class="page">
-        <two></two></div
+        <two @toNext="toNext"></two></div
     ></van-swipe-item>
-    <van-swipe-item
+    <van-swipe-item v-if="showPage[2]"
       ><div class="page">
-        <three></three></div
+        <three
+          ref="threeFunc"
+          @changeFinger="changeFinger"
+          @removeThis="removeThis"
+        ></three></div
     ></van-swipe-item>
-    <van-swipe-item
+    <van-swipe-item v-if="car.carId"
       ><div class="page">
-        <four></four></div
+        <four :car="car"></four></div
     ></van-swipe-item>
   </van-swipe>
+  <Fingerboard ref="finger" @changeIsNew="changeIsNew" />
 </template>
 <script setup>
+import { ref } from 'vue';
+import { getChepai } from '@/api/fingerboard';
+
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -26,11 +34,58 @@
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
+import Fingerboard from './components/fingerboard.vue';
 import one from './components/one.vue';
 import two from './components/two.vue';
 import three from './components/three.vue';
 import four from './components/four.vue';
-console.log(window.$originData);
+const finger = ref(null);
+const threeFunc = ref(null);
+const swipe = ref(null);
+const showPage = ref([undefined, true, true]);
+const car = ref({
+  drivingAge: 0,
+  carId: '',
+  carOrderUnreal: 0,
+});
+let P = window.localStorage.getItem('chepai') || '';
+P = P.replace(/,/g, "")
+if (P)
+  getChepai({ carId: '陕' + P }).then(res => {
+    showPage.value[1] = false;
+    showPage.value[2] = false;
+    car.value = {
+      drivingAge: res.drivingAge,
+      carId: res.carId.replace('陕', ''),
+      carOrderUnreal: res.carOrderUnreal,
+    };
+  });
+
+const changeFinger = (F = false, text = []) => {
+  finger.value.changeShow(F, text);
+};
+
+const changeIsNew = value => {
+  // 键盘设置初始值
+  threeFunc.value.setIsNew(value);
+};
+
+const removeThis = (index, chepai) => {
+  showPage.value[index] = false;
+  getChepai({ carId: chepai }).then(res => {
+    showPage.value[1] = false;
+    showPage.value[2] = false;
+    car.value = {
+      drivingAge: res.drivingAge,
+      carId: res.carId.replace('陕', ''),
+      carOrderUnreal: res.carOrderUnreal,
+    };
+  });
+};
+
+const toNext = () => {
+    swipe.value.next();
+}
 </script>
 <style>
 .motorVehicle {