新增取消收藏

src/pages/home/index.vue

@@ -36,7 +36,7 @@
                 <p style="max-width: 247px">{{ msgData.text }}</p>
                 <div class="toolbth" @click="newGoToStudy">立即学习</div>
                 <i
-                  style="font-size: 18px;cursor:pointer;"
+                  style="font-size: 18px; cursor: pointer"
                   class="el-icon-close"
                   @click="clearMsg"
                 ></i>
@@ -152,29 +152,6 @@
             <div class="left-box__header">课程导航</div>
             <div class="left-box__body">
               <div class="bg"></div>
-              <div class="slide-list">
-                <div
-                  class="slide-list__item"
-                  v-for="(type, typeItem) in typeList"
-                  :key="'type' + typeItem"
-                >
-                  <div class="title" @click="goCourse(type)">
-                    {{ type.educationName }}
-                  </div>
-                  <ul class="nav">
-                    <li
-                      v-for="(slideItem, slideIndex) in slideList[typeItem]"
-                      :key="'item' + slideIndex"
-                      @click="goCourse(slideItem)"
-                    >
-                      <div class="text">
-                        <!-- {{ slideItem.projectName }}-{{ slideItem.businessName }} -->
-                        {{ slideItem.aliasName }}
-                      </div>
-                    </li>
-                  </ul>
-                </div>
-              </div>
               <ul class="list">
                 <li v-for="(item, index) in typeList" :key="index">
                   <div class="text">
@@ -187,10 +164,10 @@
                         class="item"
                         v-for="(aItem, aIndex) in item.list"
                         :key="'aItem' + aIndex"
-                        >
+                      >
                         <!-- {{ aItem.projectName }}-{{ aItem.businessName }} -->
                         {{ aItem.aliasName }}
-                        </a>
+                      </a>
                     </div>
                   </div>
                 </li>
@@ -423,14 +400,9 @@
             </template>
           </ul>
         </div> -->
-        
+
         <div class="course__body">
-          <p
-            v-if="
-              !goodsList1.length
-            "
-            class="text_align"
-          >
+          <p v-if="!goodsList1.length" class="text_align">
             该培训项目无推荐课程
           </p>
           <ul v-else class="list clearfix">
@@ -457,7 +429,6 @@
         <!-- <div class="course__footer">
           <div class="btn" @click="go('/course-list')">查看更多</div>
         </div> -->
-
       </div>
     </section>
 
@@ -518,29 +489,20 @@
           </ul>
         </div> -->
 
-        
         <div class="bank__body">
-          <p
-            v-if="
-              !goodsList2.length
-            "
-            class="text_align"
-          >
+          <p v-if="!goodsList2.length" class="text_align">
             该培训项目无推荐题库
           </p>
           <ul v-else class="list clearfix">
             <template v-for="(item, index) in goodsList2">
               <!-- @click="goodsDetail(item, 2)" -->
-              <li
-                class="bank-item"
-                :key="index"
-              >
+              <li class="bank-item" :key="index">
                 <GoodsItem :item="item"></GoodsItem>
               </li>
             </template>
           </ul>
         </div>
-        
+
         <div class="pagination">
           <el-pagination
             @current-change="currentChangeBank"
@@ -552,7 +514,6 @@
           >
           </el-pagination>
         </div>
-        
       </div>
     </section>
 
@@ -578,7 +539,11 @@
             </el-input
           ></el-form-item>
           <el-form-item prop="idCard">
-            <el-input placeholder="身份证号码" v-model="bindForm.idCard" maxlength="18">
+            <el-input
+              placeholder="身份证号码"
+              v-model="bindForm.idCard"
+              maxlength="18"
+            >
             </el-input
           ></el-form-item>
           <el-button
