ali_ai_learn_web/src/pages/LearnNote/LearnNote.vue

<template>
  <div class="LearnNote container-height">
    <Breadcrumb />
    <div class="flex-between">
      <div class="detail_right">
        <div class="padding16 bg_color_fff border_radius_10 box_shadow_card">
          <div class="gap10">
            <div class="line_vertical"></div>
            <div class="font_size20 bold">{{$t('common.learnNoteList')}} </div>
          </div>
          <div class="flex-between mt10 course_List cursor-pointer" 
          @click="selectedItem = item"
          :class="{'active': item.courseId === selectedItem.courseId}"
          v-for="item in list" :key="item.courseId">
            <div  class="coverImageUrl border_radius_8 bg_color_f5">
              <img :src="item.coverImageUrl" alt="" v-if="item.coverImageUrl" class="coverImageUrl border_radius_8">
            </div>
            <div class="flex_1 ml20">
              <div class="font_size18 bold">{{ item.courseTitle }}</div>
              <div class="font_size14 line2 gray mt10">{{ item.courseIntro }}</div>
              <div class="flex-center-flex-end mt10" v-if="item.courseId!=-1">
                <div class="gap5 gradient border_radius_4 cursor-pointer xuexi" @click.stop.prevent="goDetail(item)">
                  <img :src="playIcon" alt="" style="width:13px;height:15px">
                  <div>{{$t('common.lijixuexi')}}</div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="list.length === 0" >
            <el-empty :image-size="200" />
          </div>
        </div>
      </div>
      <div class="flex_1 ml20 fit_content bg_color_fff border_radius_10 padding16 box_shadow_card">
        <Xuxibiji :info="selectedItem" />
      </div>
    </div>
  </div>
</template>
<script setup>
import playIcon from '@/assets/imgs/bofang.png'
import Xuxibiji from '@/pages/LearningSystem/components/xuxibiji.vue'
import { getCourseWithNotesList } from '@/api/course.js'
import { isLogin,openFullScreenLoading } from '@/utils/util.js'

import { useI18n } from 'vue-i18n' 
const { t } = useI18n() 


import { ref, onMounted, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore()
const route = useRoute()
const router = useRouter()
const list = ref({})
const selectedItem = ref({})
const openLoginDialog = inject('openLoginDialog')

onMounted(() => {
  //判断是否登录
  // if(!isLogin({callback: openLoginDialog,t})){
  //   return;
  // }
  getList();
});
const getList = async () => {
  let token = localStorage.getItem('token');
  if(!token)return;
  // 打开loading
  const loading = openFullScreenLoading();
  getCourseWithNotesList().then(res => {
    // 关闭loading
    loading.close();
    if(res.code === 200){
      console.log(res)
      // list.value = res.rows || [];
      list.value = [
        {
          courseId:'-1',
          courseTitle:'个人笔记',
          coverImageUrl:appStore.userInfo?.userAvatar  || '',
          courseIntro:''
        },
        ...res.rows
      ]
      if(list.value.length > 0){
        selectedItem.value = list.value[0]
      }
    }
  })
};
const goDetail = (item) => {
  //判断是否登录
  if(!isLogin({callback: openLoginDialog,t})){
    return;
  }
  //增加参数名称
  router.push({
    path: `/learning-system/detail/${item.courseId}`,
    query: {
      courseId: item.courseId,
      metaTitle: item.courseTitle || '课程详情'
    }
  })
};
</script>
<style lang="scss">
.LearnNote{
  .detail_right{
    max-height: calc(100% - 100px);
  }
  .course_List{
    padding: 16px;
    border-radius: 16px;
    &.active{
      background-color: rgba(45, 113, 255, 0.10) ;
    }
    .coverImageUrl{
      width: 160px;
      height: 90px;
    }
  }
  .xuexi{
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 14px;
  }
}
</style>