⾸先对课程详情部分进⾏数据绑定。

// create.vue …
v-show=“activeStep === 4”> label=“课程详情”> type=“textarea” v-model=“course.courseDescriptionMarkDown” > …
…

给保存按钮设置点击事件，点击后提交

// create.vue … type=“primary” @click=“handleSave” >保存 … methods: { // 保存 handleSave () { console.log(‘保存’) } }

由于当前为新增功能，需要将 data.course 中与 id 相关的数据去除，id 相关功能为编辑使⽤，后续再处理。

// create.vue … data () { return { … course: { // id: 0, courseName: ‘’, brief: ‘’, teacherDTO: { // id: 0, // courseId: 0, teacherName: ‘’, teacherHeadPicUrl: ‘’, position: ‘’, description: ‘’ }, courseDescriptionMarkDown: ‘’, price: 0, discounts: 0, priceTag: ‘’, discountsTag: ‘’, isNew: true, isNewDes: ‘’, courseListImg: ‘’, courseImgUrl: ‘’, sortNum: 0, previewFirstField: ‘’, previewSecondField: ‘’, status: 0, sales: 0, activityCourse: false, activityCourseDTO: { // id: 0, // courseId: 0, beginTime: ‘’, endTime: ‘’, amount: 0, stock: 0 }, autoOnlineTime: ‘’ } } }, …

点击按钮时将 course 通过之前封装的 saveOrUpdateCourse ⽅法发送。

// create.vue … async handleSave () { // 发送请求 const { data } = await saveOrUpdateCourse(this.course) if (data.code === ‘000000’) { this.$message.success(‘添加课程成功’) } } … 添加成功，但⽆法直接从前台看到，因为课程默认为未上架，需要会在课程列表中上架后才能在前台看到。

默认值通过 course.status 控制，默认值 0 代表默认不上架，1 为上架。

如果希望操作⽅便，可以添加⼀个 Switch 组件控制当前课程的上下架状态。

// create.vue …
v-show=“activeStep === 4”> label=“课程详情”> … label=“是否上架”> v-model=“course.status” :active-value=“1” :inactive-value=“0” active-color=“#13ce66” inactive-color=“#ff4949”> …>保存
… 测试后添加成功，设置调整列表⻚。

注意⼩细节，由于后端接⼝不⽀持秒杀时间中的时分秒选择，测试时只选择⽇期即可，或设置

type=”date” 改为 DatePicker ⽇期选择器组件。（但注意实际功能中应为⽇期与时间均可选）

// create.vue … async handleSave () { … if (data.code === ‘000000’) { this.$router.push({ name: ‘course’ }) this.$message.success(‘添加课程成功’) } } …