mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
355 lines
11 KiB
Vue
355 lines
11 KiB
Vue
<template>
|
||
<view class="interact-bar">
|
||
<view v-if="comments" class="interact-bar-item">
|
||
<image class="pto-img" src="../../static/images/icon/bar-comment.png" size="24"></image>
|
||
<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.comments}}</text>
|
||
</view>
|
||
<view v-if="answers" class="interact-bar-item">
|
||
<image class="pto-img" src="../../static/images/icon/bar-comment.png" size="24"></image>
|
||
<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.answers}}</text>
|
||
</view>
|
||
<view v-if="praises" @click="addPraise()" class="interact-bar-item">
|
||
<image v-if="isPraise" class="pto-img" src="../../static/images/icon/bar-praise-active.png" size="24"></image>
|
||
<image v-else class="pto-img" src="../../static/images/icon/bar-praise.png" size="24"></image>
|
||
<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.praises}}</text>
|
||
</view>
|
||
<view v-if="favorites" class="interact-bar-item">
|
||
<image class="pto-img" src="../../static/images/icon/bar-favorite.png" size="24"></image>
|
||
<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.favorites}}</text>
|
||
</view>
|
||
<!-- <view v-if="views" class="interact-bar-item">
|
||
<u-icon name="eye" color="#969696" size="18"></u-icon>
|
||
<text style="font-size: 10px;color: #969696;margin-left: 6upx;">888</text>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import apiStat from '@/api/phase2/stat.js'
|
||
import apiPraises from '@/api/modules/praises.js'
|
||
import { mapGetters } from 'vuex';
|
||
export default {
|
||
props: {
|
||
data: {
|
||
type: Object,
|
||
default () {
|
||
return {
|
||
answers: 23,
|
||
favorites: 23,
|
||
comments: 18,
|
||
shares: 16,
|
||
praises: 68,
|
||
views: 12,
|
||
}
|
||
}
|
||
},
|
||
align: {
|
||
type: String,
|
||
default: 'right'
|
||
},
|
||
answers: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
comments: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
favorites: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
shares: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
praises: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
views: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
type:{
|
||
type:Number,
|
||
default:0
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
loading:false,
|
||
isPraise:false,
|
||
}
|
||
},
|
||
watch:{
|
||
data(newVal,oldVal){
|
||
console.log(newVal,'newVal')
|
||
if(newVal && newVal.id!=''){
|
||
this.checkHas();
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.checkHas();
|
||
// this.loadUser();
|
||
},
|
||
computed:{
|
||
...mapGetters(['userInfo']),
|
||
},
|
||
methods: {
|
||
checkHas(){
|
||
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;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
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;
|
||
// content=sendName+typeText+content
|
||
} else {
|
||
content=sendName+typeText+content+'-'+title
|
||
}
|
||
|
||
|
||
let message={
|
||
content,
|
||
refId,
|
||
refType:this.type,
|
||
source:1,
|
||
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('发送消息失败') }
|
||
})
|
||
},
|
||
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 if(this.type == 10 || this.type == 20 || this.type == 30){
|
||
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
|
||
source:2,
|
||
}
|
||
apiStat.sendEvent(event);
|
||
// 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.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
|
||
source:2,
|
||
}
|
||
apiStat.sendEvent(event);
|
||
// this.$store.dispatch("userTrigger", event);
|
||
}
|
||
}else{
|
||
console.log('点赞失败：'+res.message);
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
},
|
||
}
|
||
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.interact-bar {
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
.interact-bar-item {
|
||
line-height: 60rpx;
|
||
display: flex;
|
||
margin-right: 30upx;
|
||
.pto-img {
|
||
margin-top: 12upx;
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-left: 28upx;
|
||
// vertical-align: middle;
|
||
}
|
||
.interact-bar-icon {
|
||
margin: 0 0 0 10upx;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.noCollect{
|
||
margin-left: auto;
|
||
}
|
||
}
|
||
</style>
|