客车资源 增加关注和收藏功能

src/components/CourseType.vue

@@ -2,7 +2,7 @@
   <div class="courseType">
     <div class="normalArrange">
         <p>{{transBaseData.kc_name}}<span>{{transBaseData.kc_brief}}</span></p>
-        <div class="marklabel">
+        <div class="marklabel" >
           <div class="marklabel_left">
             <ul>
               <li :class="{'activeIn': index==num}" v-for="(item,index) in transBaseData.cates" :key="index" @click="toparentSwitchTab(index)">{{item.kc_name}}</li>

src/pages/courseResources.vue

@@ -281,6 +281,7 @@ import { user } from "@/store/user.js";
   }
 </script>
 <style scoped lang="scss">
+  @import "../styles/common_resource.scss";
 .courseResources{
   width:100%;
   .courseResourcesCont{

src/pages/kczy/allApi.js

@@ -52,6 +52,35 @@ export const evaluaAdd = (data = {}) => {
     data
   })
 }
+//课程资源-点赞
+export const likeApi_add = (data = {})=>{
+  return request({
+    url: '/kczy/files_like/add',
+    data
+  })
+}
+//课程资源-去除点赞
+export const likeApi_del = (data = {})=>{
+  return request({
+    url: '/kczy/files_like/delete',
+    data
+  })
+}
+//课程资源-收藏
+export const collectApi_add = (data = {})=>{
+  return request({
+    url: '/kczy/files_fav/add',
+    data
+  })
+}
+//课程资源-去除收藏
+export const collectApi_del = (data = {})=>{
+  return request({
+    url: '/kczy/files_fav/delete',
+    data
+  })
+}
+
 //用户信息
 export const userInfoDetail = (data = {}) => {
   return request({

src/pages/resourceMovReview.vue

@@ -13,11 +13,7 @@
     <div class="common1280 vedioMain">
       <div class="vedio_titel">
         <div class="vedio_titel_left">{{ sourceDetailData.kf_name }}</div>
-        <div
-          class="vedio_titel_right"
-          @mouseenter="showTrue"
-          @mouseleave="showFalse"
-        >
+        <div class="vedio_titel_right" @mouseenter="showTrue" @mouseleave="showFalse">
           <img src="../assets/kczy/shareIcon.png" alt="" /> 分享
           <div class="qrcodeAll" v-if="shareSwitch">
             <p class="bigTit">呼唤小伙伴们前来围观吧</p>
@@ -45,23 +41,15 @@
         <div class="vedioMainContent_left">
           <div class="vedioMainContent_left_top">
             <div class="nicBaseInfo_avator">
-              <el-avatar
-                :src="userInfoData.user_avatar"
-                v-if="userInfoData.user_avatar"
-              />
-              <el-avatar
-                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-                v-else
-              />
+              <el-avatar :src="userInfoData.user_avatar" v-if="userInfoData.user_avatar" />
+              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" v-else />
             </div>
             <div class="nicBaseInfo_text">
               <div class="nicBaseInfo_text_top" style="height: 50%">
                 <span class="fir">{{ userInfoData.user_name }}</span>
-                <span class="middle"
-                  ><img src="../assets/kczy/fireIcon.png" alt=""
-                /></span>
+                <span class="middle"><img src="../assets/kczy/fireIcon.png" alt="" /></span>
                 <span class="sec" v-if="userInfoData.ext">{{
-                  userInfoData.ext.ue_hot
+                userInfoData.ext.ue_hot
                 }}</span>
               </div>
               <div class="nicBaseInfo_text_bottom" style="height: 50%">
@@ -70,22 +58,23 @@
               </div>
             </div>
             <div class="nicBaseInfo_action">
-              <span class="zan" @click="addLike">{{
-                sourceDetailData.kf_like_num
-              }}</span>
-              <span class="collect" @click="addCollect">{{
-                sourceDetailData.kf_fav_num
-              }}</span>
+              <div class="coverC" @click="finger">
+                <img class="posiA posi1" v-if="fingerSwitch == '0'" src="../assets/kczy/zanIcon.png" />
+                <img class="posiA posi1" v-else src="../assets/kczy/zanIcon_full.png" />
+                <span class="posiA posi2">{{ fingerNum }}</span>
+              </div>
+              <div class="coverC" @click="loveIcon">
+                <img class="posiA posi3" v-if="loveSwitch == '0'" src="../assets/kczy/collectIcon.png" />
+                <img class="posiA posi3" v-else src="../assets/kczy/collectIcon_full.png" />
+                <span class="posiA posi4">{{ loveNum }}</span>
+              </div>
             </div>
             <div class="nicBaseInfo_forceBtn" v-show="false">
               <span>关注</span>
             </div>
           </div>
-          <div
-            class="vedioMainContent_left_bottom"
-            v-if="transIconType == 'mp4'"
-          >
-            <video ref='urlResouce' controls  :src="sourceDetailData.kf_path">
+          <div class="vedioMainContent_left_bottom" v-if="transIconType == 'mp4'">
+            <video ref="urlResouce" controls :src="sourceDetailData.kf_path">
               <!-- <source :src="sourceDetailData.kf_path" type="video/ogg" /> -->
             </video>
             <!-- <div class="assi">助教：沈老师</div> -->
@@ -95,7 +84,7 @@
           </div>
 
           <div class="vedioMainContent_left_bottom" v-else>
-            <audio ref='urlResouce' controls :src="sourceDetailData.kf_path">
+            <audio ref="urlResouce" controls :src="sourceDetailData.kf_path">
               <!-- <source :src="prefixImg+sourceDetailData.kf_path" type="audio/mp3"> -->
             </audio>
             <!-- <div class="assi">助教：沈老师</div> -->
@@ -129,33 +118,18 @@
             </div>
             <div class="comList">
               <div>
-                <el-rate
-                  v-model="starsValue"
-                  :texts="['极差', '失望', '普通', '优秀', '惊艳']"
-                  show-text
-                />
+                <el-rate v-model="starsValue" :texts="['极差', '失望', '普通', '优秀', '惊艳']" show-text />
               </div>
               <div class="rateBtn" @click="evalua()"><button>评价</button></div>
-              <div
-                class="allCommonList"
-                v-if="evaluaListData && evaluaListData.length > 0"
-              >
-                <div
-                  class="singleList"
-                  v-for="(item, index) in evaluaListData"
-                  :key="index"
-                >
+              <div class="allCommonList" v-if="evaluaListData && evaluaListData.length > 0">
+                <div class="singleList" v-for="(item, index) in evaluaListData" :key="index">
                   <p>
                     {{ item.ke_user_realname
                     }}<span>{{ item.create_dateline }}</span>
                   </p>
                   <div class="starListS">
-                    <img
-                      src="../assets/kczy/stars.png"
-                      v-for="(itemsec, index) in Number(item.ke_star)"
-                      :key="index"
-                      alt=""
-                    />
+                    <img src="../assets/kczy/stars.png" v-for="(itemsec, index) in Number(item.ke_star)" :key="index"
+                      alt="" />
                   </div>
                 </div>
               </div>
@@ -178,6 +152,10 @@ import {
   courseSourceDetail,
   evaluaList,
   evaluaAdd,
+  likeApi_add,
+  likeApi_del,
+  collectApi_add,
+  collectApi_del,
   userInfoDetail,
 } from "./kczy/allApi.js";
 import { user } from "@/store/user.js";
@@ -200,6 +178,10 @@ export default {
       userInfoData: "",
       shareLink: "",
       shareSwitch: false,
+      fingerNum: 0, //点赞数
+      fingerSwitch: 0, //0：关 1：开
+      loveNum: 0, //关注
+      loveSwitch: 0, //0：关 1：开
     };
   },
   mounted() {
@@ -224,6 +206,11 @@ export default {
             let tempD = res.data.one_info.kf_path;
             this.typeKind = tempD.substr(tempD.lastIndexOf(".") + 1);
             this.$refs.urlResouce.src = res.data.one_info.kf_path;
+
+            this.fingerNum = res.data.one_info.kf_like_num; //点赞数
+            this.fingerSwitch = res.data.one_info.is_like; //0：关 1：开
+            this.loveNum = res.data.one_info.kf_fav_num; //关注
+            this.loveSwitch = res.data.one_info.is_fav; //0：关 1：开
           }
         })
         .catch((error) => {
@@ -287,13 +274,94 @@ export default {
           console.log(error);
         });
     },
-    /**增加赞*/
-    addLike() {
-      console.log("增加赞");
+    /**增加赞或取消*/
+    finger() {
+      if (this.fingerSwitch == "1") {//去掉赞
+        let transObj = {
+          kf_id: this.transKfId,
+        };
+        likeApi_del(transObj)
+          .then(res => {
+            if (res.code == "1") {
+              ElMessage({
+                message: res.msg,
+                type: "success",
+              });
+            } else {
+              ElMessage({
+                message: res.msg,
+                type: "waring",
+              });
+            }
+
+          })
+          .catch(error=>{console.log(error)})
+      } else {
+        let transObj = {
+          kczy_files_like: {
+            kf_id: this.transKfId,
+            kt_id: this.transKkId,
+          },
+        };
+        likeApi_add(transObj)
+        .then((res) => {
+          if (res.code == "1") {
+            ElMessage({
+              message: res.msg,
+              type: "success",
+            });
+          } else {
+            ElMessage({
+              message: res.msg,
+              type: "waring",
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+      }
+      this.initData();
     },
-    /**增加收藏*/
-    addCollect() {
-      console.log("增加收藏");
+    /**增加收藏或取消*/
+    loveIcon() {
+      if (this.loveSwitch == 1) {//去掉收藏
+        let transObj = {
+          kf_id: this.transKfId,
+        };
+        collectApi_del(transObj)
+          .then(res => {
+            console.log(res);
+          })
+          .catch(error => {
+            console.log(error)
+          });
+      } else {
+        let transObj = {
+          kczy_files_fav: {
+            kf_id: this.transKfId,
+            kt_id: this.transKkId,
+          },
+        };
+        collectApi_add(transObj)
+          .then((res) => {
+            if (res.code == "1") {
+              ElMessage({
+                message: res.msg,
+                type: "success",
+              });
+            } else {
+              ElMessage({
+                message: res.msg,
+                type: "waring",
+              });
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+      }
+      this.initData();
     },
     /**创建二维码*/
     showTrue() {
@@ -378,16 +446,19 @@ export default {
 
 <style lang="scss" scoped>
 @import "../styles/common_resource.scss";
+
 .vedio_titel {
   display: flex;
   height: 40px;
   line-height: 40px;
+
   .vedio_titel_left {
     font-size: 20px;
     font-weight: 800;
     text-align: left;
     color: #000000;
   }
+
   .vedio_titel_right {
     font-size: 16px;
     font-weight: 400;
@@ -395,10 +466,12 @@ export default {
     color: #00a3ff;
     margin-left: 20px;
     position: relative;
+
     img {
       display: inline-block !important;
       width: 16px;
     }
+
     .qrcodeAll {
       position: absolute;
       left: 10px;
@@ -409,6 +482,7 @@ export default {
       box-sizing: border-box;
       padding: 10px;
       background-color: rgb(255, 255, 255);
+
       .bigTit {
         font-size: 16px;
         font-weight: 500;
@@ -416,8 +490,10 @@ export default {
         color: #000000;
         margin-bottom: 20px;
       }
+
       .shareCover {
         display: flex;
+
         .sinaShare,
         .QQShare,
         .zoneShare {
@@ -426,17 +502,21 @@ export default {
           line-height: 115px;
           text-align: center;
           cursor: pointer;
+
           img {
             width: 50%;
           }
         }
+
         .wechatShare {
           width: 40%;
           text-align: center;
           cursor: pointer;
+
           .mainInQR {
             height: 100px;
           }
+
           .textS {
             font-size: 14px;
             font-weight: 400;
@@ -448,14 +528,17 @@ export default {
     }
   }
 }
+
 .vedioMainContent {
   display: flex;
   justify-content: space-between;
+
   .vedioMainContent_left {
     width: 70%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+
     .vedioMainContent_left_top {
       display: flex;
       height: 100px;
@@ -464,10 +547,12 @@ export default {
       box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
       margin-bottom: 10px;
       justify-content: space-between;
+
       .nicBaseInfo_avator {
         width: 10%;
         line-height: 100px;
         position: relative;
+
         span {
           width: 77px;
           height: 77px;
@@ -481,28 +566,34 @@ export default {
           transform: translate(-50%, -50%);
         }
       }
+
       .nicBaseInfo_text {
         width: 50%;
+
         .nicBaseInfo_text_top {
           line-height: 70px;
           display: flex;
+
           span.middle {
             display: inline-block;
             margin-left: 10px;
             margin-right: 3px;
             box-sizing: border-box;
             padding-top: 4%;
+
             img {
               width: 19px;
               height: 22px;
             }
           }
+
           span.fir {
             font-size: 16px;
             font-weight: 800;
             text-align: left;
             color: #000000;
           }
+
           span.sec {
             font-size: 14px;
             font-weight: 400;
@@ -512,8 +603,10 @@ export default {
             background-size: 100% 100%;
           }
         }
+
         .nicBaseInfo_text_bottom {
           line-height: 30px;
+
           .markLableOne {
             background: #190006;
             border: 1px solid #f1c342;
@@ -525,6 +618,7 @@ export default {
             padding: 5px 8px;
             margin-right: 10px;
           }
+
           .markLableTwo {
             background: linear-gradient(90deg, #00a3ff 1%, #57c38f);
             border-radius: 12px;
@@ -536,33 +630,73 @@ export default {
           }
         }
       }
+
       .nicBaseInfo_action {
         width: 30%;
-        line-height: 100px;
-        height: 17px;
         font-size: 16px;
         font-weight: 400;
         text-align: left;
         color: #00a3ff;
+        position: relative;
+
+        .coverC {
+          cursor: pointer;
+        }
+
+        .posiA {
+          position: absolute;
+          z-index: 12;
+        }
+
+        .posi1 {
+          left: 0px;
+          top: 50%;
+          transform: translate(0, -50%);
+        }
+
+        .posi2 {
+          margin: 0 2px;
+          left: 10%;
+          top: 50%;
+          transform: translate(0, -50%);
+        }
+
+        .posi3 {
+          left: 33%;
+          top: 50%;
+          transform: translate(0, -50%);
+        }
+
+        .posi4 {
+          margin: 0 2px;
+          left: 43%;
+          top: 50%;
+          transform: translate(0, -50%);
+        }
+
         .zan {
           background: url("../assets/kczy/zanIcon.png") no-repeat left center;
           background-size: 21px 20px;
           box-sizing: border-box;
-          padding-left: 25px;
+          padding: 3px 0 3px 25px;
+          cursor: pointer;
         }
+
         .collect {
-          background: url("../assets/kczy/collectIcon.png") no-repeat left
-            center;
+          background: url("../assets/kczy/collectIcon.png") no-repeat left center;
           background-size: 21px 20px;
           box-sizing: border-box;
-          padding-left: 25px;
+          padding: 3px 0 3px 25px;
           margin-left: 30px;
+          cursor: pointer;
         }
       }
+
       .nicBaseInfo_forceBtn {
         width: 10%;
         text-align: left;
         line-height: 100px;
+
         span {
           font-size: 16px;
           font-weight: 400;
@@ -575,20 +709,24 @@ export default {
         }
       }
     }
+
     .vedioMainContent_left_bottom {
-      height: 465px;
+      height: 504px;
       background: #cee5fb;
       border-radius: 10px;
       overflow: hidden;
       position: relative;
+
       video {
         width: 100%;
         height: 100%;
       }
+
       audio {
         width: 100%;
         height: 100%;
       }
+
       .assi {
         position: absolute;
         left: 0;
@@ -604,6 +742,7 @@ export default {
         text-align: center;
         color: #00a3ff;
       }
+
       .watchingNum {
         position: absolute;
         right: 0;
@@ -622,11 +761,13 @@ export default {
       }
     }
   }
+
   .vedioMainContent_right {
     width: 28%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+
     .vedioMainContent_right_top {
       width: 100%;
       height: 459px;
@@ -635,10 +776,12 @@ export default {
       box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
       box-sizing: border-box;
       padding: 33px 18px;
+
       .titleChapter {
         width: 100%;
         height: 50px;
         position: relative;
+
         .titleBorder-title {
           font-size: 16px;
           font-weight: 500;
@@ -649,6 +792,7 @@ export default {
           top: 13%;
           z-index: 14;
         }
+
         .titleBorder-line {
           width: 72px;
           height: 6px;
@@ -661,8 +805,10 @@ export default {
           z-index: 13;
         }
       }
+
       .detailChapter {
         overflow: auto;
+
         ul {
           li {
             width: 100%;
@@ -677,20 +823,24 @@ export default {
         }
       }
     }
+
     .vedioMainContent_right_bottom {
       width: 100%;
-      min-height: 578px;
+      // min-height: 578px;
+      height: 100%;
       background: #ffffff;
       border-radius: 12px;
       box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
       box-sizing: border-box;
       padding: 18px;
+
       .tabTitle {
         ul {
           display: flex;
           justify-content: space-between;
           box-sizing: border-box;
           padding: 0 5%;
+
           li {
             height: 32px;
             line-height: 32px;
@@ -702,11 +852,14 @@ export default {
           }
         }
       }
+
       .comList {
         box-sizing: border-box;
         padding: 25px 0 0 0;
+
         .rateBtn {
           margin-top: 20px;
+
           button {
             width: 111px;
             height: 32px;
@@ -720,15 +873,18 @@ export default {
             letter-spacing: 0.6px;
           }
         }
+
         .allCommonList {
           margin-top: 25px;
           height: 376px;
           overflow-y: auto;
+
           .singleList {
             min-height: 70px;
             border-bottom: 1px dashed #6e58c5;
             box-sizing: border-box;
             padding-top: 10px;
+
             p {
               height: 20px;
               line-height: 20px;
@@ -736,6 +892,7 @@ export default {
               font-weight: 600;
               text-align: left;
               color: #171721;
+
               span {
                 font-size: 12px;
                 font-weight: 400;
@@ -744,10 +901,12 @@ export default {
                 margin-left: 15px;
               }
             }
+
             .starListS {
               margin: 10px 0;
               box-sizing: border-box;
               padding: 0 10%;
+
               img {
                 display: inline;
                 margin-left: 2%;
@@ -759,11 +918,13 @@ export default {
     }
   }
 }
+
 .activein {
   color: #222222 !important;
   border-bottom: 3px solid lightblue;
 }
-.allCommonList::-webkit-scrollbar  {
+
+.allCommonList::-webkit-scrollbar {
   width: 10px;
   // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
 }