109 lines
4.1 KiB
Vue
109 lines
4.1 KiB
Vue
<template>
|
||
<div style="margin: 20px;">
|
||
<a-card title="我的邀请">
|
||
<div style="border-radius: 5px;display: flex;justify-content: space-between;border: 1px solid #e8e8e8;">
|
||
<div>
|
||
<div style="font-size:18px;padding: 0 20px;margin-top: 20px;">累计奖金</div>
|
||
<div style="font-size:18px;font-weight: bold;padding: 0 20px;margin: 20px 0;">￥0.00</div>
|
||
<div
|
||
style="display: flex;justify-content: space-between;align-items: center;gap: 60px;padding: 0 20px;line-height: 30px;">
|
||
<div>
|
||
<div>方式一：复制邀请链接</div>
|
||
<div><span>http://example.com/invite/123456</span> <span
|
||
style="color:#1677ff;">
|
||
<CopyOutlined />
|
||
</span></div>
|
||
</div>
|
||
<div>
|
||
<div>方式二：复制邀请码</div>
|
||
<div><span>http://example.com/invite/123456</span> <span
|
||
style="color:#1677ff;">
|
||
<CopyOutlined />
|
||
</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="leftImg">
|
||
<div style="font-size:14px;padding: 0 20px;margin-top: 10px;text-align: right;color: #1677ff;">活动规则
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="width: 100%;display: flex;justify-content: space-around;align-items: center;height: 150px;border: 1px solid #e8e8e8;margin-top: 20px;border-radius: 5px;">
|
||
<div style="display: flex;flex-direction: column;align-items: center;line-height: 35px;">
|
||
<div>累计成功邀请人数</div>
|
||
<div><span style="font-weight: bold;font-size: 18px;">0</span> 人</div>
|
||
</div>
|
||
<div style="display: flex;flex-direction: column;align-items: center;line-height: 35px;">
|
||
<div>累计获得奖金</div>
|
||
<div style="font-weight: bold;">￥<span style="font-weight: bold;font-size: 18px;">0.00</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- 账单表格 -->
|
||
<div style="margin-top: 20px;">
|
||
<div style="margin: 30px 0px 10px 0px;font-weight: bold;">邀请记录</div>
|
||
<a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange"
|
||
:loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered>
|
||
</a-table>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import { CopyOutlined } from '@ant-design/icons-vue';
|
||
const loading = ref(false);
|
||
const billData = ref([])
|
||
const columns = [
|
||
{
|
||
title: '用户名 ',
|
||
dataIndex: 'inviter',
|
||
key: 'inviter',
|
||
width: 200,
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'invitee',
|
||
key: 'invitee',
|
||
width: 200,
|
||
},
|
||
{
|
||
title: '发放时间',
|
||
dataIndex: 'inviteTime',
|
||
key: 'inviteTime',
|
||
width: 150,
|
||
},
|
||
{
|
||
title: '金额',
|
||
dataIndex: 'rewardStatus',
|
||
key: 'rewardStatus',
|
||
width: 100,
|
||
},
|
||
{
|
||
title: '备注',
|
||
dataIndex: 'rewardAmount',
|
||
key: 'rewardAmount',
|
||
width: 200,
|
||
},
|
||
];
|
||
const pagination = ref({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
showTotal: (total: number) => `共 ${total} 条记录`
|
||
})
|
||
const handleTableChange = (pagination: any) => {
|
||
// 处理表格分页、排序等变化的逻辑
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.leftImg {
|
||
width: 474px;
|
||
height: 200px;
|
||
/* background: #f5f5f5; */
|
||
background: url("@/assets/friend.png") no-repeat center;
|
||
background-size: cover;
|
||
}
|
||
</style> |