designer-hub/packages/app/src/pages/mine/homepage/statistics/index.vue

<route lang="json">
{ "style": { "navigationBarTitleText": "主页数据", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { getDesignerInfo, getBrowseHistories } from '../../../../core/libs/requests'
import { useUserStore } from '../../../../store'
import { storeToRefs } from 'pinia'
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 { data, run: setData } = useRequest(() => getDesignerInfo(userInfo.value.userId))
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 current = ref('累计')
const query = computed(() => ({}))
onMounted(async () => {
  await setData()
})
</script>
<template>
  <div class="flex-grow flex flex-col gap-5 px-3.5 py-6">
    <Card>
      <SectionHeading title="主页数据">
        <template #append>
          <div>
            <wd-segmented v-model:value="current" :options="['累计']"></wd-segmented>
          </div>
        </template>
      </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>
    </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.creatorName }}
                </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>