291 lines
9.0 KiB
Vue
291 lines
9.0 KiB
Vue
<script setup lang="ts">
|
|
import { commonApi } from '@/api/common'
|
|
import {
|
|
CircleUser,
|
|
Download,
|
|
EllipsisVertical,
|
|
HardDriveUpload,
|
|
Play,
|
|
} from 'lucide-vue-next'
|
|
import { ref } from 'vue'
|
|
// 用于版本tabs当前选中的选项卡
|
|
definePageMeta({
|
|
layout: 'default',
|
|
})
|
|
|
|
const route = useRoute()
|
|
const { id } = route.params as { id: string }
|
|
const activeTab = ref(null)
|
|
|
|
const detailsInfo = ref({})
|
|
// 版本信息
|
|
const versionByWorkInfo = ref([])
|
|
async function getInfo() {
|
|
try {
|
|
const res = await request.get(`/WorkFlow/selectWorkFlowById?id=${id}&type=1`)
|
|
if (res.code === 200) {
|
|
detailsInfo.value = res.data
|
|
// 1翻译
|
|
const res1 = await request.get(
|
|
`/WorkFlowVersion/selectVersionByWorkId?workId=${res.data.id}`,
|
|
)
|
|
if (res1.code === 200 && res1.data.length > 0) {
|
|
versionByWorkInfo.value = res1.data
|
|
versionByWorkInfo.value.forEach((item) => {
|
|
item.imagePathsList = item.imagePaths.split(',')
|
|
})
|
|
activeTab.value = versionByWorkInfo.value[0].id
|
|
const commentRes = await request.get(`/WorkFlowComment/comment/${res.data.id}`)
|
|
}
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
getInfo()
|
|
|
|
// 获取用户点赞/粉丝/关注数量
|
|
interface SelectUserInfo {
|
|
likeCount: number
|
|
bean: number
|
|
download: number
|
|
attention: number
|
|
}
|
|
const selectUserInfo = ref<SelectUserInfo>({
|
|
likeCount: 0,
|
|
bean: 0,
|
|
download: 0,
|
|
attention: 0,
|
|
})
|
|
|
|
// 获取点赞粉丝等的数量
|
|
async function getAttention() {
|
|
try {
|
|
const res = await request.get('/attention/selectUserInfo')
|
|
if (res.code === 200) {
|
|
selectUserInfo.value = res.data
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
getAttention()
|
|
|
|
// async function getAttention() {
|
|
// try {
|
|
// const res = await request.get("/WorkFlowComment/comment/{modelId}");
|
|
// if (res.code === 200) {
|
|
// selectUserInfo.value = res.data;
|
|
// }
|
|
// } catch (err) {
|
|
// console.log(err);
|
|
// }
|
|
// }
|
|
// getAttention();
|
|
|
|
// async function getVersionByWork() {
|
|
// try {
|
|
// if (res.code === 200) {
|
|
// }
|
|
// } catch (err) {
|
|
// console.log(err);
|
|
// }
|
|
// }
|
|
// getVersionByWork();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-center">
|
|
<div class="w-[1125px] p-4">
|
|
<div class="flex items-center">
|
|
<div class="text-[26px] font-bold mr-4">
|
|
{{ detailsInfo.workflowName }}
|
|
</div>
|
|
|
|
<n-tooltip trigger="hover">
|
|
<template #trigger>
|
|
<div class="flex items-center bg-[#f4f5f9] px-2 rounded-full">
|
|
<component :is="Play" class="h-[14px] w-[14px] text-black menu-icon m-1" />
|
|
<span> {{ detailsInfo.useNumber }} </span>
|
|
</div>
|
|
</template>
|
|
在线生成数
|
|
</n-tooltip>
|
|
|
|
<n-tooltip trigger="hover">
|
|
<template #trigger>
|
|
<div class="flex items-center bg-[#f4f5f9] px-2 rounded-full mx-4">
|
|
<component
|
|
:is="Download"
|
|
class="h-[14px] w-[14px] text-black menu-icon m-1"
|
|
/>
|
|
<span> {{ detailsInfo.downloadNumber }} </span>
|
|
</div>
|
|
</template>
|
|
下载数
|
|
</n-tooltip>
|
|
|
|
<n-tooltip trigger="hover">
|
|
<template #trigger>
|
|
<div class="flex items-center bg-[#f4f5f9] px-2 rounded-full">
|
|
<img src="@/assets/img/heart.png" class="w-[14px] h-[14px] mr-1" alt="">
|
|
<span> <!-- {{ item.numbers }} -->{{ detailsInfo.likeCount }} </span>
|
|
</div>
|
|
</template>
|
|
点赞数
|
|
</n-tooltip>
|
|
</div>
|
|
|
|
<div class="flex items-center mt-3 mb-5">
|
|
<div
|
|
v-for="(item, index) in detailsInfo.styleList"
|
|
:key="index"
|
|
class="text-[12px] bg-[#ebf2fe] p-1 px-2 text-[#557abf] mr-4 rounded-md"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
<div class="flex w-full gap-1">
|
|
<div class="w-2/3">
|
|
<div class="w-full">
|
|
<n-tabs v-model:value="activeTab" type="line" animated>
|
|
<n-tab-pane
|
|
v-for="(item, index) in versionByWorkInfo"
|
|
:key="index"
|
|
:name="item.id"
|
|
:tab="item.versionName"
|
|
>
|
|
<!-- 显示最后一步上传图片的图片 -->
|
|
<div class="grid grid-cols-2 gap-2.5 box-border">
|
|
<img
|
|
v-for="(subItem, index) in item.imagePathsList"
|
|
:key="index"
|
|
:src="subItem"
|
|
class="w-full h-[300px]"
|
|
alt=""
|
|
>
|
|
</div>
|
|
|
|
<div v-if="detailsInfo.original === 1" class="font-bold text-[20px] my-6">
|
|
转载自作者: {{ detailsInfo.authorName }}
|
|
</div>
|
|
<!-- 富文本中输入的文字 图片 -->
|
|
<div class="w-full">
|
|
<div v-html="item.versionDescription" />
|
|
</div>
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/3 mt-3">
|
|
<div
|
|
class="flex justify-between text-[#a3a1a1] text-[12px] items-center -ml-60"
|
|
>
|
|
<div class="flex">
|
|
<div class="mr-2">
|
|
首发时间{{ detailsInfo.createTime }}
|
|
</div>
|
|
<div v-if="detailsInfo.updateTime">
|
|
更新时间：{{ detailsInfo.updateTime }}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<img src="@/assets/img/heart.png" class="w-[14px] h-[14px] mr-2" alt="">
|
|
<component
|
|
:is="EllipsisVertical"
|
|
class="h-[18px] w-[18px] text-[#557abf] menu-icon"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex items-center mt-10 p-2 bg-[#f3f5f9] w-full rounded-md h-[80px] box-border"
|
|
>
|
|
<div class="w-[70px] h-[70px] rounded-full overflow-hidden mr-4">
|
|
<img
|
|
src="@/assets/img/default-avatar.png"
|
|
class="w-full h-full mr-2 block"
|
|
alt=""
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="text[20px] font-bold">
|
|
微信用户ddsd
|
|
</div>
|
|
<!-- 0代表原创 1代表转载 -->
|
|
<div v-if="detailsInfo.original === 0" class="text-[14px]">
|
|
原创作者
|
|
</div>
|
|
<div class="flex items-center text-[#969798]">
|
|
<component
|
|
:is="CircleUser"
|
|
class="h-[12px] w-[12px] text-black menu-icon m-1 text-[#969798] m-0"
|
|
/>
|
|
<span class="mr-2"> {{ selectUserInfo.bean }} </span>
|
|
<component
|
|
:is="HardDriveUpload"
|
|
class="h-[12px] w-[14px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-2"> 2 </span>
|
|
<component
|
|
:is="Play"
|
|
class="h-[12px] w-[12px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-2"> {{ detailsInfo.useNumber }} </span>
|
|
<component
|
|
:is="Download"
|
|
class="h-[12px] w-[12px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-2"> {{ detailsInfo.downloadNumber }} </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 不支持的bg #b1b2b2 -->
|
|
<div
|
|
class="flex items-center justify-center mt-4 w-full h-14 text-white bg-[#3c7af6] w-full rounded-md h-[80px] cursor-pointer"
|
|
>
|
|
<component
|
|
:is="Play"
|
|
class="h-[20px] w-[20px] text-white menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-1"> 立即生图 </span>
|
|
</div>
|
|
|
|
<div
|
|
class="flex items-center justify-center mt-4 w-full h-14 text-black bg-[#eceef4] w-full rounded-md h-[80px] cursor-pointer hover:bg-[#f1f2f7]"
|
|
>
|
|
<component
|
|
:is="Download"
|
|
class="h-[20px] w-[20px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-1"> 下载 (122.22MB) </span>
|
|
</div>
|
|
|
|
<!-- <div style="background: linear-gradient(135deg,#3cc9ff, #8fa6ff, 41%, #d8b4ff 74%,#326bff)" class="flex items-center justify-center mt-4 w-full h-14 text-black bg-[#fff] w-full rounded-md h-[80px] cursor-pointer hover:bg-[#f1f2f7]">
|
|
<component :is="Download" class="h-[20px] w-[20px] text-black menu-icon m-1 text-[#969798]" />
|
|
<span class="mr-1">
|
|
下载客户端
|
|
</span>
|
|
</div> -->
|
|
|
|
<div />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.header-num {
|
|
@apply flex items-center bg-[#f4f5f9] px-2 rounded-full;
|
|
}
|
|
.header-tag {
|
|
@apply flex items-center bg-[#f4f5f9] px-2 rounded-full;
|
|
display: flex;
|
|
align-self: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|