177 lines
7.9 KiB
HTML
177 lines
7.9 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}订单支付 - 太白购物商城{% endblock %}
|
||
|
||
{% block head %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/pay.css') }}">
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="pay-container">
|
||
<div class="card">
|
||
<div class="card-header text-center">
|
||
<h4><i class="bi bi-credit-card"></i> 订单支付</h4>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- 隐藏数据属性 -->
|
||
<div style="display: none;"
|
||
data-payment-sn="{{ payment.payment_sn }}"
|
||
data-payment-method="{{ order.payment_method }}"
|
||
data-order-id="{{ order.id }}"></div>
|
||
|
||
<!-- 订单信息 -->
|
||
<div class="order-info">
|
||
<h6 class="mb-3">订单信息</h6>
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<strong>订单号：</strong>{{ order.order_sn }}
|
||
</div>
|
||
<div class="col-6 text-end">
|
||
<strong class="text-danger">¥{{ "%.2f"|format(order.actual_amount) }}</strong>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-2">
|
||
<div class="col-6">
|
||
<strong>支付方式：</strong>
|
||
{% if order.payment_method == 'wechat' %}微信支付
|
||
{% elif order.payment_method == 'alipay' %}支付宝
|
||
{% elif order.payment_method == 'bank' %}银行卡支付
|
||
{% elif order.payment_method == 'simulate' %}模拟支付
|
||
{% else %}{{ order.payment_method }}
|
||
{% endif %}
|
||
</div>
|
||
<div class="col-6 text-end">
|
||
<span class="countdown" id="countdown">14:59</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 支付区域 -->
|
||
<div id="paymentArea">
|
||
{% if order.payment_method == 'wechat' %}
|
||
<div class="payment-method selected">
|
||
<div class="d-flex align-items-center">
|
||
<i class="bi bi-wechat text-success fs-1 me-3"></i>
|
||
<div>
|
||
<h6>微信支付</h6>
|
||
<p class="text-muted mb-0">请使用微信扫描二维码完成支付</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="qr-code" id="qrCodeArea" style="display: none;">
|
||
<div id="qrCodeImage">
|
||
<i class="bi bi-qr-code display-1 text-muted"></i>
|
||
<p class="mt-2">正在生成支付二维码...</p>
|
||
</div>
|
||
<p class="mt-3 text-muted">请使用微信扫描上方二维码完成支付</p>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if order.payment_method == 'alipay' %}
|
||
<div class="payment-method selected">
|
||
<div class="d-flex align-items-center">
|
||
<i class="bi bi-alipay text-primary fs-1 me-3"></i>
|
||
<div>
|
||
<h6>支付宝</h6>
|
||
<p class="text-muted mb-0">正在跳转到支付宝...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if order.payment_method == 'bank' %}
|
||
<div class="payment-method selected">
|
||
<div class="d-flex align-items-center">
|
||
<i class="bi bi-credit-card text-info fs-1 me-3"></i>
|
||
<div>
|
||
<h6>银行卡支付</h6>
|
||
<p class="text-muted mb-0">正在跳转到网银...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if order.payment_method == 'simulate' %}
|
||
<div class="payment-method selected">
|
||
<div class="d-flex align-items-center">
|
||
<i class="bi bi-gear-fill text-warning fs-1 me-3"></i>
|
||
<div>
|
||
<h6>模拟支付</h6>
|
||
<p class="text-muted mb-0">开发测试模式，可直接完成支付</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模拟支付控制面板 -->
|
||
<div class="simulate-panel mt-3 p-3 border rounded bg-light">
|
||
<h6 class="text-warning"><i class="bi bi-exclamation-triangle"></i> 模拟支付控制面板</h6>
|
||
<p class="text-muted small mb-3">这是开发测试功能，您可以模拟不同的支付结果</p>
|
||
|
||
<div class="d-grid gap-2 d-md-flex justify-content-md-center">
|
||
<button class="btn btn-success" onclick="simulatePaymentSuccess()">
|
||
<i class="bi bi-check-circle"></i> 模拟支付成功
|
||
</button>
|
||
<button class="btn btn-danger" onclick="simulatePaymentFail()">
|
||
<i class="bi bi-x-circle"></i> 模拟支付失败
|
||
</button>
|
||
</div>
|
||
|
||
<div class="mt-2 text-center">
|
||
<small class="text-muted">
|
||
<i class="bi bi-info-circle"></i>
|
||
实际生产环境中，此面板将被真实支付接口替代
|
||
</small>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- 支付状态 -->
|
||
<div class="payment-status" id="paymentStatus" style="display: none;">
|
||
<div id="successStatus" style="display: none;">
|
||
<i class="bi bi-check-circle-fill text-success display-1"></i>
|
||
<h5 class="mt-3 text-success">支付成功</h5>
|
||
<p class="text-muted">正在跳转到订单详情...</p>
|
||
</div>
|
||
|
||
<div id="failStatus" style="display: none;">
|
||
<i class="bi bi-x-circle-fill text-danger display-1"></i>
|
||
<h5 class="mt-3 text-danger">支付失败</h5>
|
||
<p class="text-muted">请重新选择支付方式或联系客服</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="d-flex gap-2 mt-4" id="actionButtons">
|
||
<button class="btn btn-primary flex-fill" onclick="startPayment()">
|
||
<i class="bi bi-credit-card"></i> 立即支付
|
||
</button>
|
||
<button class="btn btn-outline-secondary" onclick="checkPaymentStatus()">
|
||
<i class="bi bi-arrow-clockwise"></i> 刷新状态
|
||
</button>
|
||
<button class="btn btn-outline-danger" onclick="cancelOrder()">
|
||
<i class="bi bi-x-circle"></i> 取消订单
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 支付说明 -->
|
||
<div class="payment-tips mt-4">
|
||
<h6 class="text-muted">支付说明：</h6>
|
||
<ul class="text-muted small">
|
||
<li>订单有效期为15分钟，请及时完成支付</li>
|
||
<li>支付成功后，订单状态将自动更新</li>
|
||
<li>如遇支付问题，请联系客服：400-123-4567</li>
|
||
{% if order.payment_method == 'simulate' %}
|
||
<li class="text-warning">当前为模拟支付模式，仅用于开发测试</li>
|
||
{% endif %}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script src="{{ url_for('static', filename='js/pay.js') }}"></script>
|
||
{% endblock %}
|