|
|
@@ -0,0 +1,88 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <!-- Import style -->
|
|
|
+ <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
|
|
|
+ <!-- Import Vue 3 -->
|
|
|
+ <script src="//unpkg.com/vue@3"></script>
|
|
|
+ <!-- Import component library -->
|
|
|
+ <script src="//unpkg.com/element-plus"></script>
|
|
|
+ <script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
|
|
|
+ <script src="https://cdn.tailwindcss.com"></script>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="app" class="p-4">
|
|
|
+ <div class="flex mb-4">
|
|
|
+ <el-select v-model="status" placeholder="Select">
|
|
|
+ <el-option label="All" value="all"></el-option>
|
|
|
+ <el-option label="Success" value="true"></el-option>
|
|
|
+ <el-option label="Failed" value="false"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button class="ml-4" @click="getData">Search</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table :data="data" size="small" v-loading="loading">
|
|
|
+ <el-table-column prop="id" label="ID" width="80"></el-table-column>
|
|
|
+ <el-table-column prop="createdAt" label="Created At" :formatter="timeFormatter"></el-table-column>
|
|
|
+ <el-table-column prop="email" label="Email"></el-table-column>
|
|
|
+ <el-table-column prop="password" label="Password"></el-table-column>
|
|
|
+ <el-table-column prop="success" label="Success"></el-table-column>
|
|
|
+ <el-table-column prop="result" label="Balance" show-overflow-tooltip></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination layout="prev, pager, next" :total="total" :page-size="20" v-model:current-page="page" />
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ const { createApp, ref, onMounted, watch } = Vue
|
|
|
+
|
|
|
+ const app = createApp({
|
|
|
+ setup() {
|
|
|
+ const message = ref('Hello vue!')
|
|
|
+ const data = ref([])
|
|
|
+ const page = ref(1)
|
|
|
+ const status = ref('all')
|
|
|
+ const total = ref(0)
|
|
|
+ const loading = ref(false)
|
|
|
+
|
|
|
+ function getData() {
|
|
|
+ loading.value = true
|
|
|
+ axios.get('/list', {
|
|
|
+ params: {
|
|
|
+ page: page.value - 1,
|
|
|
+ success: status.value === 'all' ? undefined : status.value
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ data.value = res.data.data
|
|
|
+ total.value = res.data.total
|
|
|
+ loading.value = false
|
|
|
+ }).catch(e => {
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ function timeFormatter(row, column, cellValue, index) {
|
|
|
+ return new Date(row.createdAt).toLocaleString()
|
|
|
+ }
|
|
|
+ onMounted(function () {
|
|
|
+ getData()
|
|
|
+ })
|
|
|
+ watch(page, function () {
|
|
|
+ getData()
|
|
|
+ })
|
|
|
+ watch(status, function () {
|
|
|
+ page.value = 1
|
|
|
+ getData()
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ message, getData, data, page, timeFormatter, status, total, loading
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ app.use(ElementPlus)
|
|
|
+ app.mount('#app')
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
