邀请通知列表

src/views/Jyh/PersonalCenter/Detail/InvitationNoticeList.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="invitation-notice-container">
+    <Card simple class="jyh-card mt-3">
+      <div class="card-title">邀请通知列表</div>
+      <div class="mb-3">
+        <d-table
+          class="jyh-table jyh-table-2"
+          :header-bg="true"
+          :data="noticeTableData"
+        >
+          <d-column field="content" header="邀请内容"></d-column>
+          <d-column field="time" header="邀请时间" width="200"></d-column>
+          <d-column field="creator" header="邀请人" width="180"></d-column>
+          <d-column header="操作" width="150">
+            <template #default="scope">
+              <d-button
+                variant="text"
+                color="primary"
+                class="mr-2"
+              >
+                接收
+              </d-button>
+              <d-button
+                variant="text"
+                color="primary"
+              >
+                拒绝
+              </d-button>
+            </template>
+          </d-column>
+        </d-table>
+        <div class="invitation-pagination">
+          <d-pagination
+            style="display: inline-flex;"
+            :total="pager.total"
+            v-model:pageSize="pager.pageSize"
+            v-model:pageIndex="pager.pageIndex"
+            :can-view-total="true"
+            :can-change-page-size="true"
+            :can-jump-page="true"
+            :max-items="5"
+          />
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, shallowReactive } from 'vue';
+
+const noticeTableData = ref([
+  {
+    content: '当您订阅的软件有漏洞预警通知时，将以应用号的方式通知。可在首页查看或取消订阅！',
+    time: '2025-03-15 17:29:30',
+    creator: '132456798',
+  }
+]);
+const pager = shallowReactive({
+  total: 1,
+  pageIndex: 1,
+  pageSize: 10,
+  pageSizeOptions: [10, 20, 30, 40, 50],
+});
+</script>
+
+<style lang="scss" scoped>
+.invitation-notice-container {
+  .invitation-pagination {
+    padding: 12px 0;
+    text-align: right;
+  }
+}
+</style>