zhsw_wechat/pages/baoxiudj/baoxiudj.wxml

<view class="container4">


  <!-- 返回按钮 -->
  <view class="custom-nav">
    <view bindtap="goBack">
      <image src="/static_file/backcion.png" mode="aspectFit" class="back-icon"></image>
    </view>

    <view class="nav-title">{{isPreviewMode ? '报修详情' : '报修登记'}}</view>
  </view>

  <!-- 第一个卡片：地址、联系人、联系电话 -->
  <view class="bill-card first-card">
    <view class="bill-row">
      <text style="flex: 0 1 30%">地址<text class="required" wx:if="{{!isPreviewMode}}">*</text></text>
      <textarea auto-height='true' class="bill-row-address" value="{{address}}" 
               bindinput="inputAddress" data-field="address" disabled="{{isPreviewMode}}">
      </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>
      <textarea class="input-text" placeholder="请输入描述说明..." placeholder-class="placeholder-style" bindinput="inputDescription" value="{{description}}" data-field="description" disabled="{{isPreviewMode}}"></textarea>
    <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 || item}}" 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}}">
      最多可上传10张图片，单张不超过10M
    </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}}" disabled="{{isSubmitting}}">
    {{isSubmitting ? '提交中...' : '提交'}}
  </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>
  
  <!-- 新增用canvas方法用于图片压缩 -->
  <canvas type="2d" id="compressCanvas" style="position:fixed; left:-9999px; width:300px; height:300px;"></canvas>
</view>