feat: 购买记录

src/apis/records.ts

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

src/router/modules/records.ts

@@ -10,4 +10,13 @@ export default [
     },
     component: () => import('@/views/used-records/used-records.vue'),
   },
+  {
+    path: '/records/purchase',
+    name: 'PurchaseRecords',
+    meta: {
+      title: '购买记录',
+      rank: 1001,
+    },
+    component: () => import('@/views/purchase-records/purchase-records.vue'),
+  },
 ] as RouteRecordRaw[]

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

@@ -17,6 +17,11 @@ const dropdownOptions = shallowRef([
     key: 'useRecords',
     icon: () => h(Right, { theme: 'outline', size: 12, strokeWidth: 3 }),
   },
+  {
+    label: '購買記錄',
+    key: 'purchaseRecords',
+    icon: () => h(Right, { theme: 'outline', size: 12, strokeWidth: 3 }),
+  },
   {
     label: '退出登錄',
     key: 'logout',
@@ -37,6 +42,9 @@ function handleDropdownSelect(key: string | number) {
     case 'useRecords':
       router.replace({ name: 'UseRecords' })
       break
+    case 'purchaseRecords':
+      router.replace({ name: 'PurchaseRecords' })
+      break
   }
 }
 </script>

src/views/purchase-records/columns.ts

+import { h } from 'vue'
+import { DataTableColumns } from 'naive-ui'
+import { formatDateTime } from '@/utils/date-formatter'
+
+export type EquityType = 'UNIVERSAL_CURRENCY'
+type EquityStatus = '未開始' | '已到期' | '正常使用' | '已使用'
+
+const equityTypeMap: Record<EquityType, string> = {
+  UNIVERSAL_CURRENCY: '靈豆',
+}
+
+export interface PurchaseRecords {
+  equityType: EquityType
+  keepEquityNum: number
+  createdTime: string
+  equityEndTime: string
+  equityStartTime: string
+  equityNum: number
+}
+
+function getEquityStatus(record: PurchaseRecords): EquityStatus {
+  const now = new Date()
+  const startTime = new Date(record.equityStartTime)
+  const endTime = new Date(record.equityEndTime)
+
+  if (now < startTime) {
+    return '未開始'
+  } else if (now > endTime) {
+    return '已到期'
+  } else if (record.equityNum === 0) {
+    return '已使用'
+  } else {
+    return '正常使用'
+  }
+}
+
+export function PurchaseRecordsTableColumns(): DataTableColumns<PurchaseRecords> {
+  return [
+    {
+      title: '商品類型',
+      key: 'equityType',
+      width: 200,
+      render(row) {
+        return h('span', equityTypeMap[row.equityType] || '--')
+      },
+    },
+    {
+      title: '商品額度',
+      key: 'keepEquityNum',
+      width: 200,
+      render(row) {
+        return h('span', `${row.keepEquityNum} 靈豆`)
+      },
+    },
+    {
+      title: '購買時間',
+      key: 'createdTime',
+      width: 200,
+      render(row) {
+        return h('span', {}, row.createdTime ? formatDateTime(row.createdTime) : '--')
+      },
+    },
+    {
+      title: '到期時間',
+      key: 'equityEndTime',
+      width: 200,
+      render(row) {
+        return h('span', row.equityEndTime ? formatDateTime(row.equityEndTime) : '--')
+      },
+    },
+    {
+      title: '目前狀態',
+      key: 'status',
+      width: 200,
+      render(row) {
+        const stateMap = {
+          未開始: { color: '#BBBBBB' },
+          已到期: { color: '#CB5656' },
+          正常使用: { color: '#26A50E' },
+          已使用: { color: '#1684FC' },
+        }
+        const state = stateMap[getEquityStatus(row)] || { color: '#CCCCCC' }
+        return h('div', { class: 'flex items-center' }, [
+          h('div', {
+            style: {
+              backgroundColor: state.color,
+              width: '8px',
+              height: '8px',
+              borderRadius: '50%',
+              marginRight: '12px',
+            },
+          }),
+          h('span', {}, getEquityStatus(row)),
+        ])
+      },
+    },
+  ]
+}

src/views/purchase-records/purchase-records.vue

+<script setup lang="ts">
+import { ref } from 'vue'
+import useTableScrollY from '@/composables/useTableScrollY'
+import { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
+import { PurchaseRecordsTableColumns, PurchaseRecords, EquityType } from '@/views/purchase-records/columns'
+import { Left } from '@icon-park/vue-next'
+import { router } from '@/router'
+import { fetchAwardRecordsList } from '@/apis/records'
+
+// 56：头部区域的高度
+// 48: 表格区域的padding
+// 23：表头的高度
+// 35: 距离底部高度
+// 28：分页栏的高度
+// 20：分页栏的margin-top
+const { pageContentWrapRef, tableContentY } = useTableScrollY(56 + 48 + 23 + 35 + 28 + 20)
+const purchaseRecordsTableColumns = PurchaseRecordsTableColumns()
+
+const purchaseRecordsTableLoading = ref(false)
+const purchaseRecordsData = ref<PurchaseRecords[]>([])
+const pagingInfo = ref<PaginationInfo>({
+  pageNo: 1,
+  pageSize: 10,
+  totalPages: 0,
+  totalRows: 0,
+})
+
+;(function () {
+  getPurchaseRecordsList()
+})()
+
+function getPurchaseRecordsList() {
+  purchaseRecordsTableLoading.value = true
+
+  fetchAwardRecordsList<PurchaseRecords[]>({
+    pagingInfo: pagingInfo.value,
+  }).then((res) => {
+    if (res.code !== 0) return
+
+    purchaseRecordsTableLoading.value = false
+
+    purchaseRecordsData.value = res.data.map((record) => ({
+      equityType: record.equityType as EquityType,
+      keepEquityNum: (record as any).keepedEquityNum,
+      createdTime: record.createdTime,
+      equityEndTime: record.equityEndTime,
+      equityStartTime: record.equityStartTime,
+      equityNum: record.equityNum,
+    })) as PurchaseRecords[]
+
+    pagingInfo.value = res.pagingInfo as PaginationInfo
+  })
+}
+
+function handleGetPurchaseRecordsListUpdatePageNo(pageNo: number) {
+  pagingInfo.value.pageNo = pageNo
+  getPurchaseRecordsList()
+}
+
+function handleGetPurchaseRecordsListUpdatePageSize(pageSize: number) {
+  pagingInfo.value.pageNo = 1
+  pagingInfo.value.pageSize = pageSize
+  getPurchaseRecordsList()
+}
+
+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] bg-white p-6">
+      <div>
+        <n-data-table
+          :bordered="false"
+          :columns="purchaseRecordsTableColumns"
+          :max-height="tableContentY"
+          :data="purchaseRecordsData"
+        >
+          <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="handleGetPurchaseRecordsListUpdatePageNo"
+          @update-page-size="handleGetPurchaseRecordsListUpdatePageSize"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -8,7 +8,13 @@ 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)
+// 56：头部区域的高度
+// 48: 表格区域的padding
+// 23：表头的高度
+// 35: 距离底部高度
+// 28：分页栏的高度
+// 20：分页栏的margin-top
+const { pageContentWrapRef, tableContentY } = useTableScrollY(56 + 48 + 23 + 35 + 28 + 20)
 const usedRecordsTableColumns = UsedRecordsTableColumns()
 
 const usedRecordsTableLoading = ref(false)