@@ -704,7 +669,6 @@ export default {
       goodsList1: [{}], //推荐课程列表
       goodsList2: [{}], //推荐题库列表
       typeList: [],
-      slideList: [],
       active1: 0, //推荐课程index
       active2: 0, //推荐题库index
       searchKey: "",
@@ -715,31 +679,31 @@ export default {
         pageSize: 10,
       },
       paramList: [
-				{
-					pageNum: 1,
-					pageSize: 15,
-					total: 0,
-				},
-				{
-					pageNum: 1,
-					pageSize: 15,
-					total: 0,
-				}
-			],
+        {
+          pageNum: 1,
+          pageSize: 15,
+          total: 0,
+        },
+        {
+          pageNum: 1,
+          pageSize: 15,
+          total: 0,
+        },
+      ],
       total1: 0,
-			total2: 0,
+      total2: 0,
       courseName: [],
-			bankName: [],
-			couIndex: 0,
-			bankIndex: 0,
-			courseId: '',
-			bankId: '',
+      bankName: [],
+      couIndex: 0,
+      bankIndex: 0,
+      courseId: "",
+      bankId: "",
     };
   },
   created() {
-    this.goodsList1 = []
-		this.goodsList2 = []
-		this.courseLists()
+    this.goodsList1 = [];
+    this.goodsList2 = [];
+    this.courseLists();
   },
   mounted() {
     if (this.userInfo) {
@@ -763,93 +727,105 @@ export default {
   },
   methods: {
     //课程
-		 courseLists() {			
-			this.$request.appCommonActivityRecommendList({ platform: 2, status: 1 }).then(async (res) => {
-        // return
-				if (res.code == 200) {
-					let list = res.rows || []
-					//课程
-					this.courseName = list.filter(x => x.type == 1).sort((a,b) => a.sort - b.sort).map(x => {
-						return {
-							name: x.name,
-							recommendId: x.recommendId
-						}
-					});
-					console.log('couIndex', this.couIndex, this.courseName)
-					//题库
-					this.bankName = list.filter(x => x.type == 2).sort((a,b) => a.sort - b.sort).map(x => {
-						return {
-							name: x.name,
-							recommendId: x.recommendId
-						}
-					});
-					if (this.courseName.length) {
-						this.courseId = this.courseName[0].recommendId
-						let list1 = await this.getGoodsList(this.courseName[0].recommendId, 0)
-						this.goodsList1.push(...list1)
-					}
-					
-					if (this.bankName.length) {
-						this.bankId = this.bankName[0].recommendId
-						let list2 = await this.getGoodsList(this.bankName[0].recommendId, 1)
-						this.goodsList2.push(...list2)
-					}
-
-				}
-			});
-		},
-    getGoodsList(recommendId, num) {	
-			return new Promise((resolve, reject) => {
-				 this.$axios({
-					url: `/app/common/activity/recommend/goodsList`,
-					method: 'get',
-					params: {
-						pageNum: this.paramList[num].pageNum,
-						pageSize: this.paramList[num].pageSize,
-						recommendId: recommendId
-					},
-					noToken: true
-				}).then((res) => {
-					if (res.code == 200) {
-						this.paramList[num].total = res.total
-						resolve(res.rows)
-					}	
-				})
-			})
-			 
-		},
+    courseLists() {
+      this.$request
+        .appCommonActivityRecommendList({ platform: 2, status: 1 })
+        .then(async (res) => {
+          // return
+          if (res.code == 200) {
+            let list = res.rows || [];
+            //课程
+            this.courseName = list
+              .filter((x) => x.type == 1)
+              .sort((a, b) => a.sort - b.sort)
+              .map((x) => {
+                return {
+                  name: x.name,
+                  recommendId: x.recommendId,
+                };
+              });
+            console.log("couIndex", this.couIndex, this.courseName);
+            //题库
+            this.bankName = list
+              .filter((x) => x.type == 2)
+              .sort((a, b) => a.sort - b.sort)
+              .map((x) => {
+                return {
+                  name: x.name,
+                  recommendId: x.recommendId,
+                };
+              });
+            if (this.courseName.length) {
+              this.courseId = this.courseName[0].recommendId;
+              let list1 = await this.getGoodsList(
+                this.courseName[0].recommendId,
+                0
+              );
+              this.goodsList1.push(...list1);
+            }
+
+            if (this.bankName.length) {
+              this.bankId = this.bankName[0].recommendId;
+              let list2 = await this.getGoodsList(
+                this.bankName[0].recommendId,
+                1
+              );
+              this.goodsList2.push(...list2);
+            }
+          }
+        });
+    },
+    getGoodsList(recommendId, num) {
+      return new Promise((resolve, reject) => {
+        this.$axios({
+          url: `/app/common/activity/recommend/goodsList`,
+          method: "get",
+          params: {
+            pageNum: this.paramList[num].pageNum,
+            pageSize: this.paramList[num].pageSize,
+            recommendId: recommendId,
+          },
+          noToken: true,
+        }).then((res) => {
+          if (res.code == 200) {
+            this.paramList[num].total = res.total;
+            resolve(res.rows);
+          }
+        });
+      });
+    },
     async currentChangeCou(val) {
-      console.log('vallll', val)
-      this.paramList[0].pageNum = val
-      this.goodsList1 = []
-      let list1 = await this.getGoodsList(this.courseId, 0)
-      this.goodsList1.push(...list1)
+      console.log("vallll", val);
+      this.paramList[0].pageNum = val;
+      this.goodsList1 = [];
+      let list1 = await this.getGoodsList(this.courseId, 0);
+      this.goodsList1.push(...list1);
     },
     async changeCou(recommendId, index) {
-			this.couIndex = index
-			this.courseId = recommendId
-			this.paramList[0].pageNum = 1
-      this.paramList[0].currentPage = 1
-			this.goodsList1 = []
-			let list1 = await this.getGoodsList(recommendId, 0)
-			this.goodsList1.push(...list1)
-		},
+      this.couIndex = index;
+      this.courseId = recommendId;
+      this.paramList[0].pageNum = 1;
+      this.paramList[0].currentPage = 1;
+      this.goodsList1 = [];
+      let list1 = await this.getGoodsList(recommendId, 0);
+      this.goodsList1.push(...list1);
+    },
     async currentChangeBank(val) {
-      console.log('val--', val)
-      this.paramList[1].pageNum = val
-      this.goodsList2 = []
-      let list2 = await this.getGoodsList(this.bankId, 1)
-      this.goodsList2.push(...list2)
+      console.log("val--", val);
+      this.paramList[1].pageNum = val;
+      this.goodsList2 = [];
+      let list2 = await this.getGoodsList(this.bankId, 1);
+      this.goodsList2.push(...list2);
     },
     async changebank(recommendId, index) {
-			this.bankIndex = index
-			this.bankId = recommendId
-			this.paramList[1].pageNum = 1
-      this.paramList[1].currentPage = 1
-			this.goodsList2 = []
-			let list2 = await this.getGoodsList(recommendId, 1)
-			this.goodsList2.push(...list2)
-		},
+      this.bankIndex = index;
+      this.bankId = recommendId;
+      this.paramList[1].pageNum = 1;
+      this.paramList[1].currentPage = 1;
+      this.goodsList2 = [];
+      let list2 = await this.getGoodsList(recommendId, 1);
+      this.goodsList2.push(...list2);
+    },
     /**
      * 关闭消息
      */
@@ -1117,7 +1093,6 @@ export default {
       localStorage.setItem("user_account", res.data.user_account);
       localStorage.setItem("token", res.data.token);
       if (res.data.full_info) {
-        
         this.getInfo();
       } else {
         this.indexUserAccount = res.data.user_account;
@@ -1259,35 +1234,15 @@ export default {
     educationTypeList() {
       this.$request.educationTypeList().then((res) => {
         this.typeList = res.rows.slice(0, 5);
-        this.typeList.forEach((typeItem, index) => {
-          this.businessList(typeItem.id, index);
-        });
+        this.typeList.map(this.businessList);
       });
     },
 
-    businessList(educationId, index) {
+    businessList(item) {
       this.$request
-        .businessList({ educationId })
+        .businessList({ educationId: item.id })
         .then((res) => {
-          let rows = res.rows.filter((item) => item.aliasName)
-          this.$set(this.slideList, index, rows);
-          if (rows.length >= 2) {
-            let newRows = rows.slice(0, 2);
-            let length = 0;
-            newRows.forEach((row) => {
-              let str = row.projectName + "-" + row.businessName;
-              length = length + str.length;
-            });
-
-            if (length >= 17) {
-              this.$set(this.typeList[index], "list", rows.slice(0, 1));
-            } else {
-              this.$set(this.typeList[index], "list", rows.slice(0, 2));
-            }
-          } else {
-            this.$set(this.typeList[index], "list", rows);
-          }
-           console.log('this.typeList:',this.slideList, this.typeList)
+          item.list = res.rows.filter((item) => item.aliasName);
         })
         .catch((err) => {
           console.log(err, "err");
@@ -1340,17 +1295,17 @@ export default {
         });
     },
     goCourse(item) {
-      console.log('sdsf', item)
+      console.log("sdsf", item);
       if (item.topicId) {
         this.$router.push({
           path: "/goodsTopic",
           query: {
             topicId: item.topicId,
           },
-        })
-        return
+        });
+        return;
       }
-      
+
       this.$router.push({
         path: "/course-list",
         query: {
@@ -1491,7 +1446,6 @@ export default {
               localStorage.setItem("token", res.data.token);
               this.$tools.setUuid(new Date().valueOf() + "");
               if (res.data.full_info) {
-                
                 this.getInfo();
               } else {
                 this.indexUserAccount = res.data.user_account;
@@ -1537,7 +1491,7 @@ export default {
      */
     getInfo() {
       this.$request
-        .getInfo({fromPlat: 2})
+        .getInfo({ fromPlat: 2 })
         .then((res) => {
           this.loginForm = {};
           this.loginSmsForm = {};
@@ -1806,68 +1760,6 @@ export default {
             background: rgba(0, 0, 0, 0.5);
             overflow: hidden;
 
-            &:hover {
-              overflow: visible;
-              .slide-list {
-                opacity: 1;
-                left: 100%;
-              }
-            }
-            .slide-list {
-              opacity: 0;
-              transition: all 0.3s;
-              width: 672px;
-              padding: 0;
-              background: rgba(255, 255, 255, 1);
-              position: absolute;
-              top: 0;
-              left: 0;
-              padding-left: 24px;
-              z-index: 10;
-
-              &__item {
-                min-height: 80px;
-                display: flex;
-                align-items: center;
-                border-bottom: 1px solid #ddd;
-
-                &:nth-last-of-type(1) {
-                  border: 0;
-                }
-                .title {
-                  cursor: pointer;
-                  color: #fff;
-                  width: 120px;
-                  height: 28px;
-                  border: 1px solid #ffffff;
-                  border-radius: 14px;
-                  background: #3f8dfd;
-                  line-height: 26px;
-                  text-align: center;
-                  border-radius: 15px;
-                  margin-right: 10px;
-                }
-
-                .nav {
-                  flex: 1;
-                  display: flex;
-                  flex-wrap: wrap;
-                  li {
-                    margin: 9px 24px 9px 0;
-                    display: flex;
-
-                    .text {
-                      cursor: pointer;
-                      font-size: 14px;
-                      font-family: Microsoft YaHei;
-                      font-weight: 400;
-                      color: #666;
-                    }
-                  }
-                }
-              }
-            }
-
             .bg {
               backdrop-filter: blur(10px);
               position: absolute;
@@ -1882,18 +1774,20 @@ export default {
               position: relative;
               z-index: 22;
               padding-left: 16px;
+              height: 100%;
+              overflow: auto;
               li {
-                padding: 12px 0;
-                height: 80px;
+                padding: 14px 0;
+                // height: 80px;
                 border-bottom: 1px solid rgba(255, 255, 255, 0.6);
-                display: flex;
-
+                // display: flex;
                 &:nth-last-of-type(1) {
                   border: 0;
                 }
 
                 .text {
-                  flex: 1;
+                  // flex: 1;
+                  // width: 100%;
                   &__title {
                     cursor: pointer;
                     font-size: 16px;
@@ -1904,6 +1798,9 @@ export default {
 
                   &__desc {
                     margin-top: 16px;
+                    // white-space: pre-line;
+                    display: flex;
+                    flex-wrap: wrap;
                     .item {
                       font-size: 14px;
                       font-family: Microsoft YaHei;
@@ -1914,6 +1811,33 @@ export default {
                   }
                 }
               }
+              &::-webkit-scrollbar {
+                width: 6px;
+
+                height: 16px;
+
+                background-color: transparent;
+
+                border-radius: 10px;
+              }
+
+              /*滚动条轨道*/
+
+              &::-webkit-scrollbar-track {
+                box-shadow: inset 0 0 5px transparent;
+
+                border-radius: 10px;
+
+                background: transparent;
+              }
+
+              /*滑块*/
+
+              &::-webkit-scrollbar-thumb {
+                border-radius: 10px;
+
+                background: #909090;
+              }
             }
           }
         }
@@ -2117,7 +2041,7 @@ export default {
       align-items: center;
       justify-content: space-between;
       padding-bottom: 15px;
-      border-bottom: 1px solid #DCDCDC;
+      border-bottom: 1px solid #dcdcdc;
       .lefts {
         display: flex;
       }
@@ -2130,8 +2054,6 @@ export default {
         color: #333333;
         text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
       }
-
-      
     }
     .tabs {
       margin-left: 28px;
@@ -2172,13 +2094,13 @@ export default {
         width: 72px;
         height: 28px;
         line-height: 28px;
-        background: #D5E4FF;
+        background: #d5e4ff;
         border-radius: 4px;
         // margin: 20px auto 40px;
-        color: #3F8DFD;
+        color: #3f8dfd;
         text-align: center;
         transition: all 0.2s;
-        
+
         &:hover {
           color: #fff;
           box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
@@ -2197,7 +2119,7 @@ export default {
       align-items: center;
       justify-content: space-between;
       padding-bottom: 15px;
-      border-bottom: 1px solid #DCDCDC;
+      border-bottom: 1px solid #dcdcdc;
       .lefts {
         display: flex;
       }
@@ -2210,25 +2132,23 @@ export default {
         color: #333333;
         text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
       }
-
-      
     }
     .tabs {
-        margin-left: 40px;
-        display: flex;
-        align-items: center;
+      margin-left: 40px;
+      display: flex;
+      align-items: center;
 
-        .tab {
-          cursor: pointer;
-          color: #888888;
-          font-size: 14px;
-          margin-right: 32px;
-          &.active {
-            font-weight: 600;
-            color: #222222;
-          }
+      .tab {
+        cursor: pointer;
+        color: #888888;
+        font-size: 14px;
+        margin-right: 32px;
+        &.active {
+          font-weight: 600;
+          color: #222222;
         }
       }
+    }
     .pagination {
       padding: 30px 0;
       text-align: center;
@@ -2251,13 +2171,13 @@ export default {
         width: 72px;
         height: 28px;
         line-height: 28px;
-        background: #D5E4FF;
+        background: #d5e4ff;
         border-radius: 4px;
         // margin: 20px auto 40px;
-        color: #3F8DFD;
+        color: #3f8dfd;
         text-align: center;
         transition: all 0.2s;
-        
+
         &:hover {
           color: #fff;
           box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
@@ -2372,9 +2292,9 @@ export default {
   color: #fff;
 }
 .tooltipStyle .popper__arrow {
-  border-bottom-color: #3f8dfd!important;
+  border-bottom-color: #3f8dfd !important;
 }
 .tooltipStyle .popper__arrow::after {
-  border-bottom-color: #3f8dfd!important;
+  border-bottom-color: #3f8dfd !important;
 }
 </style>

src/pages/subject/collect-bank.vue

@@ -120,9 +120,6 @@
                           ></div>
                         </div>
                       </div>
-                      <div class="question__btns">
-                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
-                      </div>
                     </div>
                     <div
                       class="question"
@@ -216,7 +213,6 @@
                         >
                           确认答案
                         </div>
-                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
                       </div>
                     </div>
                     <div
@@ -293,9 +289,6 @@
                           ></div>
                         </div>
                       </div>
-                      <div class="question__btns">
-                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
-                      </div>
                     </div>
                     <div
                       class="question"
@@ -800,9 +793,6 @@
                           </el-tab-pane>
                         </el-tabs>
                       </div>
-                      <div class="question__btns">
-                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
-                      </div>
                     </div>
                     <div
                       class="question"
@@ -897,10 +887,24 @@
                         >
                           确认答案
                         </div>
-                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
                       </div>
                     </div>
                   </template>
+                  <div class="question__btns">
+                    <div
+                      class="collect"
+                      @click="
+                        collect(collectList[questionIndex], questionIndex)
+                      "
+                    >
+                      <template v-if="!collectList[current]"
+                        ><i class="el-icon-star-off"></i>收藏本题
+                      </template>
+                      <template v-else
+                        ><i class="el-icon-star-on"></i>已收藏</template
+                      >
+                    </div>
+                  </div>
                 </div>
               </div>
               <div class="right-box">
@@ -1025,6 +1029,7 @@ export default {
       current: 0,
       examId: "",
       explain: "",
+      collectList: [],
     };
   },
   async mounted() {
@@ -1047,7 +1052,26 @@ export default {
         return 0;
       }
     },
-
+    /**
+     * @param {Object} current
+     * 获取收藏信息
+     */
+    getCollectInfo(current) {
+      console.log(current, this.questionList, 888);
+      this.$request
+        .getCollectInfo({
+          examId: this.examId,
+          questionId: this.questionList[current].questionId,
+          goodsId: this.goodsId,
+          orderGoodsId: this.orderGoodsId,
+        })
+        .then((res) => {
+          this.$set(this.collectList, current, res.data);
+        })
+        .catch((err) => {
+          this.$set(this.collectList, current, false);
+        });
+    },
     /**
      * 请求题目列表
      */
@@ -1209,6 +1233,7 @@ export default {
           });
 
           this.questionList = res.rows;
+          this.getCollectInfo(this.current);
         });
     },
 
@@ -1490,6 +1515,7 @@ export default {
 
     changeIndex(index) {
       this.current = index;
+      this.getCollectInfo(this.current);
     },
     nextQuestion() {
       if (this.current >= this.questionList.length - 1) {
@@ -1500,6 +1526,7 @@ export default {
         return;
       }
       this.current++;
+      this.getCollectInfo(this.current);
     },
     prevQuestion() {
       if (this.current == 0) {
@@ -1510,6 +1537,7 @@ export default {
         return;
       } else {
         this.current--;
+        this.getCollectInfo(this.current);
       }
     },
     isRight(item, index) {
@@ -1678,10 +1706,30 @@ export default {
     },
 
     collect() {
-      this.$message({
-        message: "试做题目，不支持收藏~",
-        type: "warning",
-      });
+      let _i = this.current;
+      let state = this.collectList[_i];
+      if (!state) {
+        let { questionId, goodsId, orderGoodsId } = this.questionList[_i];
+        this.$request
+          .collectQuestion({
+            examId: this.examId,
+            questionId: questionId,
+            goodsId: goodsId,
+            orderGoodsId: orderGoodsId,
+          })
+          .then((res) => {
+            this.$set(this.collectList, _i, true);
+            this.$message.success("收藏成功");
+            this.getCollectInfo(_i);
+          });
+      } else {
+        this.$request
+          .deleteCollectQuestion(this.collectList[_i].collectQuestionId)
+          .then((res) => {
+            this.$set(this.collectList, _i, false);
+            this.$message.success("取消收藏成功");
+          });
+      }
       return;
     },
     submit() {
@@ -1980,6 +2028,7 @@ export default {
                   }
 
                   .collect {
+                    width: 100px;
                     cursor: pointer;
                     position: absolute;
                     right: 0;
@@ -1989,6 +2038,9 @@ export default {
                     font-weight: 400;
                     color: #3f8dfd;
                     line-height: 24px;
+                    i {
+                      font-size: 20px;
+                    }
                   }
                 }
               }