图⽚上传组件改进（未设置本地预览时⽆需此步骤）

测试后发现，课程封⾯图⽆法显示，需要在 course-image 中判断是否传⼊图⽚。 新增：value 为空，imageUrl 为空，选择后 imageUrl 为预览地址 编辑：value 为地址，imageUrl 为空，选择后均有值，但应显示 imageUrl。 上述代码较复杂，应通过计算属性设置。 // course/components/course-images.vue … computed: { previewUrl () { // 有 imageUrl 优先使⽤，没有时使⽤ value，都没有返回 undefined return this.imageUrl || this.value } }, … <img v-if=“previewUrl” :src=“previewUrl” class=“avatar”>

秒杀细节改进

问题 2，如果编辑的课程未处于秒杀状态，则响应数据的 activityCourseDTO 为 null，这时操作秒杀按钮读取内部数据就会报错， 这时添加检测，如果⾮秒杀状态，将 activityCourseDTO 对象属性初始化即可。 activityCourse 为当前课程是否开启秒杀，布尔值，⽤于判断。 注意，设置秒杀开始时间为今⽇以后⽆法⽴刻看到测试效果，这不是 bug。 // create-or-edit.vue … async loadCourse () { const { data } = await getCourseById(this.courseId) if (data.code === ‘000000’) { // 为⾮秒杀课程初始化属性 if (!data.data.activityCourse) { data.data.activityCourseDTO = { beginTime: ‘’, endTime: ‘’, amount: 0, stock: 0 } } this.course = data.data } },

富⽂本编辑器组件改进

由于编辑请求数据为异步操作，⽽富⽂本编辑器中的 DOM 功能为同步，所以编辑时会出现富⽂本编辑器显示默认⽂本的情况，这时需要通过 watch 来侦听 value 变化，并进⾏初始内容更新（新增功能不存在此问题）。 // src/components/TextEditor.vue … data () { return { editor: null, // 要编辑的数据是否加载完毕 isLoaded: false } }, watch: { value () { // 编辑数据加载成功后，为富⽂本编辑器更新初始内容即可 if (!this.isLoaded) { this.editor.txt.html(this.value) this.isLoaded = true } } }, … initEditor () { … // 将富⽂本编辑器实例保存给 this 以便在 watch 中操作 this.editor = editor }