zhsw_wechat/pages/baoxiudj/baoxiudj.wxml

<view class="container4">
  

  <!-- 返回按钮 -->
  <view class="custom-nav">
    <view class="fixed-back" bindtap="goBack">←</view>
    <view class="nav-title">报修登记</view>
  </view>

  <!-- 第一个卡片：地址、联系人、联系电话 -->
  <view class="bill-card first-card">
    <view class="bill-row">
      <text>地址</text>
      <text class="bill-row-address">{{address}}</text>
    </view>
    <view class="divider"></view>
    <view class="bill-row">
      <text>联系人</text>
      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputContact" value="{{contact}}" />
    </view>
    <view class="divider"></view>
    <view class="bill-row">
      <text>联系电话</text>
      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputPhone" value="{{phone}}" type="number" maxlength="11" />
    </view>
  </view>

  <!-- 第二个卡片：报修类型 -->
  <view class="bill-card" bindtap="showRepairTypeSelector">
    <view class="bill-row">
      <text>报修类型</text>
      <view class="selector-value">
        <text class="{{repairType ? 'input-text' : 'placeholder-style'}}">{{repairType || '请选择'}}</text>
        <text class="arrow">></text>
      </view>
    </view>
  </view>

  <!-- 第三个卡片：故障说明 -->
  <view class="bill-card">
    <view class="card-title">故障说明</view>
    <view class="solid-divider"></view>
    <view class="fault-description">
      <textarea class="input-text" placeholder="请输入描述说明..." placeholder-class="placeholder-style" bindinput="inputDescription" value="{{description}}"></textarea>
    </view>
    <view class="upload-section">
      <view class="upload-btn-container solid-border">
        <view class="upload-btn" bindtap="chooseImage">
          <view class="plus-icon">+</view>
        </view>
      </view>
      <view class="image-preview" wx:if="{{imageList.length > 0}}">
        <block wx:for="{{imageList}}" wx:key="index">
          <view class="image-item">
            <image src="{{item}}" mode="aspectFill" bindtap="previewImage" data-index="{{index}}"></image>
            <view class="delete-icon" catchtap="deleteImage" data-index="{{index}}">×</view>
          </view>
        </block>
      </view>
    </view>
    <view class="upload-tip" wx:if="{{imageList.length < 10}}">
    </view>
  </view>

  <!-- 提交按钮 -->
  <view class="submit-btn" bindtap="submitRepair">提交</view>
  
  <!-- 报修须知弹窗 -->
  <view class="notification-modal" wx:if="{{showNotification}}">
    <view class="notification-content">
      <view class="notification-title">报修须知</view>
      <view class="notification-divider"></view>
      <view class="notification-list">
        <view class="notification-item">1. 进水表前管线问题报修不涉及费用</view>
        <view class="notification-item">2. 进水表后管线问题属于用户管辖问题，若维修会产生费用。</view>
        <view class="notification-item">3. 更换水表和更换阀门等问题将收取服务费</view>
      </view>
      <view class="notification-btn {{countDown > 0 ? 'disabled-btn' : ''}}" bindtap="closeNotification">
        知道了{{countDown > 0 ? '(' + countDown + 's)' : ''}}
      </view>
    </view>
  </view>
</view>