@@ -167,4 +167,17 @@ export function createVideoApi(data) { | |||||
method: 'POST', | method: 'POST', | ||||
data | data | ||||
}) | }) | ||||
} | |||||
/** | |||||
* @description 根据作品id查询作品信息 | |||||
* @params data | |||||
* @returns data | |||||
*/ | |||||
export function findByIdApi(id) { | |||||
return request({ | |||||
url: `/api/userPhotoVideo/findById?id=${id}`, | |||||
method: 'get', | |||||
}) | |||||
} | } |
@@ -35,6 +35,7 @@ export default { | |||||
navbar: { | navbar: { | ||||
account: "Account", | account: "Account", | ||||
logout: "Logout", | logout: "Logout", | ||||
goLogin:'Go and log in' | |||||
}, | }, | ||||
// 创作视频 | // 创作视频 | ||||
@@ -100,6 +101,7 @@ export default { | |||||
successed: "Successed", | successed: "Successed", | ||||
failed: "Failed", | failed: "Failed", | ||||
msg1: "Obtain one video production time", | msg1: "Obtain one video production time", | ||||
}, | }, | ||||
// 商店 | // 商店 | ||||
@@ -35,6 +35,7 @@ export default { | |||||
navbar: { | navbar: { | ||||
account: "账户", | account: "账户", | ||||
logout: "注销", | logout: "注销", | ||||
goLogin:'登录' | |||||
}, | }, | ||||
// 创作视频 | // 创作视频 | ||||
@@ -100,6 +101,7 @@ export default { | |||||
successed: "支付成功", | successed: "支付成功", | ||||
failed: "支付失败", | failed: "支付失败", | ||||
msg1: "获得视频制作次数一次", | msg1: "获得视频制作次数一次", | ||||
}, | }, | ||||
// 商店 | // 商店 | ||||
@@ -9,64 +9,26 @@ | |||||
/> | /> | ||||
<breadcrumb /> | <breadcrumb /> | ||||
</div> | </div> | ||||
<!-- 右侧导航设置 --> | |||||
<div class="flex" v-if="false"> | |||||
<!-- 导航栏设置(窄屏隐藏)--> | |||||
<div class="setting-container" v-if="device !== 'mobile'"> | |||||
<!--全屏 --> | |||||
<div class="setting-item" @click="toggle" v-if="false"> | |||||
<svg-icon | |||||
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" | |||||
/> | |||||
</div> | |||||
<!-- 布局大小 --> | |||||
<el-tooltip | |||||
content="布局大小" | |||||
effect="dark" | |||||
placement="bottom" | |||||
v-if="false" | |||||
> | |||||
<size-select class="setting-item" /> | |||||
</el-tooltip> | |||||
</div> | |||||
<!-- 用户头像 --> | |||||
<span class="account" @click="routerTo">个人账户</span> | |||||
<el-dropdown trigger="click" v-if="false"> | |||||
<div class="avatar-container"> | |||||
<img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" /> | |||||
<i-ep-caret-bottom class="w-3 h-3" /> | |||||
</div> | |||||
<template #dropdown> | |||||
<el-dropdown-menu> | |||||
<router-link to="/"> | |||||
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item> | |||||
</router-link> | |||||
<a target="_blank" href="https://github.com/hxrui"> | |||||
<el-dropdown-item>Github</el-dropdown-item> | |||||
</a> | |||||
<a target="_blank" href="https://gitee.com/haoxr"> | |||||
<el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item> | |||||
</a> | |||||
<a target="_blank" href="https://www.cnblogs.com/haoxianrui/"> | |||||
<el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item> | |||||
</a> | |||||
<el-dropdown-item divided @click="logout"> | |||||
{{ $t("navbar.logout") }} | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</template> | |||||
</el-dropdown> | |||||
</div> | |||||
<!-- 显示的,以上代码作废 --> | |||||
<div style="position: absolute; left: 30px; font-size: 26px"> | <div style="position: absolute; left: 30px; font-size: 26px"> | ||||
{{ $t(routeName as string) }} | {{ $t(routeName as string) }} | ||||
</div> | </div> | ||||
<!--语言选择--> | <!--语言选择--> | ||||
<lang-select class="navItem" style="color: #ffffff" /> | <lang-select class="navItem" style="color: #ffffff" /> | ||||
<div class="avatar" @click="routerTo"></div> | |||||
<div class="navItem" @click="routerTo">{{ $t("navbar.account") }}</div> | |||||
<div class="navItem" @click="logout" style="margin-left: 10px"> | |||||
<!-- <div class="avatar" v-if="AccessToken" @click="routerTo"></div> --> | |||||
<div class="navItem" v-if="AccessToken" @click="routerTo"> | |||||
{{ $t("navbar.account") }} | |||||
</div> | |||||
<div class="navItem" v-if="!AccessToken" @click="router.push('login')"> | |||||
{{ $t("navbar.goLogin") }} | |||||
</div> | |||||
<div | |||||
class="navItem" | |||||
v-if="AccessToken" | |||||
@click="logout" | |||||
style="margin-left: 10px" | |||||
> | |||||
{{ $t("navbar.logout") }} | {{ $t("navbar.logout") }} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -96,6 +58,7 @@ const router = useRouter(); | |||||
const { device } = storeToRefs(appStore); // 设备类型:desktop-宽屏设备 || mobile-窄屏设备 | const { device } = storeToRefs(appStore); // 设备类型:desktop-宽屏设备 || mobile-窄屏设备 | ||||
const AccessToken = localStorage.getItem("AccessToken"); // 登录状态 | |||||
/** | /** | ||||
* 左侧菜单栏显示/隐藏 | * 左侧菜单栏显示/隐藏 | ||||
*/ | */ | ||||
@@ -207,6 +170,7 @@ watch( | |||||
.navItem { | .navItem { | ||||
cursor: pointer; | cursor: pointer; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
margin-right: 10px; | |||||
&:hover { | &:hover { | ||||
color: #4769da; | color: #4769da; | ||||
} | } | ||||
@@ -9,7 +9,7 @@ NProgress.configure({ showSpinner: false }); // 进度条 | |||||
const permissionStore = usePermissionStoreHook(); | const permissionStore = usePermissionStoreHook(); | ||||
// 白名单路由 | // 白名单路由 | ||||
const whiteList = ["/login", "/signSucceed"]; | |||||
const whiteList = ["/login", "/signSucceed",'/createVideo','/myStore']; | |||||
router.beforeEach(async (to, from, next) => { | router.beforeEach(async (to, from, next) => { | ||||
NProgress.start(); | NProgress.start(); | ||||
@@ -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; |
@@ -81,6 +81,7 @@ declare module '@vue/runtime-core' { | |||||
WangEditor: typeof import('./../components/WangEditor/index.vue')['default'] | WangEditor: typeof import('./../components/WangEditor/index.vue')['default'] | ||||
} | } | ||||
export interface ComponentCustomProperties { | export interface ComponentCustomProperties { | ||||
vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'] | |||||
vLoading: typeof import('element-plus/es')['ElLoadingDirective'] | vLoading: typeof import('element-plus/es')['ElLoadingDirective'] | ||||
} | } | ||||
} | } |
@@ -35,8 +35,8 @@ request.interceptors.request.use( | |||||
request.interceptors.response.use( | request.interceptors.response.use( | ||||
function (response) { | function (response) { | ||||
let code = response.data.code | let code = response.data.code | ||||
// 当token无效(过期或损坏)时 | |||||
if (code == 1052) { | |||||
// 当token无效(过期或损坏)时 1053为未登录 | |||||
if (code == 1052 || code == 1053) { | |||||
localStorage.removeItem("AccessToken"); | localStorage.removeItem("AccessToken"); | ||||
router.push("/login"); | router.push("/login"); | ||||
ElMessage.error("登录过期,请重新登录!"); | ElMessage.error("登录过期,请重新登录!"); | ||||
@@ -13,6 +13,7 @@ | |||||
style="width: 300px" | style="width: 300px" | ||||
> | > | ||||
<el-input | <el-input | ||||
maxlength="15" | |||||
v-model="title" | v-model="title" | ||||
:placeholder="$t('createVideo.typeTitle')" | :placeholder="$t('createVideo.typeTitle')" | ||||
/> | /> | ||||
@@ -130,20 +131,26 @@ | |||||
<div | <div | ||||
class="pointer" | class="pointer" | ||||
:class="showFace == 0 ? 'tabAvtive' : ''" | :class="showFace == 0 ? 'tabAvtive' : ''" | ||||
@click="ChangeShowFaceList(0)" | |||||
@click="showFace = 0" | |||||
> | > | ||||
{{ $t("createVideo.availableMould") }} | {{ $t("createVideo.availableMould") }} | ||||
</div> | </div> | ||||
<div | <div | ||||
v-if="AccessToken" | |||||
class="pointer" | class="pointer" | ||||
:class="showFace == 1 ? 'tabAvtive' : ''" | :class="showFace == 1 ? 'tabAvtive' : ''" | ||||
@click="ChangeShowFaceList(1)" | |||||
@click="showFace = 1" | |||||
> | > | ||||
{{ $t("createVideo.personalWarehouse") }} | {{ $t("createVideo.personalWarehouse") }} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 系统相册 --> | <!-- 系统相册 --> | ||||
<div class="faceList" v-if="showFace == 0"> | |||||
<div | |||||
class="faceList" | |||||
v-if="showFace == 0" | |||||
v-infinite-scroll="loadMoreAiFaceSystem" | |||||
:infinite-scroll-disabled="overLoadSystem" | |||||
> | |||||
<!-- 上传图片组件 --> | <!-- 上传图片组件 --> | ||||
<div v-if="showFace == 1" class="faceItem" @click="clickAddBtn"> | <div v-if="showFace == 1" class="faceItem" @click="clickAddBtn"> | ||||
<span class="uploadImg">+ </span> | <span class="uploadImg">+ </span> | ||||
@@ -164,7 +171,12 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 个人相册 --> | <!-- 个人相册 --> | ||||
<div class="faceList" v-if="showFace == 1"> | |||||
<div | |||||
class="faceList" | |||||
v-if="showFace == 1" | |||||
v-infinite-scroll="loadMoreAiFaceUser" | |||||
:infinite-scroll-disabled="overLoadUser" | |||||
> | |||||
<!-- 上传图片组件 --> | <!-- 上传图片组件 --> | ||||
<div v-if="showFace == 1" class="faceItem" @click="clickAddBtn"> | <div v-if="showFace == 1" class="faceItem" @click="clickAddBtn"> | ||||
<span class="uploadImg">+ </span> | <span class="uploadImg">+ </span> | ||||
@@ -210,8 +222,8 @@ | |||||
<span | <span | ||||
class="pointer" | class="pointer" | ||||
@click="getPreviewAudio" | @click="getPreviewAudio" | ||||
style="margin-right: 10px; font-size: 30px" | |||||
>🕬</span | |||||
style="margin-right: 10px; font-size: 20px" | |||||
>🔊</span | |||||
> | > | ||||
<span class="pointer" @click="insertIcon">🕗</span> | <span class="pointer" @click="insertIcon">🕗</span> | ||||
</div> | </div> | ||||
@@ -460,20 +472,26 @@ import { | |||||
saveOrUpdateApi, | saveOrUpdateApi, | ||||
createVideoApi, | createVideoApi, | ||||
previewAudioApi, | previewAudioApi, | ||||
findByIdApi, | |||||
} from "@/apis/createVideo"; | } from "@/apis/createVideo"; | ||||
import { useI18n } from "vue-i18n"; | import { useI18n } from "vue-i18n"; | ||||
import Recorder from "js-audio-recorder"; //mp3插件 | import Recorder from "js-audio-recorder"; //mp3插件 | ||||
import imageCompression from "browser-image-compression"; //压缩图片插件 | import imageCompression from "browser-image-compression"; //压缩图片插件 | ||||
import { useRoute, useRouter } from "vue-router"; | |||||
const route = useRoute(); | |||||
const router = useRouter(); | |||||
const { locale } = useI18n(); | const { locale } = useI18n(); | ||||
const lanChange = ref(locale); | const lanChange = ref(locale); | ||||
const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录 | |||||
//#region 头像区的逻辑 | //#region 头像区的逻辑 | ||||
// 获取AI头像 | // 获取AI头像 | ||||
const AiFaceList = ref([]); | |||||
const userAiFaceList = ref([]); | |||||
const AiFaceList = ref([]); //系统相册列表 | |||||
const userAiFaceList = ref([]); //个人相册列表 | |||||
const feceItemLoading = ref(false); | const feceItemLoading = ref(false); | ||||
const feceItemLoading2 = ref(false); | const feceItemLoading2 = ref(false); | ||||
function getAiFaceList(pageNum, pageSize, sendType) { | function getAiFaceList(pageNum, pageSize, sendType) { | ||||
feceItemLoading.value = true; | feceItemLoading.value = true; | ||||
personPhotoList(pageNum, pageSize, sendType) | personPhotoList(pageNum, pageSize, sendType) | ||||
@@ -498,16 +516,43 @@ function getAiFaceUserList(pageNum, pageSize, sendType) { | |||||
console.log(err, "err"); | 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列表 | // 选择显示的face列表 | ||||
const showFace = ref("0"); | const showFace = ref("0"); | ||||
function ChangeShowFaceList(index) { | function ChangeShowFaceList(index) { | ||||
AiFaceList.value = null; | |||||
if (index == 0) { | |||||
getAiFaceList(1, 100, 1); | |||||
} | |||||
if (index == 1) { | |||||
getAiFaceUserList(1, 100, 3); | |||||
} | |||||
showFace.value = index; | showFace.value = index; | ||||
} | } | ||||
const faceItemActive = ref(); //高亮处理和当前选择图片的ID | const faceItemActive = ref(); //高亮处理和当前选择图片的ID | ||||
@@ -518,6 +563,7 @@ function setImgUrl(url, id) { | |||||
submitImgBtn.value = false; | submitImgBtn.value = false; | ||||
imgUrl.value = url; | imgUrl.value = url; | ||||
} | } | ||||
// 删除个人相册照片 | |||||
async function deleteFaceImg(id) { | async function deleteFaceImg(id) { | ||||
const msg = | const msg = | ||||
lanChange.value == "zh-cn" | lanChange.value == "zh-cn" | ||||
@@ -534,7 +580,10 @@ async function deleteFaceImg(id) { | |||||
const res = await delImgApi(id); | const res = await delImgApi(id); | ||||
imgUrl.value = null; | imgUrl.value = null; | ||||
faceItemActive.value = null; | faceItemActive.value = null; | ||||
getAiFaceUserList(1, 100, 3); | |||||
userAiFaceList.value = []; | |||||
getAiFaceUserList(1, 10, 3); | |||||
pageNumUser.value = 1; | |||||
overLoadUser.value = false; | |||||
} catch (error) { | } catch (error) { | ||||
ElMessage.error(errpr); | ElMessage.error(errpr); | ||||
} | } | ||||
@@ -598,7 +647,10 @@ async function changeFile() { | |||||
// 重新获取列表 | // 重新获取列表 | ||||
compressionImgLoad.value = false; | compressionImgLoad.value = false; | ||||
showUploadBtn.value = 4; | showUploadBtn.value = 4; | ||||
getAiFaceUserList(1, 100, 3); | |||||
userAiFaceList.value = []; | |||||
getAiFaceUserList(1, 10, 3); | |||||
pageNumUser.value = 1; | |||||
overLoadUser.value = false; | |||||
if (res2.code == 200) { | if (res2.code == 200) { | ||||
ElMessage.success( | ElMessage.success( | ||||
lanChange.value == "zh-cn" ? `上传成功` : `Upload successfully` | lanChange.value == "zh-cn" ? `上传成功` : `Upload successfully` | ||||
@@ -697,8 +749,14 @@ async function getPreviewAudio() { | |||||
sound.value, | sound.value, | ||||
soundStyle.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; | previewAudioUrl.value = res.data.data; | ||||
console.log(previewAudioUrl.value); | |||||
} catch (error) { | } catch (error) { | ||||
ElMessage.error(error); | ElMessage.error(error); | ||||
} | } | ||||
@@ -798,6 +856,7 @@ async function uploadProgress(videoId, isSaveVideo) { | |||||
} | } | ||||
// 定义参数 | // 定义参数 | ||||
const saveOrUpdateData = { | const saveOrUpdateData = { | ||||
id: id.value, //从草稿或者重新编辑回到创建视频时有id | |||||
title: title.value, | title: title.value, | ||||
personPhotoId: faceItemActive.value, //任务照片id, | personPhotoId: faceItemActive.value, //任务照片id, | ||||
voiceFrom: tabFrom.value, //:声音来源 1:来自选择模板,2:来自用户上传 | voiceFrom: tabFrom.value, //:声音来源 1:来自选择模板,2:来自用户上传 | ||||
@@ -808,11 +867,13 @@ async function uploadProgress(videoId, isSaveVideo) { | |||||
}; | }; | ||||
try { | try { | ||||
const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | ||||
// 这个if判断是不是仅仅保存视频 | |||||
if (isSaveVideo == "saveVideo") { | if (isSaveVideo == "saveVideo") { | ||||
ElMessage.success( | ElMessage.success( | ||||
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` | lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` | ||||
); | ); | ||||
createLoading.value = false; | createLoading.value = false; | ||||
router.push("/myCreating"); | |||||
return; | return; | ||||
} | } | ||||
const res4 = await createVideoApi({ id: res3.data.id }); // 生成视频 | const res4 = await createVideoApi({ id: res3.data.id }); // 生成视频 | ||||
@@ -824,6 +885,7 @@ async function uploadProgress(videoId, isSaveVideo) { | |||||
); | ); | ||||
} | } | ||||
createLoading.value = false; | createLoading.value = false; | ||||
router.push("/myCreating"); | |||||
} catch (error) { | } catch (error) { | ||||
ElMessage.error(error); | ElMessage.error(error); | ||||
createLoading.value = false; | createLoading.value = false; | ||||
@@ -844,6 +906,7 @@ async function saveOrUpdate(index, isSaveVideo) { | |||||
} | } | ||||
tabFrom.value = index; | tabFrom.value = index; | ||||
const saveOrUpdateData = { | const saveOrUpdateData = { | ||||
id: id.value, //从草稿或者重新编辑回到创建视频时有id | |||||
title: title.value, | title: title.value, | ||||
personPhotoId: faceItemActive.value, //任务照片id, | personPhotoId: faceItemActive.value, //任务照片id, | ||||
voiceFrom: tabFrom.value, //:声音来源 1:来自选择模板,2:来自用户上传 | voiceFrom: tabFrom.value, //:声音来源 1:来自选择模板,2:来自用户上传 | ||||
@@ -856,11 +919,13 @@ async function saveOrUpdate(index, isSaveVideo) { | |||||
createLoading.value = true; | createLoading.value = true; | ||||
try { | try { | ||||
const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | ||||
// 这个if判断是不是仅仅保存视频 | |||||
if (isSaveVideo == "saveVideo") { | if (isSaveVideo == "saveVideo") { | ||||
ElMessage.success( | ElMessage.success( | ||||
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` | lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` | ||||
); | ); | ||||
createLoading.value = false; | createLoading.value = false; | ||||
router.push("/myCreating"); | |||||
return; | return; | ||||
} | } | ||||
const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频 | const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频 | ||||
@@ -872,6 +937,7 @@ async function saveOrUpdate(index, isSaveVideo) { | |||||
); | ); | ||||
} | } | ||||
createLoading.value = false; | createLoading.value = false; | ||||
router.push("/myCreating"); | |||||
} catch (error) { | } catch (error) { | ||||
ElMessage.error(error); | ElMessage.error(error); | ||||
createLoading.value = false; | createLoading.value = false; | ||||
@@ -888,6 +954,26 @@ async function saveOrUpdate(index, isSaveVideo) { | |||||
} | } | ||||
//#endregion ---------------------------- | //#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 | //#region | ||||
//#endregion ---------------------------- | //#endregion ---------------------------- | ||||
@@ -902,11 +988,15 @@ const { | |||||
const string = "createVideo.typeScript"; | const string = "createVideo.typeScript"; | ||||
const t = globalProperties.$t(string); | 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); | |||||
} | |||||
}); | }); | ||||
</script> | </script> | ||||
@@ -116,7 +116,7 @@ | |||||
</el-icon> | </el-icon> | ||||
<span class="loadingText">{{ $t("myCreating.loading") }}</span> | <span class="loadingText">{{ $t("myCreating.loading") }}</span> | ||||
</div> | </div> | ||||
<!-- 预览作品 --> | |||||
<!-- 弹出框预览作品 --> | |||||
<el-dialog | <el-dialog | ||||
destroy-on-close | destroy-on-close | ||||
class="elDialog" | class="elDialog" | ||||
@@ -165,13 +165,23 @@ | |||||
<template #footer v-if="!presentItem.videoPlayUrl"> | <template #footer v-if="!presentItem.videoPlayUrl"> | ||||
<span class="dialog-footer"> | <span class="dialog-footer"> | ||||
<!-- dialog编辑按钮 --> | <!-- dialog编辑按钮 --> | ||||
<button class="elBtn" type="primary" @click.stop=""> | |||||
<button | |||||
class="elBtn" | |||||
type="primary" | |||||
@click.stop=" | |||||
router.push({ | |||||
path: '/createVideo', | |||||
query: { id: presentItem.id }, | |||||
}) | |||||
" | |||||
v-if="[0, 3].includes(presentItem.videoStatus)" | |||||
> | |||||
{{ $t("myCreating.edit") }} | {{ $t("myCreating.edit") }} | ||||
</button> | </button> | ||||
</span> | </span> | ||||
</template> | </template> | ||||
</el-dialog> | </el-dialog> | ||||
<!-- 分页 --> | |||||
<div v-if="!isLoading" class="pagination"> | <div v-if="!isLoading" class="pagination"> | ||||
<el-pagination | <el-pagination | ||||
v-model:current-page="pageNum" | v-model:current-page="pageNum" | ||||
@@ -57,18 +57,41 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="right"> | <div class="right"> | ||||
<div style="background-color: #07c160"> | |||||
<div style="background-color: #07c160" @click="showOrderCode(1)"> | |||||
{{ $t("shop.WeChatPay") }} | {{ $t("shop.WeChatPay") }} | ||||
</div> | </div> | ||||
<div style="background-color: #1378fe">{{ $t("shop.Alipay") }}</div> | |||||
<div style="background-color: #0070ba">Paypal</div> | |||||
<div style="background-color: #1378fe" @click="showOrderCode(2)"> | |||||
{{ $t("shop.Alipay") }} | |||||
</div> | |||||
<div style="background-color: #0070ba" @click="showOrderCode(3)"> | |||||
Paypal | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 二维码弹出框 --> | |||||
<el-dialog | |||||
v-model="orderCodeDialogShow" | |||||
width="30%" | |||||
append-to-body | |||||
destroy-on-close | |||||
> | |||||
<div class="orderCodeDialog"> | |||||
<div class="codeImg"> | |||||
<img src="../../assets/img/false1.png" alt="" /> | |||||
</div> | |||||
<div class="tips">扫描二维码进行付款</div> | |||||
<div class="btnBox"> | |||||
<div>刷新二维码</div> | |||||
</div> | |||||
</div> | |||||
</el-dialog> | |||||
</el-dialog> | </el-dialog> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script setup> | <script setup> | ||||
const title = ref(""); | const title = ref(""); | ||||
//#region 各个套餐的逻辑 | |||||
const list = reactive([ | const list = reactive([ | ||||
{ | { | ||||
color: "#f3af00", | color: "#f3af00", | ||||
@@ -133,19 +156,30 @@ const list = reactive([ | |||||
], | ], | ||||
}, | }, | ||||
]); | ]); | ||||
const showPayDialog = ref(false); | |||||
const presentItme = reactive({}); | |||||
const showPayDialog = ref(false); //套餐信息dialog显示隐藏 | |||||
const presentItme = reactive({}); //点击的套餐项 | |||||
function clickPayDialog(item) { | function clickPayDialog(item) { | ||||
presentItme.value = item; | presentItme.value = item; | ||||
console.log(presentItme); | console.log(presentItme); | ||||
showPayDialog.value = true; | showPayDialog.value = true; | ||||
} | } | ||||
function showOrderCode(type) { | |||||
orderCodeDialogShow.value = true; | |||||
} | |||||
//#endregion ------------------------------------ | |||||
//#region 点击套餐内的支付 | |||||
const orderCodeDialogShow = ref(false); | |||||
//#endregion ------------------------------------ | |||||
//#region | |||||
//#endregion ------------------------------------ | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | .page { | ||||
height: 1200px; | |||||
height: calc(100vh - 80px); | |||||
padding: 20px 0 0 20px; | padding: 20px 0 0 20px; | ||||
background-color: #fff; | background-color: #fff; | ||||
border-radius: 25px 0 0; | border-radius: 25px 0 0; | ||||
@@ -162,7 +196,7 @@ function clickPayDialog(item) { | |||||
// -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */ | // -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */ | ||||
.item { | .item { | ||||
width: 350px; | width: 350px; | ||||
height: 100%; | |||||
height: 800px; | |||||
margin-left: 50px; | margin-left: 50px; | ||||
background-color: #fffefd; | background-color: #fffefd; | ||||
flex-shrink: 0; /* 防止缩小宽度 */ | flex-shrink: 0; /* 防止缩小宽度 */ | ||||
@@ -296,4 +330,37 @@ function clickPayDialog(item) { | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.orderCodeDialog { | |||||
width: 100%; | |||||
.codeImg { | |||||
display: flex; | |||||
justify-content: space-evenly; | |||||
img { | |||||
width: 300px; | |||||
height: 300px; | |||||
} | |||||
} | |||||
.tips { | |||||
padding-top: 10px; | |||||
text-align: center; | |||||
} | |||||
.btnBox { | |||||
padding: 15px 40px; | |||||
display: flex; | |||||
justify-content: space-evenly; | |||||
> div { | |||||
padding: 10px 20px; | |||||
color: #000; | |||||
background-color: #fff; | |||||
border: #000 solid 1px; | |||||
border-radius: 10px; | |||||
transition: all 0.3s; | |||||
cursor: pointer; | |||||
&:hover { | |||||
color: #fff; | |||||
background-color: #000; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> | </style> |