提交

package.json

@@ -9,6 +9,7 @@
   },
   "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",
@@ -41,8 +42,8 @@
       "parser": "babel-eslint"
     },
     "rules": {
-		"no-mixed-spaces-and-tabs":0
-	}
+      "no-mixed-spaces-and-tabs": 0
+    }
   },
   "browserslist": [
     "> 1%",

pnpm-lock.yaml

@@ -8,6 +8,7 @@ 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
@@ -21,6 +22,7 @@ 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
@@ -77,12 +79,6 @@ packages:
     resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
     dev: true
 
-  /json5/2.2.2:
-    resolution: {integrity: sha512-46Tk9JiOL2z7ytNQWFLpj99RZkVgeHf87yGQKsIkaPz1qSH9UczKH1rO7K3wgRselo0tYMUNfecYpm/p1vC7tQ==}
-    engines: {node: '>=6'}
-    hasBin: true
-    dev: true
-
   /loader-utils/1.4.2:
     resolution: {integrity: sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==}
     engines: {node: '>=4.0.0'}
@@ -92,15 +88,6 @@ packages:
       json5: registry.npmmirror.com/json5/1.0.1
     dev: true
 
-  /loader-utils/2.0.4:
-    resolution: {integrity: sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==}
-    engines: {node: '>=8.9.0'}
-    dependencies:
-      big.js: registry.npmmirror.com/big.js/5.2.2
-      emojis-list: registry.npmmirror.com/emojis-list/3.0.0
-      json5: registry.npmmirror.com/json5/2.2.2
-    dev: true
-
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -177,7 +164,7 @@ packages:
       convert-source-map: registry.npmmirror.com/convert-source-map/1.9.0
       debug: registry.npmmirror.com/debug/4.3.4
       gensync: registry.npmmirror.com/gensync/1.0.0-beta.2
-      json5: 2.2.2
+      json5: registry.npmmirror.com/json5/2.2.2
       semver: registry.npmmirror.com/semver/6.3.0
     transitivePeerDependencies:
       - supports-color
@@ -3555,7 +3542,7 @@ packages:
     dependencies:
       '@babel/core': registry.npmmirror.com/@babel/core/7.20.5
       find-cache-dir: registry.npmmirror.com/find-cache-dir/3.3.2
-      loader-utils: 2.0.4
+      loader-utils: registry.npmmirror.com/loader-utils/2.0.4
       make-dir: registry.npmmirror.com/make-dir/3.1.0
       schema-utils: registry.npmmirror.com/schema-utils/2.7.1
       webpack: registry.npmmirror.com/webpack/4.46.0
@@ -4111,6 +4098,15 @@ 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/view/motorVehicle/components/three.vue

@@ -1,74 +1,117 @@
 <template>
-    <div class="page_item">
-      <van-image
-        width="242"
-        height="103"
-        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"
-      />
-    </div>
-  </template>
-  <script setup>
-  // import { onMounted, reactive } from "vue";
-  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";
-  </script>
-  <style scoped>
-  .page_item {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    background-image: url(../../../assets/img/banner2.jpg);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-  }
-  
-  .saveData{
-    left: 69px;
-    bottom: 63px;
-    position: absolute;
-  }
+  <div class="page_item">
+    <van-image
+      width="242"
+      height="103"
+      v-show="showSub"
+      class="saveData"
+      :src="saveData"
+    />
 
-  .iis{
-    left: 24px;
-    top: 194px;
-    position: absolute;
-  }
+    <van-image width="214" height="74" class="iis" :src="iis" />
 
-.chepai{
+    <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">
+      {{ labels.jialing }}
+    </label>
+    <CarNumber defaultCarPlate="陕" :fontSize="35" borderColor="#00000000" class="label chepaiLabel" :width="330" :height="53"></CarNumber>
+    <input
+      type="number"
+      class="input"
+      @input="jialingInput"
+      @blur="blur"
+      @focus="focus"
+      v-model="labels.jialing"
+      id="jialing"
+      name="jialing"
+    />
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+// import { onMounted, reactive } from "vue";
+import { showToast } from 'vant';
+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 labels = ref({
+  chepai: '',
+  jialing: '',
+});
+const blur = () => {
+  // 失去焦点
+  showToast('blur');
+  showSub.value = true;
+};
+const focus = () => {
+  // 获得焦点
+  showToast('focus');
+  showSub.value = false;
+};
+
+const jialingInput = () => {
+  if (labels.value.jialing >= 100) labels.value.jialing = 99;
+  if (labels.value.jialing < 0) labels.value.jialing = 0;
+};
+</script>
+<style scoped>
+.page_item {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-image: url(../../../assets/img/banner2.jpg);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.saveData {
+  left: 69px;
+  bottom: 63px;
+  position: absolute;
+}
+
+.iis {
+  left: 24px;
+  top: 194px;
+  position: absolute;
+}
+
+.chepai {
   top: 280px;
   left: 24px;
   position: absolute;
 }
 
-.jialing{
+.jialing {
   top: 347px;
   left: 21px;
   position: absolute;
 }
-  
-  </style>
-  
+
+.label {
+  position: absolute;
+  width: 71px;
+  height: 71px;
+  line-height: 71px;
+  text-align: center;
+  top: 347px;
+  left: 191px;
+}
+
+.chepaiLabel {
+  top: 280px;
+  left: 24px;
+  height: 53px;
+  width: 330px;
+}
+
+.input {
+  float: left;
+  margin-left: -100%;
+}
+</style>

src/view/motorVehicle/index.js

@@ -1,9 +1,11 @@
 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).mount('#app');
+createApp(App).use(CarNumber).mount('#app');

src/view/motorVehicle/index.vue

@@ -1,20 +1,22 @@
 <template>
-  <div class="motorVehicle">
-    <van-swipe initial-swipe="0" :loop="false" vertical>
-      <van-swipe-item><div class="page">
-        <one></one>
-      </div></van-swipe-item>
-      <van-swipe-item><div class="page">
-        <two></two>
-      </div></van-swipe-item>
-      <van-swipe-item><div class="page">
-        <three></three>
-      </div></van-swipe-item>
-      <van-swipe-item><div class="page">
-        <four></four>
-      </div></van-swipe-item>
-    </van-swipe>
-  </div>
+  <van-swipe class="motorVehicle" initial-swipe="2" :loop="false" vertical>
+    <van-swipe-item
+      ><div class="page">
+        <one></one></div
+    ></van-swipe-item>
+    <van-swipe-item
+      ><div class="page">
+        <two></two></div
+    ></van-swipe-item>
+    <van-swipe-item
+      ><div class="page">
+        <three></three></div
+    ></van-swipe-item>
+    <van-swipe-item
+      ><div class="page">
+        <four></four></div
+    ></van-swipe-item>
+  </van-swipe>
 </template>
 <script setup>
 // import { onMounted, reactive } from "vue";
@@ -24,13 +26,16 @@
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-import one from "./components/one.vue";
-import two from "./components/two.vue";
-import three from "./components/three.vue";
-import four from "./components/four.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);
 </script>
 <style>
+.motorVehicle {
+  position: relative;
+}
 .motorVehicle .van-swipe,
 .motorVehicle,
 .page {
@@ -41,6 +46,6 @@ console.log(window.$originData);
 }
 
 .motorVehicle .van-swipe__indicators {
-    display: none
+  display: none;
 }
 </style>