首页课程排行榜预览

src/components/Portal/course/couresinteract.vue

@@ -0,0 +1,708 @@
+<template>
+  <div class="interact-bar ranking-interactBar">
+   <div>
+    <el-tooltip effect="light" content="评分" placement="top" :visible-arrow="false" popper-class="text-tooltip">
+          <svg-icon style="margin-right: 0px;font-size: 22px;flex:1;" ></svg-icon>
+    </el-tooltip>
+    <span class="interact-bar-value"> {{ data.score }} </span>
+   </div>
+   <div>
+      <el-tooltip effect="light" content="学习人数" placement="top" :visible-arrow="false" popper-class="text-tooltip">
+      <svg-icon style="margin-right: 0px;font-size: 22px;" icon-class="eyes"></svg-icon>
+    </el-tooltip>
+   <span class="interact-bar-value"> {{ data.studys }} </span>
+   </div>
+    <div v-if="praises" @click="addPraise()" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly}">
+        <el-tooltip effect="light" content="点赞" placement="top" :visible-arrow="false" popper-class="text-tooltip">
+          <svg-icon style="margin-right: 0;font-size: 14px;" :icon-class="isPraise?'praised':'like'"></svg-icon>
+        </el-tooltip>
+        <span class="interact-bar-value"> {{ data.praises? data.praises:0}}</span>
+      </div>
+
+      <div v-if="favorites"  @click="addFavorite()" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly}">
+        <el-tooltip effect="light" content="收藏" placement="top" :visible-arrow="false" popper-class="text-tooltip">
+          <svg-icon v-if="courseExclusive" style="font-size: 32px;margin-right: 0;" :icon-class="isFavorite?'collectedCourse':'collectionCourse'"></svg-icon>
+          <svg-icon v-else style="margin-right: 0;" :style="{'font-size':size+'px'}" :icon-class="isFavorite?'collected':'collection'"></svg-icon>
+        </el-tooltip>
+        <span v-if="!courseExclusive" class="interact-bar-value"> {{ data.favorites? data.favorites:0}}</span>
+      </div>
+     
+     
+   
+    
+  </div>
+</template>
+
+<script>
+  import apiPraises from '@/api/modules/praises.js'
+  import apiShares from '@/api/modules/shares.js'
+  import apiFavorites from '@/api/modules/favorites.js'
+  import apiUser from '@/api/system/user.js'
+  import apiMessage from '@/api/system/message.js'
+  import { mapGetters } from 'vuex';
+  import { formatUserNumber } from '@/utils/tools.js';
+export default {
+  props: {
+    data:{
+      type:Object,
+      default(){
+        return{
+            id:'',
+            answers:0,
+            favorites:0,
+            comments:0,
+            shares:0,
+            praises:0,
+            views:0,
+          }
+      }
+    },
+    size:{
+      type:Number,
+      default:14
+    },
+    nodeWidth:{
+      type:String,
+      default:'40px'
+    },
+    readonly:{
+      type:Boolean,
+      default:false
+    },
+    align:{
+      type:String,
+      default:'right'
+    },
+    answers:{
+      type:Boolean,
+      default:false
+    },
+    clickAnswer:{
+      type:Boolean,
+      default:false
+    },
+    comments:{
+      type:Boolean,
+      default:true
+    },
+    favorites:{
+      type:Boolean,
+      default:true
+    },
+    courseExclusive:{
+      type:Boolean,
+      default:false
+    },
+    shares:{
+      type:Boolean,
+      default:true
+    },
+    couseViews:{
+      type:Boolean,
+      default:false
+    },
+    praises:{
+      type:Boolean,
+      default:true
+    },
+    views:{
+      type:Boolean,
+      default:true
+    },
+    type:{
+      type:Number,
+      default:0
+    },
+    theme:{
+      type:Number,
+      default:1
+    },
+    unicom:{
+      type:Boolean,
+      default:false
+    },
+    pageType:{
+      type:Number,
+      default:0
+    },
+    pageParams:{
+      type:String,
+      default:''
+    }
+  },
+  data(){
+    return {
+      formatNum:formatUserNumber,
+      msgPageType:0,
+      loading:false,
+      isPraise:false,
+      isFavorite:false,
+      shareShow:false,
+      shareUsers:[],
+      shareInfo:{
+        name:'',
+        load:false,
+        list:[]
+      }
+    }
+  },
+
+  computed:{
+      ...mapGetters(['userInfo','praisesUnicom','favoritesUnicom']),
+
+    showAlign(){
+      if(this.align=='left'){
+        return 'flex-start';
+      }else if(this.align=='right'){
+        return 'flex-end';
+      }
+    }
+  },
+  watch:{
+    praisesUnicom(newVal){
+      this.isPraise = newVal;
+    },
+    favoritesUnicom(newVal){
+      this.isFavorite = newVal;
+    },
+    data(newVal,oldVal){
+      if(newVal && newVal.id!=''){
+         this.checkHas();
+      }
+    }
+  },
+  created(){
+  },
+  mounted() {
+    if(this.data && this.data.id && !this.readonly){
+       this.checkHas();
+    }
+
+    if(this.pageType==0){
+      this.msgPageType=this.type;
+    }else{
+      this.msgPageType=this.pageType;
+    }
+
+
+  },
+  methods:{
+    addAnswers() {
+      this.$emit('addAnswers');
+    },
+    messageSave(refId,title,sendName,acceptName,acceptId,typeText){
+        // let typeText
+        // if(type=='share'){
+        //   typeText='分享给我'
+        // }
+        // if(type=='favorite'){
+        //   typeText='收藏了我发布的'
+        // }
+        // if(type=='praise'){
+        //   typeText='点赞了我的'
+        // }
+        let content;
+        let conType;
+        if(this.type==1){
+          content='课程';
+          conType = this.data.type;
+        }
+        if(this.type==2){
+          content='文章'
+        }
+        if(this.type==3){
+          content='案例'
+        }
+        if(this.type==4){
+          content='提问'
+        }
+        if(this.type==5){
+          content='回答';
+        }
+        if(this.type==6){
+          content='课程笔记'
+        }
+        if(this.type==60){
+          content='课程笔记评论'
+        }
+// 点赞type
+        if(this.type==10){
+          content='课程评论'
+        }
+        if(this.type==20){
+          content='文章评论'
+        }
+        if(this.type==30){
+          content='案例评论'
+        }
+        // 评论点赞通知没有关联id,评论通知暂时关闭
+        // 设置了主信息的关联，再把这个判断去掉
+        if(this.type==60 || this.type==10 || this.type==20 || this.type==30 || this.type == 6) {
+          //return;
+        }
+
+        if(title){
+          content=sendName+typeText+content+'-'+title
+        }else{
+          content=sendName+typeText+content
+        }
+      let msgPageParams=this.pageParams;
+      if(!msgPageParams){
+        msgPageParams=this.data.id;
+      }
+      let message={
+        content,
+        refId,
+        refType:this.type,
+        source:1,
+        pageType:this.msgPageType,
+        pageParams:msgPageParams,
+        pageUrl:location.href,
+        sendAid:this.userInfo.aid,
+        sendName,
+        acceptName,
+        acceptId,
+        title:'系统消息',
+        sendType:1,
+        conType,
+      }
+      apiMessage.save(message).then(res=>{
+        if(res.status!=200){ console.log('发送消息失败') }
+      })
+    },
+    checkHas(){
+      if(this.type>0 && !this.readonly && this.data.id){
+        if(this.favorites){
+          apiFavorites.has(this.type,this.data.id).then(rs=>{
+            if(rs.status==200 && rs.result){
+              this.isFavorite=true;
+            }else{
+              this.isFavorite=false;
+            }
+          })
+        }
+        if(this.praises){
+          apiPraises.has(this.type,this.data.id).then(rs=>{
+            if(rs.status==200 && rs.result){
+              this.isPraise=true;
+            }else{
+              this.isPraise=false;
+            }
+          });
+        }
+      }
+    },
+    addShare(){
+      if(this.readonly){
+        return
+      }
+      this.shareShow=true;
+    },
+    addPraise(){
+     if(this.type==0){
+       console.log('未设置type值,1表课程,2表文章，3表案例，4表问答,6笔记')
+       return;
+      }
+      //需要判断是否已点赞，已点赞的不再加
+      if(!this.readonly){
+        let postData={
+          objType:this.type,
+          objId:this.data.id,
+          title:'',
+
+        }
+        if(this.type==1){
+          postData.title=this.data.name;
+        }else if(this.type == 5){
+          postData.title=this.data.content;
+        } else {
+          postData.title=this.data.title;
+        }
+        if(this.loading) {
+          return;
+        }
+        this.loading=true;
+        if(this.isPraise) {// 已经点赞，取消点赞
+          apiPraises.remove(this.type,this.data.id).then(res=>{
+             this.loading = false;
+            if(res.status==200){
+              if(res.result){
+                this.data.praises--;
+              }
+              this.isPraise=false;
+              if(this.unicom) {
+                this.$store.dispatch("unicomPraises",false)
+              }
+              //自己给自己点赞不算
+              let authorId=this.data.sysCreateAid;
+              if(this.type==3){ //案例取作者id
+                 authorId=this.data.authorId;
+              }else if(this.type==1){ //课程取老师的id
+                // 目前页面上没有点赞的地方，课程有多个老师，也要给每个老师加吗？
+                 //console.log(this.data,'点赞中课程的传的数据')
+              }
+              if(this.userInfo.aid!=authorId){
+                let event = {
+                  key: "CancelPraise",//
+                  title: "取消点赞",//事件的标题
+                  parameters:"author:"+authorId,//用户自定义参数 name:value,name:value
+                  content: "取消点赞"+postData.title,//事件的内容
+                  objId: this.data.id,//关联的id
+                  objType: this.type,//关联的类型
+                  objInfo: this.data.title,
+                  aid: this.userInfo.aid, //当前登录人的id
+                  aname: this.userInfo.name,//当前人的姓名
+                  status: 1 //状态，直接写1
+                }
+                this.$store.dispatch("userTrigger", event);
+              }
+              this.$message({message:'取消点赞',type:'success'})
+            }else{
+              console.log('取消失败：'+res.message);
+            }
+          })
+        } else {
+          apiPraises.save(postData).then(res=>{
+            this.loading = false;
+            if(res.status==200){
+              if(res.result){
+                this.data.praises++;
+              }
+              if(this.unicom) {
+                this.$store.dispatch("unicomPraises",true)
+              }
+              //console.log('点选了我的 pageType='+this.msgPageType+','+this.pageParams)
+              //if(this.type!=1&&this.type!=5){
+              this.messageSave(this.data.id,this.data.title,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'点赞了我的');
+              //}
+              // if(this.type==5){
+              //   this.messageSave(this.data.id,this.data.content,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'评论了我的');
+              // }
+              this.isPraise=true;
+              this.$message({message:'点赞成功',type:'success'})
+              let contentText = '';
+              if(this.type==1){
+                  contentText='课程';
+                  // conType = this.data.type;
+                }
+                if(this.type==2){
+                  contentText='文章'
+                }
+                if(this.type==3){
+                  contentText='案例'
+                }
+                if(this.type==4){
+                  contentText='提问'
+                }
+                if(this.type==5){
+                  contentText='回答'
+                }
+                if(this.type==6){
+                  contentText='课程笔记'
+                }
+                if(this.type==60){
+                  contentText='课程笔记评论'
+                }
+        // 点赞type
+                if(this.type==10){
+                  contentText='课程评论'
+                }
+                if(this.type==20){
+                  contentText='文章评论'
+                }
+                if(this.type==30){
+                  contentText='案例评论'
+                }
+              if(this.userInfo.aid!=this.data.sysCreateAid){
+                let event = {
+                  key: "Praise",//后台的事件key  发布文章且审核通过
+                  title: "点赞",//事件的标题
+                  parameters:"author:"+this.data.sysCreateAid,//用户自定义参数 name:value,name:value
+                  content: "点赞了"+contentText,//事件的内容
+                  objId: this.data.id,//关联的id
+                  objType: this.type,//关联的类型
+                  objInfo: this.data.title,
+                  aid: this.userInfo.aid, //当前登录人的id
+                  aname: this.userInfo.name,//当前人的姓名
+                  status: 1 //状态，直接写1
+                }
+                this.$store.dispatch("userTrigger", event);
+              }
+            }else{
+              console.log('点赞失败：'+res.message);
+            }
+          })
+        }
+
+      }
+    },
+    addFavorite(){
+
+      if(this.readonly){
+        return
+      }
+      if(this.type==0){
+        console.log('未设置type值,1表课程,2表文章，3表案例，4表问答')
+        return;
+       }
+      //需要判断是否已点赞，已点赞的不再加
+      let postData={
+        objType:this.type,
+        objId:this.data.id,
+        title:'',
+      }
+      if(this.loading) {
+          return;
+        }
+        this.loading=true;
+      if(this.type==1){
+        postData.title=this.data.name;
+      }else if(this.type==60){
+        postData.title=this.data.content;
+      } else if(this.type==5){
+        postData.title='收藏回答';
+      } else {
+        postData.title=this.data.title;
+      }
+      if(this.isFavorite) {// 已经收藏，再次点击取消收藏
+        apiFavorites.remove(this.type,this.data.id).then(res=>{
+          this.loading=false;
+        if(res.status==200){
+          this.isFavorite=false;
+          if(res.result){
+            this.data.favorites--;
+          }
+          if(this.unicom) {
+            this.$store.dispatch("unicomFavorites",false)
+          }
+          this.$message({message:'已取消收藏',type:'success'});
+          //this.$emit('addFavorite',res.result);//添加收藏,如果是true代表添加成功，false代表已存在
+        }else{
+          console.log('取消收藏失败：'+res.message);
+        }
+      })
+      } else {
+        apiFavorites.save(postData).then(res=>{
+          this.loading=false;
+        if(res.status==200){
+          this.isFavorite=true;
+          if(res.result){
+            this.data.favorites++;
+          }
+          if(this.unicom) {
+            this.$store.dispatch("unicomFavorites",true)
+          }
+          //if(this.type===2||this.type===4){
+            this.messageSave(this.data.id,this.data.title,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'收藏了我发布的');
+          //}
+          this.$message({message:'已加入收藏',type:'success'});
+          //this.$emit('addFavorite',res.result);//添加收藏,如果是true代表添加成功，false代表已存在
+        }else{
+          console.log('加入收藏失败：'+res.message);
+        }
+      })
+      }
+      //
+
+    },
+    jumpRouter(){
+      //此跳转不行
+      if(this.type==2){
+        this.$router.push({path:'/article/detail?id='+this.data.id})
+      }
+      if(this.type==3){
+        this.$router.push({path:'/case/detail?id='+this.data.id})
+      }
+      if(this.type==1){
+        this.$router.push({path:'/course/detail?id='+this.data.id})
+      }
+      if(this.type==4){
+        this.$router.push({path:'/qa/answer?id='+this.data.id})
+      }
+    },
+    keyupEnter(){
+       this.findUser();
+       return false;
+    },
+    findUser(){
+       this.shareInfo.load=false;
+       this.shareInfo.list=[];
+       this.shareUsers=[];
+       var name=this.shareInfo.name;
+       var regPos = /^\d+(\.\d+)?$/; //非负浮点数
+       if(regPos.test(name)){
+            //console.log("数字");
+            apiUser.getByLoginName(name).then(rs=>{
+              if(rs.status==200){
+                //因为根据工号查询，只会是一个人，所有会有null情况，而json会返回空字符串
+                if(rs.result!=''){
+                  this.shareInfo.list.push(rs.result);
+                }else{
+                  this.$message.error("查无此用户")
+                }
+                this.shareInfo.load=true;
+              }else{
+                this.$message.error(rs.message);
+              }
+            })
+        }else{
+            // console.log("非数字");
+            apiUser.findByName(name).then(rs=>{
+              if(rs.status==200){
+                if(rs.result.length==0){
+                  return this.$message.error(rs.message);
+                }
+                this.shareInfo.list=rs.result;
+                this.shareInfo.load=true;
+              }else{
+                this.$message.error(rs.message);
+              }
+            })
+        }
+    },
+    submitShare(){
+      if(this.shareUsers.length==0){
+        this.$message.error('请选择分享人');
+        return;
+      }
+      let conType;
+      if(this.type == 1) {
+        conType = this.data.type;
+      }
+
+      let postData={
+        objType:this.type,
+        objId:this.data.id,
+        content:this.data.title,
+        isRead:false,
+        toAid:'',
+        toAname:'',
+        conType: conType,
+      }
+      let $this=this;
+      this.shareUsers.forEach(u=>{
+        var curUser=null;
+         $this.shareInfo.list.some(item=>{
+           if(item.aid==u){
+             curUser=item;
+             return true;
+           }else{
+             return false;
+           }
+         });
+         if(curUser!=null){
+           postData.toAid=curUser.aid;
+           postData.toAname=curUser.name;
+           if(this.userInfo.aid==postData.toAid){
+             return this.$message.warning("不能分享给自己")
+           }
+           apiShares.save(postData).then(rs=>{
+             $this.shareShow=false;
+             if(rs.status!=200){
+               this.$message.error("分享失败")
+             }else{
+               if(rs.result){
+                 $this.data.shares++;
+                 this.$message.success("分享成功")
+                 //if(this.type!=3){
+                   if(this.type==1){
+                     this.messageSave(this.data.id,this.data.name,this.userInfo.name,curUser.name,curUser.aid,'分享给我的');
+                   }else{
+                     this.messageSave(this.data.id,this.data.title,this.userInfo.name,curUser.name,curUser.aid,'分享给我的');
+                   }
+                 //}
+                 let event = {
+                  key: "Share",//分享
+                  title: "分享",//分享
+                  parameters:"author:"+this.data.sysCreateAid,//内容的作者
+                  content: '分享',//事件的内容
+                  objId: this.data.id,//关联的id
+                  objType: this.type,//关联的类型
+                  objInfo: this.data.title,
+                  aid: this.userInfo.aid, //当前登录人的id
+                  aname: this.userInfo.name,//当前人的姓名
+                  status: 1 //状态，直接写1
+                }
+                this.$store.dispatch("userTrigger", event);
+               }else{
+                 this.$message.warning("您已分享给对方，分享失败")
+               }
+             }
+           })
+         }
+      })
+
+    }
+  }
+
+};
+</script>
+
+<style lang="scss" scoped>
+.ranking-interactBar{
+  display: flex;
+  justify-content: space-between;
+  div{
+    span{
+        color: #999;
+    }
+  }
+  
+}
+// .eyes-view{
+  // color: #000;
+  // position: fixed;
+  // line-height: 40px;
+// }
+::v-deep .g-dialog .el-dialog__header{
+  text-align: left !important;
+}
+::v-deep .g-dialog .el-dialog__body{
+  text-align: left !important;
+}
+
+.interact-bar{
+  // height: 30px;
+  .interact-bar-btns {
+    // line-height: 30px;
+    display: flex;
+    justify-content: flex-end;
+    .interact-bar-btn {
+      margin: 0 0 0 15px;
+    }
+    .interact-bar-value{
+      //  color:#6E7B84; ui图给的颜色，但是效果于ui图效果不一样，也没有透明度，所以找一个相近的和谐的颜色
+       color:#999;
+    }
+  }
+}
+.cursor{
+  cursor: pointer;
+}
+.bottom-btn{
+  padding: 10px 50px;
+      text-align: center;
+      .btn{
+        width: 104px;
+        height: 42px;
+        color: #fff;
+         img{
+         width: 16px;
+         height: 15px;
+         vertical-align: bottom;
+         margin-right: 5px;
+        }
+      }
+      .fen-xiang{
+        background: #2ab28b;
+
+      }
+      .dian-zan{
+        background: #f56262;
+
+      }
+      .shou-cang{
+        background: #ff8e00;
+      }
+}
+</style>

