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,
  getReserveHistory,
} 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'
import PageHelperEvo from '@/components/page-helper-evo.vue'

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>
      <template v-if="tab === '分享'">
        <PageHelper :request="getBrowseHistories" :query="{ bizType: 1 }">
          <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>
      </template>
      <template v-if="tab === '浏览'">
        <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>
      </template>
      <template v-if="tab === '获客'">
        <PageHelperEvo :request="getReserveHistory" :query="query">
          <template #default="{ source }">
            <template v-for="(it, i) in source.list" :key="i">
              <div class="py-4">
                <div class="flex gap-3">
                  <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-normal">
                    <!-- 银色飞行船 -->
                    {{ it.appointmentName }}
                  </div>
                  <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-normal">
                    <!-- 浏览时长：{{ (Number(it.duration) / 60).toFixed(2) }}分钟 -->
                    {{ it.appointmentPhone }}
                  </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>
        </PageHelperEvo>
      </template>
    </Card>
  </div>
</template>