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 store, { 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'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { data: agent, run: setAgent } = useRequest(() =>
  getBroker({ brokerId: userInfo.value.userId.toString() }),
)
const { data: yearTarget, run: setYearTarget } = useRequest(() => getYearTarget())
const { data: designerData, run: setdesignerData } = useRequest(() => getDesignerStatistics())
const { data: followData, run: setFollowData } = useRequest(() => getFollowStatistics())
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="bg-gradient-to-r from-[#fef3ee] to-[#f0f4f9] rounded-lg flex items-center p-4 gap-6"
            >
              <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(it.thisYearComplete) / Number(it.target)) * 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-['DIN']"
                        >
                          {{
                            it.thisYearComplete && it.target
                              ? (Number(it.thisYearComplete) / Number(it.target)) * 100
                              : 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-['DIN'] leading-normal">
                    <!-- 6000 -->
                    {{ it.target / 10000 }}
                  </div>
                  <div class="text-black text-xs font-normal font-['PingFang_SC']">万</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-['DIN'] leading-normal">
                    <!-- 3000 -->
                    {{ (it.target - it.thisYearComplete) / 10000 }}
                  </div>
                  <div class="text-[#ff2d2d] text-[10px] font-medium font-['DIN'] leading-normal">
                    万
                  </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-['DIN'] leading-normal">
                    <!-- 6000 -->
                    {{ it.thisYearComplete / 10000 }}
                  </div>
                  <div class="text-black text-xs font-normal font-['PingFang_SC']">万</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-['DIN'] leading-normal">
                    <!-- 3000 -->
                    {{ it.thisMonthComplete / 10000 }}
                  </div>
                  <div class="text-[#0FC187] text-[10px] font-medium font-['DIN'] leading-normal">
                    万
                  </div>
                </div>
              </div>
            </div>
          </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 designerData" :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 }}
              </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">
                  20
                </div>
              </div>
            </div>
          </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 }}
              </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">
                  20
                </div>
              </div>
            </div>
          </template>
        </div>
      </Card>
    </div>
  </div>
</template>