genealogy-min-program/pages/add_member/add_member.wxml

<view class="container">
  <!-- 页面标题 -->
  <view class="page-header">
    <text class="page-title">录入新成员</text>
  </view>

  <!-- 表单内容 -->
  <view class="form-container">
    <!-- 核心信息 -->
    <view class="section">
      <view class="section-title">核心信息</view>
      
      <view class="form-item">
        <view class="form-label">
          <text class="label-text">姓名（繁体）</text>
          <text class="required">*</text>
        </view>
        <input 
          class="form-input" 
          placeholder="请输入姓名（繁体）" 
          value="{{formData.name}}"
          bindinput="onNameInput"
          confirm-type="next"
        />
      </view>

      <view class="form-item">
        <view class="form-label">姓名（简体）</view>
        <input 
          class="form-input" 
          placeholder="请输入姓名（简体）" 
          value="{{formData.simplified_name}}"
          bindinput="onSimplifiedNameInput"
          confirm-type="next"
        />
      </view>

      <view class="form-item">
        <view class="form-label">
          <text class="label-text">性别</text>
          <text class="required">*</text>
        </view>
        <view class="radio-group">
          <view 
            class="radio-item {{formData.sex === '1' ? 'active' : ''}}" 
            bindtap="selectSex" 
            data-value="1"
          >
            <view class="radio-circle"></view>
            <text class="radio-text">男</text>
          </view>
          <view 
            class="radio-item {{formData.sex === '2' ? 'active' : ''}}" 
            bindtap="selectSex" 
            data-value="2"
          >
            <view class="radio-circle"></view>
            <text class="radio-text">女</text>
          </view>
        </view>
      </view>

      <view class="form-item">
        <view class="form-label">
          <text class="label-text">出生日期</text>
          <text class="required">*</text>
        </view>
        <view class="date-picker">
          <picker mode="date" value="{{formData.birthday}}" bindchange="onBirthdayChange">
            <view class="picker-content">
              <text class="picker-text">{{formData.birthday || '请选择出生日期'}}</text>
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <view class="form-label">堂内排行</view>
        <input 
          class="form-input" 
          placeholder="如：长子、次子等" 
          value="{{formData.family_rank}}"
          bindinput="onFamilyRankInput"
          confirm-type="next"
        />
      </view>

      <view class="form-item">
        <view class="form-label">世系世代</view>
        <input 
          class="form-input" 
          placeholder="如：衢州第二十九代" 
          value="{{formData.name_word_generation}}"
          bindinput="onGenerationInput"
          confirm-type="next"
        />
      </view>
    </view>

    <!-- 状态信息 -->
    <view class="section">
      <view class="section-title">状态信息</view>
      
      <view class="form-item">
        <view class="form-label">是否过世</view>
        <picker mode="selector" range="{{isPassAwayOptions}}" bindchange="onIsPassAwayChange">
          <view class="picker-content">
            <text class="picker-text">{{isPassAwayOptions[formData.is_pass_away] || '请选择'}}</text>
          </view>
        </picker>
      </view>

      <view class="form-item">
        <view class="form-label">婚姻状况</view>
        <picker mode="selector" range="{{maritalStatusOptions}}" bindchange="onMaritalStatusChange">
          <view class="picker-content">
            <text class="picker-text">{{maritalStatusOptions[formData.marital_status] || '请选择'}}</text>
          </view>
        </picker>
      </view>
    </view>

    <!-- 关系信息 -->
    <view class="section">
      <view class="section-title">关系信息</view>

      <view class="form-item">
        <view class="form-label"><text class="label-text">关联成员</text></view>
        <view class="relation-select-row">
          <view class="relation-select {{selectedMemberName ? 'selected' : ''}}" bindtap="selectRelatedMember">
            <text class="relation-text">{{selectedMemberName || '点击搜索并选择关联成员'}}</text>
            <text class="relation-arrow">›</text>
          </view>
          <view class="relation-clear" wx:if="{{selectedMemberName}}" bindtap="clearSelectedMember">✕</view>
        </view>
      </view>

      <view class="form-item">
        <view class="form-label"><text class="label-text">关系类型</text></view>
        <picker mode="selector" range="{{relationTypeOptions}}" bindchange="onRelationTypeChange">
          <view class="picker-content">
            <text class="picker-text">{{relationTypeOptions[formData.relation_type] || '请选择关系类型'}}</text>
            <text class="relation-arrow">›</text>
          </view>
        </picker>
      </view>

      <view class="form-item">
        <view class="form-label"><text class="label-text">子类型</text></view>
        <picker mode="selector" range="{{subRelationTypeOptions}}" bindchange="onSubRelationTypeChange">
          <view class="picker-content">
            <text class="picker-text">{{subRelationTypeOptions[formData.sub_relation_type] || '请选择子类型'}}</text>
            <text class="relation-arrow">›</text>
          </view>
        </picker>
      </view>
    </view>

    <!-- 其他信息 -->
    <view class="section">
      <view class="section-title">其他信息</view>
      
      <view class="form-item">
        <view class="form-label">曾用名</view>
        <input 
          class="form-input" 
          placeholder="请输入曾用名" 
          value="{{formData.former_name}}"
          bindinput="onFormerNameInput"
          confirm-type="next"
        />
      </view>

      <view class="form-item">
        <view class="form-label">手机号</view>
        <input 
          class="form-input" 
          placeholder="请输入手机号" 
          value="{{formData.phone}}"
          bindinput="onPhoneInput"
          confirm-type="next"
        />
      </view>

      <view class="form-item">
        <view class="form-label">备注</view>
        <textarea 
          class="form-textarea" 
          placeholder="请输入备注信息" 
          value="{{formData.notes}}"
          bindinput="onNotesInput"
        />
      </view>
    </view>
  </view>

  <!-- 提交按钮 -->
  <view class="submit-section">
    <button class="submit-btn" bindtap="submitForm">确认录入</button>
  </view>

  <!-- 同名成员弹窗 -->
  <view class="modal-overlay" wx:if="{{showDuplicateModal}}" bindtap="closeDuplicateModal">
    <view class="modal-content" catchtap="stopPropagation">
      <view class="modal-header">
        <text class="modal-title">检测到同名成员</text>
        <view class="modal-close" bindtap="closeDuplicateModal">×</view>
      </view>
      <view class="modal-body">
        <view class="duplicate-list">
          <view 
            class="duplicate-item" 
            wx:for="{{duplicateMembers}}" 
            wx:key="id"
            bindtap="viewMemberDetail"
            data-member="{{item}}"
          >
            <view class="duplicate-info">
              <text class="duplicate-name">{{item.name}}{{item.simplified_name ? '(' + item.simplified_name + ')' : ''}}</text>
              <text class="duplicate-detail">{{item.name_word_generation || '暂无世代信息'}}</text>
            </view>
            <text class="duplicate-arrow">›</text>
          </view>
        </view>
      </view>
      <view class="modal-footer">
        <button class="modal-btn cancel-btn" bindtap="closeDuplicateModal">继续录入</button>
        <button class="modal-btn confirm-btn" bindtap="abortEntry">放弃录入</button>
      </view>
    </view>
  </view>

  <!-- 关联成员搜索弹层 -->
  <view class="modal-overlay" wx:if="{{showMemberSearch}}" bindtap="closeMemberSearch">
    <view class="modal-content search-modal" catchtap="stopPropagation">
      <view class="modal-header">
        <text class="modal-title">搜索关联成员</text>
        <view class="modal-close" bindtap="closeMemberSearch">×</view>
      </view>
      <view class="search-bar-wrap">
        <input
          class="search-input"
          placeholder="输入姓名搜索"
          value="{{memberSearchKeyword}}"
          bindinput="onMemberSearchInput"
          confirm-type="search"
          bindconfirm="doMemberSearch"
          focus="{{showMemberSearch}}"
        />
        <view class="search-btn" bindtap="doMemberSearch">搜索</view>
      </view>
      <view class="search-tips" wx:if="{{!memberSearchLoading && memberSearchResults.length === 0 && memberSearchKeyword}}">
        <text>未找到匹配成员，请尝试其他关键词</text>
      </view>
      <view class="search-tips" wx:if="{{!memberSearchLoading && memberSearchResults.length === 0 && !memberSearchKeyword}}">
        <text>请输入成员姓名进行搜索</text>
      </view>
      <view class="search-loading" wx:if="{{memberSearchLoading}}">
        <text>搜索中...</text>
      </view>
      <scroll-view scroll-y class="search-results" wx:if="{{memberSearchResults.length > 0}}">
        <view
          class="search-result-item"
          wx:for="{{memberSearchResults}}"
          wx:key="id"
        >
          <!-- 左侧信息区 -->
          <view class="result-info">
            <view class="result-name-row">
              <text class="result-name">{{item.name}}</text>
              <text class="result-simplified" wx:if="{{item.simplified_name}}">（{{item.simplified_name}}）</text>
            </view>
            <view class="result-meta-row">
              <text class="result-id">ID: {{item.id}}</text>
              <text class="result-sep"> | </text>
              <text class="result-sex">{{item.sex === 1 ? '男' : item.sex === 2 ? '女' : '未知'}}</text>
            </view>
            <view class="result-meta-row" wx:if="{{item.name_word_generation}}">
              <text class="result-meta-label">世系世代: </text>
              <text class="result-meta-val">{{item.name_word_generation}}</text>
            </view>
            <view class="result-meta-row" wx:if="{{item.father_name}}">
              <text class="result-meta-label">{{item.father_relation_type === 2 ? '母亲' : '父亲'}}: </text>
              <text class="result-meta-val">{{item.father_name}}{{item.father_simplified_name ? ' (' + item.father_simplified_name + ')' : ''}}</text>
              <text class="result-meta-gen" wx:if="{{item.father_generation}}"> | 世系世代: {{item.father_generation}}</text>
            </view>
          </view>
          <!-- 右侧按钮区 -->
          <view class="result-actions">
            <view class="result-select-btn" catchtap="confirmSelectMember" data-member="{{item}}">选择</view>
            <view class="result-detail-btn" catchtap="viewMemberDetail" data-member="{{item}}">详情</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>

  <!-- 成员详情弹窗 -->
  <view class="modal-overlay" wx:if="{{showMemberDetailModal}}" bindtap="closeMemberDetailModal">
    <view class="modal-content detail-modal" catchtap="stopPropagation">
      <view class="modal-header">
        <view class="detail-modal-title-wrap">
          <text class="modal-title">{{selectedMemberDetail.name}}</text>
          <text class="detail-modal-sub" wx:if="{{selectedMemberDetail.simplified_name}}">（{{selectedMemberDetail.simplified_name}}）</text>
        </view>
        <view class="modal-close" bindtap="closeMemberDetailModal">×</view>
      </view>

      <scroll-view scroll-y class="detail-scroll" wx:if="{{selectedMemberDetail}}">

        <!-- 基本信息 -->
        <view class="detail-group-title">基本信息</view>
        <view class="detail-section">
          <view class="detail-row">
            <text class="detail-label">ID</text>
            <text class="detail-value">{{selectedMemberDetail.id}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">性别</text>
            <text class="detail-value">{{selectedMemberDetail.sex === 1 ? '男' : selectedMemberDetail.sex === 2 ? '女' : '未知'}}</text>
          </view>
          <view class="detail-row" wx:if="{{selectedMemberDetail.birthday_date}}">
            <text class="detail-label">出生日期</text>
            <text class="detail-value">{{selectedMemberDetail.birthday_date}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">生存状态</text>
            <text class="detail-value">{{selectedMemberDetail.is_pass_away === 1 ? '已故' : '健在'}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">婚姻状况</text>
            <text class="detail-value">{{selectedMemberDetail.marital_status === 1 ? '未婚' : selectedMemberDetail.marital_status === 2 ? '已婚' : selectedMemberDetail.marital_status === 3 ? '离异/丧偶' : '未知'}}</text>
          </view>
          <view class="detail-row" wx:if="{{selectedMemberDetail.former_name}}">
            <text class="detail-label">曾用名</text>
            <text class="detail-value">{{selectedMemberDetail.former_name}}</text>
          </view>
          <view class="detail-row" wx:if="{{selectedMemberDetail.phone}}">
            <text class="detail-label">手机号</text>
            <text class="detail-value">{{selectedMemberDetail.phone}}</text>
          </view>
        </view>

        <!-- 家谱信息 -->
        <view class="detail-group-title">家谱信息</view>
        <view class="detail-section">
          <view class="detail-row" wx:if="{{selectedMemberDetail.name_word_generation}}">
            <text class="detail-label">世系世代</text>
            <text class="detail-value">{{selectedMemberDetail.name_word_generation}}</text>
          </view>
          <view class="detail-row" wx:if="{{selectedMemberDetail.family_rank}}">
            <text class="detail-label">堂内排行</text>
            <text class="detail-value">{{selectedMemberDetail.family_rank}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">录入来源</text>
            <text class="detail-value detail-source-{{selectedMemberDetail.data_source}}">{{selectedMemberDetail.data_source === 'miniprogram' ? '小程序录入' : selectedMemberDetail.data_source === 'pdf_ai' ? 'PDF识别' : '后台录入'}}</text>
          </view>
        </view>

        <!-- 亲属关系 -->
        <view class="detail-group-title" wx:if="{{selectedMemberDetail.parents && selectedMemberDetail.parents.length > 0}}">父母</view>
        <view class="detail-section" wx:if="{{selectedMemberDetail.parents && selectedMemberDetail.parents.length > 0}}">
          <view class="detail-row" wx:for="{{selectedMemberDetail.parents}}" wx:key="id">
            <text class="detail-label">{{item.relation_label}}</text>
            <text class="detail-value">{{item.name}}{{item.simplified_name ? ' (' + item.simplified_name + ')' : ''}}</text>
          </view>
        </view>

        <view class="detail-group-title" wx:if="{{selectedMemberDetail.children && selectedMemberDetail.children.length > 0}}">子女（{{selectedMemberDetail.children.length}}人）</view>
        <view class="detail-section" wx:if="{{selectedMemberDetail.children && selectedMemberDetail.children.length > 0}}">
          <view class="detail-children-list">
            <view class="detail-child-item" wx:for="{{selectedMemberDetail.children}}" wx:key="id">
              <text class="child-sex-dot sex-dot-{{item.sex}}">●</text>
              <text class="child-name">{{item.name}}{{item.simplified_name ? ' (' + item.simplified_name + ')' : ''}}</text>
              <text class="child-gen" wx:if="{{item.name_word_generation}}"> · {{item.name_word_generation}}</text>
            </view>
          </view>
        </view>

        <!-- 备注 -->
        <view wx:if="{{selectedMemberDetail.notes}}">
          <view class="detail-group-title">备注</view>
          <view class="detail-notes">{{selectedMemberDetail.notes}}</view>
        </view>

      </scroll-view>

      <view class="modal-footer">
        <button class="modal-btn cancel-btn" bindtap="closeMemberDetailModal">关闭</button>
        <button class="modal-btn confirm-btn" bindtap="selectFromDetail">选择此人</button>
      </view>
    </view>
  </view>
</view>