部分做题逻辑

src/components/question/question-content.vue

 <template>
   <section class="qeustion-content-wrapper">
-    <article class="public-title">
+    <article class="public-title" v-show="currentQuestion.isPublic">
       <p class="text">
         我们建议使用 CDN 引入 Element 的永固在机舱在链接
         地址上锁定版本，以免将来 Element 升级时受到非兼容
@@ -10,14 +10,15 @@
       <commonSpliteLine></commonSpliteLine>
     </article>
     <article class="title-wrapper">
-      <span class="type multi"><span>多选题</span></span>
+      <span class="type" :class="{'multi': currentQuestion.type == 2}"><span>{{currentQuestion.type == 1 ? "单选题" : "多选题"}}</span></span>
       <span class="content">医师接到“危急值”报告后做法错误的？</span>
     </article>
     <article class="select-wrapper">
-      <div class="item">
-        <span class="option">A</span>
-        <span class="content">进行分析评估</span>
+      <div class="item" v-for="(item, index) in currentQuestion.answerList" :key="index">
+        <span class="option">{{getOrderVac(index)}}</span>
+        <span class="content">{{item.text}}</span>
       </div>
+      
       <div class="item">
         <!-- <span class="option">B</span> -->
         <img src="../../images/question/error.png" alt="">
@@ -33,13 +34,13 @@
         <span class="content">查看病理，了解病史</span>
       </div>
     </article>
-    <article class="c-btn-wrapper">
+    <article class="c-btn-wrapper" v-show="currentQuestion.type == 2">
       <van-button size="large" round color="#449284">确 认</van-button>
     </article>    
-    <article class="answer-wrapper">
+    <article class="answer-wrapper" v-show="currentQuestion.isAnalyzed">
       <span class="content">正确答案：D</span>
     </article>
-    <article class="analysis-wrapper">
+    <article class="analysis-wrapper" v-show="currentQuestion.isAnalyzed">
       <span class="title">解析</span>
       <div class="content" v-html="analysisContent"></div>
     </article>
@@ -47,6 +48,8 @@
 </template>
 <script>
 import commonSpliteLine from "@/components/common/common-splite-line";
+import { mapGetters, mapActions } from 'vuex';
+let orderVac = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N"];
 export default {
   components: {
     commonSpliteLine
@@ -57,6 +60,9 @@ export default {
       default: () => {}
     }
   },
+  computed: {
+    ...mapGetters(['questionList', 'currentQuestion', 'currentQuestionIndex', 'questionTotal']),
+  },  
   data() {
     return {
       analysisContent: `商户支付的订单号由商户自定义生成，仅支持使用字 母、数字、中划线-、下划线_、竖线|、
@@ -66,6 +72,11 @@ export default {
       <img data-v-5f105ddf="" src="https://files.yunqueyi.com/image/png/protal/project/20200702161856970.png">`
     };
   },
+  methods: {
+    getOrderVac(index) {
+      return orderVac[index];
+    }
+  },
 };
 </script>
 <style lang="less" scoped>

src/components/question/question-footer.vue

 <template>
   <section class="qeustion-footer-wrapper">
-    <article class="left">
+    <article class="left" @click="toggleAnalysis()">
       <img src="../../images/question/analysis.png" alt="">
       <span class="text">解析</span>
     </article>
-    <article class="center">
-      <img src="../../images/question/heart-b.png" alt="">
+    <article class="center" @click="toggleCollect()">
+      <img v-show="!currentQuestion.isCollected" src="../../images/question/heart-b.png" alt="">
+      <img v-show="currentQuestion.isCollected" src="../../images/question/heart.png" alt="">
       <span class="text">收藏</span>
     </article>
     <article class="right">
-      <span class="pre disabled">上一题</span>
-      <span class="next">下一题</span>
+      <span class="pre" :class="{'disabled': currentQuestionIndex == 0}" @click="previous">上一题</span>
+      <span class="next" @click="next">下一题</span>
     </article>
  </section>
 </template>
 <script>
