feat: 添加 dayjs 库以处理日期格式化
为了在课程详情页面中正确显示创建日期,我们添加了 dayjs 库来格式化日期字符串。这样,我们可以将日期显示为 "YYYY-MM-DD HH:mm:ss" 的格式。 - 添加了 dayjs 库的依赖 - 在课程详情页面中使用 dayjs 格式化创建日期
This commit is contained in:
12
src/composables/useDayjs.ts
Normal file
12
src/composables/useDayjs.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import dayjs from "dayjs";
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
import duration from "dayjs/plugin/duration";
|
||||
import "dayjs/locale/zh-cn";
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
dayjs.extend(duration);
|
||||
dayjs.locale('zh-cn')
|
||||
|
||||
export const useDayjs = () => {
|
||||
return dayjs;
|
||||
}
|
@ -1,5 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import BussApi from '@/api/BussApi';
|
||||
import { useDayjs } from '@/composables/useDayjs';
|
||||
import type { Lesson } from '@/types/api/lesson';
|
||||
import { calcLessonProgress, extractLessonStage, getLessonSteps } from '@/utils/lesson';
|
||||
import { useRoute } from 'uni-mini-router';
|
||||
@ -8,6 +9,7 @@ import { useToast } from 'wot-design-uni';
|
||||
|
||||
const route = useRoute()
|
||||
const toast = useToast()
|
||||
const dayjs = useDayjs()
|
||||
|
||||
const lesson = ref<Lesson | null>(null)
|
||||
const lessonSteps = computed(() => lesson.value ? getLessonSteps(lesson.value) : [])
|
||||
@ -40,7 +42,7 @@ onMounted(() => {
|
||||
<h2 class="text-sm text-white font-black op-50">{{ lesson?.m_lesson_name }}</h2>
|
||||
<h1 class="text-lg text-white font-bold">{{ lesson?.course_name }}</h1>
|
||||
</div>
|
||||
<p class="text-xs text-white font-bold op-50" style="line-height: 1;">创建于 {{ lesson?.created_at }}</p>
|
||||
<p class="text-xs text-white font-bold op-50" style="line-height: 1;">创建于 {{ dayjs(lesson?.created_at).format('YYYY-MM-DD HH:mm:ss') }}</p>
|
||||
<wd-icon :name="lessonProgress === 100 ? 'check-circle' : 'hourglass'" custom-class="absolute text-white top-2 right-2 op-35" size="64px" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
|
@ -1,3 +1,4 @@
|
||||
import { useDayjs } from "@/composables/useDayjs";
|
||||
import type { Lesson } from "@/types/api/lesson";
|
||||
|
||||
export const extractLessonStage = (lesson: Lesson) => {
|
||||
@ -18,30 +19,32 @@ export const calcLessonProgress = (lesson: Lesson, total: number = 4) => {
|
||||
};
|
||||
|
||||
export const getLessonSteps = (lesson: Lesson) => {
|
||||
const dayjs = useDayjs();
|
||||
const dateFormat = "YYYY-MM-DD HH:mm:ss";
|
||||
const progress = extractLessonStage(lesson);
|
||||
return [
|
||||
{
|
||||
title: progress.script_upload ? "脚本文件上传" : undefined,
|
||||
description: progress.script_upload
|
||||
? `已于 ${lesson.script_upload_time} 完成上传`
|
||||
? `已于 ${dayjs(lesson.script_upload_time * 1000).format(dateFormat)} 完成上传`
|
||||
: "脚本文件上传",
|
||||
},
|
||||
{
|
||||
title: progress.script_confirm ? "脚本文件确认" : undefined,
|
||||
description: progress.script_confirm
|
||||
? `已于 ${lesson.script_confirm_time} 确认`
|
||||
? `已于 ${dayjs(lesson.script_confirm_time * 1000).format(dateFormat)} 确认`
|
||||
: "脚本文件确认",
|
||||
},
|
||||
{
|
||||
title: progress.video_capture ? "视频拍摄和上传" : undefined,
|
||||
description: progress.video_capture
|
||||
? `已于 ${lesson.video_capture_time} 完成上传`
|
||||
? `已于 ${dayjs(lesson.video_capture_time * 1000).format(dateFormat)} 完成上传`
|
||||
: "视频拍摄上传",
|
||||
},
|
||||
{
|
||||
title: progress.post_production ? "视频后期制作" : undefined,
|
||||
description: progress.post_production
|
||||
? `已于 ${lesson.video_confirm_time} 完成上传`
|
||||
? `已于 ${dayjs(lesson.video_confirm_time * 1000).format(dateFormat)} 完成上传`
|
||||
: "视频后期制作",
|
||||
},
|
||||
];
|
||||
|
Reference in New Issue
Block a user