新增添加参观者页面

hookehuyr
Commit c358e1a99780b0db47698ab8b4cd485a9c2c5be0 c358e1a9 1 parent a9cc4a8b
Showing 6 changed files with 164 additions and 2 deletions
components.d.ts
package.json
src/App.vue
src/route.js
src/views/addVisitor.vue
yarn.lock
--- a/components.d.ts
View file @c358e1a
+++ b/components.d.ts
View file @c358e1a
@@ -18,6 +18,8 @@ declare module '@vue/runtime-core' {
     VanField: typeof import('vant/es')['Field']
     VanForm: typeof import('vant/es')['Form']
     VanIcon: typeof import('vant/es')['Icon']
+    VanPicker: typeof import('vant/es')['Picker']
+    VanPopup: typeof import('vant/es')['Popup']
     VanRadio: typeof import('vant/es')['Radio']
     VanRadioGroup: typeof import('vant/es')['RadioGroup']
     VanRow: typeof import('vant/es')['Row']
--- a/package.json
View file @c358e1a
+++ b/package.json
View file @c358e1a
@@ -37,6 +37,7 @@
     "vite-plugin-mp": "^1.6.1",
     "vue": "^3.2.36",
     "weixin-js-sdk": "^1.6.0",
+    "xctc-check": "^0.0.2",
     "xijs": "^1.2.6"
   },
   "devDependencies": {
--- a/src/App.vue
View file @c358e1a
+++ b/src/App.vue
View file @c358e1a
 <!--
  * @Date: 2023-06-13 13:26:46
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-15 13:15:13
+ * @LastEditTime: 2024-01-15 17:46:14
  * @FilePath: /xysBooking/src/App.vue
  * @Description: 启动页
 -->
@@ -93,4 +93,9 @@ body {
 .zIndex {
   z-index: 4500 !important;
 }
+
+input::placeholder,
+textarea::placeholder {
+  color: #9C9A9A; /* 设置占位符的颜色 */
+}
 </style>
--- a/src/route.js
View file @c358e1a
+++ b/src/route.js
View file @c358e1a
 /*
  * @Date: 2023-06-13 13:26:46
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-15 16:26:34
+ * @LastEditTime: 2024-01-15 17:40:55
  * @FilePath: /xysBooking/src/route.js
  * @Description: 文件描述
  */
@@ -35,6 +35,13 @@ export default [
     },
   },
   {
+    path: '/addVisitor',
+    component: () => import('@/views/addVisitor.vue'),
+    meta: {
+      title: '添加参观者',
+    },
+  },
+  {
     path: '/auth',
     component: () => import('@/views/auth.vue'),
     meta: {
--- a/src/views/addVisitor.vue 0 → 100644
View file @c358e1a
+++ b/src/views/addVisitor.vue 0 → 100644
View file @c358e1a
+<!--
+ * @Date: 2024-01-15 17:39:29
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-01-15 18:25:20
+ * @FilePath: /xysBooking/src/views/addVisitor.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="add-visitor-page">
+    <div class="input-item">
+      <div>姓名</div>
+      <div>
+        <input type="text" v-model="username" placeholder="请输入参观者真实姓名" @blur="checkUsername">
+      </div>
+    </div>
+    <div class="input-item">
+      <div>证件类型</div>
+      <div @click="idTypeChange">
+        {{ fieldValue }}&nbsp;<van-icon name="arrow-down" />
+      </div>
+    </div>
+    <div class="input-item">
+      <div>证件号码</div>
+      <div>
+        <input type="text" v-model="idCode" placeholder="请输入证件号码" @blur="checkIdCode" maxlength="18" style="width: 100%;">
+      </div>
+    </div>
+    <div style="color:#A67939; font-size: 0.85rem;">
+      <van-icon name="warning-o" />&nbsp;温馨提示：账号实名认证信息一经填写将无法修改
+    </div>
+    <div class="save-wrapper">
+      <div class="save-btn" @click="addVisitor">保存</div>
+    </div>
+
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-picker
+        :columns="columns"
+        @cancel="showPicker = false"
+        @confirm="onConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import xctcCheck from "xctc-check"
+import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
+//import { } from '@/utils/generateModules.js'
+//import { } from '@/utils/generateIcons.js'
+//import { } from '@/composables'
+import { showSuccessToast, showFailToast } from 'vant';
+
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
+
+const username = ref('');
+const idCode = ref('');
+const isError = ref(false);
+
+const checkUsername = () => {
+  let flag = true;
+  if (username.value) {
+
+  } else {
+    showFailToast('参观者名称不能为空');
+    flag = false;
+  }
+  return flag;
+}
+const checkIdCode = () => {
+  const res = xctcCheck.checkIdCard(idCode.value);
+  let flag = true;
+  if (res.status) {
+
+  } else {
+    showFailToast(res.msg);
+    flag = false;
+  }
+  return flag;
+}
+
+const addVisitor = () => {
+  if (checkUsername() && checkIdCode()) {
+    console.warn(0);
+  }
+}
+
+const showPicker = ref(false);
+const idTypeChange = () => {
+  showPicker.value = !showPicker.value;
+}
+const columns = [
+  { text: '身份证', value: '0' },
+  { text: '其他证件', value: '1' },
+];
+const fieldValue = ref('身份证');
+
+const onConfirm = ({ selectedOptions }) => {
+  showPicker.value = false;
+  fieldValue.value = selectedOptions[0].text;
+};
+</script>
+
+<style lang="less" scoped>
+.add-visitor-page {
+  padding: 1rem;
+  position: relative;
+  .input-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #fff;
+    padding: 1rem;
+    border-radius: 8px;
+    margin-bottom: 1rem;
+    input {
+      border: 0;
+      text-align: right;
+    }
+  }
+  .save-wrapper {
+    background-color: #FFF;
+    position: fixed;
+    width: 100vw;
+    bottom: 0;
+    left: 0;
+    height: 5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .save-btn {
+      background-color: #A67939;
+      padding: 0.8rem 8rem;
+      color: #FFF;
+      border-radius: 5px;
+    }
+  }
+}
+</style>
--- a/yarn.lock
View file @c358e1a
+++ b/yarn.lock
View file @c358e1a
@@ -3735,6 +3735,11 @@ wrappy@1:
   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+xctc-check@^0.0.2:
+  version "0.0.2"
+  resolved "https://mirrors.cloud.tencent.com/npm/xctc-check/-/xctc-check-0.0.2.tgz#92df3e52097bfe4d44d6b545d4ca66cfb992cb9d"
+  integrity sha512-+eUeA9N2ST9gFae4SHT+27U2bszSdvqy0uwnAZmej8RHUCoyp8y7Ny1EZao2+ob/shcpuCy6gpxDMoWd2HFhIg==
+
 xijs@^1.2.6:
   version "1.2.6"
   resolved "https://mirrors.cloud.tencent.com/npm/xijs/-/xijs-1.2.6.tgz"