69 lines
2.3 KiB
Vue
69 lines
2.3 KiB
Vue
<template>
|
|
<section class="page">
|
|
<div class="header-row">
|
|
<h2>提醒中心</h2>
|
|
<span class="mode-tag" :class="{ fallback: isMock }">
|
|
{{ isMock ? "演示回退" : "真实接口" }}
|
|
</span>
|
|
</div>
|
|
<p v-if="loading" class="loading">加载中...</p>
|
|
<div v-else class="chips">
|
|
<button v-for="item in reminderTypes" :key="item" class="chip">{{ item }}</button>
|
|
</div>
|
|
<div v-if="!loading" class="table-panel">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>标题</th>
|
|
<th>类型</th>
|
|
<th>状态</th>
|
|
<th>创建时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="row in reminderRows" :key="row.title">
|
|
<td>{{ row.title }}</td>
|
|
<td>{{ row.type }}</td>
|
|
<td><span class="status">{{ row.status }}</span></td>
|
|
<td>{{ row.createdAt }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from "vue";
|
|
|
|
import { fetchRemindersPage } from "../mockApi";
|
|
|
|
const loading = ref(true);
|
|
const isMock = ref(false);
|
|
const reminderTypes = ref([]);
|
|
const reminderRows = ref([]);
|
|
|
|
onMounted(async () => {
|
|
const data = await fetchRemindersPage();
|
|
reminderTypes.value = data.reminderTypes;
|
|
reminderRows.value = data.reminderRows;
|
|
isMock.value = Boolean(data.isMock);
|
|
loading.value = false;
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page { background: #fff; border-radius: 8px; padding: 20px; }
|
|
.header-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
|
|
h2 { margin: 0; }
|
|
.loading { margin: 0; color: #6b7280; }
|
|
.mode-tag { padding: 6px 10px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 12px; }
|
|
.mode-tag.fallback { background: #fef3c7; color: #92400e; }
|
|
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
|
|
.chip { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 999px; background: #f9fafb; }
|
|
.table-panel { margin-top: 20px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px; }
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #e5e7eb; }
|
|
.status { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #ecfdf5; color: #047857; }
|
|
</style>
|