一、前端代码

1、定义api

分析这个页面一共有两个远程方法：一个是根基课程id获取课程基本预览信息，第二个是发布课程

  1. getCoursePublishInfoById(id) {
  2.    return request({
  3.      url: `${api_name}/course-publish-info/${id}`,
  4.      method: 'get'
  5.    })
  7. },
  8. publishCourse(id) {
  9.   return request({
  10.     url: `${api_name}/publish-course/${id}`,
  11.     method: 'put'
  12.   })
  14. }

2、定义数据模型

  1. data() {
  2.    return {
  3.        saveBtnDisabled: false, // 保存按钮是否禁用
  4.        courseId: '', // 所属课程
  5.        coursePublish: {}
  6.    }
  8. },

3、完善步骤导航

edu/course/chapter.js

  1. previous() {
  2.  console.log('previous')
  3.  this.$router.push({ path: '/edu/course/info/' + this.courseId })
  5. },
  6. next() {
  7.  console.log('next')
  8.  this.$router.push({ path: '/edu/course/publish/' + this.courseId })
  10. }

edu/course/pubish.js

  1. <div>
  2.     <el-button @click="previous">返回修改</el-button>
  3.     <el-button :disabled="saveBtnDisabled" type="primary" @click="publish">发布课程</el-button>
  4. </div>
  1. previous() {
  2.  console.log('previous')
  3.  this.$router.push({ path: '/edu/course/chapter/' + this.courseId  })
  5. },
  6. publish() {
  7.   console.log('publish')
  8.   course.publishCourse(this.courseId).then(response => {
  9.     this.$router.push({ path: '/edu/course/list' })
  10.   })
  12. }

4、组件方法定义

import

  1. import course from '@/api/edu/course'

created

  1. created() {
  2.     console.log('chapter created')
  3.     this.init()
  4. },

获取数据的方法

  1. init() {
  2.    if (this.$route.params && this.$route.params.id) {
  3.      this.courseId = this.$route.params.id
  4.      // 根据id获取课程基本信息
  5.      this.fetchCoursePublishInfoById()
  6.    }
  8. },
  9. fetchCoursePublishInfoById() {
  10.   course.getCoursePublishInfoById(this.courseId).then(response => {
  11.     this.coursePublish = response.data.item
  12.   })
  14. },

5、组件模板

  1. <template>
  2.   <div class="app-container">
  3.     <h2 style="text-align: center;">发布新课程</h2>
  4.     <el-steps :active="3" process-status="wait" align-center style="margin-bottom: 40px;">
  5.       <el-step title="填写课程基本信息"/>
  6.       <el-step title="创建课程大纲"/>
  7.       <el-step title="最终发布"/>
  8.     </el-steps>
  9.     <div class="ccInfo">
  10.       <img :src="coursePublish.cover">
  11.       <div class="main">
  12.         <h2>{{ coursePublish.title }}</h2>
  13.         <p class="gray"><span>共{{ coursePublish.lessonNum }}课时</span></p>
  14.         <p><span>所属分类：{{ coursePublish.subjectLevelOne }} — {{ coursePublish.subjectLevelTwo }}</span></p>
  15.         <p>课程讲师：{{ coursePublish.teacherName }}</p>
  16.         <h3 class="red">￥{{ coursePublish.price }}</h3>
  17.       </div>
  18.     </div>
  19.     <div>
  20.       <el-button @click="previous">返回修改</el-button>
  21.       <el-button :disabled="saveBtnDisabled" type="primary" @click="publish">发布课程</el-button>
  22.     </div>
  23.   </div>
  24. </template>

6、css样式

<style scoped>
.ccInfo {
   background: #f5f5f5;
   padding: 20px;
   overflow: hidden;
   border: 1px dashed #DDD;
   margin-bottom: 40px;
   position: relative;

}
.ccInfo img {

  background: #d6d6d6;

  width: 500px;

  height: 278px;

  display: block;

  float: left;


  border: none;

}
.ccInfo .main {
    margin-left: 520px;
}
.ccInfo .main h2 {
  font-size: 28px;
  margin-bottom: 30px;
  line-height: 1;
  font-weight: normal;

}
.ccInfo .main p {
  margin-bottom: 10px;
  word-wrap: break-word;
  line-height: 24px;
  max-height: 48px;
  overflow: hidden;

}
.ccInfo .main p {
  margin-bottom: 10px;
  word-wrap: break-word;
  line-height: 24px;
  max-height: 48px;
  overflow: hidden;

}
.ccInfo .main h3 {
  left: 540px;
  bottom: 20px;
  line-height: 1;
  font-size: 28px;
  color: #d32f24;
  font-weight: normal;
  position: absolute;

}
</style>