front-pc/pages/personal-Center/components/info.vue

<template>
  <div class="box-border w-913px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-18px">
    <div class="flex items-center">
      <img :src="userStore.userInfoRes.avatar" alt="" srcset="" class="h-105px w-105px rounded-full" />
      <div class="ml-29px">
        <div class="flex items-center">
          <span class="text-20px text-[#333333] font-normal">Hi，{{ userStore.userInfoRes.nickname }}</span>
          <img v-if="userStore.userInfoRes.vipLevel === 1" src="~/assets/svg/vip.svg" alt="" class="relative top-2px ml-5px" />
          <img v-if="userStore.userInfoRes.vipLevel === 2" src="~/assets/svg/svip.svg" alt="" class="relative top-2px ml-5px" />
          <div
            class="ml-18px h-30px w-80px cursor-pointer border border-[#1A65FF] rounded-15px border-solid text-center text-14px text-[#1A65FF] font-normal line-height-30px"
            @click="handleClick"
            >编辑资料</div
          >
        </div>
        <div class="mt-20px flex items-center text-14px text-[#333333] font-normal">
          <div class="flex items-center">
            <img src="~/assets/images/cad_0 (1).png" alt="" srcset="" />
            <span class="ml-4px">我的积分: {{ userStaticInfo?.pointCount || 0 }}</span>
          </div>
          <div class="ml-37px flex items-center">
            <img src="~/assets/images/cad_0 (2).png" alt="" srcset="" />
            <span class="ml-4px">我的收藏: {{ userStaticInfo?.followCount || 0 }}</span>
          </div>
          <div class="ml-37px flex items-center">
            <img src="~/assets/images/cad_0 (3).png" alt="" srcset="" />
            <span class="ml-4px">我的发布: {{ userStaticInfo?.projectCount || 0 }}</span>
          </div>
          <div class="ml-37px flex items-center">
            <img src="~/assets/images/cad_0 (4).png" alt="" srcset="" />
            <span class="ml-4px">我的下载: {{ userStaticInfo?.downloadCount || 0 }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-30px flex items-center justify-around">
      <div class="flex items-center">
        <div class="relative">
          <img src="~/assets/images/info_1 (3).png" alt="" srcset="" />
          <img src="~/assets/images/info_1 (4).png" alt="" srcset="" class="absolute left-18px top-18px" />
        </div>
        <div class="ml-18px">
          <div class="flex items-center">
            <span class="info_num text-[#17A86D]">{{ userStaticInfo?.currencyCount || 0 }}</span>
            <div class="info_pay cursor-pointer" @click="handlePay">充值</div>
          </div>
          <div class="font">金币余额</div>
        </div>
      </div>
      <div class="flex items-center">
        <div class="relative">
          <img src="~/assets/images/info_1 (5).png" alt="" srcset="" />
          <img src="~/assets/images/info_1 (6).png" alt="" srcset="" class="absolute left-18px top-22px" />
        </div>
        <div class="ml-18px">
          <div>
            <span class="info_num text-[#328CD7]">{{ userStaticInfo?.previewCount || 0 }}</span>
          </div>
          <div class="font">今日浏览量（次）</div>
        </div>
      </div>
      <div class="flex items-center">
        <div class="relative">
          <img src="~/assets/images/info_1 (1).png" alt="" srcset="" />
          <img src="~/assets/images/info_1 (2).png" alt="" srcset="" class="absolute left-20px top-18px" />
        </div>
        <div class="ml-18px">
          <div>
            <span class="info_num text-[#FFC415]">{{ userStaticInfo?.revenueCount || 0 }}</span>
          </div>
          <div class="font">今日收益（元）</div>
        </div>
      </div>
    </div>
  </div>
  <!--  -->
  <div class="mt-23px box-border h-183px w-913px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px">
    <div class="title">快捷入口</div>
    <div class="mt-20px flex items-center">
      <div class="info_item cursor-pointer" @click="handleClickPush('/upnew/drawe')">
        <img src="~/assets/images/fabu_2 (3).png" alt="" srcset="" />
        <div class="mt-10px">发布资源</div>
      </div>
      <div class="info_item ml-31px cursor-pointer" @click="handleClickPush('/communication/channel')">
        <img src="~/assets/images/fabu_2 (1).png" alt="" srcset="" />
        <div class="mt-10px">交流频道</div>
      </div>
      <div class="info_item ml-31px cursor-pointer" @click="handleService">
        <img src="~/assets/images/fabu_2 (2).png" alt="" srcset="" />
        <div class="mt-10px">消息</div>
      </div>
    </div>
  </div>
  <!-- echarts -->
  <InfoEcharts></InfoEcharts>

  <!-- 打开消息弹窗 弄成组件 -->
  <Message v-if="dialogVisible" v-model:dialog-visible="dialogVisible"></Message>
  <!-- 充值弹窗 -->
  <Pay v-if="payVisible" v-model="payVisible" @refresh="fetchUserStatistics"></Pay>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { getUserStatistics } from '~/api/personal-center/index'
  import type { UserStatisticsCountRespVO } from '~/api/personal-center/types'
  import Message from './components/message.vue'
  import InfoEcharts from './info-echarts.vue'
  import Pay from './components/pay.vue'
  import useUserStore from '~/store/user'
  const userStore = useUserStore()

  // 路由跳转
  import { useRouter } from 'vue-router'
  const router = useRouter()

  // 获取用户统计信息
  const userStaticInfo = ref<UserStatisticsCountRespVO>()
  const fetchUserStatistics = async () => {
    const res = await getUserStatistics()
    userStaticInfo.value = res.data
  }
  fetchUserStatistics()

  const handleClick = () => {
    router.push({ path: '/personal/profile' })
  }

  const payVisible = ref(false)
  const handlePay = () => {
    payVisible.value = true
    // router.push({ path: '/personal/trading/center' })
  }

  const handleClickPush = (path: string) => {
    if (!path) {
      return
    }
    navigateTo(path)
  }

  const dialogVisible = ref(false)
  const handleService = () => {
    dialogVisible.value = true
  }
</script>

<style scoped lang="scss">
  .info_num {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 24px;
  }
  .font {
    font-weight: 400;
    font-size: 14px;
    color: #999999;
    margin-top: 6px;
  }
  .info_pay {
    width: 60px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid #1a65ff;
    font-weight: 400;
    font-size: 14px;
    color: #1a65ff;
    text-align: center;
    line-height: 24px;
    margin-left: 7px;
  }
  .title {
    padding-bottom: 16px;
    border-bottom: 1px solid #eeeeee;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
  }
  .info_item {
    width: 121px;
    height: 81px;
    border-radius: 4px;
    border: 1px solid #1a65ff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
  }
</style>