feat: 使用记录

src/apis/records.ts

+import { request } from '@/utils/request'
+
+export function fetchUsedRecordsList<T>(payload: object, params: object = {}) {
+  return request.post<T>(`/bizMemberEquityRecordFlowRest/queryMemberEquityUsedRecord.json`, payload, { params })
+}

src/apis/user.ts

@@ -17,12 +17,8 @@ export function fetchEmailCode<T>(emailAddress: string) {
   return request.post<T>(`/sendEmailRest/sendEmailCode.json?emailAddress=${emailAddress}`)
 }
 
-export function fetchUniversalCurrency<T>(token?: string) {
-  return request.post<T>('/bizMemberEquityRest/getUniversalCurrency.json', {
-    headers: {
-      'X-Request-Token': token,
-    },
-  })
+export function fetchUniversalCurrency<T>() {
+  return request.post<T>('/bizMemberEquityRest/getUniversalCurrency.json')
 }
 
 export function fetchUserInfo<T>() {

src/router/modules/records.ts

+import { type RouteRecordRaw } from 'vue-router'
+
+export default [
+  {
+    path: '/records/used',
+    name: 'UseRecords',
+    meta: {
+      title: '使用记录',
+      rank: 1001,
+    },
+    component: () => import('@/views/used-records/used-records.vue'),
+  },
+] as RouteRecordRaw[]

src/views/index/layout/header-bar.vue

@@ -4,7 +4,7 @@ import { computed, h, ref, shallowRef } from 'vue'
 import { NAvatar } from 'naive-ui'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/store/modules/user'
-import { Logout } from '@icon-park/vue-next'
+import { Logout, Right } from '@icon-park/vue-next'
 import { Gift } from '@icon-park/vue-next'
 import GiftCodeRedemption from '../components/gift-code-redemption.vue'
 
@@ -12,6 +12,11 @@ const router = useRouter()
 const userStore = useUserStore()
 
 const dropdownOptions = shallowRef([
+  {
+    label: '使用記錄',
+    key: 'useRecords',
+    icon: () => h(Right, { theme: 'outline', size: 12, strokeWidth: 3 }),
+  },
   {
     label: '退出登錄',
     key: 'logout',
@@ -29,6 +34,9 @@ function handleDropdownSelect(key: string | number) {
       router.replace({ name: 'Login' })
       window.$message.success('已退出登錄')
       break
+    case 'useRecords':
+      router.replace({ name: 'UseRecords' })
+      break
   }
 }
 </script>

src/views/used-records/columns.ts

+import { h } from 'vue'
+import { DataTableColumns } from 'naive-ui'
+import { formatDateTime } from '@/utils/date-formatter'
+
+export interface UsedRecord {
+  sceneDesc: string
+  equityNum: number
+  operationTime: string
+}
+
+export function UsedRecordsTableColumns(): DataTableColumns<UsedRecord> {
+  return [
+    {
+      title: '使用類型',
+      key: 'sceneDesc',
+      width: 200,
+      render(row) {
+        return h('span', row.sceneDesc)
+      },
+    },
+    {
+      title: '消耗靈豆',
+      key: 'equityNum',
+      width: 200,
+      render(row) {
+        return h('span', row.equityNum + '靈豆')
+      },
+    },
+    {
+      title: '扣除時間',
+      key: 'operationTime',
+      width: 200,
+      render(row) {
+        return h('span', row.operationTime ? formatDateTime(row.operationTime) : '--')
+      },
+    },
+  ]
+}

src/views/used-records/used-records.vue

+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import useTableScrollY from '@/composables/useTableScrollY'
+import { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
+import { UsedRecord, UsedRecordsTableColumns } from '@/views/used-records/columns'
+import { Left } from '@icon-park/vue-next'
+
+import { router } from '@/router'
+import { fetchUsedRecordsList } from '@/apis/records'
+
+const { pageContentWrapRef, tableContentY } = useTableScrollY(48 + 28 + 24 + 44 + 48 + 48 + 50)
+const usedRecordsTableColumns = UsedRecordsTableColumns()
+
+const usedRecordsTableLoading = ref(false)
+const usedRecordsData = ref<UsedRecord[]>([])
+const pagingInfo = ref<PaginationInfo>({
+  pageNo: 1,
+  pageSize: 10,
+  totalPages: 0,
+  totalRows: 0,
+})
+
+onMounted(() => {
+  handleGetUsedRecordsList()
+})
+
+function handleGetUsedRecordsList() {
+  usedRecordsTableLoading.value = true
+
+  fetchUsedRecordsList<UsedRecord[]>({
+    pagingInfo: pagingInfo.value,
+  }).then((res) => {
+    if (res.code !== 0) return
+
+    usedRecordsTableLoading.value = false
+
+    usedRecordsData.value = res.data
+    pagingInfo.value = res.pagingInfo as PaginationInfo
+  })
+}
+
+function handleGetUsedRecordsListUpdatePageNo(pageNo: number) {
+  pagingInfo.value.pageNo = pageNo
+  handleGetUsedRecordsList()
+}
+
+function handleGetUsedRecordsListUpdatePageSize(pageSize: number) {
+  pagingInfo.value.pageNo = 1
+  pagingInfo.value.pageSize = pageSize
+  handleGetUsedRecordsList()
+}
+function handleToWorkbench() {
+  router.replace({ name: 'Workbench' })
+}
+</script>
+
+<template>
+  <div ref="pageContentWrapRef" class="h-full text-[14px]">
+    <div class="flex h-[56px] cursor-pointer items-center justify-start border-b-[1px] border-[#dde3f0] pl-[24px]">
+      <div class="h-[28px] w-[28px] pt-[2px]" @click="handleToWorkbench">
+        <Left theme="outline" size="24" fill="#091221" :stroke-width="2" />
+      </div>
+      <div class="h-[28px] leading-[28px]">使用記錄</div>
+    </div>
+    <div class="m-a overflow-y-hidden rounded-[16px] p-6">
+      <div>
+        <n-data-table
+          :bordered="false"
+          :columns="usedRecordsTableColumns"
+          :max-height="tableContentY"
+          :data="usedRecordsData"
+        >
+          <template #empty>
+            <div :style="{ height: tableContentY + 'px' }" class="flex items-center justify-center">
+              <div class="flex flex-col items-center justify-center">
+                <span class="mt-3 text-[#5b647a]">暫無數據</span>
+              </div>
+            </div>
+          </template>
+        </n-data-table>
+      </div>
+      <div class="mt-5 flex w-full justify-end">
+        <CustomPagination
+          :paging-info="pagingInfo"
+          @update-page-no="handleGetUsedRecordsListUpdatePageNo"
+          @update-page-size="handleGetUsedRecordsListUpdatePageSize"
+        />
+      </div>
+    </div>
+  </div>
+</template>