diff --git a/src/apis/createVideo.js b/src/apis/createVideo.js index fe0c1e3..501fb02 100644 --- a/src/apis/createVideo.js +++ b/src/apis/createVideo.js @@ -39,9 +39,9 @@ export function personBGIListApi(pageNum, pageSize, videoType) { * @param sex ,pageNum,pageSize * @returns data */ -export function systemSCIListApi(sex, pageNum, pageSize) { +export function systemSCIListApi(pageNum, pageSize) { return request({ - url: `/api/personPatch/list?sex=${sex}&pageNum=${pageNum}&pageSize=${pageSize}`, + url: `/api/materialMould/list?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, method: 'get' }) } @@ -52,7 +52,7 @@ export function systemSCIListApi(sex, pageNum, pageSize) { */ export function personSCIListApi(pageNum, pageSize, videoType) { return request({ - url: `/api/materialMould/userList?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, + url: `/api/materialMould/userList?type=5&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, method: 'get', }) } diff --git a/src/router/index.ts b/src/router/index.ts index b460489..df81e89 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -5,17 +5,17 @@ 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: "/redirect", + // component: Layout, + // meta: { hidden: true }, + // children: [ + // { + // path: "/redirect/:path(.*)", + // component: () => import("@/views/redirect/index.vue"), + // }, + // ], + // }, // 登录 { path: "/login", diff --git a/src/styles/my.scss b/src/styles/my.scss index 7060c25..3607d98 100644 --- a/src/styles/my.scss +++ b/src/styles/my.scss @@ -82,13 +82,13 @@ p { ::-webkit-scrollbar { width: 8px; /* 滚动条宽度 */ - background-color: #f5f5f5; + // background-color: #f5f5f5; /* 滚动条背景色 */ } /* 定义滚动条轨道的样式 */ ::-webkit-scrollbar-track { - background-color: #f5f5f5; + // background-color: #f5f5f5; /* 滚动条轨道背景色 */ } diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts index 9ea2d5d..e5c7bdb 100644 --- a/src/types/auto-imports.d.ts +++ b/src/types/auto-imports.d.ts @@ -2,6 +2,7 @@ export {} declare global { const EffectScope: typeof import('vue')['EffectScope'] + const ElForm: typeof import('element-plus/es')['ElForm'] const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] @@ -270,6 +271,7 @@ import { UnwrapRef } from 'vue' declare module 'vue' { interface ComponentCustomProperties { readonly EffectScope: UnwrapRef + readonly ElForm: UnwrapRef readonly ElMessage: UnwrapRef readonly ElMessageBox: UnwrapRef readonly asyncComputed: UnwrapRef diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 49867c9..5f466ea 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -8,14 +8,9 @@ export {} declare module '@vue/runtime-core' { export interface GlobalComponents { Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default'] - ElAlert: typeof import('element-plus/es')['ElAlert'] - ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] - ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElButton: typeof import('element-plus/es')['ElButton'] - ElCard: typeof import('element-plus/es')['ElCard'] ElCol: typeof import('element-plus/es')['ElCol'] ElDialog: typeof import('element-plus/es')['ElDialog'] - ElDivider: typeof import('element-plus/es')['ElDivider'] ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] @@ -23,59 +18,27 @@ declare module '@vue/runtime-core' { ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] - ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] - ElLink: typeof import('element-plus/es')['ElLink'] ElOption: typeof import('element-plus/es')['ElOption'] ElPagination: typeof import('element-plus/es')['ElPagination'] - ElPopover: typeof import('element-plus/es')['ElPopover'] - ElRadio: typeof import('element-plus/es')['ElRadio'] - ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRow: typeof import('element-plus/es')['ElRow'] - ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElSelect: typeof import('element-plus/es')['ElSelect'] - ElSwitch: typeof import('element-plus/es')['ElSwitch'] - ElTable: typeof import('element-plus/es')['ElTable'] - ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabs: typeof import('element-plus/es')['ElTabs'] - ElTag: typeof import('element-plus/es')['ElTag'] - ElTooltip: typeof import('element-plus/es')['ElTooltip'] - ElTree: typeof import('element-plus/es')['ElTree'] - ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect'] - ElUpload: typeof import('element-plus/es')['ElUpload'] GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] - IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default'] - IEpCaretTop: typeof import('~icons/ep/caret-top')['default'] - IEpClose: typeof import('~icons/ep/close')['default'] IEpCloseBold: typeof import('~icons/ep/close-bold')['default'] - IEpCollection: typeof import('~icons/ep/collection')['default'] IEpDelete: typeof import('~icons/ep/delete')['default'] - IEpDocumentAdd: typeof import('~icons/ep/document-add')['default'] IEpDownload: typeof import('~icons/ep/download')['default'] IEpEdit: typeof import('~icons/ep/edit')['default'] - IEpGoods: typeof import('~icons/ep/goods')['default'] - IEpHeadset: typeof import('~icons/ep/headset')['default'] IEpLoading: typeof import('~icons/ep/loading')['default'] - IEpMenu: typeof import('~icons/ep/menu')['default'] - IEpMic: typeof import('~icons/ep/mic')['default'] - IEpPlus: typeof import('~icons/ep/plus')['default'] - IEpPosition: typeof import('~icons/ep/position')['default'] - IEpRefresh: typeof import('~icons/ep/refresh')['default'] - IEpRefreshLeft: typeof import('~icons/ep/refresh-left')['default'] IEpSearch: typeof import('~icons/ep/search')['default'] - IEpSetting: typeof import('~icons/ep/setting')['default'] - IEpTop: typeof import('~icons/ep/top')['default'] - IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default'] - IEpVideoCamera: typeof import('~icons/ep/video-camera')['default'] IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] MyLoading: typeof import('./../components/myLoading.vue')['default'] MyLoadingIcon: typeof import('./../components/myLoadingIcon.vue')['default'] Pagination: typeof import('./../components/Pagination/index.vue')['default'] - RightPanel: typeof import('./../components/RightPanel/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default'] @@ -85,6 +48,5 @@ declare module '@vue/runtime-core' { } export interface ComponentCustomProperties { vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'] - vLoading: typeof import('element-plus/es')['ElLoadingDirective'] } } diff --git a/src/views/createVideo/index copy.vue b/src/views/createVideo/index copy.vue deleted file mode 100644 index 91438d2..0000000 --- a/src/views/createVideo/index copy.vue +++ /dev/null @@ -1,1231 +0,0 @@ - - - - - diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 99d0e03..5f9456b 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -53,6 +53,7 @@ :infinite-scroll-disabled="overLoadModel" >
- -
+ +
-
+
-
- +
+
-
+
+ +
+
+ +
+
-
+
@@ -285,6 +304,7 @@ const modelTabItemActive = ref(0); //模版tab栏 const modelPageNum = ref(1); const modelPageSize = ref(20); const overLoadModel = ref(true); //禁用模版加载更多 +const modelId = ref(null); // 选中模版的id // 获取模版列表 async function getModeList(sex, pageNum, pageSize) { const res = await modeListApi(sex, pageNum, pageSize); @@ -296,6 +316,7 @@ function clickModelItem(item) { modelImg.value = item.coverImg; showChooseModel.value = false; videoType.value = item.videoType; + modelId.value = item.id; } // tab栏切换 function changeTabSex(index) { @@ -464,7 +485,6 @@ async function loadMoreSystemBGI() { watch( () => videoType, (newValue, oldValue) => { - console.log(123); systemBGPageNum.value = 1; getSystemBGIList(); }, @@ -484,7 +504,7 @@ async function getpersonBGIList() { overLoadpersonBG.value = false; } // 加载更多系统背景图 -async function loadMorepersonBGI() { +async function loadMorePersonBGI() { personBGPageNum.value += 1; const res = await personBGIListApi( personBGPageNum.value, @@ -500,7 +520,61 @@ async function loadMorepersonBGI() { //#endregion ---------------------------- //#region 素材 -const scTabItemActive = ref(1); +const scTabItemActive = ref(1); //系统或个人tab高亮 +const systemSCIList = ref([]); //系统素材列表 +const systemSCPageNum = ref(1); //系统素材页数 +const overLoadSystemSC = ref(true); +async function getSystemSCIList() { + const res = await systemSCIListApi( + systemSCPageNum.value, + 20, + videoType.value + ); + systemSCIList.value = res.data.list; + overLoadSystemSC.value = false; +} +// 加载更多系统素材图 +async function loadMoreSystemSCI() { + systemSCPageNum.value += 1; + const res = await systemSCIListApi( + systemSCPageNum.value, + 20, + videoType.value + ); + systemSCIList.value.push(...res.data.list); + if (res.data.list.length == 0) { + overLoadSystemSC.value = true; + systemSCPageNum.value = modelPageNum.value - 1; + } +} + +// 个人素材 +const personSCIList = ref([]); //系统素材列表 +const personSCPageNum = ref(1); //系统素材页数 +const overLoadpersonSC = ref(true); +async function getpersonSCIList() { + const res = await personSCIListApi( + personSCPageNum.value, + 20, + videoType.value + ); + personSCIList.value = res.data.list; + overLoadpersonSC.value = false; +} +// 加载更多个人素材图 +async function loadMorePersonSCI() { + personSCPageNum.value += 1; + const res = await personSCIListApi( + personSCPageNum.value, + 20, + videoType.value + ); + personSCIList.value.push(...res.data.list); + if (res.data.list.length == 0) { + overLoadpersonSC.value = true; + personSCPageNum.value = modelPageNum.value - 1; + } +} //#endregion ---------------------------- //#region @@ -522,6 +596,7 @@ const t = globalProperties.$t(string); onMounted(async () => { voiceTotal(); + getSystemSCIList(); await getModeList("", 1, 20); }); @@ -612,9 +687,10 @@ onMounted(async () => { padding: 20px; width: 300px; height: 300px; - background-color: rgba(0, 0, 0, 0.1); + background: rgba(0, 0, 0, 0.1); margin: 0 10px 10px 0; border-radius: 15px; + z-index: 2; cursor: pointer; img { max-width: 100%; @@ -623,6 +699,23 @@ onMounted(async () => { // max-height: 200px; } } + .modeListBoxItmeActive { + border: 3px solid #7264f5; + // &::before { + // content: ""; + // position: absolute; + // top: -5px; + // left: -5px; + // width: 310px; + // height: 310px; + // background: linear-gradient( + // 225deg, + // rgba(81, 217, 202, 1), + // rgba(114, 100, 245, 1) + // ); + // border-radius: 16px; + // } + } } } .noModel { @@ -740,20 +833,28 @@ onMounted(async () => { margin: 7px 0; } } - .tab2 { + .tab2, + .tab3 { .bjSystemBox { display: flex; flex-wrap: wrap; - height: calc(100% - 60px); + max-height: calc(100% - 60px); overflow-y: scroll; - background-color: pink; + // background-color: pink; .bjSystemBoxItem { position: relative; margin-right: 3%; margin-bottom: 10px; width: 30%; height: 200px; - background-color: red; + background-color: #e5e5e5; + border-radius: 10px; + cursor: pointer; + img { + padding: 10px; + max-width: 100%; + max-height: 100%; + } } } }