62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<template>
|
|
<div class="page-shell">
|
|
<div class="section-title">我的报名</div>
|
|
<div class="section-subtitle">查看报名状态与签到情况</div>
|
|
|
|
<a-table :columns="columns" :data="rows" row-key="id" :pagination="false">
|
|
<template #status="{ record }">
|
|
<a-tag :color="statusColor(record.status)">{{ statusText(record.status) }}</a-tag>
|
|
</template>
|
|
<template #checkinStatus="{ record }">
|
|
<a-tag :color="record.checkinStatus === 'CHECKED' ? 'green' : 'gray'">
|
|
{{ record.checkinStatus === 'CHECKED' ? '已签到' : '未签到' }}
|
|
</a-tag>
|
|
</template>
|
|
<template #action="{ record }">
|
|
<a-button size="mini" type="text" v-if="record.status === 'SIGNED'" @click="cancel(record.activityId)">取消报名</a-button>
|
|
<span v-else>—</span>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { Message } from '@arco-design/web-vue';
|
|
import { mySignups } from '../api/me';
|
|
import { cancelSignup } from '../api/activities';
|
|
|
|
const rows = ref([]);
|
|
|
|
const columns = [
|
|
{ title: '活动名称', dataIndex: 'activityTitle' },
|
|
{ title: '节气', dataIndex: 'term' },
|
|
{ title: '地点', dataIndex: 'location' },
|
|
{ title: '活动时间', dataIndex: 'startTime' },
|
|
{ title: '报名状态', slotName: 'status' },
|
|
{ title: '签到状态', slotName: 'checkinStatus' },
|
|
{ title: '操作', slotName: 'action' }
|
|
];
|
|
|
|
const fetchList = async () => {
|
|
const res = await mySignups();
|
|
rows.value = res.data || [];
|
|
};
|
|
|
|
const statusText = (value) => {
|
|
return value === 'SIGNED' ? '已报名' : '已取消';
|
|
};
|
|
|
|
const statusColor = (value) => {
|
|
return value === 'SIGNED' ? 'green' : 'gray';
|
|
};
|
|
|
|
const cancel = async (activityId) => {
|
|
await cancelSignup(activityId);
|
|
Message.success('已取消报名');
|
|
await fetchList();
|
|
};
|
|
|
|
onMounted(fetchList);
|
|
</script>
|