Compare commits

..

No commits in common. 'bea297976567ee6683d04d823fa4eaae90fb9e38' and 'aa4de82bc7332ad6ec3046c4327ad774415e3f84' have entirely different histories.

  1. 3
      src/api/courseChaptersApi.ts
  2. 46
      src/views/MyCourseStudy/ContainerCla.vue
  3. 75
      src/views/MyCourseStudy/ContainerKno.vue
  4. 97
      src/views/MyCourseStudy/courseCollections.vue

@ -8,8 +8,7 @@ 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,14 +2,12 @@
<!-- 课程收藏页面 --> <!-- 课程收藏页面 -->
<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 in datalist" :key="item_1.id"> <div class="item_1" v-for="(item_1, index) in datalist" :key="index">
<!-- 课程图片盒子 --> <!-- 课程图片盒子 -->
<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" />
@ -42,7 +40,7 @@
</el-tab-pane> </el-tab-pane>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted} from 'vue' import { ref, onMounted, onBeforeUnmount } 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'
// =============================== // ===============================
@ -71,18 +69,27 @@ 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,
@ -90,7 +97,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,
@ -101,7 +108,6 @@ 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
@ -194,23 +200,10 @@ const handleCurrentChange = (page: any) => {
.ClassGd { .ClassGd {
position: absolute; position: absolute;
background-color: rgb(217, 217, 217 ,.5);
display: none; display: none;
margin-left: 85%; margin-top: -9px;
padding: 3px 5px ; margin-left: 95%;
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 {
@ -262,5 +255,4 @@ const handleCurrentChange = (page: any) => {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
</style> </style>

@ -1,23 +1,21 @@
<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 noUpd" v-for="item_3 in arr" :onclick="handClick" :key="item_3.id"> <div class="item_3" v-for="(item_3, index) in 10" :key="index">
<div> <div>
<div class="KnowledgeCollent"> <div class="KnowledgeCollent">
<div class="KnoCon"> <div class="KnoCon">
<h4>{{ item_3.name }}</h4> <h4>课程名称</h4>
<p>{{ item_3.num }}-{{item_3.zjname}}</p> <p>{{ item_3 }}-xxxx</p>
</div> </div>
<div class="KnoBtn" > <div class="KnoBtn" >
<img class="cli" src="../../assets/icons/更多.svg" /> <img src="../../assets/icons/更多.svg" alt="" />
</div> </div>
</div> </div>
<div class="Knowledge_point"> <div class="Knowledge_point">
<ul> <ul>
<li v-for="(item, index) in 5" :key="index"> <li v-for="(item, index) in 6" :key="index">
&nbsp; 知识点知识点知识点{{ item }}
{{ index + 1 }}. 知识点知识点知识点
&nbsp;
<span class="btn" >×</span> <span class="btn" >×</span>
&nbsp; &nbsp;
</li> </li>
@ -28,64 +26,11 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
</template> </template>
<script setup> <script lang="ts" 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%;
@ -130,7 +75,7 @@ function XsDel(id){
.KnowledgeCollent h4 { .KnowledgeCollent h4 {
margin-top: 3px; margin-top: 3px;
font-size: 27px; font-size: 30px;
font-weight: 550; font-weight: 550;
font-style: normal; font-style: normal;
} }
@ -165,6 +110,10 @@ function XsDel(id){
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);

@ -81,7 +81,7 @@
<span>点击开了一个弹框</span> <span>点击开了一个弹框</span>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<video src="https://www.bilibili.com/video/BV1HV4y1a7n4?p=50&vd_source=9e99d3200788d6043e077de463ef019b"></video> <video src=""></video>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@ -109,9 +109,6 @@
</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>
@ -134,21 +131,20 @@ 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)
// //
@ -157,10 +153,10 @@ const pageSize1 = ref(10)
const disabled = ref(false) const disabled = ref(false)
const handleSizeChange = (val: number) => { const handleSizeChange = (val: number) => {
getDatalist() hand()
} }
const handleCurrentChange = (val: number) => { const handleCurrentChange = (val: number) => {
getDatalist() hand()
} }
function initFenYie() { function initFenYie() {
@ -172,53 +168,24 @@ function initFenYie() {
watch(activeIndex, (newVal) => { watch(activeIndex, (newVal) => {
initFenYie() initFenYie()
getDatalist() hand()
}) })
// 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,
sortField:'', resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20'
sortOrder:'', }
userId:'3' handleApi(params)
} }
const obj = {
const datalist = ref([ type: activeIndex.value,
{ page: currentPage1.value,
pageSize: pageSize1.value,
description:'', resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20'
id: '', }
img:'', handleApi(obj)
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])
}
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')
@ -381,19 +348,9 @@ 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