Compare commits

...

2 Commits

Author SHA1 Message Date
于鹏飞 bea2979765 一次提交 5 months ago
于鹏飞 f13156cddb 知识点收藏页面修改 5 months ago
  1. 3
      src/api/courseChaptersApi.ts
  2. 46
      src/views/MyCourseStudy/ContainerCla.vue
  3. 79
      src/views/MyCourseStudy/ContainerKno.vue
  4. 95
      src/views/MyCourseStudy/courseCollections.vue

@ -8,7 +8,8 @@ export function getAssApi(params: {
page: number, page: number,
pageSize: number, pageSize: number,
resourceIdList: string, resourceIdList: string,
type: 1 | 2 | 3 | 4 | 5 type: 1 | 2 | 3 | 4 | 5,
userId: string
}) { }) {
return request.get('/Favour/get', { return request.get('/Favour/get', {
params params

@ -2,12 +2,14 @@
<!-- 课程收藏页面 --> <!-- 课程收藏页面 -->
<el-tab-pane label="课程收藏" name="first"> <el-tab-pane label="课程收藏" name="first">
<div class="Container_Cla" ref="container"> <div class="Container_Cla" ref="container">
<div class="item_1" v-for="(item_1, index) in datalist" :key="index"> <div class="item_1" v-for="item_1 in datalist" :key="item_1.id">
<!-- 课程图片盒子 --> <!-- 课程图片盒子 -->
<div class="ClassImg"> <div class="ClassImg">
<!-- 更多图片盒子 --> <!-- 更多图片盒子 -->
<div class="ClassGd"> <div class="ClassGd">
<img src="../../assets/icons/更多.svg" width="100%" height="100%" /> <!-- <img src="../../assets/icons/更多.svg" width="100%" height="100%" /> -->
<p>查看课程</p>
<p>取消收藏</p>
</div> </div>
<!-- 课程图片 --> <!-- 课程图片 -->
<img :src="item_1.img" /> <img :src="item_1.img" />
@ -40,7 +42,7 @@
</el-tab-pane> </el-tab-pane>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue' import { ref, onMounted} from 'vue'
import { SeCourseFavourControllerService } from '../../../generated/services/SeCourseFavourControllerService' import { SeCourseFavourControllerService } from '../../../generated/services/SeCourseFavourControllerService'
import { CourseFavourQueryRequest } from 'generated/models/CourseFavourQueryRequest' import { CourseFavourQueryRequest } from 'generated/models/CourseFavourQueryRequest'
// =============================== // ===============================
@ -69,27 +71,18 @@ onMounted(() => myObserver.observe(container.value))
const total = ref(0) const total = ref(0)
const datalist = ref([ const datalist = ref([
{ {
/** //
* 课程学时
*/
classhours: '', classhours: '',
/** //
* 课程学分
*/
credit: '', credit: '',
id: '', id: '',
img: '', img: '',
name: '', name: '',
/** // id
* 教师id
*/
teacher: '', teacher: '',
}, },
]) ])
//
/**
* 表单信息
*/
let params = ref<CourseFavourQueryRequest>({ let params = ref<CourseFavourQueryRequest>({
current: 1, current: 1,
pageSize: 12, pageSize: 12,
@ -97,7 +90,7 @@ let params = ref<CourseFavourQueryRequest>({
sortOrder: '', sortOrder: '',
userId: 2, userId: 2,
}) })
//
const getDatalist = async () => { const getDatalist = async () => {
const res = await SeCourseFavourControllerService.listPostByPageUsingPost1( const res = await SeCourseFavourControllerService.listPostByPageUsingPost1(
params.value, params.value,
@ -108,6 +101,7 @@ const getDatalist = async () => {
getDatalist() getDatalist()
//
const handleSizeChange = (size: any) => { const handleSizeChange = (size: any) => {
// console.log(size) // console.log(size)
params.value.current = 1 params.value.current = 1
@ -200,10 +194,23 @@ const handleCurrentChange = (page: any) => {
.ClassGd { .ClassGd {
position: absolute; position: absolute;
background-color: rgb(217, 217, 217 ,.5);
display: none; display: none;
margin-top: -9px; margin-left: 85%;
margin-left: 95%; padding: 3px 5px ;
cursor: pointer; cursor: pointer;
border-radius: 20%;
&>p{
margin-top: 3px ;
margin-bottom: 3px;
font-size: 10px;
font-weight: 350;
color: black;
&:hover{
color: #2952f6;
font-weight: 35s0;
}
}
} }
.ClaCon { .ClaCon {
@ -255,4 +262,5 @@ const handleCurrentChange = (page: any) => {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
</style> </style>

@ -1,22 +1,24 @@
<template> <template>
<el-tab-pane label="知识点收藏" name="third"> <el-tab-pane label="知识点收藏" name="third">
<div class="Container_Kno"> <div class="Container_Kno">
<div class="item_3" v-for="(item_3, index) in 10" :key="index"> <div class="item_3 noUpd" v-for="item_3 in arr" :onclick="handClick" :key="item_3.id">
<div> <div>
<div class="KnowledgeCollent"> <div class="KnowledgeCollent">
<div class="KnoCon"> <div class="KnoCon">
<h4>课程名称</h4> <h4>{{ item_3.name }}</h4>
<p>{{ item_3 }}-xxxx</p> <p>{{ item_3.num }}-{{item_3.zjname}}</p>
</div> </div>
<div class="KnoBtn" > <div class="KnoBtn">
<img src="../../assets/icons/更多.svg" alt="" /> <img class="cli" src="../../assets/icons/更多.svg" />
</div> </div>
</div> </div>
<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 5" :key="index">
知识点知识点知识点{{ item }} &nbsp;
<span class="btn" >×</span> {{ index + 1 }}. 知识点知识点知识点
&nbsp;
<span class="btn">×</span>
&nbsp; &nbsp;
</li> </li>
</ul> </ul>
@ -26,11 +28,64 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
</template> </template>
<script lang="ts" setup> <script setup>
import {ref,reactive} from 'vue'
function handClick(e){
if(e.target.classList.contains('cli')){
this.classList.toggle('noUpd')
}
}
const arr = reactive([])
const a =[
{
id:1,
name:"操作系统",
num:1,
zjname:'操作系统引论',
},
{
id:2,
name:"跨文化交际",
num:1,
},
{
id:3,
name:"软件项目管理",
num:1,
},
{
id:4,
name:"英语课",
num:1,
},
]
arr.length=0
arr.push(...a)
const ShowDel = ref(false)
function XsDel(id){
const item = arr.find(o=>o.a.id==id)
item.ShowDel = !item.ShowDel
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.btn{
display: inline-block;
}
.item_3.noUpd{
.btn{
display: none;
}
}
.Container_Kno { .Container_Kno {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -75,7 +130,7 @@
.KnowledgeCollent h4 { .KnowledgeCollent h4 {
margin-top: 3px; margin-top: 3px;
font-size: 30px; font-size: 27px;
font-weight: 550; font-weight: 550;
font-style: normal; font-style: normal;
} }
@ -110,10 +165,6 @@
border-radius: 3px; border-radius: 3px;
} }
.btn {
display: none;
}
.btn:hover { .btn:hover {
cursor: pointer; cursor: pointer;
color: rgb(15, 57, 76); color: rgb(15, 57, 76);

@ -10,7 +10,7 @@
<ul class="Container_Res_Tab"> <ul class="Container_Res_Tab">
<li class="img-svg" @click="hsndelShow(1)"> <li class="img-svg" @click="hsndelShow(1)">
<img src="../../assets/icons/课程简介.svg" alt="简介" /> <img src="../../assets/icons/课程简介.svg" alt="简介" />
<br /> <br/>
<p>简介</p> <p>简介</p>
</li> </li>
<li class="img-svg" @click="hsndelShow(2)"> <li class="img-svg" @click="hsndelShow(2)">
@ -81,7 +81,7 @@
<span>点击开了一个弹框</span> <span>点击开了一个弹框</span>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<video src=""></video> <video src="https://www.bilibili.com/video/BV1HV4y1a7n4?p=50&vd_source=9e99d3200788d6043e077de463ef019b"></video>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@ -109,6 +109,9 @@
</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>
@ -131,20 +134,21 @@ 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 { getAssApi } from "@/api/courseChaptersApi"; import { getAssApi } from "@/api/courseChaptersApi";
import { SeResourceFavourControllerService } from "../../../generated/services/SeResourceFavourControllerService";
const centerDialogVisible = ref(false) 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
} }
//========================= // //=========================
function handleApi(params) { // function handleApi(params) {
getAssApi(params).then(res => { // getAssApi(params).then(res => {
arr.value = res.data.records // arr.value = res.data.records
total.value = res.data.total // total.value = res.data.total
console.log(arr.value, '-', total.value) // console.log(arr.value, '-', total.value)
}) // })
} // }
const arr = ref([]) const arr = ref([])
const total = ref(0) const total = ref(0)
// //
@ -153,10 +157,10 @@ const pageSize1 = ref(10)
const disabled = ref(false) const disabled = ref(false)
const handleSizeChange = (val: number) => { const handleSizeChange = (val: number) => {
hand() getDatalist()
} }
const handleCurrentChange = (val: number) => { const handleCurrentChange = (val: number) => {
hand() getDatalist()
} }
function initFenYie() { function initFenYie() {
@ -168,24 +172,53 @@ function initFenYie() {
watch(activeIndex, (newVal) => { watch(activeIndex, (newVal) => {
initFenYie() initFenYie()
hand() getDatalist()
}) })
function hand() { // function hand() {
// console.log(res)
// // handleApi(params)
// }
const params = { const params = {
current:currentPage1.value,
type: activeIndex.value, type: activeIndex.value,
page: currentPage1.value,
pageSize: pageSize1.value, pageSize: pageSize1.value,
resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20' sortField:'',
sortOrder:'',
userId:'3'
} }
handleApi(params)
} const datalist = ref([
const obj = { {
type: activeIndex.value,
page: currentPage1.value, description:'',
pageSize: pageSize1.value, id: '',
resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20' img:'',
name: '',
path:'',
status:'',
tags:'',
type: '',
},
])
const getDatalist = async () => {
const res = await SeResourceFavourControllerService.listPostByPageUsingPost3(params)
datalist.value = res.data.records
total.value = res.data.total
console.log(datalist.value[0])
} }
handleApi(obj) getDatalist()
// hand()
// const obj = {
// type: activeIndex.value,
// page: currentPage1.value,
// pageSize: pageSize1.value,
// sortField:'',
// sortOrder:'',
// resourceIdList: ''
// }
// handleApi(obj)
//========================= //=========================
const activeName = ref('first') const activeName = ref('first')
@ -348,9 +381,19 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
} }
.item_2-2, .item_2-2,
.item_2-5{
width: 100%;
height: 300px;
margin-top: 20px;
border-left: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
overflow: hidden;
box-shadow: 2px 2px 2px 2px rgba(214, 212, 212, 0.5);
border-radius: 6px;
margin-bottom: 32px;
}
.item_2-3, .item_2-3,
.item_2-4, .item_2-4{
.item_2-5 {
width: 100%; width: 100%;
height: 300px; height: 300px;
margin-top: 20px; margin-top: 20px;

Loading…
Cancel
Save