| @@ -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', | |||
| }) | |||
| } | |||
| @@ -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", | |||
| @@ -82,13 +82,13 @@ p { | |||
| ::-webkit-scrollbar { | |||
| width: 8px; | |||
| /* 滚动条宽度 */ | |||
| background-color: #f5f5f5; | |||
| // background-color: #f5f5f5; | |||
| /* 滚动条背景色 */ | |||
| } | |||
| /* 定义滚动条轨道的样式 */ | |||
| ::-webkit-scrollbar-track { | |||
| background-color: #f5f5f5; | |||
| // background-color: #f5f5f5; | |||
| /* 滚动条轨道背景色 */ | |||
| } | |||
| @@ -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<typeof import('vue')['EffectScope']> | |||
| readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']> | |||
| readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | |||
| readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | |||
| readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | |||
| @@ -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'] | |||
| } | |||
| } | |||
| @@ -53,6 +53,7 @@ | |||
| :infinite-scroll-disabled="overLoadModel" | |||
| > | |||
| <div | |||
| :class="modelId == item.id ? 'modeListBoxItmeActive' : ''" | |||
| class="modeListBoxItme" | |||
| v-for="item in modeList" | |||
| :key="item.id" | |||
| @@ -107,8 +108,8 @@ | |||
| 字幕 | |||
| </div> | |||
| </div> | |||
| <!-- 文案 --> | |||
| <div v-show="tabItemActive == 1" class="tabContent tab1"> | |||
| <!-- 文案 只能使用v-if,不能使用v-show--> | |||
| <div v-if="tabItemActive == 1" class="tabContent tab1"> | |||
| <!-- 标题 --> | |||
| <div class="title"> | |||
| <el-input | |||
| @@ -193,7 +194,7 @@ | |||
| </el-select> | |||
| </div> | |||
| <!-- 背景 --> | |||
| <div v-show="tabItemActive == 2" class="tabContent tab2"> | |||
| <div v-if="tabItemActive == 2" class="tabContent tab2"> | |||
| <div class="tab"> | |||
| <div | |||
| class="tabItem" | |||
| @@ -216,13 +217,17 @@ | |||
| v-infinite-scroll="loadMoreSystemBGI" | |||
| :infinite-scroll-disabled="overLoadSystemBG" | |||
| > | |||
| <div class="bjSystemBoxItem" v-for="item in 15" :key="item"> | |||
| <img class="boxCentreImg" src="" alt="" /> | |||
| <div | |||
| class="bjSystemBoxItem" | |||
| v-for="item in systemBGIList" | |||
| :key="item.id" | |||
| > | |||
| <img class="boxCentreImg" :src="item.material" alt="" /> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 素材 --> | |||
| <div v-show="tabItemActive == 3" class="tabContent"> | |||
| <div v-if="tabItemActive == 3" class="tabContent tab3"> | |||
| <div class="tab"> | |||
| <div | |||
| class="tabItem" | |||
| @@ -239,9 +244,23 @@ | |||
| 个人素材 | |||
| </div> | |||
| </div> | |||
| <!-- 素材图片展示 --> | |||
| <div | |||
| class="bjSystemBox" | |||
| v-infinite-scroll="loadMoreSystemSCI" | |||
| :infinite-scroll-disabled="overLoadSystemSC" | |||
| > | |||
| <div | |||
| class="bjSystemBoxItem" | |||
| v-for="item in systemSCIList" | |||
| :key="item.id" | |||
| > | |||
| <img class="boxCentreImg" :src="item.material" alt="" /> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 字幕 --> | |||
| <div v-show="tabItemActive == 4" class="tabContent"></div> | |||
| <div v-if="tabItemActive == 4" class="tabContent"></div> | |||
| </div> | |||
| <!-- 试听的mp3 --> | |||
| <div style="opacity: 0; width: 0"> | |||
| @@ -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); | |||
| }); | |||
| </script> | |||
| @@ -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%; | |||
| } | |||
| } | |||
| } | |||
| } | |||