增加试题模块

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/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;
+  border-bottom: 1px solid #ccc;
+}
+.my-question-list-ft {
+  padding-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</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">{{ 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;
+  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;
+  }
+  .tools {
+    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/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/router/routes.js

@@ -214,6 +214,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 +241,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') }
     ]
   },
   /* 考前摸底考试 */