学习助理整合

src/views/questioncenter/LearnHelper.vue

@@ -24,49 +24,6 @@
           学习记录
         </div>
       </div>
-      <div class="radio_contianer" v-show="tabActive == 0">
-        <div style="margin-bottom: 16px">
-          <span>类型</span>
-          <el-radio-group v-model="form.type" size="mini" @change="toggleType">
-            <el-radio-button
-              :label="item.type"
-              v-for="item in types"
-              :key="item.type"
-              >{{ item.name }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px">
-          <span>学科</span>
-          <el-radio-group
-            v-model="form.subjectName"
-            size="mini"
-            @change="toggleSub"
-          >
-            <el-radio-button
-              :label="item"
-              v-for="(item, index) in subjects"
-              :key="index"
-              >{{ item }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px" v-if="form.type == 'question'">
-          <span>题型</span>
-          <el-radio-group
-            v-model="form.qtype"
-            size="mini"
-            @change="toggleQueType"
-          >
-            <el-radio-button
-              :label="item"
-              v-for="(item, index) in queTypes"
-              :key="index"
-              >{{ item }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-      </div>
       <div class="radio_contianer" v-show="tabActive == 1">
         <div style="margin-bottom: 16px">
           <span>科目</span>
@@ -101,134 +58,135 @@
       </div>
     </el-card>
     <!-- 收藏夹 -->
-    <div class="shoucan_content" v-show="tabActive == 0">
-      <!-- 试题收藏 -->
-      <div class="topic" v-show="form.type == 'question'">
-        <!-- 题目 -->
-        <div class="paper_questions" id="collect-question">
-          <div
-            class="que_item"
-            v-for="(item, index) in collectQue"
-            :key="item.id"
-          >
-            <div class="que_content" style="display: flex">
-              <div>{{ index + 1 }}.</div>
-              <div v-html="item.title"></div>
-            </div>
-            <div class="option" v-if="item.optionA">
-              <div style="margin-right: 5px">A:</div>
-              <div v-html="item.optionA"></div>
-            </div>
-            <div class="option" v-if="item.optionB">
-              <div style="margin-right: 5px">B:</div>
-              <div v-html="item.optionB"></div>
-            </div>
-            <div class="option" v-if="item.optionC">
-              C:
-              <div v-html="item.optionC"></div>
-            </div>
-            <div class="option" v-if="item.optionD">
-              <div style="margin-right: 5px">D:</div>
-              <div v-html="item.optionD"></div>
-            </div>
-            <div class="que_footer">
-              <div class="spans">
-                <span class="id">ID: {{ item.id }}</span>
-                <span>题型： {{ item.qtpye }}</span>
-                <span>难度： 一般</span>
-              </div>
-              <div class="operation">
-                <div class="shoucan">
-                  <div
-                    v-show="item.collect"
-                    @click="toCancelCollectQue(item)"
-                    style="display: flex; align-items: center"
-                  >
-                    <img
-                      src="@/assets/images/icon_shoucang_s.png"
-                      style="margin-right: 8px"
-                    />
-                    <span>已收藏</span>
-                  </div>
-                  <div
-                    v-show="!item.collect"
-                    @click="toCollectQue(item)"
-                    style="display: flex; align-items: center"
-                  >
-                    <img
-                      src="@/assets/images/icon_shoucang_n.png"
-                      style="margin-right: 8px"
-                    />
-                    <span>收藏</span>
-                  </div>
-                </div>
-                <div class="detail" @click="viewDetail(index)">
-                  <img src="@/assets/images/icon_chakan.png" alt="" />
-                  <span>查看解析>></span>
-                </div>
-                <div class="addQue">
-                  <i
-                    class="el-icon-shopping-cart-2"
-                    style="margin-right: 5px"
-                  ></i>
-                  <span>加入选题</span>
-                </div>
-              </div>
-            </div>
-            <div
-              class="parse"
-              v-show="item.createTime"
-              v-html="item.parse"
-            ></div>
-          </div>
-        </div>
-      </div>
-      <!-- 试卷收藏 -->
-      <div class="exam" v-show="form.type == 'paper'">
-        <div class="paper_container">
-          <div class="paper_item" v-for="item in collectPaper" :key="item.id">
-            <div class="tit">
-              <div>{{ item.papername }}</div>
-              <div class="viewCount">
-                <img src="@/assets/images/icon_eye.png" alt="" />
-                <span>{{item.readNum}}人已预览</span>
-              </div>
-            </div>
-            <div class="opera">
-              <div class="view" @click="toPreView(item.id, item.papername)">
-                <img
-                  style="margin-right: 8px"
-                  src="@/assets/images/icon_view.png"
-                  alt=""
-                />
-                <span>预览</span>
-              </div>
-              <div class="download">下载</div>
-              <div>
-                <img
-                  src="@/assets/images/icon_shoucang_s.png"
-                  alt=""
-                  style="margin-right: 8px"
-                />
-                <span>已收藏</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 分页 -->
-      <div style="display: flex; justify-content: center; margin-top: 92px">
-        <el-pagination
-          layout="prev, pager, next"
-          :total="total"
-          :current-page="pageNum"
-          :page-size="pageSize"
-          @prev-click="prev"
-          @next-click="next"
-        >
-        </el-pagination>
-      </div>
-    </div>
+    <collect v-if="tabActive == 0"></collect>
+<!--    <div class="shoucan_content" v-show="tabActive == 0">-->
+<!--      &lt;!&ndash; 试题收藏 &ndash;&gt;-->
+<!--      <div class="topic" v-show="form.type == 'question'">-->
+<!--        &lt;!&ndash; 题目 &ndash;&gt;-->
+<!--        <div class="paper_questions" id="collect-question">-->
+<!--          <div-->
+<!--            class="que_item"-->
+<!--            v-for="(item, index) in collectQue"-->
+<!--            :key="item.id"-->
+<!--          >-->
+<!--            <div class="que_content" style="display: flex">-->
+<!--              <div>{{ index + 1 }}.</div>-->
+<!--              <div v-html="item.title"></div>-->
+<!--            </div>-->
+<!--            <div class="option" v-if="item.optionA">-->
+<!--              <div style="margin-right: 5px">A:</div>-->
+<!--              <div v-html="item.optionA"></div>-->
+<!--            </div>-->
+<!--            <div class="option" v-if="item.optionB">-->
+<!--              <div style="margin-right: 5px">B:</div>-->
+<!--              <div v-html="item.optionB"></div>-->
+<!--            </div>-->
+<!--            <div class="option" v-if="item.optionC">-->
+<!--              C:-->
+<!--              <div v-html="item.optionC"></div>-->
+<!--            </div>-->
+<!--            <div class="option" v-if="item.optionD">-->
+<!--              <div style="margin-right: 5px">D:</div>-->
+<!--              <div v-html="item.optionD"></div>-->
+<!--            </div>-->
+<!--            <div class="que_footer">-->
+<!--              <div class="spans">-->
+<!--                <span class="id">ID: {{ item.id }}</span>-->
+<!--                <span>题型： {{ item.qtpye }}</span>-->
+<!--                <span>难度： 一般</span>-->
+<!--              </div>-->
+<!--              <div class="operation">-->
+<!--                <div class="shoucan">-->
+<!--                  <div-->
+<!--                    v-show="item.collect"-->
+<!--                    @click="toCancelCollectQue(item)"-->
+<!--                    style="display: flex; align-items: center"-->
+<!--                  >-->
+<!--                    <img-->
+<!--                      src="@/assets/images/icon_shoucang_s.png"-->
+<!--                      style="margin-right: 8px"-->
+<!--                    />-->
+<!--                    <span>已收藏</span>-->
+<!--                  </div>-->
+<!--                  <div-->
+<!--                    v-show="!item.collect"-->
+<!--                    @click="toCollectQue(item)"-->
+<!--                    style="display: flex; align-items: center"-->
+<!--                  >-->
+<!--                    <img-->
+<!--                      src="@/assets/images/icon_shoucang_n.png"-->
+<!--                      style="margin-right: 8px"-->
+<!--                    />-->
+<!--                    <span>收藏</span>-->
+<!--                  </div>-->
+<!--                </div>-->
+<!--                <div class="detail" @click="viewDetail(index)">-->
+<!--                  <img src="@/assets/images/icon_chakan.png" alt="" />-->
+<!--                  <span>查看解析>></span>-->
+<!--                </div>-->
+<!--                <div class="addQue">-->
+<!--                  <i-->
+<!--                    class="el-icon-shopping-cart-2"-->
+<!--                    style="margin-right: 5px"-->
+<!--                  ></i>-->
+<!--                  <span>加入选题</span>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--            </div>-->
+<!--            <div-->
+<!--              class="parse"-->
+<!--              v-show="item.createTime"-->
+<!--              v-html="item.parse"-->
+<!--            ></div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      &lt;!&ndash; 试卷收藏 &ndash;&gt;-->
+<!--      <div class="exam" v-show="form.type == 'paper'">-->
+<!--        <div class="paper_container">-->
+<!--          <div class="paper_item" v-for="item in collectPaper" :key="item.id">-->
+<!--            <div class="tit">-->
+<!--              <div>{{ item.papername }}</div>-->
+<!--              <div class="viewCount">-->
+<!--                <img src="@/assets/images/icon_eye.png" alt="" />-->
+<!--                <span>{{item.readNum}}人已预览</span>-->
+<!--              </div>-->
+<!--            </div>-->
+<!--            <div class="opera">-->
+<!--              <div class="view" @click="toPreView(item.id, item.papername)">-->
+<!--                <img-->
+<!--                  style="margin-right: 8px"-->
+<!--                  src="@/assets/images/icon_view.png"-->
+<!--                  alt=""-->
+<!--                />-->
+<!--                <span>预览</span>-->
+<!--              </div>-->
+<!--              <div class="download">下载</div>-->
+<!--              <div>-->
+<!--                <img-->
+<!--                  src="@/assets/images/icon_shoucang_s.png"-->
+<!--                  alt=""-->
+<!--                  style="margin-right: 8px"-->
+<!--                />-->
+<!--                <span>已收藏</span>-->
+<!--              </div>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      &lt;!&ndash; 分页 &ndash;&gt;-->
+<!--      <div style="display: flex; justify-content: center; margin-top: 92px">-->
+<!--        <el-pagination-->
+<!--          layout="prev, pager, next"-->
+<!--          :total="total"-->
+<!--          :current-page="pageNum"-->
+<!--          :page-size="pageSize"-->
+<!--          @prev-click="prev"-->
+<!--          @next-click="next"-->
+<!--        >-->
+<!--        </el-pagination>-->
+<!--      </div>-->
+<!--    </div>-->
     <!-- 错题本 -->
     <div class="mis_content" v-show="tabActive == 1">
       <div class="topic">
@@ -469,6 +427,7 @@
   </div>
 </template>
 <script>
+import Collect from './components/collect'
 import {
   favSubjects,
   favQueTypes,
@@ -502,6 +461,7 @@ var myChart3;
 var myChart4;
 var flag = 1;
 export default {
+  components: {Collect},
   data() {
     return {
       tabActive: 0,
@@ -766,8 +726,6 @@ export default {
       this.switchTab(1);
     } else if (this.tabActive == 2) {
       this.switchTab(2);
-    } else {
-      this.toggleType("question");
     }
   },
   methods: {
@@ -798,31 +756,6 @@ export default {
         this.searchData();
       }
     },
-    toggleType(e) {
-      this.form.type = e;
-      this.getSubjects();
-    },
-    // 收藏涉及的学科
-    getSubjects() {
-      favSubjects({ type: this.form.type }).then((res) => {
-        console.log(res);
-        this.form.subjectName = res.data[0];
-        this.subjects = res.data;
-        if (this.form.type == "question") {
-          this.getFavQue();
-        } else if (this.form.type == "paper") {
-          this.getFavPapers();
-        }
-      });
-    },
-    // 收藏涉及的题型
-    getFavQue() {
-      favQueTypes({ subjectName: this.form.subjectName }).then((res) => {
-        this.form.qtype = res.data[0];
-        this.queTypes = res.data;
-        this.getFavQuestions();
-      });
-    },
     //  错题涉及的题型
     getWrongTypes() {
       wrongTypes({ subjectName: this.form.worngSubjectName }).then((res) => {
@@ -872,36 +805,6 @@ export default {
         console.log(res);
       });
     },
-    getFavPapers() {
-      favPapers({
-        subjectName: this.form.subjectName,
-        pageNum: this.pageNum,
-        pageSize: this.pageSize,
-      }).then((res) => {
-        console.log(res);
-        this.total = res.total;
-        this.collectPaper = res.rows;
-      });
-    },
-    toggleSub() {
-      this.pageNum == 1;
-      if (this.form.type == "paper") {
-        this.getFavPapers();
-      } else {
-        this.getFavQue();
-      }
-    },
-    toggleQueType() {
-      this.pageNum == 1;
-      this.getFavQuestions();
-    },
-    viewDetail(index) {
-      if (this.collectQue[index].createTime) {
-        this.collectQue[index].createTime = false;
-      } else {
-        this.collectQue[index].createTime = true;
-      }
-    },
     viewWrongDetail(index) {
       if (this.wrongQues[index].createTime) {
         this.wrongQues[index].createTime = false;
@@ -909,13 +812,6 @@ export default {
         this.wrongQues[index].createTime = true;
       }
     },
-    // 跳转到预览页面
-    toPreView(paperId, paperName) {
-      this.$router.push({
-        path: "/question-center/bestPaper/preview",
-        query: { paperId, paperName },
-      });
-    },
     prev() {
       this.pageNum = this.pageNum - 1;
       if (this.form.type == "question") {

src/views/questioncenter/components/collect.vue

@@ -1,5 +1,50 @@
 <template>
   <div class="shoucan_content">
+    <!-- 筛选   -->
+    <div class="radio_contianer">
+      <div class="mt15" >
+        <span class="mr8">类型</span>
+        <el-radio-group v-model="form.type" size="mini" @change="toggleType">
+          <el-radio-button
+            :label="item.type"
+            v-for="item in types"
+            :key="item.type"
+          >{{ item.name }}</el-radio-button
+          >
+        </el-radio-group>
+      </div>
+      <div class="mt15">
+        <span class="mr8">学科</span>
+        <el-radio-group
+          v-model="form.subjectName"
+          size="mini"
+          @change="toggleSub"
+        >
+          <el-radio-button
+            :label="item"
+            v-for="(item, index) in subjects"
+            :key="index"
+          >{{ item }}</el-radio-button
+          >
+        </el-radio-group>
+      </div>
+      <div class="mt15" v-if="form.type == 'question'">
+        <span class="mr8">题型</span>
+        <el-radio-group
+          v-model="form.qtype"
+          size="mini"
+          @change="toggleQueType"
+        >
+          <el-radio-button
+            :label="item"
+            v-for="(item, index) in queTypes"
+            :key="index"
+          >{{ item }}</el-radio-button
+          >
+        </el-radio-group>
+      </div>
+    </div>
+
     <!-- 试题收藏 -->
     <div class="topic" v-show="form.type == 'question'">
       <!-- 题目 -->
@@ -95,7 +140,7 @@
           <div class="opera">
             <div class="view" @click="toPreView(item.id, item.papername)">
               <img
-                style="margin-right: 8px"
+                class="mr8"
                 src="@/assets/images/icon_view.png"
                 alt=""
               />
@@ -106,7 +151,7 @@
               <img
                 src="@/assets/images/icon_shoucang_s.png"
                 alt=""
-                style="margin-right: 8px"
+                class="mr8"
               />
               <span>已收藏</span>
             </div>
@@ -115,16 +160,300 @@
       </div>
     </div>
     <!-- 分页 -->
-    <div style="display: flex; justify-content: center; margin-top: 92px">
-      <el-pagination
-        layout="prev, pager, next"
-        :total="total"
-        :current-page="pageNum"
-        :page-size="pageSize"
-        @prev-click="prev"
-        @next-click="next"
-      >
-      </el-pagination>
-    </div>
+    <pagination
+      v-show="pageForm.total > 0"
+      :total="pageForm.total"
+      :page.sync="pageForm.pageNum"
+      :limit.sync="pageForm.pageSize"
+      :page-size="10"
+      @pagination="onChangePage"
+    />
+
   </div>
 </template>
+<script>
+import { favPapers, favQuestions, favQueTypes, favSubjects, queCancelCollect, queCollect } from '@/api/webApi/webQue'
+
+export default {
+  created() {
+    this.getSubjects()
+  },
+  data() {
+    return {
+      form: {
+        type: "question",
+        subjectName: "",
+        wrongType: "",
+      },
+      pageForm:{
+        total:0,
+        pageSize:10,
+        pageNum:1,
+      },
+      types: [
+        { type: "question", name: "试题收藏" },
+        { type: "paper", name: "试卷收藏" },
+      ],
+      subjects: [],
+      queTypes: [],
+      collectQue: [],
+      collectPaper: [],
+    }
+  },
+  methods: {
+    onChangePage(){
+      this.getFavQuestions()
+    },
+    toggleSub() {
+      this.pageForm.pageNum == 1;
+      if (this.form.type == "paper") {
+        this.getFavPapers();
+      } else {
+        this.getFavQue();
+      }
+    },
+    // 收藏的问题列表
+    getFavQuestions() {
+      favQuestions({
+        subjectName: this.form.subjectName,
+        qtype: this.form.qtype,
+        pageNum: this.pageForm.pageNum,
+        pageSize: this.pageForm.pageSize,
+      }).then((res) => {
+        this.pageForm.total = res.total;
+        this.collectQue = res.rows;
+        this.$nextTick(_=>this.mxGlobal.MathQueue('collect-question'))
+        console.log(res);
+      });
+    },
+    // 跳转到预览页面
+    toPreView(paperId, paperName) {
+      this.$router.push({
+        path: "/question-center/bestPaper/preview",
+        query: { paperId, paperName },
+      });
+    },
+    toggleType(e) {
+      this.form.type = e;
+      this.getSubjects();
+    },
+    toCollectQue(item) {
+      queCollect({ questionId: item.id }).then((res) => {
+        item.collect = !item.collect;
+        this.msgSuccess("收藏成功");
+        console.log(res);
+      });
+    },
+    toCancelCollectQue(item) {
+      queCancelCollect({ questionId: item.id }).then((res) => {
+        item.collect = !item.collect;
+        this.msgSuccess("取消收藏成功");
+        console.log(res);
+      });
+    },
+    toggleQueType() {
+      this.pageForm.pageNum = 1;
+      this.getFavQuestions();
+    },
+    viewDetail(index) {
+      if (this.collectQue[index].createTime) {
+        this.collectQue[index].createTime = false;
+      } else {
+        this.collectQue[index].createTime = true;
+      }
+    },
+    // 收藏涉及的学科
+    getSubjects() {
+      favSubjects({ type: this.form.type }).then((res) => {
+        console.log(res);
+        this.form.subjectName = res.data[0];
+        this.subjects = res.data;
+        if (this.form.type == "question") {
+          this.getFavQue();
+        } else if (this.form.type == "paper") {
+          this.getFavPapers();
+        }
+      });
+    },
+    // 收藏涉及的题型
+    getFavQue() {
+      favQueTypes({ subjectName: this.form.subjectName }).then((res) => {
+        this.form.qtype = res.data[0];
+        this.queTypes = res.data;
+        this.getFavQuestions();
+      });
+    },
+    // 收藏涉及的试卷
+    getFavPapers() {
+      favPapers({
+        subjectName: this.form.subjectName,
+        pageNum: this.pageForm.pageNum,
+        pageSize: this.pageForm.pageSize,
+      }).then((res) => {
+        console.log(res);
+        this.pageForm.total = res.total;
+        this.collectPaper = res.rows;
+      });
+    },
+  }
+}
+</script>
+<style  lang="scss">
+  .radio_contianer > div {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .option {
+    padding-left: 33px;
+    display: flex;
+    margin-bottom: 10px;
+  }
+  .radio_contianer > div > span {
+    flex-shrink: 0;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #232323;
+    line-height: 20px;
+    height: 20px;
+    width: 50px;
+  }
+  .parse {
+    padding: 0 30px;
+  }
+  .que_item {
+    border-radius: 1px;
+    border: 1px solid #dedede;
+    margin-bottom: 8px;
+  }
+  .que_content {
+    padding: 12px 24px 0 33px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #4c4c4c;
+    line-height: 27px;
+    margin-bottom: 40px;
+  }
+  .que_footer {
+    border-top: 1px solid #dedede;
+    padding-left: 33px;
+    overflow: hidden;
+    padding-bottom: 23px;
+    padding-top: 21px;
+  }
+  .que_footer .spans {
+    float: left;
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #979797;
+    line-height: 20px;
+  }
+  .que_footer .spans > span {
+    margin-right: 20px;
+  }
+  .operation {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #47c6a2;
+    line-height: 20px;
+    justify-content: flex-end;
+  }
+  .operation > div {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .operation .shoucan {
+    margin-right: 46px;
+  }
+  .operation .detail span {
+    border-radius: 1px;
+    border-bottom: 1px solid #47c6a2;
+  }
+  .operation .detail {
+    margin-right: 32px;
+  }
+  .operation > div > img {
+    margin-right: 10px;
+  }
+  .operation .addQue {
+    padding: 7px;
+    border-radius: 4px;
+    border: 1px solid #979797;
+    margin-right: 24px;
+  }
+  .paper_item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 30px;
+    margin-bottom: 40px;
+  }
+  .paper_item .tit {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #343434;
+    line-height: 22px;
+  }
+  .paper_item .viewCount {
+    margin-top: 16px;
+    color: #9f9f9f;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+  }
+  .paper_item .viewCount img {
+    margin-right: 9px;
+  }
+  .paper_item .opera {
+    display: flex;
+    justify-content: space-between;
+  }
+  .paper_item .opera > div {
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .paper_item .opera .view {
+    color: #47c6a2;
+    border-radius: 4px;
+    border: 1px solid #47c6a2;
+    padding: 6px 12px;
+  }
+  .paper_item .opera .download {
+    border-radius: 4px;
+    border: 1px solid #47c6a2;
+    padding: 6px 22px;
+    background: #47c6a2;
+    color: white;
+    margin: 0 24px;
+  }
+  .paper_item .opera > div:last-child {
+    color: #47c6a2;
+  }
+  ::v-deep{
+    .radio_contianer .el-radio-button__inner {
+      border-left: 1px solid #dcdfe6;
+    }
+    .radio_contianer .el-radio-button .el-radio-button__inner {
+      border-radius: 16px;
+      margin-bottom: 5px;
+    }
+    .radio_contianer .el-radio-button:first-child:last-child .el-radio-button__inner {
+      border-radius: 16px;
+    }
+    .radio_contianer .el-radio-button {
+      margin-right: 8px;
+    }
+  }
+
+</style>