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

Update async navigation and optimize detail page

Browse Source
This commit is contained in:
wangqiao
2025-08-26 22:42:39 +08:00
parent 84a7263f36
commit dd46a68b6c
4 changed files with 49 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/kl-card-picture/index.vue
View File

@ -46,11 +46,11 @@
}, },
}) })
const handleClick = () => { const handleClick = async () => {
console.log(props.itemInfo) console.log(props.itemInfo)
// 跳转到下载详情页 并且是单独开标签 // 跳转到下载详情页 并且是单独开标签
navigateTo(`/down-drawe-detail/${props.itemInfo.id}`) // 修改为在新窗口打开 await navigateTo(`/down-drawe-detail/${props.itemInfo.id}`) // 修改为在新窗口打开
} }
</script> </script>

1
package.json
View File

@ -22,6 +22,7 @@
"pdfjs-dist": "^5.4.54", "pdfjs-dist": "^5.4.54",
"pinia": "^3.0.3", "pinia": "^3.0.3",
"qrcode.vue": "^3.6.0", "qrcode.vue": "^3.6.0",
"swiper": "^11.2.10",
"tinymce": "^6.2.0", "tinymce": "^6.2.0",
"vue": "^3.5.18", "vue": "^3.5.18",
"vue-pdf-embed": "^2.1.3", "vue-pdf-embed": "^2.1.3",

80
pages/down-drawe-detail/[id].vue
View File

