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