designer-hub/packages/merchant/src/pages/mine/components/agent-mine.vue

<script setup lang="ts">
import {
  getBroker,
  getDesignerStatistics,
  getFollowStatistics,
  getYearTarget,
} from '../../../core/libs/requests'
import { NetImages } from '../../../core/libs/net-images'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import qrCode from '@designer-hub/assets/src/libs/assets/qrCode'
import Card from '@designer-hub/app/src/components/card.vue'
import SectionHeading from '@designer-hub/app/src/components/section-heading.vue'
import { getFollowUpPage } from '@/core/libs/agent-requests'
import { locationIcon } from '@designer-hub/assets/src/svgs'
import { dayjs } from 'wot-design-uni'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import ListHelperEvo from '@/components/list-helper-evo.vue'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { data: agent, run: setAgent } = useRequest(() =>
  getBroker({ brokerId: String(userInfo.value.userId) }),
)
const { data: yearTarget, run: setYearTarget } = useRequest(() => getYearTarget())
const { data: designerData, run: setDesignerData } = useRequest(() => getDesignerStatistics())
const { data: followData, run: setFollowData } = useRequest(() => getFollowStatistics())
const designerDataList = computed(() =>
  designerData.value
    ?.filter((it: any) => it.type !== 2)
    .map((it: any, index: number) => ({
      title: it.typeName,
      value: it.quantity ?? 0,
      subTitle: index === 0 ? designerData.value[1].typeName : '占比',
      subValue:
        index === designerData.value[1].quantity
          ? 0
          : `${((it.quantity / designerData.value[0].quantity) * 100).toFixed(0)}%`,
    })),
)
const bgClass = [
  'bg-gradient-to-r from-[#fef3ee] to-[#f0f4f9]',
  'bg-gradient-to-r from-[#fef8ee] to-[#f0f4f9]',
  'bg-gradient-to-r from-[#eef4fe] to-[#f0f4f9]',
  'bg-gradient-to-r from-[#faf2ff] to-[#f0f4f9]',
]
const units = [
  // { },
  // 单位、 换算率
  // { unit: '万', rate: 1 },
  // { unit: '万', rate: 1 },
  // { unit: '次', rate: 1 },
  // { unit: '次', rate: 1 },

  { unit: '', rate: 1 },
  { unit: '', rate: 1 },
  { unit: '', rate: 1 },
  { unit: '', rate: 1 },
]
const toSettings = () => {
  uni.navigateTo({ url: '/pages/mine/agent/settings/index' })
}
const toInvite = () => {
  uni.navigateTo({ url: '/pages/mine/agent/invite/index' })
}
onMounted(async () => {
  await setAgent()
  await Promise.all([setYearTarget(), setDesignerData(), setFollowData()])
})
</script>
<template>
  <div>
    <div class="aspect-[0.96/1] absolute left-0 right-0 top--1">
      <wd-img
        width="100%"
        height="100%"
        :src="NetImages.AgentMineHeaderBg"
        custom-class="vertical-bottom"
      ></wd-img>
    </div>
    <!-- <wd-navbar
      fixed
      safeAreaInsetTop
      custom-class="bg-transparent!"
      :bordered="false"
      placeholder
      v-bind="navBarProps"
    ></wd-navbar> -->
    <div class="p-4 flex flex-col gap-4 relative">
      <div class="flex items-center px-4 mb-4" @click="toSettings">
        <wd-img
          round
          width="56"
          height="56"
          custom-class="border border-solid border-white"
          :src="agent?.headImgUrl"
        />
        <div class="mx-4 flex-1">
          <div class="text-white text-lg font-normal font-['PingFang_SC'] leading-normal">
            {{ agent?.brokerName }}
          </div>
          <div class="text-white text-xs font-normal font-['PingFang_SC'] leading-relaxed">
            ID：{{ agent?.inviteCode }}
          </div>
        </div>
        <div class="flex flex-col items-center" @click.stop="toInvite">
          <div class="w-[29px] h-[29px] relative">
            <wd-img width="28" height="28" :src="qrCode"></wd-img>
          </div>
          <div class="text-white text-[10px] font-normal font-['PingFang_SC'] leading-relaxed">
            邀请码
          </div>
        </div>
      </div>
      <Card>
        <SectionHeading title="本年目标" size="base"></SectionHeading>
        <div class="flex flex-col gap-2.5 mt-3">
          <template v-for="(it, i) in yearTarget" :key="i">
            <div class="rounded-lg flex items-center p-4 gap-6" :class="bgClass[i]">
              <div>
                <div class="w-[45px] h-[45px] rounded-full border-4 border-[#ffe2d0]">
                  <div style="width: 50px; height: 50px">
                    <wd-circle
                      :model-value="
                        it.thisYearComplete && it.target
                          ? Number((Number(it.thisYearComplete) / Number(it.target)).toFixed(0)) *
                            100
                          : 0
                      "
                      :size="50"
                      :color="['#FF7742', '#FFAA42', '#4271FF', '#C131FF'][i]"
                      :clockwise="false"
                    >
                      <div class="flex flex-col items-center">
                        <div
                          class="w-[29.20px] h-[18.39px] text-black text-sm font-medium font-['D-DIN-PRO']"
                        >
                          {{
                            it.thisYearComplete && it.target
                              ? (
                                  Number(Number(it.thisYearComplete) / Number(it.target)) * 100
                                ).toFixed(1)
                              : 0
                          }}%
                        </div>
                        <div
                          class="w-[22.71px] h-[10.82px] text-black/60 text-[7px] font-normal font-['PingFang_SC']"
                        >
                          达成率
                        </div>
                      </div>
                    </wd-circle>
                  </div>
                </div>
              </div>
              <div class="flex-1">
                <div class="text-black/60 text-xs font-normal font-['PingFang_SC']">
                  {{ it.typeName }}
                </div>
                <div class="flex items-center gap-1">
                  <div class="text-black/90 text-lg font-medium font-['D-DIN-PRO'] leading-normal">
                    <!-- 6000 -->
                    <!--                    {{ it.target / 10000 }}-->
                    {{ it.target / units[i].rate }}
                  </div>
                  <div class="text-black text-xs font-normal font-['PingFang_SC']">
                    {{ units[i].unit }}
                  </div>
                </div>
                <div class="flex items-center gap-1">
                  <div class="text-black/60 text-xs font-normal font-['PingFang_SC']">差值</div>
                  <div class="text-[#ff2d2d] text-xs font-medium font-['D-DIN-PRO'] leading-normal">
                    <!-- 3000 -->
                    {{ (it.target - (it.thisYearComplete ?? 0)) / units[i].rate }}
                  </div>
                  <div
                    class="text-[#ff2d2d] text-[10px] font-medium font-['D-DIN-PRO'] leading-normal"
                  >
                    {{ units[i].unit }}
                  </div>
                </div>
              </div>
              <div class="">
                <div class="text-black/60 text-xs font-normal font-['PingFang_SC']">当年完成</div>
                <div class="flex items-center gap-1">
                  <div class="text-black/90 text-lg font-medium font-['D-DIN-PRO'] leading-normal">
                    <!-- 6000 -->
                    {{ (it.thisYearComplete ?? 0) / units[i].rate }}
                  </div>
                  <div class="text-black text-xs font-normal font-['PingFang_SC']">
                    {{ units[i].unit }}
                  </div>
                </div>
                <div class="flex items-center gap-1">
                  <div class="text-black/60 text-xs font-normal font-['PingFang_SC']">本月</div>
                  <div class="text-[#0FC187] text-xs font-medium font-['D-DIN-PRO'] leading-normal">
                    <!-- 3000 -->
                    {{ (it.thisMonthComplete ?? 0) / units[i].rate }}
                  </div>
                  <div
                    class="text-[#0FC187] text-[10px] font-medium font-['D-DIN-PRO'] leading-normal"
                  >
                    {{ units[i].unit }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </Card>
      <Card>
        <SectionHeading title="设计师数据" size="base"></SectionHeading>
        <div class="mt-3">
          <ListHelperEvo
            v-if="designerDataList?.length"
            :items="designerDataList"
            content-class="grid grid-cols-3 gap-2.5"
          >
            <template #default="{ item }">
              <div class="bg-[#f6f7ff] rounded-lg aspect-[1/1] flex flex-col justify-around p-2.5">
                <div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-none">
                  {{ item.title }}
                </div>
                <div class="text-black/90 text-lg font-bold font-['D-DIN_Exp'] leading-normal">
                  {{ item.value }}
                </div>
                <div class="flex items-center gap-1">
                  <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-none">
                    {{ item.subTitle }}
                  </div>
                  <div class="text-[#ff2d2d] text-xs font-normal font-['D-DIN_Exp'] leading-normal">
                    {{ item.subValue }}
                  </div>
                </div>
              </div>
            </template>
          </ListHelperEvo>
          <!--          <template v-for="(it, i) in designerData" :key="i"></template>-->
        </div>
      </Card>
      <Card>
        <SectionHeading title="跟进数据" size="base"></SectionHeading>
        <div class="mt-3 grid grid-cols-3 gap-2.5">
          <template v-for="(it, i) in followData" :key="i">
            <div class="bg-[#f6f7ff] rounded-lg aspect-[1/1] flex flex-col justify-around p-2.5">
              <div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-none">
                {{ it.typeName }}
              </div>
              <div class="text-black/90 text-lg font-bold font-['D-DIN_Exp'] leading-normal">
                {{ it.quantity ?? 0 }}
              </div>
              <div class="flex items-center gap-1">
                <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-none">
                  年新增
                </div>
                <div class="text-[#ff2d2d] text-xs font-normal font-['D-DIN_Exp'] leading-normal">
                  {{ it.thisYearQuantity ?? 0 }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </Card>
      <PageHelperEvo :request="getFollowUpPage" :query="{ brokerId: userInfo.userId }">
        <template #default="{ source }">
          <div class="flex flex-col gap-4">
            <template v-for="(it, index) in source?.list" :key="index">
              <div class="bg-white rounded-2xl shadow pl-[15px] py-[15px] flex-col gap-2 flex">
                <div class="flex items-center justify-between">
                  <div
                    class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed"
                  >
                    {{ dayjs(it.followTime).format('YYYY-MM-DD HH:mm') }}
                  </div>
                  <div
                    class="text-white text-xs font-normal font-['PingFang_SC'] leading-none pa-[8px]"
                    :class="`${{ 1: 'bg-[#2357E9]', 2: 'bg-[#f8b344]' }[it.followType]}`"
                    style="border-top-left-radius: 15px; border-bottom-left-radius: 5px"
                  >
                    <div class="flex items-center gap-1">
                      <div class="w-1 h-1 bg-white rounded-full border"></div>
                      <!-- 线下拜访 -->
                      {{ it.followTypeName }}
                    </div>
                  </div>
                </div>
                <div
                  class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal mr-[15px] mt-[29px]"
                >
                  <!-- 和周老师在工作碰了环球项目，选了瓷砖款式，后天客户交定金，订单金额初步为
                  304958 -->
                  {{ it.remark }}
                </div>
                <div class="mt-[15px] flex gap-2.5">
                  <template v-for="(src, index) in it?.imgUrl?.split(',')" :key="index">
                    <wd-img
                      custom-class="rounded-lg overflow-hidden"
                      width="70"
                      height="70"
                      :src="src"
                    />
                  </template>
                </div>
                <div class="flex items-center justify-between mt-[19px]">
                  <div
                    class="h-[25px] px-1.5 bg-[#f4f4f4] rounded-md justify-center items-center gap-1 inline-flex"
                  >
                    <wd-img width="15px" height="15px" :src="locationIcon"></wd-img>

                    <div
                      class="text-black/40 text-[10px] font-normal font-['PingFang_SC'] leading-[25px]"
                    >
                      <!-- 一间空间设计工作室 -->
                      {{ it?.address.address }}
                    </div>
                  </div>
                  <div
                    class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-relaxed mr-[15px]"
                  >
                    渠道：{{ it?.brokerName }}
                  </div>
                </div>
              </div>
            </template>
          </div>
        </template>
      </PageHelperEvo>
    </div>
  </div>
</template>