youhang 5 months ago
commit 34f022efd9
  1. 3
      .vscode/extensions.json
  2. 15
      src/api/courseChaptersApi.ts
  3. 31
      src/views/MyCourseStudy/ContainerCla.vue
  4. 11
      src/views/MyCourseStudy/ContainerKno.vue
  5. 102
      src/views/MyCourseStudy/courseCollections.vue

@ -1,3 +1,4 @@
{ {
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] "recommendations": [
"Vue.volar""]
} }

@ -1,5 +1,20 @@
import request from '@/utils/request' import request from '@/utils/request'
/**
*
*/
export function getAssApi(params: {
page: number,
pageSize: number,
resourceIdList: string,
type: 1 | 2 | 3 | 4 | 5
}) {
return request.get('/Favour/get', {
params
})
}
/** /**
* *
* @param par * @param par

@ -27,15 +27,9 @@
</div> </div>
</div> </div>
<div class="Page-1"> <div class="Page-1">
<el-pagination <el-pagination v-model:current-page="params.current" v-model:page-size="params.pageSize"
v-model:current-page="params.current" :page-sizes="[6, 8, 12, 15]" layout="total, sizes, prev, pager, next, jumper" :total="total"
v-model:page-size="params.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
:page-sizes="[6, 8, 12, 15]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div> </div>
</el-tab-pane> </el-tab-pane>
</template> </template>
@ -48,24 +42,22 @@ const container = ref()
function handleResize() { function handleResize() {
const style = getComputedStyle(container.value) const style = getComputedStyle(container.value)
const width = Number(style.width.slice(0, -2)) const width = Number(style.width.slice(0, -2))
if (width >= 350 * 4.5) if (width >= 350 * 4.5) container.value.style.gridTemplateColumns = "repeat(4, 350px)"
container.value.style.gridTemplateColumns = 'repeat(4, 350px)' else container.value.style.gridTemplateColumns = "repeat(auto-fill, 350px)"
else container.value.style.gridTemplateColumns = 'repeat(auto-fill, 350px)'
} }
function debounce(func: any, delay: any) { function debounce(func: any, delay: any) {
let timer: any let timer: any
return function () { return function () {
clearTimeout(timer) clearTimeout(timer);
timer = setTimeout(() => { timer = setTimeout(() => {
// @ts-ignore // @ts-ignore
func.apply(this, arguments) func.apply(this, arguments);
}, delay) }, delay);
} };
} }
const deHR = debounce(handleResize, 500) const deHR = debounce(handleResize, 500)
const myObserver = new ResizeObserver(deHR) const myObserver = new ResizeObserver((deHR))
onMounted(() => myObserver.observe(container.value)) onMounted(() => myObserver.observe(container.value))
onBeforeUnmount(myObserver.disconnect)
// =============================== // ===============================
const total = ref(0) const total = ref(0)
const datalist = ref([ const datalist = ref([
@ -104,10 +96,7 @@ const getDatalist = async () => {
params.value, params.value,
) )
datalist.value = res.data.records datalist.value = res.data.records
console.log('datalist ' + datalist.value[0].name)
total.value = res.data.total total.value = res.data.total
console.log('pages ' + total.value)
console.log('datalist ' + datalist.value[0].img)
} }
getDatalist() getDatalist()

@ -15,8 +15,8 @@
<div class="Knowledge_point"> <div class="Knowledge_point">
<ul> <ul>
<li v-for="(item, index) in 6" :key="index"> <li v-for="(item, index) in 6" :key="index">
知识点知识点知识点{{ item }} &nbsp; 知识点知识点知识点{{ item }}
<div class="btn">×</div> <span class="btn" >×</span>
&nbsp; &nbsp;
</li> </li>
</ul> </ul>
@ -26,7 +26,10 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup>
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.Container_Kno { .Container_Kno {
width: 100%; width: 100%;
@ -108,7 +111,7 @@
} }
.btn { .btn {
display: inline; display: none;
} }
.btn:hover { .btn:hover {

@ -1,12 +1,6 @@
<template> <template>
<div class="curse-collection"> <div class="curse-collection">
<el-tabs <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick" style="padding-top: 0">
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClick"
style="padding-top: 0"
>
<!-- 课程收藏页面 --> <!-- 课程收藏页面 -->
<ContainerCla /> <ContainerCla />
<!-- 资源收藏页面 --> <!-- 资源收藏页面 -->
@ -69,17 +63,28 @@
</div> </div>
<!-- 小页面-3 --> <!-- 小页面-3 -->
<div class="Res_con" v-show="activeIndex == 3"> <div class="Res_con" v-show="activeIndex == 3">
<div class="item_2-3" v-for="(item, index) in 6" :key="index"> <div class="item_2-3" v-for="(item, index) in 8" :key="index">
<div class="ResImg-2"> <div class="ResImg-2">
<div class="Img"> <div class="Img">
<img src="../../assets/icons/视频.png" /> <img src="../../assets/icons/视频.png" />
</div> </div>
</div> </div>
<div class="ResClaDic"> <div class="ResClaDic">
<p>视频名称-----{{ item }}</p> <p>{{ item }}</p>
<el-button plain @click="centerDialogVisible = true">
点击播放
</el-button>
</div> </div>
</div> </div>
</div> </div>
<el-dialog v-model="centerDialogVisible" title="视频播放中" width="1000" align-center>
<span>点击开了一个弹框</span>
<template #footer>
<div class="dialog-footer">
<video src=""></video>
</div>
</template>
</el-dialog>
<!-- 小页面-4 --> <!-- 小页面-4 -->
<div class="Res_con" v-show="activeIndex == 4"> <div class="Res_con" v-show="activeIndex == 4">
<div class="item_2-4" v-for="(item, index) in 8" :key="index"> <div class="item_2-4" v-for="(item, index) in 8" :key="index">
@ -92,8 +97,8 @@
<p>文本名称-----{{ item }}</p> <p>文本名称-----{{ item }}</p>
</div> </div>
</div> </div>
<div></div>
</div> </div>
<!-- 小页面-5 --> <!-- 小页面-5 -->
<div class="Res_con" v-show="activeIndex == 5"> <div class="Res_con" v-show="activeIndex == 5">
<div class="item_2-5" v-for="(item, index) in 10" :key="index"> <div class="item_2-5" v-for="(item, index) in 10" :key="index">
@ -108,16 +113,9 @@
</div> </div>
</div> </div>
<div class="Page-2"> <div class="Page-2">
<el-pagination <el-pagination v-model:current-page="currentPage1" v-model:page-size="pageSize1" :disabled="disabled"
v-model:current-page="currentPage1" :page-sizes="[6, 8, 12, 15]" layout="total, sizes, prev, pager, next, jumper" :total="10"
v-model:page-size="pageSize1" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
:disabled="disabled"
:page-sizes="[6, 8, 12, 15]"
layout="total, sizes, prev, pager, next, jumper"
:total="10"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div> </div>
</el-tab-pane> </el-tab-pane>
<!-- 知识点收藏页面 --> <!-- 知识点收藏页面 -->
@ -128,33 +126,73 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref, watch } from 'vue'
import type { TabsPaneContext } from 'element-plus' import type { TabsPaneContext } from 'element-plus'
import ContainerCla from './ContainerCla.vue' import ContainerCla from './ContainerCla.vue'
import ContainerKno from './ContainerKno.vue' import ContainerKno from './ContainerKno.vue'
// import ContainerRes from "./ContainerRes.vue"; import { getAssApi } from "@/api/courseChaptersApi";
// import { getDataListApi } from '@/api/user/corc.js' const centerDialogVisible = ref(false)
const activeIndex = ref(1) const activeIndex = ref(1)
function hsndelShow(index: number) { function hsndelShow(index: number) {
activeIndex.value = index activeIndex.value = index
} }
//=========================
const activeName = ref('first') function handleApi(params) {
const handleClick = (tab: TabsPaneContext, event: Event) => { getAssApi(params).then(res => {
console.log(tab, event) arr.value = res.data.records
total.value = res.data.total
console.log(arr.value, '-', total.value)
})
} }
const arr = ref([])
const total = ref(0)
// //
const currentPage1 = ref(1) const currentPage1 = ref(1)
const pageSize1 = ref(10) const pageSize1 = ref(10)
const disabled = ref(false) const disabled = ref(false)
const handleSizeChange = (val: number) => { const handleSizeChange = (val: number) => {
console.log(`${val} items per page`) hand()
} }
const handleCurrentChange = (val: number) => { const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`) hand()
}
function initFenYie() {
arr.value.length = 0
currentPage1.value = 1
pageSize1.value = 10
} }
watch(activeIndex, (newVal) => {
initFenYie()
hand()
})
function hand() {
const params = {
type: activeIndex.value,
page: currentPage1.value,
pageSize: pageSize1.value,
resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20'
}
handleApi(params)
}
const obj = {
type: activeIndex.value,
page: currentPage1.value,
pageSize: pageSize1.value,
resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20'
}
handleApi(obj)
//=========================
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event)
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -330,7 +368,7 @@ const handleCurrentChange = (val: number) => {
position: flex; position: flex;
justify-content: center; justify-content: center;
background-color: #fff; background-color: #fff;
border-top: 1px solid rgb(229, 227, 227, 0.5); border-top: 1px solid rgb(229, 227, 227, .5);
border-bottom: 1px solid rgb(229, 227, 227, 0.5); border-bottom: 1px solid rgb(229, 227, 227, .5);
} }
</style> </style>

Loading…
Cancel
Save