【需求 20331】 feat: 完成前台每日抽奖相关内容

src/views/userPage/components/editUserInfo.vue

@@ -10,7 +10,13 @@
     <el-form ref="formRef" :model="form" :rules="rules" label-width="60px" class="px-4">
       <!-- 昵称 -->
       <el-form-item label="昵称" prop="hiddenName">
-        <el-input v-model="form.hiddenName" placeholder="将心比心" clearable class="w-full" />
+        <el-input
+          v-model="form.hiddenName"
+          placeholder="请输入昵称"
+          clearable
+          class="w-full"
+          maxlength="15"
+        />
       </el-form-item>
 
       <!-- 签名 -->

src/views/userPage/components/selfActivity.vue

 <template>
-  <div class="flex-1 flex flex-col" v-loading="loading">
+  <div class="flex-1 flex flex-col">
     <div class="flex-1 p-4 pt-1">
       <div class="relative">
-        <el-tabs v-model="searchParams.type" @tab-change="toggleTab">
+        <el-tabs v-model="tab" @tab-change="toggleTab">
           <el-tab-pane
             v-for="tab in activityTypeListOptions"
             :key="tab.value"
             :label="tab.label"
             :name="tab.value"
-          />
+          >
+            <component :is="tab.component" />
+          </el-tab-pane>
         </el-tabs>
         <div class="absolute right-0 top-2.5 z-1000">
           <el-icon
@@ -20,7 +22,7 @@
         </div>
       </div>
       <!-- 加一行提示 -->
-      <div class="flex justify-end">
+      <!-- <div class="flex justify-end">
         <p class="text-gray-500 text-sm mb-1 flex items-center gap-1">
           <el-icon><IEpInfoFilled /></el-icon>
           页面仅展示竞拍成功的记录
@@ -58,41 +60,168 @@
           class="custom-pagination"
         />
       </div>
+    </div> -->
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { getSelfAuctionRecord } from '@/api'
+<script lang="tsx" setup>
+import { getSelfAuctionRecord, getUserLotteryRecordList } from '@/api'
 import { usePageSearch } from '@/hooks'
-import { activityTypeListOptions } from '@/constants/options'
 import { ActivityTypeEnum } from '@/constants/enums'
-import type { TabPaneName } from 'element-plus'
+import type { UserLotteryRecordItemDto } from '@/api/dailyLottery/types'
 
-const toggleTab = (key: TabPaneName) => {
-  searchParams.value.type = key as ActivityTypeEnum
-  refresh()
-}
+const EmptyComp = () => (
+  <div class="flex flex-col items-center justify-center h-64">
+    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
+      <el-icon class="text-2xl text-gray-300">
+        <IEpDocument />
+      </el-icon>
+    </div>
+    <div class="text-gray-500 text-lg mb-2">暂无内容</div>
+  </div>
+)
 
