课程首页面

src/api/configuration.ts

@@ -45,3 +45,22 @@ export const userStudentListService = (id) => {
     return request.post('/api/coursesteacher/studentList?userId=' + id)
 }
 
+
+// 获取课程列表
+type CourseListParams = {
+    'assessmenttype': string,
+    'category'?: string,
+    'isAsc'?: boolean,
+    'name'?: string,
+    'nature'?: string,
+    'pageNo'?: number,
+    'pageSize'?: number,
+    'sortBy'?: string,
+    'teacher'?: string,
+    'username'?: string,
+}
+export const getCourseListApi = (params: CourseListParams) => {
+    return request.get('/api/coursesteacher/page', {
+        params,
+    })
+}

src/views/course/components/StuList.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import defImg from '@/assets/images/default.png'
 import useUserStore from '@/store/module/user';
 const userStore = useUserStore()
 import { ref, watch } from 'vue';
@@ -15,8 +16,7 @@ const getStuList = async () => {
 watch(() => userStore.userInfo.id, () => {
     getStuList()
 })
-
-import defImg from '@/assets/images/default.png'
+if(userStore.userInfo.id) getStuList()
 </script>
 
 <template>

src/views/professionalListProfile/index.vue

@@ -1,60 +1,47 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { userGetInfoService } from '@/api/configuration';
+import { onMounted, ref, watch } from 'vue';
+import { userGetInfoService, getCourseListApi } from '@/api/configuration';
 import useUserStore from '@/store/module/user';
 const userStore = useUserStore()
-const paginationData = ref({
+
+function paginationChange(currentPage: number, pageSize: number) {
+    params.value.pageNo = currentPage
+    params.value.pageSize = pageSize
+    getCourseList()
+}
+const params = ref({
     pageNo: 1,
-    pageSize: 8,
-    total: 8
+    pageSize: 7,
+    // username: 'qiuqiu',
+    userId: userStore.userInfo.id,
+    assessmenttype: '',
+    category: '',
+    nature: '',
+    teacher: '',
 })
-function paginationChange(currentPage: number, pageSize: number) {
-
+const getCourseList = async () => {
+    loading.value = true
+    const res = await getCourseListApi(params.value)
+    courseList.value = res.data.list
+    total.value = res.data.total
+    loading.value = false
+    // console.log(userStore.userName, '1111')
 }
+watch(() => userStore.userInfo.id, (newVal) => {
+    params.value.userId = newVal
+    getCourseList()
+})
+
+
+
+onMounted(() => {
+    if (userStore.userInfo.id) getCourseList()
+})
+const total = ref(0)
+const loading = ref(false)
+const courseList = ref()
+
 
-// 临时的，有接口后使用接口数据
-const dataList = ref([
-    {
-        id: '1',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '2',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '3',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '4',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '5',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '6',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '7',
-        isPraise: false,
-        isStar: false
-    },
-    {
-        id: '8',
-        isPraise: false,
-        isStar: false
-    },
-])
 const isLogin = ref(false)
 userGetInfoService(userStore.token).then(res => {
     // @ts-ignore
@@ -62,6 +49,9 @@ userGetInfoService(userStore.token).then(res => {
         isLogin.value = true
     }
 })
+function skip(url: string) {
+    location.assign(url)
+}
 function handlePraise(item: any) {
     if (isLogin.value) item.isPraise = !item.isPraise
     else skip('http://localhost:5173/#/login?redirect=/configurationPage')
@@ -71,30 +61,34 @@ function handleStar(item: any) {
     else skip('http://localhost:5173/#/login?redirect=/configurationPage')
 }
 
-function skip(url: string) {
-    location.assign(url)
+
+// 点击查看课程详情，把课程id传过去
+const onGetCourseObject = async (id: any) => {
+
+    skip(`http://localhost:5173/#/curriculumCenter/courseDetails?id=${id}`)
+
 }
 </script>
 
 <template>
-    <div class="view-container">
+    <div class="view-container" v-loading="loading">
         <div class="container" style="padding-bottom: 20px;">
 
-            <div class="main-content" v-loading="0">
+            <div class="main-content">
                 <div class="header">
                     <div class="btn">
                         <div class="course">
                             <ul class="course_list">
-                                <li v-for="item in dataList" :key="item.id">
-                                    <img title="点击查看课程详情" :src="'http://teaching-edu123.oss-cn-beijing.aliyuncs.com/sDwvElo68wTi4SR9HVBIn.png'" alt="" @click="" />
-                                    <h2 title="点击查看课程基本信息" class="course_name" @click="">
-                                        软件项目管理
+                                <li v-for="item in courseList" :key="item.id">
+                                    <img title="点击查看课程详情" :src="item.img" alt="" @click="onGetCourseObject(item.id)" />
+                                    <h2 title="点击查看课程基本信息" class="course_name">
+                                        {{ item.name }}
                                     </h2>
-                                    <p class="teacher_name">讲师：肖海南</p>
+                                    <p class="teacher_name">讲师：{{ item.teacher }}</p>
                                     <p class="credit">
-                                        <span>4</span>
+                                        <span>{{ item.classhours }}</span>
                                         学时 |
-                                        <span>4</span>
+                                        <span>{{ item.credit }}</span>
                                         学分
                                     </p>
 
@@ -114,12 +108,10 @@ function skip(url: string) {
 
                                     </div>
                                     <div class="object">
-                                        <el-button round plain
-                                            @click="skip('http://localhost:5173/#/curriculumCenter/basicCourseInformation')">
+                                        <el-button round plain @click="onGetCourseObject(item.id)">
                                             详情
                                         </el-button>
-                                        <el-button round plain
-                                            @click="$router.push('/roadbedRecommendation')">
+                                        <el-button round plain @click="$router.push('/roadbedRecommendation')">
                                             路径规划
                                         </el-button>
                                     </div>
@@ -130,10 +122,9 @@ function skip(url: string) {
                     </div>
                 </div>
             </div>
-            <el-pagination v-model:current-page="paginationData.pageNo" v-model:page-size="paginationData.pageSize"
-                :page-sizes="[2, 5, 8, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next "
-                :total="paginationData.total" @change="paginationChange"
-                style="margin-top: 10px; justify-content: center" />
+            <el-pagination v-model:current-page="params.pageNo" v-model:page-size="params.pageSize"
+                :page-sizes="[2, 5, 7, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next "
+                :total="total" @change="paginationChange" style="margin-top: 10px; justify-content: center" />
 
         </div>
     </div>