feat(添加参观者): 重构表单界面并添加证件类型选择功能

重构添加参观者页面表单布局，使用卡片式设计提升用户体验添加证件类型选择器，支持身份证和其他证件类型移除历史参观者列表功能以简化页面添加表单验证和温馨提示信息

feat(添加参观者): 重构表单界面并添加证件类型选择功能
重构添加参观者页面表单布局，使用卡片式设计提升用户体验添加证件类型选择器，支持身份证和其他证件类型移除历史参观者列表功能以简化页面添加表单验证和温馨提示信息
hookehuyr
Commit f0f7d848c9913575873571f1fa36f31ce0c61074 f0f7d848 1 parent 7592f649
Showing 2 changed files with 140 additions and 93 deletions
components.d.ts
src/pages/addVisitor/index.vue
--- a/components.d.ts
View file @f0f7d84
+++ b/components.d.ts
View file @f0f7d84
@@ -11,9 +11,8 @@ declare module 'vue' {
     NutCheckbox: typeof import('@nutui/nutui-taro')['Checkbox']
     NutCheckboxGroup: typeof import('@nutui/nutui-taro')['CheckboxGroup']
     NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker']
-    NutForm: typeof import('@nutui/nutui-taro')['Form']
-    NutFormItem: typeof import('@nutui/nutui-taro')['FormItem']
     NutInput: typeof import('@nutui/nutui-taro')['Input']
+    NutPicker: typeof import('@nutui/nutui-taro')['Picker']
     NutPopup: typeof import('@nutui/nutui-taro')['Popup']
     OfflineQrCode: typeof import('./src/components/offlineQrCode.vue')['default']
     Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
--- a/src/pages/addVisitor/index.vue
View file @f0f7d84
+++ b/src/pages/addVisitor/index.vue
View file @f0f7d84
 <!--
  * @Date: 2024-01-15 16:35:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-06 23:28:40
+ * @LastEditTime: 2026-01-07 22:54:19
  * @FilePath: /xyxBooking-weapp/src/pages/addVisitor/index.vue
  * @Description: 添加参观者
 -->
 <template>
     <view class="add-visitor-page">
-        <nut-form>
+        <view class="content">
-            <nut-form-item label="姓名">
+            <view class="form-card">
-                <nut-input v-model="name" placeholder="请输入参观者姓名" type="text" />
+                <view class="form-row">
-            </nut-form-item>
+                    <view class="label">姓名</view>
-            <nut-form-item label="证件类型">
+                    <nut-input v-model="name" class="field-input" placeholder="请输入参观者真实姓名" type="text" input-align="right" :border="false" />
-                <view style="padding: 20rpx 0;">身份证</view>
+                </view>
-            </nut-form-item>
+                <view class="form-row">
-            <nut-form-item label="证件号">
+                    <view class="label">证件类型</view>
-                <nut-input v-model="id_number" placeholder="请输入参观者证件号" type="idcard" />
+                    <view class="field-value picker-value" @tap="open_id_type_picker">
-            </nut-form-item>
+                        <text>{{ id_type_label }}</text>
-        </nut-form>
+                        <text class="picker-arrow">›</text>
-
+                    </view>
-        <view style="padding: 32rpx;">
+                </view>
-            <nut-button type="primary" block color="#A67939" @click="save">保存</nut-button>
+                <view class="form-row">
+                    <view class="label">证件号码</view>
+                    <nut-input v-model="id_number" class="field-input" placeholder="请输入证件号码" :type="id_number_type" input-align="right" :border="false" />
+                </view>
             </view>
-        <view v-if="visitorList.length" class="history-list">
+            <view class="tip">
-            <view class="title">历史参观者</view>
+                <IconFont name="tips" size="14" color="#C7A46D" />
-            <view v-for="(item, index) in visitorList" :key="index" class="item">
+                <text class="tip-text">温馨提示：账号实名认证信息一经填写将无法修改</text>
-                <view class="info">
-                    <view class="name">{{ item.name }}</view>
-                    <view class="id">{{ formatId(item.id_number) }}</view>
             </view>
-                <view class="action" @tap="delVisitor(item.id)">删除</view>
         </view>
+
+        <view class="footer">
+            <view class="save-btn" @tap="save">保存</view>
         </view>
+
+        <nut-popup v-model:visible="show_id_type_picker" position="bottom" safe-area-inset-bottom>
+            <nut-picker
+                v-model="id_type_picker_value"
+                :columns="id_type_columns"
+                title="选择证件类型"
+                @confirm="on_id_type_confirm"
+                @cancel="show_id_type_picker = false"
+            ></nut-picker>
+        </nut-popup>
     </view>
 </template>
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
-import Taro, { useDidShow } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
-import { personListAPI, addPersonAPI, delPersonAPI } from '@/api/index'
+import { addPersonAPI } from '@/api/index'
+import { IconFont } from '@nutui/icons-vue-taro'
 const name = ref('');
 const id_number = ref('');
-const visitorList = ref([]);
+const show_id_type_picker = ref(false);
+const id_type_options = [
+    { label: '身份证', value: 1 },
+    { label: '其他', value: 3 }
+];
+const id_type = ref(id_type_options[0].value);
+const id_type_picker_value = ref([String(id_type.value)]);
+
+const id_type_columns = computed(() => {
+    return id_type_options.map(item => ({
+        text: item.label,
+        value: String(item.value)
+    }));
+});
+const id_type_label = computed(() => {
+    return id_type_options.find(item => item.value === id_type.value)?.label || id_type_options[0].label;
+});
+const id_number_type = computed(() => (id_type.value === 1 ? 'idcard' : 'text'));
+
+const open_id_type_picker = () => {
+    id_type_picker_value.value = [String(id_type.value)];
+    show_id_type_picker.value = true;
+}
+
+const on_id_type_confirm = ({ selectedValue }) => {
+    const value = selectedValue?.[0];
+    id_type.value = Number(value) || 1;
+    show_id_type_picker.value = false;
+}
 // 身份证校验
 const checkIDCard = (idcode) => {
@@ -51,31 +92,16 @@ const checkIDCard = (idcode) => {
     return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(idcode);
 }
-function replaceMiddleCharacters(inputString) {
-    if (!inputString || inputString.length < 15) {
-        return inputString;
-    }
-    const start = Math.floor((inputString.length - 8) / 2);
-    const end = start + 8;
-    const replacement = '*'.repeat(8);
-    return inputString.substring(0, start) + replacement + inputString.substring(end);
-}
-
-const formatId = (id) => replaceMiddleCharacters(id);
-
-const loadList = async () => {
-    const { code, data } = await personListAPI({});
-    if (code) {
-        visitorList.value = data || [];
-    }
-}
-
 const save = async () => {
     if (!name.value) {
         Taro.showToast({ title: '请输入姓名', icon: 'none' });
         return;
     }
-    if (!checkIDCard(id_number.value)) {
+    if (!id_number.value) {
+        Taro.showToast({ title: '请输入证件号码', icon: 'none' });
+        return;
+    }
+    if (id_type.value === 1 && !checkIDCard(id_number.value)) {
         Taro.showToast({ title: '请输入正确的身份证号', icon: 'none' });
         return;
     }
@@ -83,7 +109,7 @@ const save = async () => {
     Taro.showLoading({ title: '保存中' });
     const { code, msg } = await addPersonAPI({
         name: name.value,
-        id_type: 1, // 身份证
+        id_type: id_type.value,
         id_number: id_number.value
     });
     Taro.hideLoading();
@@ -92,30 +118,11 @@ const save = async () => {
         Taro.showToast({ title: '添加成功' });
         name.value = '';
         id_number.value = '';
-        loadList();
-        // 自动返回上一页？ H5 没有自动返回
         Taro.navigateBack();
     } else {
         Taro.showToast({ title: msg || '添加失败', icon: 'none' });
     }
 }
-
-const delVisitor = async (id) => {
-    const { confirm } = await Taro.showModal({ title: '提示', content: '确定删除该参观者吗？' });
-    if (confirm) {
-        const { code, msg } = await delPersonAPI({ person_id: id });
-        if (code) {
-            Taro.showToast({ title: '删除成功' });
-            loadList();
-        } else {
-            Taro.showToast({ title: msg || '删除失败', icon: 'none' });
-        }
-    }
-}
-
-useDidShow(() => {
-    loadList();
-})
 </script>
 <style lang="less">
@@ -124,48 +131,89 @@ useDidShow(() => {
     background-color: #F6F6F6;
     padding-top: 2rpx;
-    .history-list {
+    .content {
-        margin-top: 32rpx;
-        background-color: #FFF;
         padding: 32rpx;
+        padding-bottom: 220rpx;
+    }
-        .title {
+    .form-card {
-            font-size: 32rpx;
+        background-color: #FFF;
-            color: #333;
+        border-radius: 16rpx;
-            margin-bottom: 32rpx;
+        overflow: hidden;
-            border-left: 6rpx solid #A67939;
-            padding-left: 16rpx;
     }
-        .item {
+    .form-row {
         display: flex;
-            justify-content: space-between;
         align-items: center;
-            padding: 32rpx 0;
+        padding: 0 32rpx;
-            border-bottom: 2rpx solid #EEE;
+        height: 112rpx;
-            &:last-child {
+        &:not(:last-child) {
-                border-bottom: none;
+            border-bottom: 2rpx solid #F2F2F2;
         }
-            .info {
+        .label {
-                .name {
+            width: 160rpx;
-                    font-size: 32rpx;
             color: #333;
-                    margin-bottom: 10rpx;
+            font-size: 30rpx;
+        }
+
+        .field-value {
+            flex: 1;
+            text-align: right;
+            color: #333;
+            font-size: 30rpx;
+        }
+
+        .field-input {
+            flex: 1;
+        }
+
+        .picker-value {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
         }
-                .id {
+        .picker-arrow {
-                    font-size: 29rpx;
+            margin-left: 10rpx;
-                    color: #999;
+            color: #BBB;
+            font-size: 28rpx;
         }
     }
-            .action {
+    .tip {
-                color: #FF0000;
+        margin-top: 28rpx;
-                font-size: 29rpx;
+        display: flex;
+        align-items: center;
+        color: #C7A46D;
+        font-size: 24rpx;
+
+        .tip-text {
+            margin-left: 10rpx;
         }
     }
+
+    .footer {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
+        background-color: #F6F6F6;
+    }
+
+    .save-btn {
+        width: 686rpx;
+        height: 96rpx;
+        background-color: #A67939;
+        border-radius: 12rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #FFF;
+        font-size: 34rpx;
+        font-weight: 600;
     }
 }
 </style>