112 lines
4.1 KiB
Smarty
Executable File
112 lines
4.1 KiB
Smarty
Executable File
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vue 表格示例</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- 引入 axios -->
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>id</th>
|
|
<th>用户id</th>
|
|
<th>用户邮箱</th>
|
|
<th>地址类型</th>
|
|
<th>地址</th>
|
|
<th>金额</th>
|
|
<th>更新时间</th>
|
|
<th>创建时间</th>
|
|
<th>状态</th>
|
|
<th>网站</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in items" :key="item.id">
|
|
<td>{{ item.id }}</td>
|
|
<td>{{ item.user_id }}</td>
|
|
<td>{{ item.user_mail }}</td>
|
|
<td>{{ item.addr_type }}</td>
|
|
<td>{{ item.addr }}</td>
|
|
<td>{{ item.amount }}</td>
|
|
<td>{{ item.update_at }}</td>
|
|
<td>{{ item.create_at }}</td>
|
|
<td>{{ item.status }}</td>
|
|
<td>{{ item.site }}</td>
|
|
<td>
|
|
<button @click="editItem(item.id)">编辑</button>
|
|
<button @click="deleteItem(item.id)">删除</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- 分页控制 -->
|
|
<div>
|
|
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
|
|
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
|
|
<span>当前页: {{ currentPage }} / {{ totalPages }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
items: [], // 存储当前页的数据
|
|
currentPage: 1, // 当前页
|
|
limit: 1, // 每页显示的条数
|
|
totalPages: 0 // 总页数
|
|
},
|
|
created() {
|
|
this.fetchData(); // 在组件创建时获取数据
|
|
},
|
|
methods: {
|
|
fetchData() {
|
|
const offset = (this.currentPage - 1) * this.limit; // 计算偏移量
|
|
axios.post('/gembox/draw/list', {
|
|
offset: offset,
|
|
limit: this.limit
|
|
})
|
|
.then(response => {
|
|
if (response.data.status === 1) {
|
|
this.items = response.data.data; // 提取 data 数组
|
|
this.totalPages = Math.ceil(response.data.total / this.limit); // 计算总页数
|
|
} else {
|
|
console.error('数据状态不正确:', response.data.status);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取数据时出错:', error);
|
|
});
|
|
},
|
|
editItem(id) {
|
|
alert('编辑用户 ID: ' + id);
|
|
// 在这里添加编辑逻辑
|
|
},
|
|
deleteItem(id) {
|
|
this.items = this.items.filter(item => item.id !== id);
|
|
alert('已删除用户 ID: ' + id);
|
|
},
|
|
nextPage() {
|
|
if (this.currentPage < this.totalPages) {
|
|
this.currentPage++;
|
|
this.fetchData(); // 获取下一页数据
|
|
}
|
|
},
|
|
prevPage() {
|
|
if (this.currentPage > 1) {
|
|
this.currentPage--;
|
|
this.fetchData(); // 获取上一页数据
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|