Merge branch 'master' of https://gitlab.ezijing.com/ezijing/x-learn

src/api/question.js

+import httpRequest from '@/utils/axios'
+
+/**
+ * 获取我的试题
+ */
+export function getMyQuestions(params) {
+  return httpRequest.get('/api/zy/v2/examination/my-question', { params })
+}
+
+/**
+ * 删除试题
+ */
+export function deleteQuestion(data) {
+  return httpRequest.post('/api/zy/v2/examination/delete-my-question', data)
+}
+
+/**
+ * 收藏试题
+ */
+export function addCollection(data) {
+  return httpRequest.post('/api/zy/v2/examination/add-collection', data)
+}
+
+/**
+ * 取消收藏试题
+ */
+export function deleteCollection(data) {
+  return httpRequest.post('/api/zy/v2/examination/delete-my-question', data)
+}

src/components/AppContainer.vue

@@ -6,6 +6,7 @@
     <div class="app-container-bd">
       <slot></slot>
     </div>
+    <slot name="footer"></slot>
   </div>
 </template>
 
@@ -18,6 +19,8 @@ export default {
 
 <style lang="scss">
 .app-container {
+  display: flex;
+  flex-direction: column;
   height: 100%;
   padding: 30px;
   background-color: #fff;
@@ -34,5 +37,13 @@ export default {
   line-height: 1;
 }
 .app-container-bd {
+  flex: 1;
+}
+.app-container-ft {
+  background-color: #fff;
+  position: sticky;
+  bottom: 0;
+  padding-top: 30px;
+  border-top: 1px solid #f1f1f1;
 }
 </style>

src/components/MyQuestionList.vue

+<template>
+  <div class="my-question-list" element-loading-text="加载中..." v-loading="!loaded">
+    <div class="my-question-list-hd">
+      <div class="title"><slot name="title"></slot></div>
+      <div class="tools">
+        <span>选择题型</span>
+        <el-radio-group v-model="questionType" @change="handleTypeChange">
+          <el-radio :label="0">全部</el-radio>
+          <el-radio :label="1">单选题</el-radio>
+          <el-radio :label="2">多选题</el-radio>
+          <el-radio :label="6">判断题</el-radio>
+          <el-radio :label="5">案例题</el-radio>
+        </el-radio-group>
+      </div>
+    </div>
+    <div class="my-question-list-bd">
+      <template v-if="list.length">
+        <my-question-list-item
+          v-for="item in list"
+          :data="item"
+          :key="item.id"
+          v-bind="$attrs"
+          v-on="$listeners"
+          @on-remove="handleRemove"
+          @on-addCollection="handleAddCollection"
+          @on-removeCollection="handleRemoveCollection"
+        ></my-question-list-item>
+      </template>
+      <div class="empty" v-else>暂无试题</div>
+    </div>
+    <div class="my-question-list-ft" v-if="list.length">
+      <div class="buttons">
+        <el-button size="medium" @click="toggleSelectAll(!isAllChecked)">
+          {{ isAllChecked ? '取消全选' : '全选' }}
+        </el-button>
+        <el-button size="medium" @click="handleBatchRemove" v-if="hasRemove">删除</el-button>
+      </div>
+      <div class="pagations">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage"
+          layout="prev, pager, next"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/question.js'
+import MyQuestionListItem from './MyQuestionListItem'
+export default {
+  components: { MyQuestionListItem },
+  props: {
+    requestCallback: Function,
+    requestParams: { type: Object, default: () => ({}) }
+  },
+  data() {
+    return {
+      loaded: false,
+      questionType: 0,
+      list: [],
+      total: 0,
+      currentPage: 1
+    }
+  },
+  computed: {
+    // 已选中
+    checkedList() {
+      return this.list.filter(item => item.checked)
+    },
+    // 是否全选
+    isAllChecked() {
+      return this.checkedList.length === this.list.length
+    },
+    // 是否显示删除按钮
+    hasRemove() {
+      return !!this.checkedList.length
+    }
+  },
+  methods: {
+    // 获取试题列表
+    getMyQuestions() {
+      this.loaded = false
+      const params = Object.assign({}, this.requestParams, {
+        question_type: this.questionType,
+        page: this.currentPage,
+        page_size: 10
+      })
+      api
+        .getMyQuestions(params)
+        .then(response => {
+          const { list, total } = this.requestCallback ? this.requestCallback(response) : response
+          this.total = total
+          this.list = list.map(item => {
+            item.checked = false
+            return item
+          })
+          this.$emit('request-success', response)
+        })
+        .finally(() => {
+          this.loaded = true
+        })
+    },
+    // 类型改变
+    handleTypeChange(value) {
+      this.currentPage = 1
+      this.getMyQuestions()
+    },
+    // 页码改变
+    handleCurrentChange(value) {
+      this.getMyQuestions()
+    },
+    // 全选、取消全选
+    toggleSelectAll(checked) {
+      this.list = this.list.map(item => {
+        item.checked = checked
+        return item
+      })
+    },
+    // 收藏
+    handleAddCollection(data) {
+      api.addCollection({ question_id: data.question_id }).then(response => {
+        data.is_collection = true
+      })
+    },
+    // 取消收藏
+    handleRemoveCollection(data) {
+      api.deleteCollection({ question_id: data.question_id, type: 2 }).then(response => {
+        data.is_collection = false
+      })
+    },
+    // 删除
+    handleRemove(data) {
+      this.handleRemoveReqeust({ question_id: data.question_id })
+    },
+    // 批量删除
+    handleBatchRemove() {
+      const ids = this.checkedList.map(item => {
+        return item.question_id
+      })
+      this.handleRemoveReqeust({ question_id: ids.join(',') })
+    },
+    // 删除接口
+    handleRemoveReqeust(params) {
+      const requestParams = Object.assign({}, params, this.requestParams)
+      api.deleteQuestion(requestParams).then(response => {
+        this.$message({ message: '删除成功', type: 'success' })
+        this.getMyQuestions()
+      })
+    }
+  },
+  beforeMount() {
+    this.getMyQuestions()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.my-question-list-hd {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 8px;
+  font-size: 18px;
+  border-bottom: 1px solid #ccc;
+  ::v-deep .el-radio {
+    font-size: 18px;
+  }
+  ::v-deep .el-radio__label {
+    font-size: 18px;
+    font-weight: 400;
+  }
+  ::v-deep .el-radio__inner {
+    width: 18px;
+    height: 18px;
+  }
+}
+.my-question-list-ft {
+  padding-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  ::v-deep .el-button {
+    width: 100px;
+  }
+}
+</style>

src/components/MyQuestionListItem.vue

+<template>
+  <div class="my-question-list-item">
+    <el-checkbox v-model="data.checked"></el-checkbox>
+    <div class="badge" :class="`questiont-type_${data.question_type}`">{{ questionTypeName }}</div>
+    <div class="name" v-html="data.question_content"></div>
+    <div class="tools">
+      <i class="el-icon-delete" @click="$emit('on-remove', data)"></i>
+      <i
+        class="el-icon-star-on"
+        :class="{ 'is-active': data.is_collection }"
+        @click="toggleCollection"
+        v-if="hasCollection"
+      ></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: { type: Object, default: () => ({}) },
+    hasCollection: { type: Boolean, default: true }
+  },
+  data() {
+    return {
+      radio: false
+    }
+  },
+  computed: {
+    questionTypeName() {
+      const map = { 1: '单选题', 2: '多选题', 5: '案例题', 6: '判断题' }
+      return map[this.data.question_type]
+    }
+  },
+  methods: {
+    toggleCollection() {
+      this.data.is_collection ? this.$emit('on-removeCollection', this.data) : this.$emit('on-addCollection', this.data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.my-question-list-item {
+  display: flex;
+  align-items: center;
+  padding: 22px 0;
+  border-bottom: 1px solid #eee;
+  &:hover {
+    .name {
+      color: #c01540;
+    }
+  }
+  .badge {
+    margin: 0 8px;
+    width: 60px;
+    height: 18px;
+    font-size: 12px;
+    line-height: 18px;
+    color: #fff;
+    text-align: center;
+    background: #ffbe44;
+    border-radius: 9px;
+  }
+  .questiont-type_1 {
+    background: #f47c46;
+  }
+  .questiont-type_2 {
+    background: #ffbe44;
+  }
+  .questiont-type_5 {
+    background: #7ed6e8;
+  }
+  .questiont-type_6 {
+    background: #83da60;
+  }
+  .name {
+    flex: 1;
+    padding: 0 10px;
+    font-size: 18px;
+  }
+  .tools {
+    padding-left: 20px;
+    display: flex;
+    font-size: 18px;
+    color: #d4d4d4;
+    i {
+      margin-left: 10px;
+      cursor: pointer;
+    }
+    .is-active {
+      color: #ffcd39;
+    }
+  }
+}
+</style>

src/components/layout/aside.vue

@@ -29,8 +29,8 @@ export default {
       defaultMenus: [
         { title: '考前摸底', icon: '', path: '/testExam' },
         { title: '真题实战', icon: '', path: '/exam' },
-        { title: '错题集合', icon: '', path: '/exam' },
-        { title: '收藏试题', icon: '', path: '/exam' },
+        { title: '错题集合', icon: '', path: '/my/questions/wrong' },
+        { title: '收藏试题', icon: '', path: '/my/questions/collection' },
         { title: '必考考点', icon: '', path: '/course/test' },
         { title: '考证课程', icon: '', path: '/course/learn' },
         { title: '意见反馈', icon: '', path: '/feedback' },

src/pages/exam/index.vue

+<template>
+  <app-container title="真题实战介绍">
+    <div class="exam">
+      <div class="item">
+        <p>
+          <span><b>考试时间：90分钟</b></span>
+          <span><b>考试通过：80分</b></span>
+          <span><b>总分：100分</b></span>
+        </p>
+        <p>试题类型：单项选择题、多项选择题、判断题和案例题，全部为客观题。</p>
+      </div>
+      <div class="item">
+        <p><b>考试说明</b></p>
+        <p>1.考试目的：考核道路运输企业主要负责人和安全生产管理人员对安全生产管理知识掌握程度</p>
+        <p>
+          2.考核范围：道路运输安全生产相关法律法规及标准规范、道路运输企业安全生产主体责任、道路运输企业安全管理知识、道路运输安全生产实务等内容。
+        </p>
+        <p>3.考试试卷：按照考试大纲的考点出题，精准模拟。</p>
+      </div>
+      <div class="item">
+        <p><b>选择角色</b></p>
+        <el-radio-group v-model="role">
+          <el-radio :label="0">管理人员</el-radio>
+          <el-radio :label="1">安全人员</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="item">
+        <p><b>试卷组卷比例见下表</b></p>
+        <img src="../../assets/images/exam_table.png" style="max-width: 100%" />
+      </div>
+    </div>
+    <template #footer>
+      <div class="app-container-ft"><el-button type="primary">开始考试</el-button></div>
+    </template>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/AppContainer'
+export default {
+  components: { AppContainer },
+  data() {
+    return {
+      role: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.exam {
+  .item {
+    margin-bottom: 20px;
+    line-height: 30px;
+  }
+  .item span {
+    margin-right: 20px;
+  }
+}
+</style>

src/pages/my/layout.vue

@@ -11,7 +11,7 @@ export default {
     return {
       navList: [
         { title: '我的已学课程', path: '/my/course' },
-        { title: '我的已做试题', path: '/my/test' }
+        { title: '我的已做试题', path: '/my/questions' }
       ]
     }
   }

src/pages/my/questions/questionAll.vue

+<template>
+  <app-container>
+    <my-question-list :requestParams="{ type: 3 }" @request-success="handleRequestSuccess">
+      <template #title>做题总数：{{ total }}</template>
+    </my-question-list>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/AppContainer'
+import MyQuestionList from '@/components/MyQuestionList'
+export default {
+  components: { AppContainer, MyQuestionList },
+  data() {
+    return {
+      total: 0
+    }
+  },
+  methods: {
+    handleRequestSuccess(response) {
+      this.total = response.total
+    }
+  }
+}
+</script>

src/pages/my/questions/questionCollection.vue

+<template>
+  <app-container>
+    <my-question-list :hasCollection="false" :requestParams="{ type: 2 }" @request-success="handleRequestSuccess">
+      <template #title>收藏总数：{{ total }}</template>
+    </my-question-list>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/AppContainer'
+import MyQuestionList from '@/components/MyQuestionList'
+export default {
+  components: { AppContainer, MyQuestionList },
+  data() {
+    return {
+      total: 0
+    }
+  },
+  methods: {
+    handleRequestSuccess(response) {
+      this.total = response.collection_total
+    }
+  }
+}
+</script>

src/pages/my/questions/questionWrong.vue

+<template>
+  <app-container>
+    <my-question-list :requestParams="{ type: 1 }" @request-success="handleRequestSuccess">
+      <template #title>错题总数：{{ total }}</template>
+    </my-question-list>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/AppContainer'
+import MyQuestionList from '@/components/MyQuestionList'
+export default {
+  components: { AppContainer, MyQuestionList },
+  data() {
+    return {
+      total: 0
+    }
+  },
+  methods: {
+    handleRequestSuccess(response) {
+      this.total = response.error_total
+    }
+  }
+}
+</script>

src/pages/testExam/index.vue

 <template>
-  <div class="app-container">
-    <div class="title">考前摸底介绍</div>
+  <app-container title="考前摸底介绍">
     <div class="desc-exam">
       <p>考试时间20分钟。</p>
       <p>考试题目共22题，分四部分：单选题共8题，多选题共8题，判断题共5题，案例题共1题。</p>
     </div>
-    <div class="exam-btn-box">
-      <div class="exam-btn">开始考试</div>
-    </div>
-  </div>
+    <template #footer>
+      <div class="app-container-ft"><el-button type="primary">开始考试</el-button></div>
+    </template>
+  </app-container>
 </template>
 
 <script>
+import AppContainer from '@/components/AppContainer'
 export default {
+  components: { AppContainer },
+  data() {
+    return {}
+  }
 }
 </script>
 <style lang="scss" scoped>
-.app-container{
-  position: relative;
-  height: 100%;
-  padding: 30px;
-  background-color: #fff;
-  -webkit-border-radius: 8px;
-  -moz-border-radius: 8px;
-  border-radius: 8px;
-  box-sizing: border-box;
-  .title{
-    border-bottom: 1px solid #ccc;
-    font-size: 18px;
-    color: #222222;
-    line-height: 45px;
-  }
-  .desc-exam{
-    min-height: 350px;
-    // border-bottom: 1px solid #ccc;
-    p{
-      margin-top: 20px;
-      font-size: 14px;
-      color: #333333;
-      line-height: 20px;
-    }
-  }
-  .exam-btn-box{
-    box-sizing: border-box;
-    width: 100%;
-    padding-top: 30px;
-    border-top: 1px solid #ccc;
-    .exam-btn{
-      text-align: center;
-      line-height: 40px;
-      width: 116px;
-      height: 40px;
-      background: #C01540;
-      border-radius: 4px;
-      font-size: 14px;
-      font-weight: bold;
-      color: #FFFFFF;
-    }
+.desc-exam {
+  p {
+    margin-bottom: 20px;
+    line-height: 20px;
+    color: #333;
   }
 }
 </style>

src/router/routes.js

@@ -36,7 +36,12 @@ const examAnswer = [
   /* 考前摸底 */
   {
     path: '/testExam',
-    component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/testExam')
+    component: () => import(/* webpackChunkName: "exam" */ '@/pages/testExam')
+  },
+  // 真题实战
+  {
+    path: '/exam',
+    component: () => import(/* webpackChunkName: "exam" */ '@/pages/exam')
   }
 ]
 
@@ -214,6 +219,14 @@ export default [
         path: '/account/password',
         component: () => import(/* webpackChunkName: "account" */ '@/pages/account/password')
       },
+      {
+        path: '/my/questions/wrong',
+        component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/my/questions/questionWrong')
+      },
+      {
+        path: '/my/questions/collection',
+        component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/my/questions/questionCollection')
+      },
       /* 考证课程 */
       ...courseRoutes,
       ...examAnswer
@@ -233,7 +246,7 @@ export default [
     redirect: '/my/course',
     children: [
       { path: 'course', component: () => import(/* webpackChunkName: "my" */ '@/pages/my/course') },
-      { path: 'test', component: () => import(/* webpackChunkName: "my" */ '@/pages/my/test') }
+      { path: 'questions', component: () => import(/* webpackChunkName: "my" */ '@/pages/my/questions/questionAll') }
     ]
   },
   /* 考前摸底考试 */

src/style.scss

@@ -64,10 +64,6 @@ em,
 i {
   font-style: normal;
 }
-strong,
-b {
-  font-weight: normal;
-}
 img {
   border: none;
 }