| @@ -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', | |||
| }) | |||
| } | |||
| @@ -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", | |||
| }, | |||
| // 商店 | |||
| @@ -35,6 +35,7 @@ export default { | |||
| navbar: { | |||
| account: "账户", | |||
| logout: "注销", | |||
| goLogin:'登录' | |||
| }, | |||
| // 创作视频 | |||
| @@ -100,6 +101,7 @@ export default { | |||
| successed: "支付成功", | |||
| failed: "支付失败", | |||
| msg1: "获得视频制作次数一次", | |||
| }, | |||
| // 商店 | |||
| @@ -9,64 +9,26 @@ | |||
| /> | |||
| <breadcrumb /> | |||
| </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"> | |||
| {{ $t(routeName as string) }} | |||
| </div> | |||
| <!--语言选择--> | |||
| <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") }} | |||
| </div> | |||
| </div> | |||
| @@ -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; | |||
| } | |||
| @@ -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(); | |||
| @@ -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'] | |||
| } | |||
| export interface ComponentCustomProperties { | |||
| vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'] | |||
| vLoading: typeof import('element-plus/es')['ElLoadingDirective'] | |||
| } | |||
| } | |||
| @@ -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("登录过期,请重新登录!"); | |||
| @@ -13,6 +13,7 @@ | |||
| style="width: 300px" | |||
| > | |||
| <el-input | |||
| maxlength="15" | |||
| v-model="title" | |||
| :placeholder="$t('createVideo.typeTitle')" | |||
| /> | |||
| @@ -130,20 +131,26 @@ | |||
| <div | |||
| class="pointer" | |||
| :class="showFace == 0 ? 'tabAvtive' : ''" | |||
| @click="ChangeShowFaceList(0)" | |||
| @click="showFace = 0" | |||
| > | |||
| {{ $t("createVideo.availableMould") }} | |||
| </div> | |||
| <div | |||
| v-if="AccessToken" | |||
| class="pointer" | |||
| :class="showFace == 1 ? 'tabAvtive' : ''" | |||
| @click="ChangeShowFaceList(1)" | |||
| @click="showFace = 1" | |||
| > | |||
| {{ $t("createVideo.personalWarehouse") }} | |||
| </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"> | |||
| <span class="uploadImg">+ </span> | |||
| @@ -164,7 +171,12 @@ | |||
| </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"> | |||
| <span class="uploadImg">+ </span> | |||
| @@ -210,8 +222,8 @@ | |||
| <span | |||
| class="pointer" | |||
| @click="getPreviewAudio" | |||
| style="margin-right: 10px; font-size: 30px" | |||
| >🕬</span | |||
| style="margin-right: 10px; font-size: 20px" | |||
| >🔊</span | |||
| > | |||
| <span class="pointer" @click="insertIcon">🕗</span> | |||
| </div> | |||
| @@ -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); | |||
| } | |||
| }); | |||
| </script> | |||
| @@ -116,7 +116,7 @@ | |||
| </el-icon> | |||
| <span class="loadingText">{{ $t("myCreating.loading") }}</span> | |||
| </div> | |||
| <!-- 预览作品 --> | |||
| <!-- 弹出框预览作品 --> | |||
| <el-dialog | |||
| destroy-on-close | |||
| class="elDialog" | |||
| @@ -165,13 +165,23 @@ | |||
| <template #footer v-if="!presentItem.videoPlayUrl"> | |||
| <span class="dialog-footer"> | |||
| <!-- 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") }} | |||
| </button> | |||
| </span> | |||
| </template> | |||
| </el-dialog> | |||
| <!-- 分页 --> | |||
| <div v-if="!isLoading" class="pagination"> | |||
| <el-pagination | |||
| v-model:current-page="pageNum" | |||
| @@ -57,18 +57,41 @@ | |||
| </div> | |||
| </div> | |||
| <div class="right"> | |||
| <div style="background-color: #07c160"> | |||
| <div style="background-color: #07c160" @click="showOrderCode(1)"> | |||
| {{ $t("shop.WeChatPay") }} | |||
| </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> | |||
| <!-- 二维码弹出框 --> | |||
| <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> | |||
| </div> | |||
| </template> | |||
| <script setup> | |||
| const title = ref(""); | |||
| //#region 各个套餐的逻辑 | |||
| const list = reactive([ | |||
| { | |||
| 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) { | |||
| presentItme.value = item; | |||
| console.log(presentItme); | |||
| showPayDialog.value = true; | |||
| } | |||
| function showOrderCode(type) { | |||
| orderCodeDialogShow.value = true; | |||
| } | |||
| //#endregion ------------------------------------ | |||
| //#region 点击套餐内的支付 | |||
| const orderCodeDialogShow = ref(false); | |||
| //#endregion ------------------------------------ | |||
| //#region | |||
| //#endregion ------------------------------------ | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| height: 1200px; | |||
| height: calc(100vh - 80px); | |||
| padding: 20px 0 0 20px; | |||
| background-color: #fff; | |||
| border-radius: 25px 0 0; | |||
| @@ -162,7 +196,7 @@ function clickPayDialog(item) { | |||
| // -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */ | |||
| .item { | |||
| width: 350px; | |||
| height: 100%; | |||
| height: 800px; | |||
| margin-left: 50px; | |||
| background-color: #fffefd; | |||
| 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> | |||