mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-20 02:06:38 +08:00
99 lines
2.8 KiB
Vue
99 lines
2.8 KiB
Vue
<template>
|
||
<div class="invite-list" v-loading="loading">
|
||
<el-row v-if="items.length > 0">
|
||
<el-table :data="items" :row-key="row => row.id" table-layout="auto" border
|
||
style="--el-table-border-color:#373C47;
|
||
--el-table-tr-bg-color:#2D323B;
|
||
--el-table-row-hover-bg-color:#373C47;
|
||
--el-table-header-bg-color:#474E5C;
|
||
--el-table-text-color:#d1d1d1">
|
||
<el-table-column prop="username" label="用户"/>
|
||
<el-table-column prop="invite_code" label="邀请码"/>
|
||
<el-table-column label="邀请奖励">
|
||
<template #default="scope">
|
||
<span>对话：{{ scope.row['reward']['chat_calls'] }}次</span>，
|
||
<span>绘图：{{ scope.row['reward']['img_calls'] }}次</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="注册时间">
|
||
<template #default="scope">
|
||
<span>{{ dateFormat(scope.row['created_at']) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-row>
|
||
<el-empty :image-size="100" v-else/>
|
||
<div class="pagination">
|
||
<el-pagination v-if="total > 0" background
|
||
layout="total,prev, pager, next"
|
||
:hide-on-single-page="true"
|
||
v-model:current-page="page"
|
||
v-model:page-size="pageSize"
|
||
@current-change="fetchData()"
|
||
:total="total"/>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {onMounted, ref, watch} from "vue";
|
||
import {httpGet, httpPost} from "@/utils/http";
|
||
import {ElMessage} from "element-plus";
|
||
import {dateFormat} from "@/utils/libs";
|
||
import {DocumentCopy} from "@element-plus/icons-vue";
|
||
import Clipboard from "clipboard";
|
||
|
||
const items = ref([])
|
||
const total = ref(0)
|
||
const page = ref(1)
|
||
const pageSize = ref(10)
|
||
const loading = ref(true)
|
||
|
||
onMounted(() => {
|
||
fetchData()
|
||
const clipboard = new Clipboard('.copy-order-no');
|
||
clipboard.on('success', () => {
|
||
ElMessage.success("复制成功！");
|
||
})
|
||
|
||
clipboard.on('error', () => {
|
||
ElMessage.error('复制失败！');
|
||
})
|
||
})
|
||
|
||
// 获取数据
|
||
const fetchData = () => {
|
||
httpPost('/api/invite/list', {page: page.value, page_size: pageSize.value}).then((res) => {
|
||
if (res.data) {
|
||
items.value = res.data.items
|
||
total.value = res.data.total
|
||
page.value = res.data.page
|
||
pageSize.value = res.data.page_size
|
||
}
|
||
loading.value = false
|
||
}).catch(e => {
|
||
ElMessage.error("获取数据失败：" + e.message);
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="stylus">
|
||
.invite-list {
|
||
.pagination {
|
||
margin: 20px 0 0 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.copy-order-no {
|
||
cursor pointer
|
||
position relative
|
||
left 6px
|
||
top 2px
|
||
color #20a0ff
|
||
}
|
||
}
|
||
</style> |