新增静态页面

package-lock.json

@@ -9,9 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "pinia": "^2.2.6",
-        "vant": "^4.9.14",
+        "vant": "^4.9.15",
         "vue": "^3.5.13",
-        "vue-router": "^4.4.5"
+        "vue-qrcode-reader": "^5.6.0",
+        "vue-router": "^4.4.5",
+        "vue3-qr-reader": "^1.0.0",
+        "vue3-qrcode-reader": "^0.0.1"
       },
       "devDependencies": {
         "@tsconfig/node22": "^22.0.0",
@@ -1553,6 +1556,16 @@
       "integrity": "sha512-twLQ77zevtxobBOD4ToAtVmuYrpeYUh3qh+TEp+08IWhpsrIflVHqQ1F1CiPxQGL7doCdBIOOCF+1Tm833faNg==",
       "dev": true
     },
+    "node_modules/@types/dom-webcodecs": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmmirror.com/@types/dom-webcodecs/-/dom-webcodecs-0.1.13.tgz",
+      "integrity": "sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ=="
+    },
+    "node_modules/@types/emscripten": {
+      "version": "1.39.13",
+      "resolved": "https://registry.npmmirror.com/@types/emscripten/-/emscripten-1.39.13.tgz",
+      "integrity": "sha512-cFq+fO/isvhvmuP/+Sl4K4jtU6E23DoivtbO4r50e3odaxAiVdbfSYRDdJ4gCdxx+3aRjhphS5ZMwIH4hFy/Cw=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.6.tgz",
@@ -2364,6 +2377,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/barcode-detector": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/barcode-detector/-/barcode-detector-2.2.2.tgz",
+      "integrity": "sha512-JcSekql+EV93evfzF9zBr+Y6aRfkR+QFvgyzbwQ0dbymZXoAI9+WgT7H1E429f+3RKNncHz2CW98VQtaaKpmfQ==",
+      "dependencies": {
+        "@types/dom-webcodecs": "^0.1.11",
+        "zxing-wasm": "1.1.3"
+      }
+    },
     "node_modules/birpc": {
       "version": "0.2.19",
       "resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz",
@@ -2462,6 +2484,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/callforth": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmmirror.com/callforth/-/callforth-0.3.1.tgz",
+      "integrity": "sha512-Q2zPfqnwoKsb1DTVCr4lmhe49wKNBsMmNlbudjleu3/co+Nw1pOqFHYJHrW3VZ253ou9AAr+xauQR0C55NPdzA=="
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
@@ -2614,6 +2641,16 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.39.0",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.39.0.tgz",
+      "integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3945,6 +3982,11 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmmirror.com/keyv/-/keyv-4.5.4.tgz",
@@ -4719,6 +4761,23 @@
       "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
       "dev": true
     },
+    "node_modules/rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmmirror.com/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "dependencies": {
+        "sdp": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
+    "node_modules/rtcpeerconnection-shim/node_modules/sdp": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmmirror.com/sdp/-/sdp-2.12.0.tgz",
+      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
+    },
     "node_modules/run-applescript": {
       "version": "7.0.0",
       "resolved": "https://registry.npmmirror.com/run-applescript/-/run-applescript-7.0.0.tgz",
@@ -5160,6 +5219,11 @@
         "node": ">=v12.22.7"
       }
     },
