feat: add member detail UserExperienceRecordList

apps/web-antd/src/views/member/user/components/user-experience-record-list.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberExperienceRecordApi } from '#/api/member/experience-record';
+
+import { h } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getExperienceRecordPage } from '#/api/member/experience-record';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'bizType',
+        label: '业务类型',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: getDictOptions(
+            DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
+            'number',
+          ),
+        },
+      },
+      {
+        fieldName: 'title',
+        label: '标题',
+        component: 'Input',
+      },
+      {
+        fieldName: 'createDate',
+        label: '获得时间',
+        component: 'RangePicker',
+        componentProps: {
+          ...getRangePickerDefaultProps(),
+          allowClear: true,
+        },
+      },
+    ],
+  },
+  gridOptions: {
+    columns: [
+      {
+        field: 'id',
+        title: '编号',
+      },
+      {
+        field: 'createTime',
+        title: '获得时间',
+        formatter: 'formatDateTime',
+      },
+      {
+        field: 'experience',
+        title: '经验',
+        slots: {
+          default: ({ row }) => {
+            return h(
+              Tag,
+              {
+                class: 'mr-5px',
+                color: row.experience > 0 ? 'blue' : 'red',
+              },
+              () =>
+                row.experience > 0 ? `+${row.experience}` : row.experience,
+            );
+          },
+        },
+      },
+      {
+        field: 'totalExperience',
+        title: '总经验',
+      },
+      {
+        field: 'title',
+        title: '标题',
+      },
+      {
+        field: 'description',
+        title: '描述',
+      },
+      {
+        field: 'bizId',
+        title: '业务编号',
+      },
+      {
+        field: 'bizType',
+        title: '业务类型',
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
+        },
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getExperienceRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>

apps/web-antd/src/views/member/user/components/user-point-list.vue

@@ -2,8 +2,6 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MemberPointRecordApi } from '#/api/member/point/record';
 
-import { Tag } from 'ant-design-vue';
-
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getRecordPage } from '#/api/member/point/record';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
@@ -71,11 +69,5 @@ const [Grid] = useVbenVxeGrid({
 </script>
 
 <template>
-  <Grid>
-    <template #point="{ row }">
-      <Tag :color="row.point > 0 ? '#108ee9' : '#f50'">
-        {{ row.point > 0 ? `+${row.point}` : row.point }}
-      </Tag>
-    </template>
-  </Grid>
+  <Grid />
 </template>

apps/web-antd/src/views/member/user/components/user-sign-list.vue

@@ -2,8 +2,6 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MemberSignInRecordApi } from '#/api/member/signin/record';
 
-import { Tag } from 'ant-design-vue';
-
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSignInRecordPage } from '#/api/member/signin/record';
 import { getRangePickerDefaultProps } from '#/utils';
@@ -62,11 +60,5 @@ const [Grid] = useVbenVxeGrid({
 </script>
 
 <template>
-  <Grid>
-    <template #point="{ row }">
-      <Tag :color="row.point > 0 ? '#108ee9' : '#f50'">
-        {{ row.point > 0 ? `+${row.point}` : row.point }}
-      </Tag>
-    </template>
-  </Grid>
+  <Grid />
 </template>

apps/web-antd/src/views/member/user/modules/detail.vue

@@ -16,6 +16,7 @@ import { $t } from '#/locales';
 
 import UserAccountInfo from '../components/user-account-info.vue';
 import UserBasicInfo from '../components/user-basic-info.vue';
+import UserExperienceRecordList from '../components/user-experience-record-list.vue';
 import UserPointList from '../components/user-point-list.vue';
 import UserSignList from '../components/user-sign-list.vue';
 import Form from './form.vue';
@@ -86,7 +87,9 @@ onMounted(async () => {
           <TabPane tab="签到" key="UserSignList">
             <UserSignList class="h-full" :user-id="userId" />
           </TabPane>
-          <TabPane tab="成长值" key="UserExperienceRecordList" />
+          <TabPane tab="成长值" key="UserExperienceRecordList">
+            <UserExperienceRecordList class="h-full" :user-id="userId" />
+          </TabPane>
           <TabPane tab="余额" key="UserBalanceList" />
           <TabPane tab="收货地址" key="UserAddressList" />
           <TabPane tab="订单管理" key="UserOrderList" />