springboot实现沙箱支付退款

就叫飞六吧
于 2024-09-28 16:40:03 发布
阅读量50
点赞数 1
本文链接：https://blog.csdn.net/weixin_52236586/article/details/142617758
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城与订单管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f2f5;
        }
        #app {
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .page-header {
            background-color: #409EFF;
            color: white;
            padding: 20px;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
        }
        .page-title {
            margin: 0;
        }
        .content-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .content-area {
            width: 1080px;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }
        .nav-buttons {
            margin-bottom: 20px;
        }
        .el-table {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <header class="page-header">
        <h1 class="page-title">基于内存_SpringBoot实现沙箱支付退款_商城与订单管理系统</h1>
    </header>
    <div class="content-wrapper">
        <div class="content-area">
            <div class="nav-buttons">
                <el-button @click="showProducts" type="primary" :plain="!isProductView">商品列表</el-button>
                <el-button @click="showOrders" type="primary" :plain="isProductView">订单管理</el-button>
            </div>
            <div v-if="isProductView">
                <el-table :data="products" style="width: 100%">
                    <el-table-column prop="id" label="商品编号" width="120"></el-table-column>
                    <el-table-column prop="name" label="商品名称"></el-table-column>
                    <el-table-column prop="total" label="金额" width="120"></el-table-column>
                    <el-table-column label="操作" width="120" align="center">
                        <template slot-scope="scope">
                            <el-button @click="buy(scope.row)" type="primary" size="small">购买</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-else>
                <el-table :data="orders" style="width: 100%">
                    <el-table-column prop="traceNo" label="订单号" width="180"></el-table-column>
                    <el-table-column prop="subject" label="商品名称"></el-table-column>
                    <el-table-column prop="totalAmount" label="金额" width="120"></el-table-column>
                    <el-table-column prop="status" label="状态" width="120"></el-table-column>
                    <el-table-column label="操作" width="120" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    v-if="scope.row.status === '已支付'"
                                    @click="refund(scope.row)"
                                    type="danger"
                                    size="small">退款
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            isProductView: true,
            products: [
                { id: '001', name: 'Apple iPhone 14', total: 7999 },
                { id: '002', name: 'Dell XPS 13', total: 10999 },
                { id: '003', name: 'Sony WH-1000XM4', total: 2499 },
            ],
            orders: []
        },
        methods: {
            showProducts() {
                this.isProductView = true;
            },
            showOrders() {
                this.isProductView = false;
                this.fetchOrders();
            },
            buy(product) {
                const traceNo = uuid.v4();  // 实际项目中，一般后端生成订单号然后入库
                const url = `http://localhost:9090/alipay/pay?subject=${encodeURIComponent(product.name)}&traceNo=${traceNo}&totalAmount=${product.total}`;
                window.open(url);
            },
            fetchOrders() {
                axios.get('http://localhost:9090/alipay/orders')
                    .then(response => {
                        this.orders = response.data.data;
                    })
                    .catch(error => {
                        console.error('获取订单失败:', error);
                        this.$message.error('获取订单失败，请稍后重试');
                    });
            },
            refund(order) {
                const url = `http://localhost:9090/alipay/return?traceNo=${order.traceNo}&alipayTraceNo=${order.alipayTradeNo}&totalAmount=${order.totalAmount}`;
                axios.get(url)
                    .then(response => {
                        if (response.data.code == "200") {
                            this.fetchOrders();
                            this.$message.success("退款成功");
                        } else {
                            this.$message.error("退款失败：" + response.data.message);
                        }
                    })
                    .catch(error => {
                        console.error('退款请求失败:', error);
                        this.$message.error("退款失败，请稍后重试");
                    });
            }
        }
    });
</script>
</body>
</html>