+    "node_modules/sdp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/sdp/-/sdp-3.2.0.tgz",
+      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw=="
+    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.3.tgz",
@@ -5711,10 +5775,9 @@
       "dev": true
     },
     "node_modules/vant": {
-      "version": "4.9.14",
+      "version": "4.9.15",
-      "resolved": "https://registry.npmmirror.com/vant/-/vant-4.9.14.tgz",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-4.9.15.tgz",
-      "integrity": "sha512-sWov3CZ6555Mb0y4j7wjR0JIpKhPZwAIYLJT9/4p823uqSdPU96bL7VgJS75cSiATIODz4QGgZrSh6sa15jJGA==",
+      "integrity": "sha512-XyIAnoGu2P/dc5R2NnjIJgKwfOTTVM2FJW/8WpsZA0FUBL6Lu+KHBaAY/x3IduwbowkaCIUUPViUopI2JSjbug==",
-      "hasInstallScript": true,
       "dependencies": {
         "@vant/popperjs": "^1.3.0",
         "@vant/use": "^1.6.0",
@@ -7051,6 +7114,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/vue-qrcode-reader": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/vue-qrcode-reader/-/vue-qrcode-reader-5.6.0.tgz",
+      "integrity": "sha512-uvaJqMRgR/1tt7XWAqaRBQf0mo3gudu5fXqZmtoq+87lvmM4dublJ7StO6ssNO3FaJqssG72hPhXWoBoYWJIeg==",
+      "dependencies": {
+        "barcode-detector": "2.2.2",
+        "webrtc-adapter": "8.2.3"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.0.tgz",
@@ -7082,6 +7157,43 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/vue3-qr-reader": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/vue3-qr-reader/-/vue3-qr-reader-1.0.0.tgz",
+      "integrity": "sha512-BRgmR+lDPkNwgL6skSaEOGFg4Aup/FLYnOGFCV0knYHxfbAnliJN/+wr//iqD2G3EOBrXw4TPGNfj/5Wxl7wwQ==",
+      "dependencies": {
+        "jsqr": "^1.4.0"
+      }
+    },
+    "node_modules/vue3-qrcode-reader": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmmirror.com/vue3-qrcode-reader/-/vue3-qrcode-reader-0.0.1.tgz",
+      "integrity": "sha512-rTZRO2WiBrGRT6pYGMkySNMnEwD9sVlzl9kwPxQ4C0n7I4SXVu60eq8ZQHQTMJAbDTTkbuuW/5reSf+TYFJ5pQ==",
+      "dependencies": {
+        "callforth": "^0.3.1",
+        "core-js": "^3.6.5",
+        "vue": "^3.0.0",
+        "webrtc-adapter": "7.7.0"
+      }
+    },
+    "node_modules/vue3-qrcode-reader/node_modules/sdp": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmmirror.com/sdp/-/sdp-2.12.0.tgz",
+      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
+    },
+    "node_modules/vue3-qrcode-reader/node_modules/webrtc-adapter": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmmirror.com/webrtc-adapter/-/webrtc-adapter-7.7.0.tgz",
+      "integrity": "sha512-7Bp9OBnx642oJRkom1tNAbeJjUadAq2rh5xLL9YXPw5hVyt2h4hHr5bcoPYDs1stp/mZHSPSQA34YISdnr0DBQ==",
+      "dependencies": {
+        "rtcpeerconnection-shim": "^1.2.15",
+        "sdp": "^2.12.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -7112,6 +7224,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/webrtc-adapter": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmmirror.com/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz",
+      "integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==",
+      "dependencies": {
+        "sdp": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/whatwg-encoding": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
@@ -7339,6 +7463,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zxing-wasm": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/zxing-wasm/-/zxing-wasm-1.1.3.tgz",
+      "integrity": "sha512-MYm9k/5YVs4ZOTIFwlRjfFKD0crhefgbnt1+6TEpmKUDFp3E2uwqGSKwQOd2hOIsta/7Usq4hnpNRYTLoljnfA==",
+      "dependencies": {
+        "@types/emscripten": "^1.39.10"
+      }
     }
   }
 }

package.json

