init

miniprogram/pages/refund/refund-apply/index.wxml

@@ -0,0 +1,129 @@
+<!--pages/refund/refund-apply/index.wxml-->
+<view class="refund-apply-page">
+  <!-- 页面标题 -->
+  <view class="page-header">
+    <text class="page-title">{{isReapply ? '重新申请退款' : '申请退款'}}</text>
+  </view>
+
+  <!-- 订单信息 -->
+  <view class="order-section" wx:if="{{orderDetail}}">
+    <view class="section-title">订单信息</view>
+    <view class="order-card" bindtap="onOrderTap">
+      <view class="order-header">
+        <text class="order-no">订单号：{{orderDetail.orderNo}}</text>
+        <text class="order-status">{{orderDetail.statusText}}</text>
+      </view>
+      <view class="order-amount">
+        <text class="amount-label">订单金额：</text>
+        <text class="amount-value">¥{{orderDetail.totalAmount}}</text>
+      </view>
+    </view>
+  </view>
+
+  <!-- 退款金额 -->
+  <view class="amount-section">
+    <view class="section-title">退款金额</view>
+    <view class="amount-input-wrapper">
+      <text class="currency-symbol">¥</text>
+      <input 
+        class="amount-input" 
+        type="digit" 
+        placeholder="请输入退款金额"
+        value="{{refundAmount}}"
+        bindinput="onAmountInput"
+        maxlength="10"
+      />
+    </view>
+    <view class="amount-tips">
+      <text class="tips-text">最多可退款：¥{{maxRefundAmount}}</text>
+      <text class="quick-fill" bindtap="onQuickFillAmount">全额退款</text>
+    </view>
+  </view>
+
+  <!-- 退款原因 -->
+  <view class="reason-section">
+    <view class="section-title">退款原因</view>
+    <view class="reason-options">
+      <view 
+        class="reason-option {{selectedReason === item.value ? 'selected' : ''}}"
+        wx:for="{{reasonOptions}}"
+        wx:key="value"
+        bindtap="onReasonSelect"
+        data-value="{{item.value}}"
+      >
+        <text class="reason-text">{{item.label}}</text>
+        <view class="reason-check {{selectedReason === item.value ? 'checked' : ''}}">
+          <text class="check-icon" wx:if="{{selectedReason === item.value}}">✓</text>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 自定义原因输入 -->
+    <view class="custom-reason" wx:if="{{selectedReason === 'other'}}">
+      <textarea 
+        class="reason-textarea"
+        placeholder="请详细说明退款原因"
+        value="{{customReason}}"
+        bindinput="onCustomReasonInput"
+        maxlength="200"
+        show-confirm-bar="{{false}}"
+      />
+      <view class="char-count">{{customReason.length}}/200</view>
+    </view>
+  </view>
+
+  <!-- 退款说明 -->
+  <view class="description-section">
+    <view class="section-title">退款说明（选填）</view>
+    <textarea 
+      class="description-textarea"
+      placeholder="请详细描述退款原因，有助于快速处理"
+      value="{{description}}"
+      bindinput="onDescriptionInput"
+      maxlength="500"
+      show-confirm-bar="{{false}}"
+    />
+    <view class="char-count">{{description.length}}/500</view>
+  </view>
+
+  <!-- 提交按钮 -->
+  <view class="submit-section">
+    <button 
+      class="submit-btn {{canSubmit ? 'enabled' : 'disabled'}}"
+      bindtap="onSubmit"
+      disabled="{{!canSubmit || submitting}}"
+    >
+      {{submitting ? '提交中...' : (isReapply ? '重新提交' : '提交申请')}}
+    </button>
+  </view>
+
+  <!-- 温馨提示 -->
+  <view class="tips-section">
+    <view class="tips-title">温馨提示</view>
+    <view class="tips-content">
+      <text class="tip-item">• 退款申请提交后，我们将在1-3个工作日内处理</text>
+      <text class="tip-item">• 退款金额将原路返回到您的支付账户</text>
+      <text class="tip-item">• 如有疑问，请联系客服：400-123-4567</text>
+    </view>
+  </view>
+
+  <!-- 加载状态 -->
+  <view class="loading-wrapper" wx:if="{{loading}}">
+    <view class="loading-content">
+      <view class="loading-spinner"></view>
+      <text class="loading-text">加载中...</text>
+    </view>
+  </view>
+
+  <!-- 错误状态 -->
+  <view class="error-wrapper" wx:if="{{error}}">
+    <view class="error-content">
+      <text class="error-icon">⚠️</text>
+      <text class="error-text">{{error}}</text>
+      <button class="retry-btn" bindtap="onRetry">重试</button>
+    </view>
+  </view>
+
+  <!-- Toast组件 -->
+  <t-toast id="t-toast" />
+</view>