123 lines
5.0 KiB
HTML
123 lines
5.0 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>{{ order.payment_method }}
|
|
</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 %}
|
|
</div>
|
|
|
|
<!-- 支付状态 -->
|
|
<div class="payment-status" id="paymentStatus" style="display: none;">
|
|
<i class="bi bi-check-circle-fill text-success display-1"></i>
|
|
<h5 class="mt-3">支付成功</h5>
|
|
<p class="text-muted">正在跳转到订单详情...</p>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="d-flex gap-2 mt-4">
|
|
<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="mt-3 text-center">
|
|
<button class="btn btn-warning btn-sm" onclick="simulatePayment()">
|
|
<i class="bi bi-bug"></i> 模拟支付成功（测试用）
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/pay.js') }}"></script>
|
|
{% endblock %}
|