src/views/Index.vue

@@ -189,7 +189,9 @@
                     </div>
                   </div>
                   <div class="list-bottom">
-                    <interactBar :type="1" :data="item" :couseViews="false" :shares="false" :views="false"></interactBar>
+                    <couresinteract :type="1" :data="item" ></couresinteract>
+                    
+                    <!-- <interactBar :type="1" :data="item" :couseViews="false" :shares="false" :views="false"></interactBar> -->
                   </div>
                 </div>
 				</a>
@@ -467,6 +469,7 @@
   import apiUser from '@/api/system/user.js';
   import apiCoursePortal from '@/api/modules/coursePortal.js';
   import interactBar from '@/components/Portal/interactBar.vue';
+  import couresinteract from '@/components/Portal/course/couresinteract.vue';
   import ad from '@/components/Portal/adFloat.vue';
   import courseImage from '@/components/Course/courseImage.vue';
   import articleImage from '@/components/Article/articleImage.vue';
@@ -491,6 +494,7 @@
       portalFloatTools,
       authorInfo,
       interactBar,
+      couresinteract,
       courseImage,
       InterestCollection,
       GuideBox,

src/views/portal/course/Index.vue

@@ -325,6 +325,7 @@ export default {
   },
   data() {
     return {
+      
       resonimg:{},
       formatDate,
       formatNum:formatUserNumber,
@@ -384,6 +385,7 @@ export default {
       totalPages: 1
     };
   },
+  
   mounted() {
     let screenWidth = window.screen.availWidth;
     if (screenWidth < 1280) {
@@ -851,6 +853,7 @@ export default {
             }
           })
           this.scorelist = res.result;
+          // console.log(this.scorelist)
         }
       });
     },
@@ -905,6 +908,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.interact-bar-value{
+  color: #999;
+}
+
 .couderbox{
   // width: 5px;
   // padding: 0;