diff --git a/src/apis/createVideo.js b/src/apis/createVideo.js index c562522..24c88bc 100644 --- a/src/apis/createVideo.js +++ b/src/apis/createVideo.js @@ -167,4 +167,17 @@ export function createVideoApi(data) { method: 'POST', data }) +} + + +/** + * @description 根据作品id查询作品信息 + * @params data + * @returns data + */ +export function findByIdApi(id) { + return request({ + url: `/api/userPhotoVideo/findById?id=${id}`, + method: 'get', + }) } \ No newline at end of file diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index 95d5714..e33eedf 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -35,6 +35,7 @@ export default { navbar: { account: "Account", logout: "Logout", + goLogin:'Go and log in' }, // 创作视频 @@ -100,6 +101,7 @@ export default { successed: "Successed", failed: "Failed", msg1: "Obtain one video production time", + }, // 商店 diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index 892b898..14db0ff 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -35,6 +35,7 @@ export default { navbar: { account: "账户", logout: "注销", + goLogin:'登录' }, // 创作视频 @@ -100,6 +101,7 @@ export default { successed: "支付成功", failed: "支付失败", msg1: "获得视频制作次数一次", + }, // 商店 diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index e9ba6af..ddb5f5f 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -9,64 +9,26 @@ /> - -
- -
- -
- -
- - - - -
- - - -
- - -
- -
-
- +
{{ $t(routeName as string) }}
-
- - @@ -96,6 +58,7 @@ const router = useRouter(); const { device } = storeToRefs(appStore); // 设备类型:desktop-宽屏设备 || mobile-窄屏设备 +const AccessToken = localStorage.getItem("AccessToken"); // 登录状态 /** * 左侧菜单栏显示/隐藏 */ @@ -207,6 +170,7 @@ watch( .navItem { cursor: pointer; transition: all 0.3s; + margin-right: 10px; &:hover { color: #4769da; } diff --git a/src/permission.ts b/src/permission.ts index f169184..d2b782d 100644 --- a/src/permission.ts +++ b/src/permission.ts @@ -9,7 +9,7 @@ NProgress.configure({ showSpinner: false }); // 进度条 const permissionStore = usePermissionStoreHook(); // 白名单路由 -const whiteList = ["/login", "/signSucceed"]; +const whiteList = ["/login", "/signSucceed",'/createVideo','/myStore']; router.beforeEach(async (to, from, next) => { NProgress.start(); diff --git a/src/router/index copy.ts b/src/router/index copy.ts deleted file mode 100644 index b460489..0000000 --- a/src/router/index copy.ts +++ /dev/null @@ -1,203 +0,0 @@ -import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"; -import { getCurrentInstance } from "vue"; - -export const Layout = () => import("@/layout/index.vue"); - -// 静态路由 -export const constantRoutes: RouteRecordRaw[] = [ - { - path: "/redirect", - component: Layout, - meta: { hidden: true }, - children: [ - { - path: "/redirect/:path(.*)", - component: () => import("@/views/redirect/index.vue"), - }, - ], - }, - // 登录 - { - path: "/login", - component: () => import("@/views/login/index.vue"), - meta: { hidden: true }, - name:'login' - }, - { - path: "/signSucceed", - component: () => import("@/views/signSucceed/index.vue"), - meta: { hidden: true }, - }, - // 创建视频 - { - path: "/", - component: Layout, - redirect: "/createVideo", - children: [ - { - path: "createVideo", - component: () => import("@/views/createVideo/index.vue"), - name: "createVideo", - meta: { - title: "createVideo", - icon: "homepage", - affix: true, - name: "createVideo.title", - }, - }, - ], - }, - // 视频列表 - { - path: "/", - component: Layout, - redirect: "/myCreating", - children: [ - { - path: "myCreating", - component: () => import("@/views/myCreating/index.vue"), - name: "myCreating", - meta: { - title: "myCreating", - icon: "homepage", - affix: true, - name: "myCreating.title", - }, - }, - ], - }, - // 个人账户 - { - path: "/", - component: Layout, - redirect: "/myAccount", - children: [ - { - path: "myAccount", - component: () => import("@/views/myAccount/index.vue"), - name: "myAccount", - meta: { - title: "myAccount", - icon: "homepage", - affix: true, - name: "account.title", - }, - }, - ], - }, - // 商店 - { - path: "/", - component: Layout, - redirect: "/myStore", - children: [ - { - path: "myStore", - component: () => import("@/views/myStore/index.vue"), - name: "myStore", - meta: { - title: "myStore", - icon: "homepage", - affix: true, - name: "shop.title", - }, - }, - ], - }, - - // { - // path: "/dashboard", - // component: Layout, - // redirect: "/dashboard", - // children: [ - // { - // path: "dashboard", - // component: () => import("@/views/dashboard/index.vue"), - // name: "Dashboard", - // meta: { title: "dashboard", icon: "homepage", affix: true }, - // }, - // { - // path: "401", - // component: () => import("@/views/error-page/401.vue"), - // meta: { hidden: true }, - // }, - // { - // path: "404", - // component: () => import("@/views/error-page/404.vue"), - // meta: { hidden: true }, - // }, - // ], - // }, - - // 外部链接 - /*{ - path: '/external-link', - component: Layout, - children: [ - { - path: 'https://www.cnblogs.com/haoxianrui/', - meta: { title: '外部链接', icon: 'link' } - } - ] - }*/ - // 多级嵌套路由 - /* { - path: '/nested', - component: Layout, - redirect: '/nested/level1/level2', - name: 'Nested', - meta: {title: '多级菜单', icon: 'nested'}, - children: [ - { - path: 'level1', - component: () => import('@/views/nested/level1/index.vue'), - name: 'Level1', - meta: {title: '菜单一级'}, - redirect: '/nested/level1/level2', - children: [ - { - path: 'level2', - component: () => import('@/views/nested/level1/level2/index.vue'), - name: 'Level2', - meta: {title: '菜单二级'}, - redirect: '/nested/level1/level2/level3', - children: [ - { - path: 'level3-1', - component: () => import('@/views/nested/level1/level2/level3/index1.vue'), - name: 'Level3-1', - meta: {title: '菜单三级-1'} - }, - { - path: 'level3-2', - component: () => import('@/views/nested/level1/level2/level3/index2.vue'), - name: 'Level3-2', - meta: {title: '菜单三级-2'} - } - ] - } - ] - }, - ] - }*/ -]; - -/** - * 创建路由 - */ -const router = createRouter({ - history: createWebHashHistory(), - routes: constantRoutes as RouteRecordRaw[], - // 刷新时,滚动条位置还原 - // 2023-5-23 添加平滑滚动 YWQ - scrollBehavior: () => ({ behavior: "smooth", left: 0, top: 0 }), -}); - -/** - * 重置路由 - */ -export function resetRouter() { - router.replace({ path: "/login" }); -} - -export default router; diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 0fd84b0..019c155 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -81,6 +81,7 @@ declare module '@vue/runtime-core' { WangEditor: typeof import('./../components/WangEditor/index.vue')['default'] } export interface ComponentCustomProperties { + vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'] vLoading: typeof import('element-plus/es')['ElLoadingDirective'] } } diff --git a/src/utils/request.js b/src/utils/request.js index 3f6b0ea..71972a3 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -35,8 +35,8 @@ request.interceptors.request.use( request.interceptors.response.use( function (response) { let code = response.data.code - // 当token无效(过期或损坏)时 - if (code == 1052) { + // 当token无效(过期或损坏)时 1053为未登录 + if (code == 1052 || code == 1053) { localStorage.removeItem("AccessToken"); router.push("/login"); ElMessage.error("登录过期,请重新登录!"); diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 3c879be..bdec3c7 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -13,6 +13,7 @@ style="width: 300px" > @@ -130,20 +131,26 @@
{{ $t("createVideo.availableMould") }}
{{ $t("createVideo.personalWarehouse") }}
-
+
+ @@ -164,7 +171,12 @@
-
+
+ @@ -210,8 +222,8 @@ 🕬🔊 🕗
@@ -460,20 +472,26 @@ import { saveOrUpdateApi, createVideoApi, previewAudioApi, + findByIdApi, } from "@/apis/createVideo"; import { useI18n } from "vue-i18n"; import Recorder from "js-audio-recorder"; //mp3插件 import imageCompression from "browser-image-compression"; //压缩图片插件 - +import { useRoute, useRouter } from "vue-router"; +const route = useRoute(); +const router = useRouter(); const { locale } = useI18n(); const lanChange = ref(locale); +const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录 + //#region 头像区的逻辑 // 获取AI头像 -const AiFaceList = ref([]); -const userAiFaceList = ref([]); +const AiFaceList = ref([]); //系统相册列表 +const userAiFaceList = ref([]); //个人相册列表 const feceItemLoading = ref(false); const feceItemLoading2 = ref(false); + function getAiFaceList(pageNum, pageSize, sendType) { feceItemLoading.value = true; personPhotoList(pageNum, pageSize, sendType) @@ -498,16 +516,43 @@ function getAiFaceUserList(pageNum, pageSize, sendType) { console.log(err, "err"); }); } +const pageNumSystem = ref(1); +const overLoadSystem = ref(false); //禁用系统相册加载更多 +const pageNumUser = ref(1); +const overLoadUser = ref(false); //禁用个人相册加载更多 +//系统相册触底加载更多 +function loadMoreAiFaceSystem() { + pageNumSystem.value += 1; + personPhotoList(pageNumSystem.value, 10, 1) + .then((res) => { + AiFaceList.value.push(...res.data.list); + if (res.data.list.length == 0) { + overLoadSystem.value = true; + pageNumSystem.value = pageNumSystem.value - 1; + } + }) + .catch((err) => { + console.log(err, "err"); + }); +} +//个人相册触底加载更多 +function loadMoreAiFaceUser() { + pageNumUser.value += 1; + personPhotoUserListList(pageNumUser.value, 10, 3) + .then((res) => { + if (res.data.list.length == 0) { + overLoadUser.value = true; + pageNumUser.value = pageNumUser.value - 1; + } + userAiFaceList.value.push(...res.data.list); + }) + .catch((err) => { + console.log(err, "err"); + }); +} // 选择显示的face列表 const showFace = ref("0"); function ChangeShowFaceList(index) { - AiFaceList.value = null; - if (index == 0) { - getAiFaceList(1, 100, 1); - } - if (index == 1) { - getAiFaceUserList(1, 100, 3); - } showFace.value = index; } const faceItemActive = ref(); //高亮处理和当前选择图片的ID @@ -518,6 +563,7 @@ function setImgUrl(url, id) { submitImgBtn.value = false; imgUrl.value = url; } +// 删除个人相册照片 async function deleteFaceImg(id) { const msg = lanChange.value == "zh-cn" @@ -534,7 +580,10 @@ async function deleteFaceImg(id) { const res = await delImgApi(id); imgUrl.value = null; faceItemActive.value = null; - getAiFaceUserList(1, 100, 3); + userAiFaceList.value = []; + getAiFaceUserList(1, 10, 3); + pageNumUser.value = 1; + overLoadUser.value = false; } catch (error) { ElMessage.error(errpr); } @@ -598,7 +647,10 @@ async function changeFile() { // 重新获取列表 compressionImgLoad.value = false; showUploadBtn.value = 4; - getAiFaceUserList(1, 100, 3); + userAiFaceList.value = []; + getAiFaceUserList(1, 10, 3); + pageNumUser.value = 1; + overLoadUser.value = false; if (res2.code == 200) { ElMessage.success( lanChange.value == "zh-cn" ? `上传成功` : `Upload successfully` @@ -697,8 +749,14 @@ async function getPreviewAudio() { sound.value, soundStyle.value ); + if (!res.data.data) { + ElMessage.error( + lanChange.value == "zh-cn" + ? `暂时无法试听,请稍后重试` + : `Unable to listen, please try again later` + ); + } previewAudioUrl.value = res.data.data; - console.log(previewAudioUrl.value); } catch (error) { ElMessage.error(error); } @@ -798,6 +856,7 @@ async function uploadProgress(videoId, isSaveVideo) { } // 定义参数 const saveOrUpdateData = { + id: id.value, //从草稿或者重新编辑回到创建视频时有id title: title.value, personPhotoId: faceItemActive.value, //任务照片id, voiceFrom: tabFrom.value, //:声音来源 1:来自选择模板,2:来自用户上传 @@ -808,11 +867,13 @@ async function uploadProgress(videoId, isSaveVideo) { }; try { const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 + // 这个if判断是不是仅仅保存视频 if (isSaveVideo == "saveVideo") { ElMessage.success( lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` ); createLoading.value = false; + router.push("/myCreating"); return; } const res4 = await createVideoApi({ id: res3.data.id }); // 生成视频 @@ -824,6 +885,7 @@ async function uploadProgress(videoId, isSaveVideo) { ); } createLoading.value = false; + router.push("/myCreating"); } catch (error) { ElMessage.error(error); createLoading.value = false; @@ -844,6 +906,7 @@ async function saveOrUpdate(index, isSaveVideo) { } tabFrom.value = index; const saveOrUpdateData = { + id: id.value, //从草稿或者重新编辑回到创建视频时有id title: title.value, personPhotoId: faceItemActive.value, //任务照片id, voiceFrom: tabFrom.value, //:声音来源 1:来自选择模板,2:来自用户上传 @@ -856,11 +919,13 @@ async function saveOrUpdate(index, isSaveVideo) { createLoading.value = true; try { const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 + // 这个if判断是不是仅仅保存视频 if (isSaveVideo == "saveVideo") { ElMessage.success( lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` ); createLoading.value = false; + router.push("/myCreating"); return; } const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频 @@ -872,6 +937,7 @@ async function saveOrUpdate(index, isSaveVideo) { ); } createLoading.value = false; + router.push("/myCreating"); } catch (error) { ElMessage.error(error); createLoading.value = false; @@ -888,6 +954,26 @@ async function saveOrUpdate(index, isSaveVideo) { } //#endregion ---------------------------- +//#region 根据作品id查询作品信息并回显 +const id = ref(null); //作品的id +async function findById(findId) { + const res = await findByIdApi(findId); + id.value = res.data.id; + title.value = res.data.title; //标题回显 + faceItemActive.value = res.data.personPhotoId; //aiface高亮和图片id + tabFrom.value = res.data.voiceFrom; //输入文案还是上传mp3模式 + textareaContent.value = res.data.paperwork; //文案内容 + afterSaveAudioId.value = res.data.voiceMaterialId; //保存音频后得到的id + imgUrl.value = res.data.personPhotoUrl; //图片回显 + audioUrl.value = res.data.voiceMaterialUrl; // mp3回显 + language.value = res.data.voiceInfo.languageId; + await chooseType(language.value); + sound.value = res.data.voiceMouldId; //声音id + chooseStyle(); + soundStyle.value = res.data.speakTypeStr; //选择风格 +} +//#endregion ---------------------------- + //#region //#endregion ---------------------------- @@ -902,11 +988,15 @@ const { const string = "createVideo.typeScript"; const t = globalProperties.$t(string); -onMounted(() => { - getAiFaceList(1, 100, 1); - getAiFaceUserList(1, 100, 3); - voiceTotal(); - chooseType(); +onMounted(async () => { + getAiFaceList(1, 10, 1); + if (AccessToken) { + getAiFaceUserList(1, 10, 3); + } + await voiceTotal(); + if (route.query.id) { + findById(route.query.id); + } }); diff --git a/src/views/myCreating/index.vue b/src/views/myCreating/index.vue index d5dfddd..ba775b7 100644 --- a/src/views/myCreating/index.vue +++ b/src/views/myCreating/index.vue @@ -116,7 +116,7 @@ {{ $t("myCreating.loading") }}
- + - - +
-
+
{{ $t("shop.WeChatPay") }}
-
{{ $t("shop.Alipay") }}
-
Paypal
+
+ {{ $t("shop.Alipay") }} +
+
+ Paypal +
+ + +
+
+ +
+
扫描二维码进行付款
+
+
刷新二维码
+
+
+
+