youhang 5 months ago
commit 34f022efd9
  1. 3
      .vscode/extensions.json
  2. 33
      src/api/courseChaptersApi.ts
  3. 43
      src/views/MyCourseStudy/ContainerCla.vue
  4. 59
      src/views/MyCourseStudy/ContainerKno.vue
  5. 106
      src/views/MyCourseStudy/courseCollections.vue

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

@ -1,22 +1,37 @@
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
*/
export function aaaApi(par:any){
if(par)return request.get(`url${par}`)
else return request.get(`url`)
export function aaaApi(par: any) {
if (par) return request.get(`url${par}`)
else return request.get(`url`)
}
export const uploadFile = (data:any) => {
return request({
url:'/upload',
method:"POST",
data
})
export const uploadFile = (data: any) => {
return request({
url: '/upload',
method: "POST",
data
})
}

@ -27,15 +27,9 @@
</div>
</div>
<div class="Page-1">
<el-pagination
v-model:current-page="params.current"
v-model:page-size="params.pageSize"
:page-sizes="[6, 8, 12, 15]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-pagination v-model:current-page="params.current" v-model:page-size="params.pageSize"
:page-sizes="[6, 8, 12, 15]" layout="total, sizes, prev, pager, next, jumper" :total="total"
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</el-tab-pane>
</template>
@ -48,24 +42,22 @@ const container = ref()
function handleResize() {
const style = getComputedStyle(container.value)
const width = Number(style.width.slice(0, -2))
if (width >= 350 * 4.5)
container.value.style.gridTemplateColumns = 'repeat(4, 350px)'
else container.value.style.gridTemplateColumns = 'repeat(auto-fill, 350px)'
if (width >= 350 * 4.5) container.value.style.gridTemplateColumns = "repeat(4, 350px)"
else container.value.style.gridTemplateColumns = "repeat(auto-fill, 350px)"
}
function debounce(func: any, delay: any) {
let timer: any
return function () {
clearTimeout(timer)
clearTimeout(timer);
timer = setTimeout(() => {
// @ts-ignore
func.apply(this, arguments)
}, delay)
}
func.apply(this, arguments);
}, delay);
};
}
const deHR = debounce(handleResize, 500)
const myObserver = new ResizeObserver(deHR)
const myObserver = new ResizeObserver((deHR))
onMounted(() => myObserver.observe(container.value))
onBeforeUnmount(myObserver.disconnect)
// ===============================
const total = ref(0)
const datalist = ref([
@ -104,10 +96,7 @@ const getDatalist = async () => {
params.value,
)
datalist.value = res.data.records
console.log('datalist ' + datalist.value[0].name)
total.value = res.data.total
console.log('pages ' + total.value)
console.log('datalist ' + datalist.value[0].img)
}
getDatalist()
@ -132,7 +121,7 @@ const handleCurrentChange = (page: any) => {
justify-content: center;
}
.example-pagination-block + .example-pagination-block {
.example-pagination-block+.example-pagination-block {
margin-top: 10px;
}
@ -191,7 +180,7 @@ const handleCurrentChange = (page: any) => {
border-bottom: 1px solid rgb(217, 217, 217);
}
.ClassImg > img {
.ClassImg>img {
width: 100%;
height: 180px;
}
@ -225,14 +214,14 @@ const handleCurrentChange = (page: any) => {
justify-content: space-around;
}
.Con > h3 {
.Con>h3 {
margin-left: 15px;
font-size: 25px;
font-weight: 600;
cursor: pointer;
}
.Con > p {
.Con>p {
margin-left: 15px;
margin-top: 5px;
font-size: 13px;
@ -240,14 +229,14 @@ const handleCurrentChange = (page: any) => {
cursor: pointer;
}
.Con > p > span {
.Con>p>span {
margin-left: 5px;
margin-right: 5px;
color: rgb(94, 188, 231);
font-weight: 600;
}
.Con > button {
.Con>button {
width: 45px;
height: 20px;
font-size: 9px;

@ -1,32 +1,35 @@
<template>
<el-tab-pane label="知识点收藏" name="third">
<div class="Container_Kno">
<div class="item_3" v-for="(item_3, index) in 10" :key="index">
<div>
<div class="KnowledgeCollent">
<div class="KnoCon">
<h4>课程名称</h4>
<p>{{ item_3 }}-xxxx</p>
<el-tab-pane label="知识点收藏" name="third">
<div class="Container_Kno">
<div class="item_3" v-for="(item_3, index) in 10" :key="index">
<div>
<div class="KnowledgeCollent">
<div class="KnoCon">
<h4>课程名称</h4>
<p>{{ item_3 }}-xxxx</p>
</div>
<div class="KnoBtn" >
<img src="../../assets/icons/更多.svg" alt="" />
</div>
</div>
<div class="Knowledge_point">
<ul>
<li v-for="(item, index) in 6" :key="index">
知识点知识点知识点{{ item }}
<span class="btn" >×</span>
&nbsp;
</li>
</ul>
</div>
</div>
</div>
<div class="KnoBtn">
<img src="../../assets/icons/更多.svg" alt="" />
</div>
</div>
<div class="Knowledge_point">
<ul>
<li v-for="(item, index) in 6" :key="index">
知识点知识点知识点{{ item }} &nbsp;
<div class="btn">×</div>
&nbsp;
</li>
</ul>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tab-pane>
</template>
<script lang="ts" setup></script>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
.Container_Kno {
width: 100%;
@ -65,7 +68,7 @@
justify-content: space-around;
}
.KnoBtn > img {
.KnoBtn>img {
padding-top: 20px;
cursor: pointer;
}
@ -93,7 +96,7 @@
flex-direction: column;
}
.Knowledge_point > ul > li {
.Knowledge_point>ul>li {
display: inline-block;
margin-top: 3px;
margin-bottom: 3px;
@ -108,7 +111,7 @@
}
.btn {
display: inline;
display: none;
}
.btn:hover {

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

Loading…
Cancel
Save