zhsw_wechat/pages/baoxiudj/baoxiudj.wxml

<view class="container4">


  <!-- 返回按钮 -->
  <view class="custom-nav">
    <view class="fixed-back" bindtap="goBack">←</view>
    <view class="nav-title">{{isPreviewMode ? '报修详情' : '报修登记'}}</view>
  </view>

  <!-- 第一个卡片：地址、联系人、联系电话 -->
  <view class="bill-card first-card">
    <view class="bill-row">
      <text>地址</text>
      <textarea auto-height='true' class="bill-row-address" value="{{address}}">
      </textarea>
    </view>
    <view class="divider"></view>
    <view class="bill-row">
      <text>联系人<text class="required" wx:if="{{!isPreviewMode}}">*</text></text>
      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputContact" value="{{contact}}" data-field="contact" disabled="{{isPreviewMode}}" />
    </view>
    <view class="divider"></view>
    <view class="bill-row">
      <text>联系电话<text class="required" wx:if="{{!isPreviewMode}}">*</text></text>
      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputPhone" value="{{phone}}" type="number" maxlength="11" data-field="phone" disabled="{{isPreviewMode}}" />
    </view>
  </view>

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

  <!-- 第三个卡片：故障说明 -->
  <view class="bill-card">
    <view class="card-title">故障说明<text class="required" wx:if="{{!isPreviewMode}}">*</text></view>
    <view class="solid-divider"></view>
    <view class="fault-description">
      <textarea class="input-text" placeholder="请输入描述说明..." placeholder-class="placeholder-style" bindinput="inputDescription" value="{{description}}" data-field="description" disabled="{{isPreviewMode}}"></textarea>
    </view>
    <view class="upload-section">
      <view class="upload-btn-container solid-border" wx:if="{{!isPreviewMode}}">
        <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.tempFilePath}}" mode="aspectFill" bindtap="previewImage" data-index="{{index}}"></image>
            <view class="delete-icon" catchtap="deleteImage" data-index="{{index}}" wx:if="{{!isPreviewMode}}">×</view>
          </view>
        </block>
      </view>
    </view>
    <view class="upload-tip" wx:if="{{imageList.length < 10 && !isPreviewMode}}">
    </view>
  </view>

  <!-- 回复信息卡片，仅在预览模式下显示且有回复内容时 -->
  <view class="bill-card" wx:if="{{isPreviewMode && isReplied}}">
    <view class="bill-rownew">
      <text>回复时间</text>
      <view class="reply-timenew">{{replyTime}}</view>
    </view>
    <view class="solid-divider"></view>
    <view class="card-title">回复说明</view>
    <view class="solid-divider"></view>
    <view class="reply-content">{{replyContent}}</view>
  </view>

  <!-- 提交按钮，仅在非预览模式下显示 -->
  <button class="submit-btn" bindtap="submitForm" wx:if="{{!isPreviewMode}}">提交</button>

  <!-- 报修须知弹窗，仅在非预览模式下显示 -->
  <view class="notification-modal" wx:if="{{showNotification && !isPreviewMode}}">
    <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>