+import { Toast  } from 'vant';
+import { mapGetters, mapActions } from 'vuex';
 export default {
+  props: {
 
+  },
+  data() {
+    return {
+      
+    }
+  },
+  computed: {
+    ...mapGetters(['questionList', 'currentQuestion', 'currentQuestionIndex', 'questionTotal']),
+  },
+  methods: {
+
+    // 上一页 // 有可能要触发上分页（前端的个数只有一条）
+    // TODO
+    previous() {
+      if(this.currentQuestion.order == 1) {
+        Toast('已是第一题');
+      } else {
+        let preIndex = this.currentQuestionIndex - 1;
+        this.$store.commit('SET_CURRENT_QUESTION_INDEX', preIndex);
+        this.$store.commit('SET_CURRENT_QUESTION', this.questionList[preIndex] || {answerList: []});
+      }
+    },
+
+    // 下一页 // 有可能要触发下分页（后面的个数只有一条）
+    // TODO
+    next() {
+      if(this.currentQuestion.order == this.questionTotal) {
+        Toast('已是最后一题');
+      } else {
+        if(this.currentQuestion.order >= this.questionList.length) {
+          return;
+        }
+        let nextIndex = this.currentQuestionIndex + 1;
+        this.$store.commit('SET_CURRENT_QUESTION_INDEX', nextIndex);
+        this.$store.commit('SET_CURRENT_QUESTION', this.questionList[nextIndex] || {answerList: []});
+      }
+    },
+
+    // 解析
+    toggleAnalysis() {
+      this.currentQuestion.isAnalyzed = !this.currentQuestion.isAnalyzed;
+      // this.$store.commit('SET_CURRENT_QUESTION', this.currentQuestion);
+    },
+
+    // 收藏/不收藏
+    toggleCollect() {
+      this.currentQuestion.isCollected = !this.currentQuestion.isCollected;
+      // this.$store.commit('SET_CURRENT_QUESTION', this.currentQuestion);
+    }
+  },
 }
 </script>
 <style lang="less" scoped>

src/components/question/question-header.vue

 <template>
   <section class="question-header-wrapper">
     <img class="left" src="../../images/left-array-black.png" alt="">
-    <span class="center">第一篇 基础知识</span>
+    <span class="center">{{title}}</span>
     <div class="right">