@ -96,15 +96,15 @@
</div> </div>
<div class="ml-[22px]"> <div class="ml-[22px]">
<div class="box-border h-[269px] w-[397px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[22px]"> <div class="box-border h-[269px] w-[397px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[22px]">
<div class="mb-[10px]">图纸ID: {{ detail?.id }}</div> <div class="mb-[8px]">图纸ID: {{ detail?.id }}</div>
<div class="mb-[10px]">文件大小：{{ detail?.filesInfo?.fileSize || 0 }} </div> <div class="mb-[8px]">文件大小：{{ detail?.filesInfo?.fileSize || 0 }} </div>
<!-- <div class="mb-10px">图纸版本：{{ detail.editionsName }} </div> --> <!-- <div class="mb-10px">图纸版本：{{ detail.editionsName }} </div> -->
<div class="mb-[10px]">图纸格式：{{ detail?.formatType?.toString() }}</div> <div class="mb-[8px]">图纸格式：{{ detail?.formatType?.toString() }}</div>
<div class="mb-[10px]">所需金币：{{ detail?.points }}金币</div> <div class="mb-[8px]">所需金币：{{ detail?.points }}金币</div>
<div class="mb-[10px]">发布时间：{{ dayjs(detail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div> <div class="mb-[8px]">发布时间：{{ dayjs(detail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
<div class="mb-[10px]">图纸参数：{{ detail?.editTypeName }}</div> <div class="mb-[8px]">图纸参数：{{ detail?.editTypeName }}</div>
<div class="mb-[10px]">图纸分类：{{ detail?.projectTypeName }}</div> <div class="mb-[8px]">图纸分类：{{ detail?.projectTypeName }}</div>
<div class="mb-[10px]">软件分类：{{ detail?.editionsName }}</div> <div class="mb-[8px]">软件分类：{{ detail?.editionsName }}</div>
</div> </div>
<div class="mt-[20px] w-[398px] border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid bg-[#FFFFFF]"> <div class="mt-[20px] w-[398px] border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid bg-[#FFFFFF]">
<img src="~/assets/images/banner.png" alt="" srcset="" class="w-[100%]" /> <img src="~/assets/images/banner.png" alt="" srcset="" class="w-[100%]" />
@ -179,7 +179,7 @@
import ThumBnail from './components/swiper.vue' import ThumBnail from './components/swiper.vue'
import CommentSection from '~/components/comment-section/index.vue' import CommentSection from '~/components/comment-section/index.vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { ref } from 'vue' import { onMounted } from 'vue'
import type { ProjectRespVO, ProjectDrawPageRespVO, UserExtendSimpleRespDTO, ProjectDrawMemberRespVO } from '~/api/drawe-detail/types' import type { ProjectRespVO, ProjectDrawPageRespVO, UserExtendSimpleRespDTO, ProjectDrawMemberRespVO } from '~/api/drawe-detail/types'
import useUserStore from '~/stores/user' import useUserStore from '~/stores/user'
const message = useMessage() const message = useMessage()
@ -187,15 +187,19 @@
// 获取路由参数 // 获取路由参数
const route = useRoute() const route = useRoute()
const id = route.params.id as string const id = route.params.id as string
// 获取详情 // 获取详情
// const detail = ref<ProjectRespVO>({} as ProjectRespVO) // const detail = ref<ProjectRespVO>({} as ProjectRespVO)
const {data: detail } = await useAsyncData('getDetail', async () => { const {data: detail, refresh: refreshDetail } = await useAsyncData(`getDetail${id}`, async () => {
const res = await getDetail({ id }) const res = await getDetail({ id })
return res.data return res.data
}) })
console.log('==', detail.value);
if (!detail.value) { if (!detail.value) {
throw createError({ throw createError({
statusCode: 404, statusCode: 404,
@ -219,35 +223,41 @@
// } // }
// init() // init()
const [{data:mainWork},{data:userInfo},{data:relationRecommend}] = await Promise.all([
getMainWork({ id: detail.value?.id, limit: 10, memberId: detail.value?.ownedUserId }),
getUserInfo({ id: detail.value?.id }),
getRelationRecommend({ type: detail.value?.type, projectType: detail.value?.projectType[0] })
])
// 获取最新发布 // 获取最新发布
const mainWork = ref<ProjectDrawMemberRespVO[]>([]) // const mainWork = ref<ProjectDrawMemberRespVO[]>([])
const handleGetMainWork = () => { // const handleGetMainWork = () => {
getMainWork({ id: detail.value?.id, limit: 10, memberId: detail.value?.ownedUserId }).then((res) => { // getMainWork({ id: detail.value?.id, limit: 10, memberId: detail.value?.ownedUserId }).then((res) => {
if (res.code === 0) { // if (res.code === 0) {
mainWork.value = res.data // mainWork.value = res.data
} // }
}) // })
} // }
// 获取用户信息 // 获取用户信息
const userInfo = ref<UserExtendSimpleRespDTO>({} as UserExtendSimpleRespDTO) // const userInfo = ref<UserExtendSimpleRespDTO>({} as UserExtendSimpleRespDTO)
const handleGetUserInfo = () => { // const handleGetUserInfo = () => {
getUserInfo({ id: detail.value?.id }).then((res) => { // getUserInfo({ id: detail.value?.id }).then((res) => {
if (res.code === 0) { // if (res.code === 0) {
userInfo.value = res.data // userInfo.value = res.data
} // }
}) // })
} // }
// 获取关联推荐 // 获取关联推荐
const relationRecommend = ref<ProjectDrawPageRespVO[]>([]) // const relationRecommend = ref<ProjectDrawPageRespVO[]>([])
const getRelationRecommendList = () => { // const getRelationRecommendList = () => {
getRelationRecommend({ type: detail.value?.type, projectType: detail.value?.projectType[0] }).then((res) => { // getRelationRecommend({ type: detail.value?.type, projectType: detail.value?.projectType[0] }).then((res) => {
if (res.code === 0) { // if (res.code === 0) {
relationRecommend.value = res.data // relationRecommend.value = res.data
} // }
}) // })
} // }
const changeSwiper = (index: number) => { const changeSwiper = (index: number) => {
console.log(index) console.log(index)
@ -350,7 +360,7 @@
}) })
if (res.code === 0) { if (res.code === 0) {
ElMessage.success(`${detail.value?.favoriteId ? '取消' : '收藏'}成功`) ElMessage.success(`${detail.value?.favoriteId ? '取消' : '收藏'}成功`)
// init() refreshDetail()
} }
} }

2
yarn.lock
View File

@ -6441,7 +6441,7 @@ svgo@^4.0.0:
picocolors "^1.1.1" picocolors "^1.1.1"
sax "^1.4.1" sax "^1.4.1"
swiper@^11.2.6: swiper@^11.2.10, swiper@^11.2.6:
version "11.2.10" version "11.2.10"
resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.2.10.tgz#ed0b17286b56f7fe8d4b46ed61e6e0bd8daaccad" resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.2.10.tgz#ed0b17286b56f7fe8d4b46ed61e6e0bd8daaccad"
integrity sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ== integrity sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==