-const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch(
-  getSelfAuctionRecord,
+const activityTypeListOptions = [
   {
-    defaultParams: {
-      type: activityTypeListOptions[0]!.value,
-    },
-    immediate: false,
+    label: '限时竞拍',
+    value: ActivityTypeEnum.AUCTION,
+    component: () => (
+      <>
+        <div class="flex justify-end">
+          <p class="text-gray-500 text-sm mb-1 flex items-center gap-1">
+            <el-icon>
+              <IEpInfoFilled />
+            </el-icon>
+            页面仅展示竞拍成功的记录
+          </p>
+        </div>
+        {!list1.value.length ? (
+          <EmptyComp />
+        ) : (
+          <>
+            <div class="space-y-4">
+              <el-table height="500" data={list1.value} stripe border loading={loading1.value}>
+                <el-table-column prop="name" label="名称" />
+                <el-table-column prop="startingPrice" label="起拍价" />
+                <el-table-column prop="bidPrice" label="支出YA币" />
+              </el-table>
+            </div>
+            <div class="flex items-center justify-end px-6 py-4 border-t border-gray-200">
+              <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
+                <el-pagination
+                  v-model:current-page={searchParams1.value.current}
+                  v-model:page-size={searchParams1.value.size}
+                  onSizeChange={changePageSize1}
+                  onCurrentChange={goToPage1}
+                  page-sizes={[10, 20, 30, 40]}
+                  layout="prev, pager, next, jumper, total"
+                  total={total1.value}
+                  class="custom-pagination"
+                />
+              </div>
+            </div>
+          </>
+        )}
+      </>
+    ),
+    refresh: () => refresh1(),
   },
-)
+  {
+    label: '每日抽奖',
+    value: ActivityTypeEnum.DAILY_LOTTERY,
+    component: () => (
+      <>
+        {!list2.value.length ? (
+          <EmptyComp />
+        ) : (
+          <>
+            <div class="space-y-4">
+              <el-table height="500" data={list2.value} stripe border loading={loading2.value}>
+                <el-table-column prop="prizeName" label="名称" />
+                <el-table-column prop="activityDateRange" label="参与时间" />
+                <el-table-column prop="isLotteryDone" label="是否开奖">
+                  {({ row }: { row: UserLotteryRecordItemDto }) => (
+                    <div>{row.isLotteryDone ? <span>是</span> : <span>否</span>}</div>
+                  )}
+                </el-table-column>
+                <el-table-column prop="isWin" label="是否中奖">
+                  {({ row }: { row: UserLotteryRecordItemDto }) => (
+                    <div>
+                      {row.isLotteryDone ? (
+                        row.isWin ? (
+                          <span class="text-green-500">是</span>
+                        ) : (
+                          <span class="text-red-500">否</span>
+                        )
+                      ) : (
+                        '暂未开奖'
+                      )}
+                    </div>
+                  )}
+                </el-table-column>
+              </el-table>
+            </div>
+            <div class="flex items-center justify-end px-6 py-4 border-t border-gray-200">
+              <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
+                <el-pagination
+                  v-model:current-page={searchParams2.value.current}
+                  v-model:page-size={searchParams2.value.size}
+                  onSizeChange={changePageSize2}
+                  onCurrentChange={goToPage2}
+                  page-sizes={[10, 20, 30, 40]}
+                  layout="prev, pager, next, jumper, total"
+                  total={total2.value}
+                  class="custom-pagination"
+                />
+              </div>
+            </div>
+          </>
+        )}
+      </>
+    ),
+    refresh: () => refresh2(),
+  },
+]
+
+const tab = ref(activityTypeListOptions[0]!.value)
+
+const toggleTab = () => {
+  refresh()
+}
+
+const {
+  list: list1,
+  loading: loading1,
+  searchParams: searchParams1,
+  total: total1,
+  refresh: refresh1,
+  goToPage: goToPage1,
+  changePageSize: changePageSize1,
+} = usePageSearch(getSelfAuctionRecord, {
+  immediate: false,
+})
+const {
+  list: list2,
+  loading: loading2,
+  searchParams: searchParams2,
+  total: total2,
+  refresh: refresh2,
+  goToPage: goToPage2,
+  changePageSize: changePageSize2,
+} = usePageSearch(getUserLotteryRecordList, {
+  immediate: false,
+})
+
+const refresh = () => {
+  activityTypeListOptions.find((item) => item.value === tab.value)?.refresh?.()
+}
 
 onActivated(() => {
-  searchParams.value.type = activityTypeListOptions[0]!.value
   refresh()
 })
 
 defineExpose({
-  refresh: () => {
-    searchParams.value.type = activityTypeListOptions[0]!.value
-    refresh()
-  },
+  refresh: () => refresh(),
 })
 </script>

src/views/userPage/index.vue

@@ -227,7 +227,7 @@ const menuUserItems = [
   {
     path: 'selfActivity',
     label: '参与活动',
-    icon: () => <IEpPointer />,
+    icon: () => <IEpTrophy />,
     tab: '活动',
   },
   {