feat: 教师主页创建幻灯片逻辑

src/components/teacher/SlideListItem.vue

@@ -15,6 +15,7 @@ export default {}
 <style lang="scss" scoped>
 .slide-list-item-container {
   margin: 16px 0 32px 0;
+  cursor: pointer;
 }
 .content > div {
   color: gray;

src/config/server-info.js

@@ -1,7 +1,15 @@
-const url = 'http://106.14.178.184:8080/seec_helper/api/slide/'
+// const host = 'http://106.14.178.184:8080/seec_helper'
+const host = 'http://localhost:18080/'
 
-const useSlideServer = postfix => postfix ? url + postfix : url
+const slideUrl = host + '/api/slide/'
+
+const useSlideServer = postfix => postfix ? slideUrl + postfix : slideUrl
+
+const courseUrl = host + '/api/course/'
+
+const useCourseServer = postfix => postfix ? courseUrl + postfix : courseUrl
 
 export {
-  useSlideServer
+  useSlideServer,
+  useCourseServer
 }

src/router/index.js

@@ -19,10 +19,11 @@ const routes = [{
 }, {
   path: '/teacher',
   name: 'teacher',
+  redirect: '/teacher/home',
   component: () => import('../views/teacher/TeacherHomeView.vue'),
   children: [{
-    path: '',
-    name: 'home',
+    path: 'home',
+    name: 'teacher-home',
     component: () => import('../views/teacher/tabs/HomeTab.vue')
   }, {
     path: 'search',

src/server/course.js

@@ -0,0 +1,14 @@
+import {
+  useCourseServer
+} from '@/config/server-info.js'
+import axios from 'axios'
+
+export function getTeacherCourse() {
+  return axios.get(useCourseServer('teacher')).then(res => {
+    if (res.data.code === 200) {
+      return res.data.data
+    } else {
+      // todo
+    }
+  })
+}

src/server/enums/slide-state.js

@@ -0,0 +1,3 @@
+export default {
+  draft: 'DRAFT'
+}

src/server/slide.js

@@ -7,12 +7,20 @@ export function getSlide(id) {
   return axios.get(useSlideServer(id))
 }
 
-export function createSlide(slideInfo) {
+export function createSlide(courseId, name) {
   const data = {
-    ...slideInfo,
-    items: []
+    courseId,
+    name,
+    items: [],
+    state: 'DRAFT'
   }
-  return axios.post(useSlideServer('create'), data)
+  return axios.post(useSlideServer('create'), data).then(res => {
+    if (res.data.code === 200) {
+      return res.data.data
+    } else {
+      // todo
+    }
+  })
 }
 
 export function updateSlide(slideInfo, items) {
@@ -20,5 +28,11 @@ export function updateSlide(slideInfo, items) {
     ...slideInfo,
     items: items.map()
   }
-  return axios.post(useSlideServer('update'), data)
+  return axios.post(useSlideServer('update'), data).then(res => {
+    if (res.data.code === 200) {
+      return res.data.data
+    } else {
+      // todo
+    }
+  })
 }

src/store/modules/editor.js

@@ -38,6 +38,7 @@ export default {
         focusId: newItemId,
         offset: 0
       }
+      state.slideInfo = { ...payload }
     },
     [ADD_ITEM_AFTER](state, payload) {
       const index = state.items.indexOf(state.items.filter(item => item.id === payload.id)[0])

src/store/modules/teacher.js

@@ -0,0 +1,5 @@
+export default {
+  state: {
+    previewSlide: {}
+  }
+}

src/views/editor/EditorView.vue

@@ -4,13 +4,9 @@
 
 <script>
 import EditorVue from '../../components/editor/Editor.vue'
-import { INIT_BY_DEFAULT } from '../../store/types/editor-types'
 
 export default {
-  components: { EditorVue },
-  created() {
-    this.$store.commit(INIT_BY_DEFAULT)
-  }
+  components: { EditorVue }
 }
 </script>
 

src/views/teacher/TeacherHomeView.vue

@@ -3,7 +3,7 @@
     <div class="menu-container">
       <div class="tab-container">
         <div class="tab">
-          <router-link to="./">
+          <router-link to="home">
             <div class="icon home">&#xe68b;</div>
           </router-link>
           <router-link to="search">
@@ -15,7 +15,6 @@
           <router-link to="personal">
             <div class="icon personal">&#xe790;</div>
           </router-link>
-          <div class="line"></div>
           <router-link to="feedback">
             <div class="icon feedback">&#xe68a;</div>
           </router-link>
@@ -39,14 +38,13 @@
 export default {
   data() {
     return {
-      // path: $router.params
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-$icon-normal-color: #aabbcc;
+$icon-normal-color: #7a8a9a;
 $icon-active-color: #5485e5;
 $icon-hover-color: rgb(146, 171, 221);
 
@@ -100,7 +98,7 @@ $icon-hover-color: rgb(146, 171, 221);
     text-align: center;
     font-family: 'iconfont';
     font-size: 34px;
-    color: #abb8bf;
+    color: $icon-normal-color;
   }
 }
 </style>

src/views/teacher/tabs/AddTab.vue

@@ -1,12 +1,119 @@
 <template>
   <div class="tab-wrapper">
-    add
+    <div class="title">新建幻灯片</div>
+    <div class="sub-title">所属课程：</div>
+    <div class="select-wrapper">
+      <select v-model="selectedCourseId">
+        <option value="">[ 未填写 ]</option>
+        <option v-for="course of courses" :value="course.id" :key="course.id">
+          {{ course.name }}
+        </option>
+      </select>
+    </div>
+    <div class="sub-title">幻灯片名称：</div>
+    <input
+      type="text"
+      v-model="userInput"
+      placeholder="请勿与同课程幻灯片重名"
+    />
+    <button class="submit-button" @click.prevent="handleSubmit">
+      添加
+    </button>
   </div>
 </template>
 
 <script>
-export default {}
+import { getTeacherCourse } from '@/server/course'
+import { createSlide } from '@/server/slide'
+import { INIT_BY_DEFAULT } from '../../../store/types/editor-types'
+export default {
+  data() {
+    return {
+      courses: [],
+      selectedCourseId: '',
+      userInput: ''
+    }
+  },
+  mounted() {
+    getTeacherCourse().then(res => {
+      this.courses = res
+    })
+  },
+  methods: {
+    handleSubmit() {
+      createSlide(this.selectedCourseId, this.userInput).then(res => {
+        this.$store.commit(INIT_BY_DEFAULT, res)
+        this.$router.push('/editor')
+      })
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 @import './tab-common.scss';
+$input-background-color: #ebf0f5;
+$submit-button-color: #5a7fa5;
+
+.title {
+  margin-bottom: 32px;
+}
+
+.submit-button {
+  display: block;
+  width: 120px;
+  height: 40px;
+  margin-top: 36px;
+  background: $submit-button-color;
+  color: white;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  font-weight: 500;
+  &:hover {
+    background: darken($submit-button-color, 5);
+  }
+
+  &:active {
+    background: darken($submit-button-color, 10);
+  }
+}
+.select-wrapper {
+  width: 100%;
+  height: 40px;
+  margin-bottom: 36 px;
+}
+
+select,
+input {
+  box-sizing: border-box;
+  font-size: 16px;
+  font-weight: 500;
+  color: #3a4a5a;
+  background: $input-background-color;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 48px;
+  line-height: 40px;
+  padding: 0;
+  padding-left: 12px;
+}
+
+select {
+  //隐藏select的下拉图标
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  //通过padding-left的值让文字居中
+}
+
+input {
+  border: none;
+  border-radius: 8px;
+
+  outline: none;
+  background: $input-background-color;
+}
 </style>

src/views/teacher/tabs/HomeTab.vue

@@ -9,6 +9,29 @@
       <slide-list-item-vue></slide-list-item-vue>
       <slide-list-item-vue></slide-list-item-vue>
       <slide-list-item-vue></slide-list-item-vue>
+      <!-- <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue> -->
     </section>
   </div>
 </template>

src/views/teacher/tabs/tab-common.scss

@@ -8,6 +8,13 @@
 .title {
   font-size: 28px;
   font-weight: 500;
+  margin-bottom: 24px;
+}
+
+.sub-title {
+  font-size: 22px;
+  font-weight: 500;
+  margin-bottom: 16px;
 }
 
 .slide-section {