feat: 学生页面基础

src/App.vue

@@ -20,12 +20,12 @@ export default {
 
 @font-face {
   font-family: 'iconfont';  /* project id 1598214 */
-  src: url('//at.alicdn.com/t/font_1598214_vlz5n1dhzwa.eot');
-  src: url('//at.alicdn.com/t/font_1598214_vlz5n1dhzwa.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_1598214_vlz5n1dhzwa.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_1598214_vlz5n1dhzwa.woff') format('woff'),
-  url('//at.alicdn.com/t/font_1598214_vlz5n1dhzwa.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_1598214_vlz5n1dhzwa.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.eot');
+  src: url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.woff') format('woff'),
+  url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.svg#iconfont') format('svg');
 }
 
 body {

src/components/CInput.vue

@@ -6,6 +6,7 @@
         :type="type ? type : 'text'"
         :placeholder="placeholder"
         :value="value"
+        :maxlength="maxlength ? maxlength : ''"
         @input="$emit('input', $event.target.value)"
       />
     </label>
@@ -22,7 +23,8 @@ export default {
     value: String,
     placeholder: String,
     textarea: String,
-    type: String
+    type: String,
+    maxlength: String
   },
   data () {
     return {
@@ -44,8 +46,8 @@ input, textarea {
   outline: none;
   width: 100%;
   height: 48px;
-  line-height: 40px;
-  padding: 0 0 0 12px;
+  line-height: 2;
+  padding: 0 12px 0 12px;
   transition: .2s;
   &:hover {
     background: darken($input-background-color, 5);
@@ -53,7 +55,8 @@ input, textarea {
 }
 
 textarea {
-  height: 96px;
+  min-height: 96px;
+  height: 100%;
   resize: none;
 }
 

src/components/GlobalMessage.vue

@@ -72,7 +72,7 @@ export default {
 }
 
 .message {
-  color: #6a7a8a;
+  color: #3a4a5a;
   display: flex;
   align-items: center;
   justify-content: center;

src/utils/icon-map.js

@@ -14,7 +14,8 @@ const iconMap = {
   'personal': '\ue790',
   'search': '\ue6a2',
   'upload': '\ue6c8',
-  'back': '\ue714'
+  'back': '\ue714',
+  'quiz': '\ue6d1'
 }
 
 export default iconMap

src/views/student/StudentHome.vue

@@ -1,13 +1,47 @@
 <template>
-  <div>
-
-  </div>
+  <user-home-layout :tabs="tabs" role="student">
+  </user-home-layout>
 </template>
 
 <script>
-export default {}
+import UserHomeLayout from '@/views/shared/UserHomeLayout'
+import iconMap from '@/utils/icon-map'
+
+export default {
+  components: { UserHomeLayout },
+  data () {
+    return {
+      tabs: [
+        {
+          name: 'explore',
+          unicode: iconMap.explore,
+          title: '所有课程课件'
+        },
+        {
+          name: 'courses',
+          unicode: iconMap.courses,
+          title: '管理课程'
+        },
+        {
+          name: 'quiz',
+          unicode: iconMap.quiz,
+          title: '我的测验'
+        },
+        {
+          name: 'discussion',
+          unicode: iconMap.discussion,
+          title: '讨论区消息通知'
+        },
+        {
+          name: 'personal',
+          unicode: iconMap.personal,
+          title: '个人中心'
+        }
+      ]
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-
 </style>

src/views/student/tabs/StudentCoursesManager.vue

@@ -1,13 +1,29 @@
 <template>
-  <div>
-    teacher course manager
+  <div class="tab complex-tab">
+    <div class="left">
+      <h1 class="title">课程管理</h1>
+      <course-card :course="{}" :index="1"></course-card>
+      <course-card :course="{}" :index="2"></course-card>
+      <c-button class="full-width secondary">新建课程</c-button>
+    </div>
+    <router-view/>
   </div>
 </template>
 
 <script>
-export default {}
+import CButton from '@/components/CButton'
+import CourseCard from '@/components/CourseCard'
+
+export default {
+  components: { CButton, CourseCard },
+  methods: {}
+}
 </script>
 
 <style lang="scss" scoped>
+@import "~@/views/shared/tab-common";
 
+.c-button {
+  margin-top: 24px;
+}
 </style>

src/views/student/tabs/StudentDiscussion.vue

@@ -1,13 +1,21 @@
 <template>
-  <div>
-    explore
+  <div class="tab">
+    <h1 class="title">讨论区消息通知</h1>
   </div>
 </template>
 
 <script>
-export default {}
+import iconMap from '@/utils/icon-map'
+
+export default {
+  data () {
+    return {
+      iconMap: iconMap
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-
+@import "~@/views/shared/tab-common";
 </style>

src/views/student/tabs/StudentExplore.vue

@@ -1,13 +1,42 @@
 <template>
-  <div>
-    explore
+  <div class="tab complex-tab">
+    <div class="left">
+      <h1 class="title">我的主页</h1>
+      <search-bar></search-bar>
+      <section>
+        <h1 class="sub-title">最近浏览</h1>
+        <slide-card :click-handler="handleSlideCardClick"></slide-card>
+        <br>
+      </section>
+      <section>
+        <h1 class="sub-title">课程列表</h1>
+        <course-card :course="{}" :index="2"></course-card>
+        <course-card :course="{}" :index="2"></course-card>
+      </section>
+    </div>
+    <router-view/>
   </div>
 </template>
 
 <script>
-export default {}
+import SearchBar from '@/components/SearchBar'
+import SlideCard from '@/components/SlideCard'
+import CourseCard from '@/components/CourseCard'
+
+export default {
+  components: { CourseCard, SlideCard, SearchBar },
+  methods: {}
+}
 </script>
 
 <style lang="scss" scoped>
+@import "~@/views/shared/tab-common";
+
+.title {
+  margin-bottom: 16px;
+}
 
+.search-bar {
+  margin-bottom: 16px;
+}
 </style>

src/views/student/tabs/StudentPersonal.vue

@@ -1,6 +1,7 @@
 <template>
-  <div>
-    explore
+  <div class="tab">
+    <h1 class="title">个人信息设置 <span class="tag">学生</span></h1>
+    <div class="sub-title"></div>
   </div>
 </template>
 
@@ -9,5 +10,6 @@ export default {}
 </script>
 
 <style lang="scss" scoped>
-
+@import "~@/style/theme.scss";
+@import "~@/views/shared/tab-common";
 </style>

src/views/student/tabs/StudentQuiz.vue

@@ -1,6 +1,8 @@
 <template>
-  <div>
-    create slide
+  <div class="tab">
+    <h1 class="title">课程测验 <span class="tag">学生</span></h1>
+    <div class="sub-title">待完成的测验</div>
+    <div class="sub-title">已完成的测验 & 结果</div>
   </div>
 </template>
 
@@ -9,5 +11,6 @@ export default {}
 </script>
 
 <style lang="scss" scoped>
-
+@import "~@/style/theme.scss";
+@import "~@/views/shared/tab-common";
 </style>

src/views/teacher/TeacherHome.vue

@@ -1,6 +1,5 @@
 <template>
   <user-home-layout :tabs="tabs" role="teacher">
-    <template v-slot:preview></template>
   </user-home-layout>
 </template>
 

src/views/teacher/components/CreateNewCourse.vue

@@ -2,12 +2,12 @@
   <tab-side-component>
     <back-title>新建课程</back-title>
     <div class="sub-title">课程名称：</div>
-    <c-input placeholder="请勿与已有课程名称重名"/>
+    <c-input placeholder="不能与已有课程名称重名" v-model="name"/>
     <div class="sub-title">课程简介：</div>
-    <c-input textarea="true" placeholder="请勿与已有课程名称重名"/>
+    <c-input textarea="true" maxlength="65" v-model="bio" placeholder="课程简要介绍，少于 65 字"/>
     <div class="sub-title">选课码：</div>
-    <c-input placeholder="学生将通过选课码注册课程"/>
-    <c-button>确认创建</c-button>
+    <c-input placeholder="学生将通过选课码注册课程" v-model="code"/>
+    <c-button class="secondary full-width" @click="handleCreate" :disabled="!formChecked()">确认创建</c-button>
   </tab-side-component>
 </template>
 
@@ -16,9 +16,50 @@ import TabSideComponent from '@/components/TabSideComponent'
 import CInput from '@/components/CInput'
 import CButton from '@/components/CButton'
 import BackTitle from '@/components/BackTitle'
+import { createCourse } from '@/server/course'
 
 export default {
-  components: { BackTitle, CButton, CInput, TabSideComponent }
+  components: { BackTitle, CButton, CInput, TabSideComponent },
+  data () {
+    return {
+      name: '',
+      bio: '',
+      code: '',
+      message: ''
+    }
+  },
+  methods: {
+    formChecked () {
+      if (!this.name) {
+        this.message = '课程名称不能为空'
+        return false
+      }
+      if (!this.bio) {
+        this.message = '请为课程添加一个简短的介绍'
+        return false
+      }
+      if (!this.code) {
+        this.message = '请为课程添加一个选课码，便于您班级管理'
+        return false
+      }
+
+      return true
+    },
+    handleCreate () {
+      if (!this.formChecked()) {
+        this.$showMessage({
+          message: this.message
+        })
+        return
+      }
+
+      createCourse({ name: this.name, bio: this.bio, code: this.code }).then(res => {
+        if (res) {
+          // todo
+        }
+      })
+    }
+  }
 }
 </script>
 

src/views/teacher/tabs/CreateSlide.vue

@@ -26,10 +26,10 @@
 </template>
 
 <script>
-import { createSlide } from '@/server/slide'
 import CInput from '@/components/CInput'
 import CButton from '@/components/CButton'
 import FileUploader from '@/components/FileUploader'
+import { teacherGetCourses } from '@/server/course'
 
 export default {
   components: { FileUploader, CButton, CInput },
@@ -41,18 +41,24 @@ export default {
       file: null
     }
   },
+  mounted () {
+    // todo
+    teacherGetCourses({ sort: 'name' }).then(res => {
+      if (res) {
+        this.courses = res
+      }
+    })
+  },
   methods: {
+
     handleSubmit () {
-      createSlide(this.selectedCourseId, this.userInput).then(res => {
-        this.$router.push('/editor/' + res.id)
-      })
     }
   }
 }
 </script>
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
-@import "tab-common";
+@import "~@/views/shared/tab-common";
 
 select {
   box-sizing: border-box;

src/views/teacher/tabs/TeacherCoursesManager.vue

@@ -29,7 +29,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "tab-common";
+@import "~@/views/shared/tab-common";
 
 .c-button {
   margin-top: 24px;

src/views/teacher/tabs/TeacherDiscussion.vue

@@ -18,7 +18,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "tab-common";
+@import "~@/views/shared/tab-common";
 
 .tip {
   font-weight: bold;

src/views/teacher/tabs/TeacherExplore.vue

@@ -5,7 +5,6 @@
       <search-bar></search-bar>
       <section>
         <h1 class="sub-title">最近浏览</h1>
-        <!--      <c-button @click="push()">临时：PDF阅读器链接</c-button>-->
         <slide-card :click-handler="handleSlideCardClick"></slide-card>
         <br>
       </section>
@@ -23,9 +22,13 @@
 import SearchBar from '@/components/SearchBar'
 import SlideCard from '@/components/SlideCard'
 import CourseCard from '@/components/CourseCard'
+import { teacherGetSlides } from '@/server/slide'
 
 export default {
   components: { CourseCard, SlideCard, SearchBar },
+  mounted () {
+    teacherGetSlides({ size: 2, sort: 'updateAt,desc' })
+  },
   methods: {
     handleSlideCardClick (slideId) {
       this.$router.push({ name: 'teacher-explore-slide-detail', params: { slideId: slideId } })
@@ -39,7 +42,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "tab-common";
+@import "~@/views/shared/tab-common";
 
 .title {
   margin-bottom: 16px;

src/views/teacher/tabs/TeacherPersonal.vue

@@ -11,5 +11,5 @@ export default {}
 
 <style lang="scss" scoped>
 @import "~@/style/theme.scss";
-@import "tab-common";
+@import "~@/views/shared/tab-common";
 </style>