-      <span class="c-num">1</span>/<span class="totall">33</span>
+      <span class="order">{{order}}</span><span class="total">/{{total}}</span>
     </div>
   </section>
 </template>
 <script>
 export default {
   props: {
-    cIndex: {
+    title: {
+      type: String,
+      default: "第一篇 基础知识",
+    },
+    order: {
       type: Number | String,
       default: 1,
+    },
+    total: {
+      type: Number | String,
+      default: 20,
     }
   }
 }
 </script>
 <style lang="less" scoped>
 .question-header-wrapper {
+  width: 100%;
+  // box-sizing: content-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding-top: 28px;
-  margin: 0 15px;
+  padding: 28px 15px 0;
+  // padding-top: 28px;
+  // margin: 0 15px;
+  background: #fff;
   .left {
     height: 25px;
   }
@@ -39,13 +55,15 @@ export default {
     padding: 0 10px;
   }
   .right {
+    min-width: 60px;
     font-size: 14px;
+    text-align: right;
     span {
-      &.c-num {
+      &.order {
         color: #373839;
         font-weight: 700;
       }
-      &.totall {
+      &.total {
         color: #979899;
       }
     }

src/store/getters.js

@@ -7,5 +7,9 @@ const getters = {
   positionInfo: state => state.coop.positionInfo,
   organizationInfo: state => state.coop.organizationInfo,
   logged: state => !!(state.user.token && state.user.info.id),
+  questionList: state => state.question.questionList,
+  currentQuestion: state => state.question.currentQuestion,
+  currentQuestionIndex: state => state.question.currentQuestionIndex,
+  questionTotal: state => state.question.questionTotal,
 }
 export default getters

src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import coop from './modules/coop'
 import user from './modules/user'
+import question from './modules/question'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -10,6 +11,7 @@ const store = new Vuex.Store({
   modules: {
     coop,
     user,
+    question
   },
   getters
 })

src/store/modules/question.js

+// import fetch from '@/utils/fetch';
+// import { getBaseUrl } from '@/utils/index'
+// import { setCookie, getCookie, delCookie } from '@/utils/index';
+// import { envConfig } from '@/utils/env-config';
+
+const question = {
+  state: {
+    questionList: [],
+    currentQuestion: {
+      id: 1,
+      type: 1,      // 1: 单选题; 2: 多选题
+      isPublic: 0,  // 0: 通用; 1: 共题干; 2: 共答案;
+      order: 1,
+      isAnalyzed: false,
+      isCollected: false,
+      answerList: [
+        {
+          isCorrect: false,
+          isSelected: false,
+          text: "进行分析评估",
+        },
+        {
+          isCorrect: false,
+          isSelected: false,
+          text: "进行分析评估",
+        },
+        {
+          isCorrect: true,
+          isSelected: false,
+          text: "进行分析评估",
+        },
+        {
+          isCorrect: false,
+          isSelected: false,
+          text: "进行分析评估",
+        },
+      ]
+    },
+    currentQuestionIndex: 0,
+    questionTotal: 30,
+  },
+  mutations: {
+    SET_QUESTION_LIST: (state, payload) => {
+      state.questionList = payload;
+    },
+    SET_CURRENT_QUESTION: (state, payload) => {
+      state.currentQuestion = payload;
+    },
+    SET_CURRENT_QUESTION_INDEX: (state, payload) => {
+      state.currentQuestionIndex = payload;
+    },
+    SET_QUESTION_TOTAL: (state, payload) => {
+      state.questionTotal = payload;
+    },
+  },
+  actions: {
+    // 获取用户信息
+    async getQuestionList({ commit }, params) {
+      console.log(params);
+      let currentList = [
+        {
+          id: 1,
+          type: 1,  
+          isPublic: 0,
+          order: 1,
+          isAnalyzed: false,
+          isCollected: false,
+          answerList: [
+            {
+              isCorrect: false,
+              isSelected: false,
+              text: "进行分析评估",
+            },
+            {
+              isCorrect: false,
+              isSelected: false,
+              text: "进行分析评估",
+            },
+            {
+              isCorrect: true,
+              isSelected: false,
+              text: "进行分析评估",
+            },
+            {
+              isCorrect: false,
+              isSelected: false,
+              text: "进行分析评估",
+            },
+          ]
+        },
+        {
+          id: 2,
+          type: 2,  
+          isPublic: 0,
+          order: 2,
+          isAnalyzed: false,
+          isCollected: false,
+          answerList: [
+            {
+              isCorrect: false,
+              isSelected: false,
+              text: "进行分析评估2",
+            },
+            {
+              isCorrect: false,
+              isSelected: false,
+              text: "进行分析评估2",
+            },
+            {
+              isCorrect: true,
+              isSelected: false,
+              text: "进行分析评估2",
+            },
+            {
+              isCorrect: false,
+              isSelected: false,
+              text: "进行分析评3",
+            },
+          ]
+        },
+        {
+          id: 3,
+          type: 1,  
+          isPublic: 1,
+          order: 3,
+          isAnalyzed: false,
+          isCollected: false,
+          answerList: [
+            {
+              isCorrect: false,
+              isSelected: false,
+              text: "进行分析评估3",
+            },
+            {
+              isCorrect: false,
+              isSelected: false,
+              text: "进行分析评估3",
+            },
+            {
+              isCorrect: true,
+              isSelected: false,
+              text: "进行分析评估3",
+            },
+            {
+              isCorrect: false,
+              isSelected: false,
+              text: "进行分析评估3",
+            },
+          ]
+        },
+        {
+          id: 4,
+          type: 2,  
+          isPublic: 2,
+          order: 4,
+          isAnalyzed: false,
+          isCollected: false,
+          answerList: [
+            {
+              isCorrect: false,
+              isSelected: false,
+              text: "进行分析评估4",
+            },
+            {
+              isCorrect: false,
+              isSelected: false,
+              text: "进行分析评估4",
+            },
+            {
+              isCorrect: true,
+              isSelected: false,
+              text: "进行分析评估4",
+            },
+            {
+              isCorrect: false,
+              isSelected: false,
+              text: "进行分析评估4",
+            },
+          ]
+        },
+      ];
+      commit('SET_QUESTION_LIST', currentList);
+      commit('SET_CURRENT_QUESTION', currentList[0] || {answerList:[]});
+      commit('SET_CURRENT_QUESTION_INDEX', 0);
+      commit('SET_QUESTION_TOTAL', 30);
+    },
+
+  },
+}
+
+export default question;

src/views/question-detail.vue

 <template>
   <div class="question-detail-wrapper">
-    <question-header ></question-header>
+    <question-header :title="currentTitle" :order="currentQuestion.order" :total="questionTotal"></question-header>
     <section class="body">
       <question-content v-show="questionList.length"></question-content>
       <no-content v-show="!questionList.length" :type="listType"></no-content>
@@ -14,6 +14,10 @@ import QuestionHeader from "@/components/question/question-header";
 import QuestionContent from "@/components/question/question-content";
 import QuestionFooter from "@/components/question/question-footer";
 import noContent from "@/components/question/no-content";
+
+import { mapGetters, mapActions } from 'vuex';
+
+let titleArray = ["", "", "免费体验", "错题集", "收藏夹"];
 export default {
   components: {
     QuestionHeader,
@@ -23,14 +27,33 @@ export default {
   },
   data() {
     return {
+      currentTitle: "试题集",
       listType: 1,   // 1: 正常做题; 2: 免费体验; 3: 错题集; 4: 收藏夹
-      questionList: [1],
+      // questionList: [1],
+    }
+  },
+  computed: {
+    ...mapGetters(['questionList', 'currentQuestion', 'currentQuestionIndex', 'questionTotal'])
+  },
+  created() {
+    this.listType = this.$route.query.listType || 1;
+    this.currentTitle = this.$route.query.currentTitle || this.currentTitle;
+    this.init();
+  },
+  methods: {
+    ...mapActions(['getQuestionList']),
+    init() {
+      if(this.listType >= 2 && this.listType <= 4) {
+        this.currentTitle = titleArray[this.listType];
+      }
+      this.getQuestionList();
     }
   },
 }
 </script>
 <style lang="less" scoped>
 .question-detail-wrapper {
+  padding-top: 68px;
   .pt-60 {
     padding-bottom: 60px;
   }