| @@ -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> | ||||