xingque/pages/cfss/components/fakuan-list/fakuan-list.wxml

<!-- components/fakuan-list/fakuan-list.wxml -->
<view class="container">
  <scroll-view scroll-y class="scroll" bindscrolltolower="loadMore">
    <view wx:if="{{ loading && list.length === 0 }}" class="tip">加载中...</view>
    <block wx:for="{{ list }}" wx:key="id">
      <view class="card" bindtap="openDetail" data-item="{{ item }}">
        <view class="card-head">
          <text class="time">{{ item.create_time }}</text>
          <text class="tag {{ item.status_class }}">{{ item.display_status }}</text>
        </view>
        <text class="info">金额：¥{{ item.fakuanjine }}</text>
        <text class="info">理由：{{ item.chufaliyou }}</text>
        <text class="info" wx:if="{{ item.guanliandingdan_id }}">订单：{{ item.guanliandingdan_id }}</text>
      </view>
    </block>

    <!-- ✅ 按钮始终显示，只要列表不为空且没有正在加载 -->
    <view wx:if="{{ list.length > 0 && !loadingMore }}" class="load-more-btn" bindtap="loadMore">
      <text>点击获取更多</text>
    </view>
    <view wx:if="{{ loadingMore }}" class="tip">加载中...</view>
    <view wx:if="{{ !hasMore && list.length > 0 }}" class="tip">—— 没有更多了 ——</view>
    <view wx:if="{{ !loading && list.length === 0 }}" class="empty">暂无罚款记录</view>
  </scroll-view>

  <!-- 详情弹窗 -->
  <view wx:if="{{ showDetail }}" class="modal-mask">
    <view class="modal-panel">
      <view class="modal-head">
        <text class="modal-title">罚款详情</text>
        <view class="modal-close" bindtap="closeDetail">✕</view>
      </view>
      <scroll-view scroll-y class="modal-body">
        <view class="row"><text class="lbl">罚款金额</text><text class="val strong">¥{{ detailItem.fakuanjine }}</text></view>
        <view class="row"><text class="lbl">当前状态</text><text class="tag {{ detailItem.status_class }}">{{ detailItem.display_status }}</text></view>
        <view class="row"><text class="lbl">处罚理由</text><text class="val">{{ detailItem.chufaliyou }}</text></view>
        <view wx:if="{{ detailItem.guanliandingdan_id }}" class="row"><text class="lbl">关联订单</text><text class="val">{{ detailItem.guanliandingdan_id }}</text></view>
        <view wx:if="{{ detailItem.bohuiliyou }}" class="row"><text class="lbl">驳回理由</text><text class="val">{{ detailItem.bohuiliyou }}</text></view>
        <view wx:if="{{ detailItem.shensuliyou }}" class="row"><text class="lbl">申诉理由</text><text class="val">{{ detailItem.shensuliyou }}</text></view>

        <!-- 证据图片 -->
        <view wx:if="{{ detailItem.zhengju_tupian && detailItem.zhengju_tupian.length }}" class="section">
          <text class="sec-title">证据图片</text>
          <view class="img-grid">
            <block wx:for="{{ detailItem.zhengju_tupian }}" wx:key="index">
              <view class="img-box" bindtap="previewImage" data-url="{{ ossImageUrl + item }}">
                <image class="img" src="{{ ossImageUrl + item }}" mode="aspectFill" />
              </view>
            </block>
          </view>
        </view>
        <!-- 申诉图片 -->
        <view wx:if="{{ detailItem.shensu_tupian && detailItem.shensu_tupian.length }}" class="section">
          <text class="sec-title">申诉图片</text>
          <view class="img-grid">
            <block wx:for="{{ detailItem.shensu_tupian }}" wx:key="index">
              <view class="img-box" bindtap="previewImage" data-url="{{ ossImageUrl + item }}">
                <image class="img" src="{{ ossImageUrl + item }}" mode="aspectFill" />
              </view>
            </block>
          </view>
        </view>
      </scroll-view>
      <view class="modal-foot">
        <view wx:if="{{ detailItem.zhuangtai === 1 && !detailItem.bohuiliyou }}" class="btn primary" bindtap="openShensu">申诉</view>
        <view wx:if="{{ detailItem.zhuangtai === 1 || detailItem.zhuangtai === 3 }}" class="btn primary" bindtap="startPay">立即缴纳</view>
        <view class="btn default" bindtap="closeDetail">关闭</view>
      </view>
    </view>
  </view>

  <!-- 申诉弹窗 -->
  <view wx:if="{{ showShensu }}" class="modal-mask">
    <view class="modal-panel">
      <view class="modal-head">
        <text class="modal-title">提交申诉</text>
        <view class="modal-close" bindtap="closeShensu">✕</view>
      </view>
      <scroll-view scroll-y class="modal-body">
        <view class="form-group">
          <text class="sec-title">申诉理由</text>
          <textarea class="textarea" placeholder="请输入申诉理由" value="{{ shensuLiyou }}" bindinput="onShensuInput" maxlength="500" />
          <text class="word-count">{{ shensuLiyou.length }}/500</text>
        </view>
        <view class="form-group">
          <text class="sec-title">上传凭证（最多9张）</text>
          <view class="img-grid">
            <block wx:for="{{ shensuTupian }}" wx:key="index">
              <view class="img-box">
                <image class="img" src="{{ item }}" mode="aspectFill" bindtap="previewLocalImg" data-index="{{ index }}" />
                <view class="img-del" catchtap="deleteShensuImg" data-index="{{ index }}">✕</view>
              </view>
            </block>
            <view wx:if="{{ shensuTupian.length < 9 }}" class="img-add" bindtap="chooseImage">+</view>
          </view>
          <view wx:if="{{ uploading }}" class="progress-box">
            <view class="progress-bar"><view class="progress-inner" style="width: {{ uploadProgressWidth }}"></view></view>
            <text class="progress-text">{{ uploadProgress.current }}/{{ uploadProgress.total }}</text>
          </view>
        </view>
      </scroll-view>
      <view class="modal-foot">
        <view class="btn default" bindtap="closeShensu">取消</view>
        <view class="btn primary" bindtap="submitShensu">提交申诉</view>
      </view>
    </view>
  </view>

  <!-- 支付组件（缴纳罚款） -->
  <fakuan-pay
    visible="{{ showPay }}"
    fadan="{{ payFadan }}"
    bind:close="onPayClose"
    bind:success="onPaySuccess"
  />
</view>