improvement: 修改课件状态组件

src/components/SlideStateBar.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="slide-state-bar">
+    <div v-for="button of buttons" :class="state === button.state ? 'active' : ''"
+         :key="button.state"
+         @click="handleChangeState(button.state)">{{button.value}}
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: ['state'],
+  data () {
+    return {
+      buttons: [{
+        state: 'DRAFT',
+        value: '草稿'
+      }, {
+        state: 'BEFORE_CLASS',
+        value: '未上课'
+      }, {
+        state: 'IN_CLASS',
+        value: '课堂中'
+      }, {
+        state: 'AFTER_CLASS',
+        value: '已上课'
+      }, {
+        state: 'FINISH',
+        value: '测验结束'
+      }]
+    }
+  },
+  methods: {
+    handleChangeState (state) {
+      this.$emit('change-state', state)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/style/theme.scss';
+
+.slide-state-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: bold;
+  position: relative;
+  margin: 0 -8px 16px -8px;
+
+  & > div {
+    cursor: pointer;
+    color: #9aaaba;
+    display: inline-block;
+    background: white;
+    padding: 4px 8px;
+    border: 4px white solid;
+    transition: .2s;
+  }
+
+  .active {
+    background: $theme-green-light;
+    color: $theme-green;
+  }
+
+  &::before {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 0;
+    border-bottom: 3px solid #aabaca;
+  }
+}
+</style>

src/views/teacher/components/TeacherSlideDetail.vue

@@ -16,13 +16,14 @@
       <c-input placeholder="在此输入课件新名称" v-model="newSlideName"></c-input>
       <c-button class="secondary" @click="handleModifySlideName">确认修改</c-button>
     </div>
-    <c-button class="full-width secondary mb-16" @click="handleQuizSetting">习题设置 & 习题完成统计</c-button>
-    <c-button v-if="nextState" class="warning full-width mb-16" @click="handleToNextState">
-      将幻灯片状态设置为：{{slideStateTranslation[nextState]}}
-    </c-button>
+    <div class="mb-8">
+      <b>幻灯片状态设置</b>
+    </div>
     <div v-if="this.slide.state === 'DRAFT'" class="tip mb-16">
       提示：学生无法查看处于草稿状态的幻灯片，如果希望公开请设置为其他状态
     </div>
+    <slide-state-bar :state="this.slide.state" @change-state="handleChangeState"></slide-state-bar>
+    <c-button class="full-width secondary mb-16" @click="handleQuizSetting">习题设置 & 习题完成统计</c-button>
     <c-button class="error full-width mb-16" @click="handleDeleteSlide">删除课件</c-button>
   </tab-side-component>
 </template>
@@ -34,13 +35,13 @@ import BackTitle from '@/components/BackTitle'
 import { mapState } from 'vuex'
 import { getSlideUrl, modifySlide, modifySlideState, removeSlide } from '@/server/slide'
 import { SET_SLIDE_INFO, SET_SRC } from '@/store/types/pdf-types'
-import getSlideNextState from '@/utils/get-slide-next-state'
 import SlideDetail from '@/components/SlideDetail'
 import slideStateTranslation from '@/server/enums/slide-state-translation'
 import CInput from '@/components/CInput'
+import SlideStateBar from '@/components/SlideStateBar'
 
 export default {
-  components: { CInput, BackTitle, CButton, TabSideComponent, SlideDetail },
+  components: { CInput, BackTitle, CButton, TabSideComponent, SlideDetail, SlideStateBar },
   data () {
     return {
       slideUrl: '',
@@ -51,10 +52,7 @@ export default {
   computed: {
     ...mapState({
       slide: state => state.pdf.slideInfo
-    }),
-    nextState () {
-      return getSlideNextState(this.slide.state)
-    }
+    })
   },
   mounted () {
     getSlideUrl({ slideId: this.slide.id }).then(res => {
@@ -71,14 +69,6 @@ export default {
     handleQuizSetting () {
       this.$router.push({ name: 'teacher-quiz-setting', params: { slideId: '123' } })
     },
-    handleToNextState () {
-      modifySlideState({ id: this.slide.id, state: this.nextState }).then(res => {
-        this.$store.commit(SET_SLIDE_INFO, { slideInfo: { ...this.slide, state: this.nextState } })
-        this.$setSuccessMessage('课件状态修改成功')
-      }).catch(err => {
-        this.$setErrorMessage(err.response.data.msg)
-      })
-    },
     handleDeleteSlide () {
       const msg = '请谨慎操作：确定删除本课件吗：\n\n课件名称：' + this.slide.name
       if (confirm(msg)) {
@@ -98,6 +88,14 @@ export default {
       }).catch(err => {
         this.$setErrorMessage(err.response.data.msg)
       })
+    },
+    handleChangeState (state) {
+      modifySlideState({ id: this.slide.id, state }).then(res => {
+        this.$store.commit(SET_SLIDE_INFO, { slideInfo: { ...this.slide, state } })
+        this.$setSuccessMessage('课件状态修改成功')
+      }).catch(err => {
+        this.$setErrorMessage(err.response.data.msg)
+      })
     }
   }
 }
@@ -153,7 +151,7 @@ export default {
 
 .tip {
   font-weight: bold;
-  color: $theme-orange;
+  color: $theme-red;
   font-size: 12px;
 }
 

src/views/teacher/tabs/CreateSlide.vue

@@ -23,6 +23,9 @@
 <!--      <input type="checkbox">-->
 <!--      <b>是否将课件初始状态设为草稿状态（学生不可见）</b>-->
 <!--    </label>-->
+    <div class="tip mb-16">
+      提示：课件创建成功后您需将课件状态设置为非草稿状态，学生才能进行浏览
+    </div>
     <c-button class="secondary full-width" :disabled="!formChecked()" @click="handleSubmit">
       添加
     </c-button>
@@ -129,4 +132,10 @@ select {
 .select-wrapper, .c-input {
   margin-bottom: 24px;
 }
+
+.tip {
+  font-weight: bold;
+  color: $theme-red;
+  font-size: 12px;
+}
 </style>