health.applet/miniprogram/module/order/pages/refund-processing/refund-processing.wxml

<t-navbar title="{{pageTitle}}" left-arrow />

<scroll-view class="page-container" scroll-y>
  <!-- 头部倒计时区域 -->
  <!-- 头部状态区域 -->
  <view class="header-section header-{{refundState}}">
    <!-- 处理中状态 -->
    <block wx:if="{{refundState === 'processing'}}">
      <view class="status-title">商家处理中</view>
      <view class="status-sub">已提交</view>
      
      <view class="countdown-container">
        <view class="time-block">{{hours}}</view>
        <view class="time-colon">:</view>
        <view class="time-block">{{minutes}}</view>
        <view class="time-colon">:</view>
        <view class="time-block">{{seconds}}</view>
      </view>
    </block>

    <!-- 已同意状态 -->
    <block wx:elif="{{refundState === 'approved'}}">
      <view class="approved-title">同意退款</view>
      <view class="approved-time">{{refundDetail.applyTime}}</view>

      <view class="approved-content" wx:if="{{negotiateTitle || negotiateContent}}">
        <view class="content-row" wx:if="{{negotiateTitle}}">{{negotiateTitle}}</view>
        <view class="content-row" wx:if="{{negotiateContent}}">{{negotiateContent}}</view>
      </view>
    </block>

    <!-- 撤销状态 -->
    <block wx:elif="{{refundState === 'revoked'}}">
      <view class="status-title" style="margin-bottom: 0;">撤销退款申请成功</view>
    </block>

    <!-- 拒绝状态 -->
    <block wx:elif="{{refundState === 'rejected'}}">
      <view class="approved-title">拒绝退款（{{handleEndTime ? '请在' + days + '天' + hours + '小时' + minutes + '分钟内处理' : '超过处理时间'}}）</view>
      <view class="approved-time">{{refundDetail.applyTime}}</view>

      <view class="approved-content" wx:if="{{negotiateTitle || negotiateContent}}">
        <view class="content-row" wx:if="{{negotiateTitle}}">{{negotiateTitle}}</view>
        <view class="content-row" wx:if="{{negotiateContent}}">{{negotiateContent}}</view>
      </view>
    </block>

    <!-- 退款成功状态 -->
    <block wx:elif="{{refundState === 'completed'}}">
      <view class="status-title completed-title">退款成功</view>
      <view class="refund-card">
        <view class="refund-card__left">
          <view class="refund-dest-name">{{refundDestination.type}}</view>
          <view class="refund-dest-account">{{refundDestination.account}}</view>
        </view>
        <view class="refund-card__right">
          <view class="refund-amount-text">¥{{refundDetail.amount}}</view>
        </view>
      </view>
    </block>
  </view>

  <!-- 详情区域 -->
  <view class="detail-section">
    <!-- 商品简要信息 -->
    <view class="goods-info">
      <image class="goods-img" src="{{goods.image}}" mode="aspectFill" wx:if="{{goods.image}}"></image>
      <view class="service-package-placeholder" wx:else>
        <text class="placeholder-icon">📦</text>
      </view>
      <view class="goods-desc">
        <view class="goods-title">{{goods.name}}</view>
        <view class="goods-meta">{{goods.meta1}}</view>
      </view>
    </view>

    <!-- 分割线 -->
    <view class="divider"></view>

    <!-- 退款详情列表 -->
    <view class="info-list">
      <view class="info-item">
        <text class="info-label">协商历史</text>
        <view class="info-value clickable-text" bindtap="onViewHistory">查看</view>
      </view>
      <view class="info-item">
        <text class="info-label">退款原因</text>
        <text class="info-value">{{refundDetail.reason}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">申请金额</text>
        <text class="info-value">共{{refundDetail.refundAmount}}元</text>
      </view>
      
      <!-- 根据状态不同展示不同的时间标签 -->
      <view class="info-item" wx:if="{{refundState === 'approved' || refundState === 'completed'}}">
        <text class="info-label">退款完结</text>
        <text class="info-value">{{refundDetail.updateTime}}</text>
      </view>
      <view class="info-item" wx:elif="{{refundState === 'revoked'}}">
        <text class="info-label">撤销时间</text>
        <text class="info-value">{{refundDetail.updateTime}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">申请时间</text>
        <text class="info-value">{{refundDetail.applyTime}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">退款编号</text>
        <view class="info-value-group">
          <text class="info-value">{{refundDetail.refundNo}}</text>
          <text class="copy-btn" bindtap="onCopyRefundNo">复制</text>
        </view>
      </view>
    </view>

    <!-- 客服按钮（暂时注释） -->
    <!-- <view class="service-action" bindtap="onCallService">
      <t-icon name="service" size="44rpx" color="#333" />
      <text class="service-text">客服</text>
    </view> -->
  </view>
</scroll-view>

<!-- 底部操作按钮 -->
<view class="bottom-bar {{refundState === 'rejected' ? 'bottom-bar-rejected' : ''}}" wx:if="{{refundState === 'processing' || refundState === 'rejected' || refundState === 'revoked'}}">
  <!-- 处理中：单个撤销按钮 -->
  <button class="revoke-btn" bindtap="onRevoke" wx:if="{{refundState === 'processing'}}">撤销申请</button>

  <!-- 撤销状态：再次申请按钮 -->
  <button class="revoke-btn" bindtap="onReApply" wx:if="{{refundState === 'revoked'}}">再次申请</button>

  <!-- 拒绝退款且有截止时间：修改申请 & 撤销申请 组合按钮 -->
  <view class="dual-btn-group" wx:if="{{refundState === 'rejected' && handleEndTime}}">
    <button class="dual-btn left-btn" bindtap="onModify">修改申请</button>
    <view class="btn-divider"></view>
    <button class="dual-btn right-btn" bindtap="onRevoke">撤销申请</button>
  </view>

  <!-- 拒绝退款且超过处理时间：再次申请按钮 -->
  <button class="revoke-btn" bindtap="onReApply" wx:if="{{refundState === 'rejected' && !handleEndTime}}">再次申请</button>
</view>

<!-- 退款修改相关弹窗 -->
<refund-reason-popup
  visible="{{refundReasonPopupVisible}}"
  initial-reason="{{refundDetail.reason}}"
  bind:close="onRefundReasonPopupClose"
  bind:next="onRefundReasonNext"
/>

<refund-confirm-popup
  visible="{{refundConfirmPopupVisible}}"
  goods-name="{{goods.name}}"
  goods-image="{{goods.image}}"
  goods-price="{{goods.price}}"
  goods-meta1="{{goods.meta1}}"
  goods-meta2="{{goods.meta2}}"
  refund-reason="{{refundDetail.reason}}"
  refund-status="{{refundStatus || '仅退款'}}"
  refund-amount="{{refundDetail.amount}}"
  max-amount="{{refundMaxAmount}}"
  proof-images="{{refundProofImages || []}}"
  bind:close="onRefundConfirmClose"
  bind:changeStatus="onChangeRefundStatus"
  bind:editReason="onOpenRefundReasonAgain"
  bind:editProof="onOpenRefundProofEditor"
  bind:amountConfirm="onRefundAmountConfirm"
  bind:submit="onSubmitRefundApply"
/>

<refund-proof-popup
  visible="{{refundProofPopupVisible}}"
  images="{{refundProofImages}}"
  desc="{{refundDesc}}"
  bind:close="onRefundProofPopupClose"
  bind:confirm="onRefundProofSubmit"
/>