Commit c2c0bca0 authored by tyyin lan's avatar tyyin lan

feat: 首页最近创作

parent 187a88f7
import { request } from '@/utils/request'
// 获取草稿列表
export function fetchDraftsList<T>(payload: object) {
return request.post<T>(`/bizDigitalHumanMemberDraftConfigRest/getList.json`, payload)
export function fetchDraftsList<T>(payload: object, params: object = {}) {
return request.post<T>(`/bizDigitalHumanMemberDraftConfigRest/getList.json`, payload, { params })
}
// 保存更新用户草稿
......@@ -14,15 +14,3 @@ export function fetchSaveDraftConfig<T>(payload: object) {
export function fetchDeleteDraftConfigById<T>(id: string) {
return request.post<T>(`/bizDigitalHumanMemberDraftConfigRest/deletedById.json?id=${id}`)
}
export function fetchRecentCreationList<T>(token: string) {
return request.post<T>(
'/draftsRest/recentCreationDataList.json',
{},
{
headers: {
'X-Request-Token': token,
},
},
)
}
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'
import 'dayjs/locale/zh-cn'
import 'dayjs/locale/zh-hk'
dayjs.extend(utc)
dayjs.extend(timezone)
export function formatDateTime(date: string | number | Date, format: string = 'YYYY-MM-DD HH:mm:ss'): string {
if (!date) return '-'
return dayjs(date).format(format)
}
......@@ -35,7 +35,7 @@ function handleDropdownSelect(key: string | number) {
<template>
<header class="flex h-[56px] justify-between">
<div class="font-600 flex items-center pl-4 text-xl">萃想智能云创</div>
<div class="font-600 flex items-center pl-4 text-xl">萃想智能雲創</div>
<div class="flex items-center pr-4">
<div class="mx-3">
<n-button
......
......@@ -14,7 +14,7 @@ function iconConfigFactory(): any {
const menuOptions = shallowReadonly<MenuOption[]>([
{
type: 'group',
label: '视频',
label: '視頻',
key: 'Videos',
children: [
{
......
<script setup lang="ts">
// import { fetchRecentCreationList } from '@/apis/drafts'
// import { useUserStore } from '@/store/modules/user'
import { fetchDraftsList } from '@/apis/drafts'
import { Right } from '@icon-park/vue-next'
import { onMounted } from 'vue'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { formatDateTime } from '@/utils/date-formatter'
interface CreationTemplateInfoItem {
id: number
taskType: string
coverUrl: string
modifiedTime: string
draftName: string
}
const router = useRouter()
// const userStore = useUserStore()
// const token = userStore.token
const creationTemplateInfoList = ref<CreationTemplateInfoItem[]>([])
onMounted(() => {
// getRecentCreationList()
const pagingInfo = reactive({
pageNo: 1,
pageSize: 7,
})
const fetchCreationTemplateInfoListLoading = ref(true)
;(function () {
getRecentCreationList()
})()
function getRecentCreationList() {
const params = {
pageNo: pagingInfo.pageNo,
pageSize: pagingInfo.pageSize,
}
fetchDraftsList<CreationTemplateInfoItem[]>({}, params).then((res) => {
creationTemplateInfoList.value = res.data.map((item) => ({
id: item.id,
draftName: item.draftName,
modifiedTime: item.modifiedTime,
coverUrl: item.coverUrl,
taskType: item.taskType,
}))
fetchCreationTemplateInfoListLoading.value = false
})
}
function creationTypeFormatter(type: string) {
switch (type) {
case 'IMAGE_VIDEO':
return '圖片視頻'
case 'BASE_VIDEO':
return '基礎視頻'
case 'ADVANCED_VIDEO':
return '精編視頻'
default:
return '其他內容'
}
}
function handleGoToDrafts() {
router.push('/work/draft')
// router.push('/work/draft')
router.push({ name: 'WorkDraft' })
}
// function getRecentCreationList() {
// fetchRecentCreationList(token).then((res) => {
// if (res.code !== 0) return ''
// console.log(res)
// })
// }
</script>
<template>
......@@ -37,30 +79,48 @@ function handleGoToDrafts() {
<div class="overflow-y-auto text-nowrap">
<n-scrollbar :x-scrollable="true">
<div v-for="item in 7" :key="item" class="mr-[10px] inline-block pb-[16px] text-center">
<div class="min-h-[194px]">
<template v-if="!fetchCreationTemplateInfoListLoading">
<div
v-for="templateInfoItem in creationTemplateInfoList"
:key="templateInfoItem.id"
class="mr-[10px] inline-block pb-[16px]"
>
<div
class="relative mb-[12px] h-[145px] w-[145px] cursor-pointer overflow-hidden rounded-[12px] bg-[#f3f4fb]"
>
<img
class="z-1 relative h-full w-full object-contain transition-[scale] duration-300 ease-in-out hover:scale-110"
src="https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90"
alt="cover-image"
:src="templateInfoItem.coverUrl"
alt="cover"
/>
<img
class="absolute left-0 top-0 h-full w-full object-cover blur-[32px]"
src="https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90"
alt="cover-image"
:src="templateInfoItem.coverUrl"
alt="cover"
/>
<div
class="absolute bottom-[8px] left-[8px] z-10 rounded-[4px] bg-[rgba(0,0,0,.5)] px-[6px] py-[2px] text-[12px] text-[#fff]"
>
精品视频
{{ creationTypeFormatter(templateInfoItem.taskType) }}
</div>
</div>
<n-ellipsis class="!max-w-[150px] cursor-default text-[#151b26]">金融课程2024-09-11 09:48:41</n-ellipsis>
<n-ellipsis class="!max-w-[150px] cursor-default text-[#151b26]">
{{ templateInfoItem.draftName }} {{ formatDateTime(templateInfoItem.modifiedTime) }}
</n-ellipsis>
</div>
</template>
<template v-else>
<div v-for="item in 2" :key="item" class="mr-[10px] inline-block pb-[16px]">
<n-skeleton class="mb-[12px]" :height="145" :width="145" :sharp="false" />
<n-skeleton :height="21" :width="145" :sharp="false" />
</div>
</template>
</div>
</n-scrollbar>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment