ali_ai_learn_web/src/pages/LearningSystem/components/OtherCourse.vue

<template>
  <div>
    <div class="gap10">
      <div class="line_vertical"></div>
      <div class="font_size20 bold">{{$t('common.qitakechengtuijian')}}</div>
    </div>
    <div v-for="item in list" :key="item.courseId" class="flex-between mt20 cursor-pointer"
      @click="goDetail(item)"
    >
      <img :src="item.coverImageUrl" alt="" style="width: 160px; height: 90px;" class="border_radius_8">
      <div class="ml10 flex_1">
        <div class="font_size16 bold line1">{{ item.courseTitle }}</div>
         <el-button type="primary" size="mini" plain class="mt5" v-if="item.skillTagName">{{item.skillTagName}}</el-button>
        <div class="font_size12 gray mt5">{{ item.viewCount }} {{ $t('common.renkanguo') }}</div>
      </div>
    </div>
    <div v-if="list.length === 0" >
      <el-empty :image-size="200" />
    </div>
  </div>
</template>
<script setup>
import { getCourseList } from '@/api/course.js'
import { ref, onMounted, watch, reactive, onActivated } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter();


const props =defineProps({
  info: {
    type: Object,
    default: () => ({})
  }
})

const list = ref([]);
const searchFom = reactive({
  skillTag: '',
  pageNum: 1,
  pageSize: 5,
})

watch(() => props.info.skillTag, (newVal, oldVal) => {
  if(newVal !== oldVal){
    // 课程ID变化时，重置分页参数
    searchFom.skillTag = newVal
    getList('init');
  }
})

onActivated(() => {
  searchFom.skillTag = props.info.skillTag;
  getList('init');
})
// onMounted(() => {
//   getList();
// });
const getList = async (type) => {
  const res = await getCourseList(searchFom)
  if(res.code === 200){
    list.value = res.rows || [];
  }
};
const goDetail = (item) => {
  //增加参数名称
  router.push({
    path: `/learning-system/detail/${item.courseId}`,
    query: {
      courseId: item.courseId,
      metaTitle: item.courseTitle || '课程详情'
    }
  })
};
</script>
<style scoped>

</style>