zhsw_wechat/pages/tousujianyi/tousujianyi.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">投诉建议</view>
  </view>

  <!-- 第一个卡片：分类、联系人、联系电话 -->
  <view class="bill-card first-card">
    <view class="bill-row">
      <text>分类</text>
      <view class="radio-group" wx:if="{{!isPreviewMode}}">
        <radio-group bindchange="radioChange">
          <label class="radio">
            <radio value="投诉" checked="{{category === '投诉'}}" />投诉
          </label>
          <label class="radio">
            <radio value="建议" checked="{{category === '建议'}}" />建议
          </label>
        </radio-group>
      </view>
      <view wx:else class="preview-text">{{category || '投诉'}}</view>
    </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">
    <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="{{!isPreviewMode}}">
      最多可上传10张图片，单张不超过10M
    </view>
  </view>

  <!-- 回复信息卡片，仅在预览模式下显示 -->
  <view class="bill-card" wx:if="{{isPreviewMode && replyContent}}">
    <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>
  
  <!-- 的canvas用于图片压缩 -->
  <canvas type="2d" id="compressCanvas" style="position:fixed; left:-9999px; width:300px; height:300px;"></canvas>

</view>