bookKeepingWx/pages/add/add.wxml

<view class="container">
  <!-- 类型选择 -->
  <view class="type-selector">
    <view class="type-btn {{type === 'out' ? 'active' : ''}}" bindtap="setType" data-type="out">
      <text class="iconfont icon-minus"></text>
      <text>支出</text>
    </view>
    <view class="type-btn {{type === 'in' ? 'active' : ''}}" bindtap="setType" data-type="in">
      <text class="iconfont icon-plus"></text>
      <text>收入</text>
    </view>
  </view>
  
  <!-- 金额输入 -->
  <view class="amount-input">
    <text class="currency-symbol">¥</text>
    <input 
      type="number" 
      placeholder="0.00" 
      value="{{amount}}"
      bindinput="onAmountChange"
      focus="true"
      maxlength="10"
    />
  </view>
  
  <!-- 分类选择 -->
  <view class="category-section" wx:if="{{type === 'in' }}">
    <text class="section-title">选择分类</text>
    <view class="category-grid">
      <view 
        wx:for="{{filteredCategories}}" 
        wx:key="id"
        class="category-item {{selectedCategoryId === item.id ? 'selected' : ''}}"
        bindtap="selectCategory"
        data-id="{{item.id}}"
      >
        <text class="iconfont icon-{{item.icon}}"></text>
        <text>{{item.classificationName}}</text>
      </view>
    </view>
  </view>

<!-- 分类选择2 -->
<!-- 分类选择触发按钮 -->
<view class="category-trigger" bindtap="showCategoryPopup" wx:if="{{type === 'out' }}">
  <text class="section-title">选择分类</text>
  <view class="selected-value">
    <text>{{selectedCategoryName || '请选择分类'}}</text>
    <text class="iconfont icon-arrow-down"></text>
  </view>
</view>

<!-- 弹窗遮罩层 -->
<view class="category-mask" wx:if="{{showPopup}}" bindtap="hideCategoryPopup"></view>

<!-- 弹窗容器 -->
<view class="category-popup" wx:if="{{showPopup}}">
  <view class="popup-header">
    <text class="popup-title">选择分类</text>
    <text class="iconfont icon-close" bindtap="hideCategoryPopup"></text>
  </view>
  
  <view class="popup-content">
    <!-- 一级分类列表 -->
    <view class="first-level-list">
      <view 
        wx:for="{{firstLevelCategories}}" 
        wx:key="id"
        class="first-level-item {{selectedFirstLevelId === item.id ? 'selected' : ''}}"
        bindtap="selectFirstLevel"
        data-id="{{item.id}}"
      >
        <text class="iconfont icon-{{item.icon}}"></text>
        <text>{{item.classificationName}}</text>
      </view>
    </view>
    
    <!-- 二级分类列表 -->
    <view class="second-level-list">
      <view wx:if="{{!selectedFirstLevelId}}" class="no-selection">
        请先选择一级分类
      </view>
      
      <view 
        wx:for="{{filteredSecondLevelCategories}}" 
        wx:key="id"
        class="second-level-item {{selectedSecondLevelId === item.id ? 'selected' : ''}}"
        bindtap="selectSecondLevel"
        data-id="{{item.id}}"
        data-name="{{item.classificationName}}"
      >
        {{item.classificationName}}
        <text class="iconfont icon-check" wx:if="{{selectedSecondLevelId === item.id}}"></text>
      </view>
    </view>
  </view>
  
  <view class="popup-footer">
    <button class="confirm-btn" bindtap="confirmSelection" disabled="{{!selectedSecondLevelId}}">
      确认选择
    </button>
  </view>
</view>
    
    
    


  
  <!-- 备注 -->
  <view class="note-section">
    <text class="section-title">备注 (可选)</text>
    <input 
      type="text" 
      placeholder="添加备注信息" 
      value="{{note}}"
      bindinput="onNoteChange"
      maxlength="50"
    />
  </view>
  
  <!-- 日期选择 -->
  <view class="date-section">
    <text class="section-title">日期</text>
    <picker mode="date" value="{{useDate}}" start="2020-01-01" end="{{maxDate}}" bindchange="onDateChange">
      <view class="date-picker">
        <text class="iconfont icon-calendar"></text>
        <text>{{useDate}}</text>
      </view>
    </picker>
  </view>
  
  <!-- 保存按钮 -->
  <button 
    class="save-btn" 
    bindtap="saveRecord"
    disabled="{{!amount || (type === 'in'&&!selectedCategoryId) || (type === 'out'&&!selectedSecondLevelId)}}"
  >
    保存记录
  </button>
</view>