karamay_wx/pages/user/userList/index.wxml

<view class="user-list-container">
  <!-- 联系人列表页面 -->
  <view wx:if="{{!showAddForm}}" class="contact-list-page">
    <!-- 我的参观人标题 -->
    <view class="page-title">
      <text class="title-text">我的参观人</text>
    </view>

    <!-- 联系人列表 -->
    <scroll-view class="contact-list" scroll-y>
      <view wx:for="{{contactList}}" wx:key="index" class="contact-card">
        <view class="contact-info">
          <view class="contact-row">
            <text class="label">姓名</text>
            <text class="value">{{item.name}}</text>
            <view class="edit-btn" bindtap="editContact" data-index="{{index}}">
              <image class="delete-img" src="https://swkz-1332577016.cos.ap-guangzhou.myqcloud.com/imgs/indexPage/icon_delete.png" />
              删除
            </view>
          </view>
          <view class="contact-row">
            <text class="label">证件号</text>
            <text class="value">{{item.idCard}}</text>
          </view>
          <view class="contact-row">
            <text class="label">电话号码</text>
            <text class="value">{{item.phone}}</text>
          </view>
        </view>
      </view>
      <!-- <view class="tips">温馨提示：每个账号最多添加5个常用参观人</view> -->
    </scroll-view>

    <!-- 新增参观人按钮 -->
    <view class="add-button-container">
      <view class="add-visitor-btn" bindtap="showAddVisitor">新增参观人</view>
    </view>
  </view>

  <!-- 新增参观人表单页面 -->
  <view wx:if="{{showAddForm}}" class="add-form-page">
    <!-- 新增参观人标题 -->
    <view class="page-title">
      <text class="title-text">新增参观人</text>
    </view>

    <!-- 新增表单 -->
    <scroll-view class="form-container" scroll-y>
      <view class="visitor-card">
        <view class="visitor-form">
          <view class="form-item">
            <view class="form-label">姓名</view>
            <view class="form-input">
              <input 
                class="bottom-line-input {{newVisitor.nameError ? 'error-line' : ''}}"
                placeholder="请输入您的姓名"
                value="{{newVisitor.name}}"
                bindinput="onNameInput"
                bindblur="validateName"
              />
              <view wx:if="{{newVisitor.nameError}}" class="error-msg">{{newVisitor.nameError}}</view>
            </view>
          </view>

          <view class="form-item">
            <view class="form-label">电话号码</view>
            <view class="form-input">
              <input 
                class="bottom-line-input {{newVisitor.phoneError ? 'error-line' : ''}}"
                placeholder="请输入11位数字"
                value="{{newVisitor.phone}}"
                type="number"
                bindinput="onPhoneInput"
                bindblur="validatePhone"
              />
              <view wx:if="{{newVisitor.phoneError}}" class="error-msg">{{newVisitor.phoneError}}</view>
            </view>
          </view>

          <view class="form-item">
            <view class="form-label">证件类型</view>
            <view class="form-input">
              <picker 
                class="bottom-line-select"
                range="{{idTypes}}"
                value="{{0}}"
                bindchange="onIdTypeChange"
              >
                <view class="picker-text">{{newVisitor.idType}}</view>
              </picker>
            </view>
          </view>

          <view class="form-item">
            <view class="form-label">证件号码</view>
            <view class="form-input">
              <input 
                class="bottom-line-input {{newVisitor.idNumberError ? 'error-line' : ''}}"
                placeholder="请输入18位证件编码"
                value="{{newVisitor.idCard}}"
                bindinput="onIdNumberInput"
                bindblur="validateIdNumber"
              />
              <view wx:if="{{newVisitor.idNumberError}}" class="error-msg">{{newVisitor.idNumberError}}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 确认按钮 -->
    <view class="confirm-button-container">
      <view class="confirm-btn" bindtap="confirmAdd">确认</view>
    </view>
  </view>
</view>