|
|
@@ -6,31 +6,46 @@
|
|
|
</div>
|
|
|
<div class="flex-center-between font_size16 gray list_item"
|
|
|
:class="{'active': index === 0}"
|
|
|
- v-for="(item, index) in 4" :key="index">
|
|
|
+ v-for="(item, index) in list" :key="index">
|
|
|
<div class="gap10">
|
|
|
- <div>第一节</div>
|
|
|
+ <div>{{item.chapterOrderName}}</div>
|
|
|
<div class="gap5">
|
|
|
<img :src="muluIcon" alt="" style="width:20px;height:20px" v-if="index === 0">
|
|
|
- <span>行业要求与职业发展路线</span>
|
|
|
+ <span>{{item.chapterName}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div>20:23</div>
|
|
|
+ <div>{{item.chapterTime}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import muluIcon from '@/assets/imgs/mulu.png'
|
|
|
-import { getCourseList } from '@/api/course.js'
|
|
|
-import { ref, onMounted } from 'vue'
|
|
|
-defineProps({
|
|
|
+import { getChaptersList } from '@/api/course.js'
|
|
|
+import { ref, onMounted, watch } from 'vue'
|
|
|
+const props = defineProps({
|
|
|
info: {
|
|
|
type: Object,
|
|
|
default: () => ({})
|
|
|
}
|
|
|
})
|
|
|
|
|
|
+//监听props.info.courseId变化
|
|
|
+watch(() => props.info.courseId, (newVal, oldVal) => {
|
|
|
+ if(newVal !== oldVal){
|
|
|
+ getChaptersListFn();
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
const list = ref([]);
|
|
|
|
|
|
+const getChaptersListFn = () => {
|
|
|
+ getChaptersList({id: props.info.courseId}).then(res => {
|
|
|
+ if(res.code === 200){
|
|
|
+ list.value = res.rows || [];
|
|
|
+ }
|
|
|
+ })
|
|
|
+};
|
|
|
+
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.kechengmulu{
|