wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update API request formatting and routing structure

Browse Source
This commit is contained in:
wangqiao
2025-08-27 21:54:08 +08:00
parent 0f96406b5a
commit 170113e11c
23 changed files with 124 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
pages/personal-Center/index/info.vue Normal file
View File

@ -0,0 +1,192 @@
<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')">
<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('/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 '~/stores/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-Center/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>