@@ -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%; | |||
} | |||
} | |||
} | |||
} | |||