<!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>
