feat(mine): 添加主页数据统计功能

- 新增主页数据统计页面，展示分享、浏览、获客等数据
- 实现浏览历史记录的获取和展示
- 优化个人主页界面，增加数据统计入口

packages/app/src/core/libs/requests.ts

@@ -702,6 +702,23 @@ export const createBrowseHistory = (data: {
    */
   duration?: string
 }) => httpPost('/app-api/member/designer/browseHistory', data)
+export const getBrowseHistories = (query) =>
+  httpGet<
+    ResPageData<{
+      createTime: number
+      updateTime: number
+      creator: string
+      updater: string
+      deleted: boolean
+      id: number
+      stylistId: number
+      stylistName: string
+      bizId: any
+      bizType: string
+      duration: string
+      creatorName: string
+    }>
+  >('/app-api/member/designer/getBrowseHistory', query)
 /**
  * 通过ID获取用户信息
  */

packages/app/src/pages/mine/homepage/statistics/index.vue

@@ -3,61 +3,85 @@
 </route>
 <script setup lang="ts">
 import SectionHeading from '@/components/section-heading.vue'
-import { getDesignerInfo, updateDesignerInfo } from '../../../../core/libs/requests'
+import { getDesignerInfo, getBrowseHistories } from '../../../../core/libs/requests'
 import { useUserStore } from '../../../../store'
 import { storeToRefs } from 'pinia'
-import { pick } from 'radash'
-import { requestToast } from '../../../../core/utils/common'
-import BottomAppBar from '@/components/bottom-app-bar.vue'
 import Card from '@/components/card.vue'
+import PageHelper from '@/components/page-helper.vue'
+import dayjs from 'dayjs'
 
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
-const form = ref<{
-  userId?: number
-  videoNumber?: string
-}>()
 const { data, run: setData } = useRequest(() => getDesignerInfo(userInfo.value.userId))
-const { loading, run: submiting } = useRequest(() => updateDesignerInfo(form.value))
-const handleSubmit = async () => {
-  await requestToast(submiting, {
-    success: true,
-    successTitle: '关联成功',
-  }).then(() => setData())
-}
+const info = computed(() => [
+  { label: '分享', value: data.value?.shareCount || 0, unit: '次' },
+  { label: '浏览', value: data.value?.viewCount || 0, unit: '次' },
+  { label: '获客', value: data.value?.winCustomerCount || 0, unit: '人' },
+])
+const tab = ref('分享')
+const tabs = ref([
+  //   { label: '分享明细', value: '分享' },
+  { label: '浏览明细', value: '浏览' },
+  //   { label: '获客明细', value: '获客' },
+])
+const query = computed(() => ({}))
 onMounted(async () => {
   await setData()
-  form.value = pick(data.value, ['id', 'userId', 'videoNumber'])
 })
 </script>
 <template>
   <div class="flex-grow flex flex-col gap-5 px-3.5 py-6">
-    <Card>1</Card>
-    <!-- <SectionHeading title="如何关联视频号？" size="sm"></SectionHeading>
-    <img class="w-[347px] h-[186px] rounded-2xl" src="https://via.placeholder.com/347x186" />
-    <SectionHeading title="视频号ID" size="sm"></SectionHeading>
-    <div class="bg-[#f6f6f6] rounded-lg px-3.5 py-2.5">
-      <wd-input
-        v-model="form.videoNumber"
-        placeholder="请输入视频号ID"
-        no-border
-        custom-class="bg-[#f6f6f6]!"
-      ></wd-input>
-    </div>
-    <BottomAppBar fixed :border="false">
-      <div>
-        <div class="text-center mb-5.5">
-          <span class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-tight">
-            点击确认关联即表示同意
-          </span>
-          <span class="text-[#0cbe7c] text-xs font-normal font-['PingFang SC'] leading-tight">
-            《个人微信视频号授权使用协议》
-          </span>
-        </div>
-        <wd-button :round="false" block :loading="loading" @click="handleSubmit">
-          确定关联
-        </wd-button>
+    <Card>
+      <SectionHeading title="主页数据"></SectionHeading>
+      <div class="flex mt-7">
+        <template v-for="(it, i) in info" :key="i">
+          <div class="flex-1 flex flex-col items-center gap-2">
+            <div class="flex items-end gap-0.5">
+              <div class="text-black text-2xl font-medium font-['DIN'] leading-6">
+                {{ it.value }}
+              </div>
+              <div class="text-[#333333] text-sm font-normal font-['PingFang_SC']">
+                {{ it.unit }}
+              </div>
+            </div>
+            <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
+              {{ it.label }}
+            </div>
+          </div>
+        </template>
       </div>
-    </BottomAppBar> -->
+    </Card>
+    <Card>
+      <wd-tabs v-model="tab">
+        <template v-for="(it, i) in tabs" :key="i">
+          <wd-tab :title="it.label" :name="it.value"></wd-tab>
+        </template>
+      </wd-tabs>
+      <PageHelper :request="getBrowseHistories" :query="query">
+        <template #default="{ source }">
+          <template v-for="(it, i) in source.list" :key="i">
+            <div class="py-4">
+              <div class="flex">
+                <div
+                  class="flex-1 text-black text-sm font-normal font-['PingFang_SC'] leading-normal"
+                >
+                  <!-- 银色飞行船 -->
+                  {{ it.stylistName }}
+                </div>
+                <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
+                  浏览时长：{{ (Number(it.duration) / 60).toFixed(2) }}分钟
+                </div>
+              </div>
+              <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
+                查看时间：
+                <!-- 2024/04/01 14:52 -->
+                {{ dayjs(it.createTime).format('YYYY/MM/DD HH:mm') }}
+              </div>
+            </div>
+            <div v-if="i < source.list.length - 1" class="bg-[#f6f6f6] h-.25"></div>
+          </template>
+        </template>
+      </PageHelper>
+    </Card>
   </div>
 </template>

packages/app/src/pages/mine/index.vue

@@ -197,15 +197,11 @@ onShow(async () => {
       ...userInfo.value,
       ...data.value,
     })
-    // await setDesignerInfo()
-    // await getTaskData()
     await Promise.all([setDesignerInfo(), getTaskData(), setTaskStatus()])
-    // console.log(taskData.value)
     console.log(taskStatusData.value)
   }
 })
 onPageScroll(({ scrollTop }: { scrollTop: number }) => {
-  // console.log(scrollTop)
   navBarProps.value.customClass = scrollTop === 0 ? 'bg-transparent!' : ''
 })
 </script>
@@ -265,7 +261,10 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
           </div>
         </div>
       </div>
-      <div class="px-3.5 flex items-center">
+      <div
+        class="px-3.5 flex items-center"
+        @click="router.push('/pages/mine/homepage/statistics/index')"
+      >
         <div class="flex items-center">
           <div class="text-white text-base font-normal font-['PingFang_SC'] leading-normal mr-1">
             <!-- 0 -->