@@ -15,9 +15,12 @@
   },
   "dependencies": {
     "pinia": "^2.2.6",
-    "vant": "^4.9.14",
+    "vant": "^4.9.15",
     "vue": "^3.5.13",
-    "vue-router": "^4.4.5"
+    "vue-qrcode-reader": "^5.6.0",
+    "vue-router": "^4.4.5",
+    "vue3-qr-reader": "^1.0.0",
+    "vue3-qrcode-reader": "^0.0.1"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",

src/components/BarScan.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { QrcodeStream } from 'vue-qrcode-reader'
+import { onMounted, ref } from 'vue'
+import { showToast } from 'vant'
+
+const emit = defineEmits(['err','ok'])
+const result=ref('' as any) // 扫码结果信息
+const error=ref('' as any) // 错误信
+const scancode=ref(true)
+
+onMounted(() => {
+
+})
+
+const onDecode = (res:any) => {
+  if(res!==""){
+    scancode.value=false;
+    result.value=res
+    emit('ok',res)
+  }else{
+    showToast('失败')
+  }
+}
+// 检查是否调用摄像头
+const onInit = async(promise:any)=> {
+  try {
+    await promise
+  } catch (error) {
+    handleError(error)
+  }
+}
+
+const handleError = (error:any) => {
+  const errorMessages = {
+    NotAllowedError: '您需要授予相机访问权限',
+    NotFoundError: '这个设备上没有摄像头',
+    NotSupportedError: '所需的安全上下文(HTTPS、本地主机)',
+    NotReadableError: '相机被占用',
+    OverconstrainedError: '安装摄像头不合适',
+    StreamApiNotSupportedError: '此浏览器不支持流API',
+    InsecureContextError: '仅允许在安全上下文中访问摄像机。使用HTTPS或本地主机，而不是HTTP。',
+  }
+
+  const message = errorMessages[error.name] || 'ERROR: 摄像头错误'
+  showToast(error.name)
+  console.log(message,error.name)
+}
+</script>
+
+<template>
+  <div class="scan">
+    <qrcode-stream  @error="handleError" @decode="onDecode" @init="onInit" style="height: 100vh;">
+      <div>
+        <div class="qr-scanner">
+          <div class="box">
+            <div class="line"></div>
+            <div class="angle"></div>
+          </div>
+        </div>
+      </div>
+    </qrcode-stream>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.error {
+  font-weight: bold;
+  color: red;
+}
+.scan{
+  width: 100vw;
+  border-color: #585858;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.qrcode-stream-camera{
+  width: 100%;
+  height: 100%;
+  display: block;
+  -o-object-fit: cover;
+  object-fit: cover;
+  position: absolute;
+  top: 0%;
+  left: 0%;
+}
+.qr-scanner {
+  background-image:
+    linear-gradient(0deg,
+      transparent 24%,
+      rgba(32, 255, 77, 0.1) 25%,
+      rgba(32, 255, 77, 0.1) 26%,
+      transparent 27%,
+      transparent 74%,
+      rgba(32, 255, 77, 0.1) 75%,
+      rgba(32, 255, 77, 0.1) 76%,
+      transparent 77%,
+      transparent),
+    linear-gradient(90deg,
+      transparent 24%,
+      rgba(32, 255, 77, 0.1) 25%,
+      rgba(32, 255, 77, 0.1) 26%,
+      transparent 27%,
+      transparent 74%,
+      rgba(32, 255, 77, 0.1) 75%,
+      rgba(32, 255, 77, 0.1) 76%,
+      transparent 77%,
+      transparent);
+  background-size: 3rem 3rem;
+  background-position: -1rem -1rem;
+  width: 100%;
+  /* height: 100%; */
+  height: 100vh;
+  position: relative;
+  /* background-color: #1110;*/
+
+  /* background-color: #111; */
+}
+
+.qr-scanner .box {
+  width: 213px;
+  height: 213px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  overflow: hidden;
+  border: 0.1rem solid rgba(0, 255, 51, 0.2);
+  /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
+}
+
+.qr-scanner .line {
+  height: calc(100% - 2px);
+  width: 100%;
+  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
+  border-bottom: 3px solid #00ff33;
+  transform: translateY(-100%);
+  animation: radar-beam 2s infinite alternate;
+  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
+  animation-delay: 1.4s;
+}
+
+.qr-scanner .box:after,
+.qr-scanner .box:before,
+.qr-scanner .angle:after,
+.qr-scanner .angle:before {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 3vw;
+  height: 3vw;
+
+  border: 0.2rem solid transparent;
+}
+
+.qr-scanner .box:after,
+.qr-scanner .box:before {
+  top: 0;
+  border-top-color: #00ff33;
+}
+
+.qr-scanner .angle:after,
+.qr-scanner .angle:before {
+  bottom: 0;
+  border-bottom-color: #00ff33;
+}
+
+.qr-scanner .box:before,
+.qr-scanner .angle:before {
+  left: 0;
+  border-left-color: #00ff33;
+}
+
+.qr-scanner .box:after,
+.qr-scanner .angle:after {
+  right: 0;
+  border-right-color: #00ff33;
+}
+
+@keyframes radar-beam {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+</style>

src/components/HelloWorld.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>

src/components/TheWelcome.vue

@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
-    and
-    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
-      >Cypress Component Testing</a
-    >.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
-    Discord server, or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a>
-    and follow the official
-    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>

src/components/WelcomeItem.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>

src/router/index.ts

@@ -11,47 +11,66 @@ const router = createRouter({
       children:[
         {
           path: '/process',
-          name: 'process',
+          name: '工序项维护',
           component: () => import('../views/maintenance/m-process.vue'),
         },
         {
           path: '/requirements',
-          name: 'requirements',
+          name: '工艺要求维护',
           component: () => import('../views/maintenance/m-requirements.vue'),
         },
         {
           path: '/factory',
-          name: 'factory',
+          name: '工厂维护',
           component: () => import('../views/maintenance/m-factory.vue'),
         },
         {
           path: '/other',
-          name: 'other',
+          name: '其他要求项维护',
           component: () => import('../views/maintenance/m-other.vue'),
         },
         {
           path: '/quality',
-          name: 'quality',
+          name: '色胚质检项维护',
           component: () => import('../views/lecher/l-quality.vue'),
         },
         {
           path: '/flaws',
-          name: 'flaws',
+          name: '色胚质检瑕疵维护',
           component: () => import('../views/lecher/l-flaws.vue'),
         },
         {
-          path: '/',
+          path: '/warehousing',
-          name: 'about',
+          name: '白胚入库',
-          component: () => import('../views/AboutView.vue'),
+          component: () => import('../views/whiteEmbryo/w-warehousing.vue'),
         },
         {
-          path: '/detail',
+          path: '/level',
-          name: 'detail',
+          name: '白胚等级维护',
-          component: () => import('../views/maintenance/p-details.vue'),
+          component: () => import('../views/whiteEmbryo/w-level.vue'),
+        },
+        {
+          path: '/suppliers',
+          name: '供应商维护',
+          component: () => import('../views/whiteEmbryo/w-suppliers.vue'),
+        },
+        {
+          path: '/scanCode',
+          name: '扫一扫',
+          component: () => import('../views/whiteEmbryo/scanCode.vue'),
         },
       ]
     },
-
+    {
+      path: '/detail',
+      name: 'detail',
+      component: () => import('../views/maintenance/p-details.vue'),
+    },
+    {
+      path: '/',
+      name: 'about',
+      component: () => import('../views/AboutView.vue'),
+    },
     {
       path: "/:catchAll(.*)",
       name: "404",

src/utils/date.ts

@@ -0,0 +1,17 @@
+export function formatDate(time:Date|string,separator='-'){
+        time=new Date(time);
+    let year=time.getFullYear(),
+        month=time.getMonth()+ 1,
+        date=time.getDate();
+    return year+separator+(month<10?'0'+month:month)+separator+(date<10?'0'+date:date);
+}
+
+//时间格式化
+export function formatTime(time:Date,separator1='-',seperator2=':'){
+        time=new Date(time);
+    let date=formatDate(time,separator1),
+        hours=time.getHours(),
+        minutes=time.getMinutes(),
+        seconds=time.getSeconds();
+    return date+' '+(hours<10?'0'+hours:hours)+seperator2+(minutes<10?'0'+minutes:minutes)+seperator2+(seconds<10?'0'+seconds:seconds);
+}

src/views/AboutView.vue

@@ -5,9 +5,14 @@ import router from '@/router'
 const ListData =ref([] as any[])
 
 onMounted(() => {
-  ListData.value=[{name:'工序项维护',url:'/process'},{name:'工艺要求维护',url:'/requirements'},
+  const rout=router.getRoutes()
-    {name:'工厂维护',url:'/factory'},{name:'其他要求项维护',url:'/other'},{name:'色胚质检项维护',url:'/quality'},{name:'色胚质检瑕疵维护',url:'/flaws'}
+  rout.forEach((l:any)=>{
-  ]
+    if(l.name==='home'){
+      l.children.forEach((m:any)=>{
+        ListData.value.push({name:m.name,url:m.path})
+      })
+    }
+  })
 })
 
 const gotoLink = (item: any) => {

src/views/lecher/l-quality.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import router from '@/router'
 
 const list = ref([{list:[{}]}] as any[])
 
 const onClickLeft = () =>{
-  history.back()
+  router.go(-1);
 }
 const onClickRight=()=>{
   list.value.push([])

src/views/whiteEmbryo/scanCode.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+
+import BarScan from '@/components/BarScan.vue'
+import { showToast } from 'vant'
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  navigator.mediaDevices.enumerateDevices().then((devices) => {
+      devices.forEach((device) => {
+        if (device.kind === "videoinput") {
+          console.log(
+            "Video input device: ",
+            device.label,
+            device.deviceId
+          );
+        }
+      });
+    })
+    .catch((error) => {
+      console.error("Error enumerating devices: ", error);
+      showToast("Error enumerating devices");
+    });
+})
+
+const onClickLeft = () =>{
+  history.back()
+}
+const onClickRight=()=>{
+}
+const getResult = (val:any)=>{
+  console.log(val)
+}
+const getError = (val:any)=>{
+  console.log(val)
+}
+</script>
+
+<template>
+<div class="sys">
+  <van-nav-bar
+    title="白胚入库"
+    left-text="返回"
+    left-arrow
+    right-text="新增"
+    @click-left="onClickLeft"
+    @click-right="onClickRight"
+  />
+  <BarScan @ok="getResult" @err="getError" ></BarScan>
+</div>
+</template>
+
+<style scoped lang="scss">
+.sys{
+  width: 100vw;
+  height: 100vh;
+  background: #111;
+}
+
+</style>

src/views/whiteEmbryo/w-level.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+
+import { ref } from 'vue'
+
+const showPop = ref(false)
+const list= ref([{}] as any[])
+const form = ref({list:[{}]} as any)
+
+const onClickLeft = () =>{
+  history.back()
+}
+const onClickRight=()=>{
+  showPop.value=true
+}
+const edit = (item:any) =>{
+  console.log(item)
+  showPop.value=true
+}
+const submit =()=>{
+
+}
+</script>
+
+<template>
+  <div class="flex">
+    <van-nav-bar
+      title="白胚等级维护"
+      left-text="返回"
+      left-arrow
+      right-text="新增"
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+    />
+    <div class="content">
+      <div class="grid-container">
+        <div class="grid-item">编号</div>
+        <div class="grid-item">白胚等级</div>
+        <div class="grid-item">操作</div>
+      </div>
+      <div class="grid-container" v-for="(item,index) in list" :key="index">
+        <div class="grid-item">{{item.name}}</div>
+        <div class="grid-item">{{item.id}}</div>
+        <div
+          class="grid-item"><span style="color: #35a5f7" @click="edit(item)">编辑</span>  &nbsp;&nbsp; <span
+          style="color: red">删除
+        </span></div>
+      </div>
+    </div>
+  </div>
+
+  <van-popup v-model:show="showPop" style="width: 80%" round>
+    <div>
+      <h3 style="text-align: center">新增</h3>
+      <van-cell-group inset>
+        <van-field
+          v-model="form.name"
+          name="白胚等级"
+          label="白胚等级"
+          colon
+          label-width="5em"
+          :rules="[{ required: true, message: '请填写' }]"
+        />
+      </van-cell-group>
+      <div class="a-c">
+        <van-button type="danger" @click="showPop=false">取消</van-button>
+        <van-button type="primary" @click="submit">确认</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<style scoped lang="scss">
+.flex{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  .van-nav-bar{
+    width: 100%;
+  }
+  .content{
+    flex: 1;
+    padding: 0 10px;
+    .grid-container {
+      display: grid;
+      grid-template-columns: 1fr 3fr 2fr;
+      .grid-item{
+        border: 1px solid #f2f2f2;
+        text-align: center;
+        ::v-deep(.van-cell){
+          padding: 0 5px;
+        }
+      }
+    }
+    .card{
+      margin: 10px 15px;
+      padding: 5px;
+      border: 1px solid #02a7f0;
+      border-radius: 10px;
+    }
+  }
+}
+.a-b{
+  display:flex;
+  margin-bottom:10px;
+  ::v-deep(.van-cell){
+    padding: 0;
+  }
+}
+::v-deep(.van-field){
+  font-size: 16px;
+}
+::v-deep(.van-field__control){
+  border-bottom: 1px solid #d7d7d7;
+}
+::v-deep(.van-field__label){
+  text-align: end;
+}
+.a-c{
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin:15px;
+  ::v-deep(.van-button--normal){
+    padding: 5px;
+    height: 30px;
+  }
+}
+</style>

src/views/whiteEmbryo/w-suppliers.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+
+import { ref } from 'vue'
+
+const showPop = ref(false)
+const list= ref([{}] as any[])
+const form = ref({list:[{}]} as any)
+
+const onClickLeft = () =>{
+  history.back()
+}
+const onClickRight=()=>{
+  showPop.value=true
+}
+const edit = (item:any) =>{
+  console.log(item)
+  showPop.value=true
+}
+const submit =()=>{
+
+}
+</script>
+
+<template>
+  <div class="flex">
+    <van-nav-bar
+      title="供应商维护"
+      left-text="返回"
+      left-arrow
+      right-text="新增"
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+    />
+    <div class="content">
+      <div class="grid-container">
+        <div class="grid-item">编号</div>
+        <div class="grid-item">供应商名称</div>
+        <div class="grid-item">分数</div>
+        <div class="grid-item">操作</div>
+      </div>
+      <div class="grid-container" v-for="(item,index) in list" :key="index">
+        <div class="grid-item">{{item.name}}</div>
+        <div class="grid-item">{{item.id}}</div>
+        <div class="grid-item">{{item.id}}</div>
+        <div
+          class="grid-item"><span style="color: #35a5f7" @click="edit(item)">编辑</span>  &nbsp;&nbsp; <span
+          style="color: red">删除
+        </span></div>
+      </div>
+    </div>
+  </div>
+
+  <van-popup v-model:show="showPop" style="width: 80%" round>
+    <div>
+      <h3 style="text-align: center">新增</h3>
+      <van-cell-group inset>
+        <van-field
+          v-model="form.name"
+          name="供应商名称"
+          label="供应商名称"
+          colon
+          class="bot"
+          label-width="6em"
+          :rules="[{ required: true, message: '请填写' }]"
+        />
+        <van-field name="状态" label="状态" colon label-width="6em">
+          <template #input>
+            <van-radio-group v-model="form.type1" direction="horizontal">
+              <van-radio name="1">启用</van-radio>
+              <van-radio name="2">禁用</van-radio>
+            </van-radio-group>
+          </template>
+        </van-field>
+      </van-cell-group>
+      <div class="a-c">
+        <van-button type="danger" @click="showPop=false">取消</van-button>
+        <van-button type="primary" @click="submit">确认</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<style scoped lang="scss">
+.flex{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  .van-nav-bar{
+    width: 100%;
+  }
+  .content{
+    flex: 1;
+    padding: 0 10px;
+    .grid-container {
+      display: grid;
+      grid-template-columns: 1fr 3fr 1.5fr 2fr;
+      .grid-item{
+        border: 1px solid #f2f2f2;
+        text-align: center;
+        ::v-deep(.van-cell){
+          padding: 0 5px;
+        }
+      }
+    }
+    .card{
+      margin: 10px 15px;
+      padding: 5px;
+      border: 1px solid #02a7f0;
+      border-radius: 10px;
+    }
+  }
+}
+.a-b{
+  display:flex;
+  margin-bottom:10px;
+  ::v-deep(.van-cell){
+    padding: 0;
+  }
+}
+::v-deep(.van-field){
+  font-size: 16px;
+}
+.bot{
+  ::v-deep(.van-field__control){
+    border-bottom: 1px solid #d7d7d7;
+  }
+}
+::v-deep(.van-field__label){
+  text-align: end;
+}
+.a-c{
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin:15px;
+  ::v-deep(.van-button--normal){
+    padding: 5px;
+    height: 30px;
+  }
+}
+</style>

src/views/whiteEmbryo/w-warehousing.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import {formatDate} from '@/utils/date.ts'
+import router from '@/router'
+
+const form = ref({data:formatDate(new Date()),list:[{}]} as any)
+const show = ref(false)
+const onSubmit = () =>{
+
+}
+
+const onClickLeft = () =>{
+  router.go(-1);
+}
+const onClickRight=()=>{
+}
+const chooseDate = ()=>{
+  show.value=true
+}
+const onConfirmDate = (val:any) =>{
+  form.value.data = formatDate(val)
+  show.value = false
+}
+
+</script>
+
+<template>
+<div class="flex">
+  <van-nav-bar
+    title="白胚入库"
+    left-text="返回"
+    left-arrow
+    right-text="新增"
+    @click-left="onClickLeft"
+    @click-right="onClickRight"
+  />
+  <van-form @submit="onSubmit">
+    <van-cell-group inset>
+      <van-field
+        v-model="form.data"
+        name="入库日期"
+        label="入库日期"
+        colon
+        class="bor"
+        label-width="5em"
+        readonly
+        @click="chooseDate()"
+        :rules="[{ required: true, message: '请填写' }]"
+      />
+      <van-field
+        v-model="form.gys"
+        name="供应商名"
+        label="供应商名"
+        colon
+        class="bor"
+        label-width="5em"
+        readonly
+        :rules="[{ required: true, message: '请填写' }]"
+      />
+      <van-field
+        v-model="form.mlmc"
+        name="面料名称"
+        label="面料名称"
+        colon
+        class="bor"
+        label-width="5em"
+        readonly
+        :rules="[{ required: true, message: '请填写' }]"
+      />
+      <div class="content">
+        <template v-for="(item,index) in form.list" :key="index">
+          <van-field
+            v-model="item.bpdj"
+            name="白胚等级"
+            label="白胚等级"
+            colon
+            class="bor"
+            label-width="5em"
+            readonly
+            :rules="[{ required: true, message: '请填写' }]"
+          >
+            <template #button>
+              <van-icon name="add" color="red" size="25" @click="form.list.push([])" v-if="index===0"/>
+              <van-icon name="clear" color="red" size="25" @click="form.list.splice(index,1)" v-else/>
+            </template>
+          </van-field>
+          <div class="grid-container">
+            <div class="grid-item">面料编号</div>
+            <div class="grid-item">米数</div>
+            <div class="grid-item">操作</div>
+          </div>
+          <div class="grid-container" v-for="(itemSecond,indexSecond) in item.list" :key="indexSecond">
+            <div class="grid-item">面料编号</div>
+            <div class="grid-item">米数</div>
+            <div class="grid-item">操作</div>
+          </div>
+          <div class="grid-container">
+            <div class="grid-item">
+              <van-button type="primary">扫一扫</van-button>
+            </div>
+            <div class="grid-item"></div>
+            <div class="grid-item"></div>
+          </div>
+        </template>
+      </div>
+
+    </van-cell-group>
+    <div style="margin: 16px;">
+      <van-button round block type="primary" native-type="submit">
+        提交
+      </van-button>
+    </div>
+  </van-form>
+</div>
+  <van-calendar v-model:show="show" @confirm="onConfirmDate" :min-date="new Date(2010, 0, 1)" :max-date="
+  new Date(2050, 0, 31)"/>
+</template>
+
+<style scoped lang="scss">
+.flex{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  .van-nav-bar{
+    width: 100%;
+  }
+  .content{
+    flex: 1;
+    .grid-container {
+      display: grid;
+      grid-template-columns: 2fr 2fr 1fr;
+      .grid-item{
+        border: 1px solid #f2f2f2;
+        text-align: center;
+        ::v-deep(.van-cell){
+          padding: 0 5px;
+        }
+      }
+    }
+  }
+}
+
+::v-deep(.van-field){
+  font-size: 16px;
+}
+.bor{
+  ::v-deep(.van-field__control){
+    border: 1px solid #d7d7d7;
+    text-align: center;
+  }
+}
+::v-deep(.van-button--normal){
+  padding: 5px 8px;
+  height: 30px;
+}
+</style>