收藏样式修改

src/components/common/CollectionBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="col" :class="showT ? 'tuck' : 'cancel'">
+  <div class="col" :class="showT ? 'tuck' : 'cancel'" @click="collect">
     <div v-if="showT"><img src="@/assets/col.png" alt="" />收藏</div>
     <div v-else><img src="@/assets/cancelcol.png" alt="" />取消收藏</div>
   </div>
@@ -12,10 +12,41 @@ export default {
       type: Boolean,
       default: true,
     },
+    param: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
   },
   data() {
     return {};
   },
+  methods: {
+    collect() {
+      if (this.showT) {
+        let { questionId, goodsId, orderGoodsId, examId } = this.param;
+        this.$request
+          .collectQuestion({
+            examId,
+            questionId,
+            goodsId,
+            orderGoodsId,
+          })
+          .then((res) => {
+            this.$message.success("收藏成功");
+            this.$emit("sumit");
+          });
+      } else {
+        this.$request
+          .deleteCollectQuestion(this.param.collectQuestionId)
+          .then((res) => {
+            this.$message.success("取消收藏成功");
+            this.$emit("sumit"); 
+          });
+      }
+    },
+  },
 };
 </script>
 
@@ -23,9 +54,12 @@ export default {
 .col {
   display: flex;
   justify-content: center;
+  margin-left: 32px;
+  margin-top: 12px;
+  border-radius: 4px;
+  cursor: pointer;
   div {
     height: 30px;
-    border-radius: 4px 4px 4px 4px;
     line-height: 30px;
     display: flex;
     align-items: center;
@@ -39,6 +73,7 @@ export default {
   width: 68px;
   border: 1px solid #3f8dfd;
   color: #3f8dfd;
+  background: #f2f7ff;
 }
 .cancel {
   width: 86px;

src/pages/bank-exam/index.vue

@@ -1070,6 +1070,11 @@
                     </div>
                   </template>
                 </div>
+                <Collection-box
+                  :param="param"
+                  @sumit="getCollectInfo(current)"
+                  :showT="!collectList[current]"
+                ></Collection-box>
               </div>
               <div class="right-box">
                 <div class="right-box__header">
@@ -1160,6 +1165,7 @@
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
+import CollectionBox from "@/components/common/CollectionBox.vue";
 import { mapMutations } from "vuex";
 export default {
   name: "BankExplain",
@@ -1167,6 +1173,7 @@ export default {
     Footer,
     Header,
     ToolBar,
+    CollectionBox,
   },
   data() {
     return {
@@ -1568,7 +1575,7 @@ export default {
 
           this.questionList = res.data;
           this.lastCount = this.questionList.length;
-          this.getCollectInfo(this.current)
+          this.getCollectInfo(this.current);
           await this.examRecord();
         });
     },
@@ -1778,7 +1785,7 @@ export default {
       //       chapterExamId: this.chapterId || 0,
       //       questionIds: [this.questionList[questionIndex].questionId],
       //       recordId: this.recordId,
-              // type 1,
+      // type 1,
       //     })
       //     .then((res) => {});
       // }
@@ -2765,6 +2772,19 @@ export default {
         });
     },
   },
+  computed: {
+    param() {
+      return {
+        examId: this.examId,
+        questionId: this.questionList[this.current].questionId,
+        goodsId: this.goodsId,
+        orderGoodsId: this.orderGoodsId,
+        collectQuestionId: this.collectList[this.current]
+          ? this.collectList[this.current].collectQuestionId
+          : undefined,
+      };
+    },
+  },
 };
 </script>
 

src/pages/subject/collect-bank.vue

@@ -906,7 +906,10 @@
                     </div>
                   </div>
                 </div>
-                <Collection-box></Collection-box>
+                <Collection-box
+                  @sumit="() => {}"
+                  :showT="!collectList[current]"
+                ></Collection-box>
               </div>
               <div class="right-box">
                 <div class="right-box__header">
@@ -1060,7 +1063,6 @@ export default {
      * 获取收藏信息
      */
     getCollectInfo(current) {
-      console.log(current, this.questionList, 888);
       this.$request
         .getCollectInfo({
           examId: this.examId,