mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-09 10:56:47 +08:00
527 lines
14 KiB
Vue
527 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<view style="height: 50px;"></view>
|
||
<view class="interact-fixed">
|
||
<view class="interact-bar" style="display: flex;">
|
||
<view class="interact-bar-item" style="width: 50%;">
|
||
<slot>
|
||
<view class="field" @click="openInput()">
|
||
<u-icon name="edit-pen-fill" size="18" class="field-icon"></u-icon>
|
||
<text class="wenz">写评论</text>
|
||
</view>
|
||
</slot>
|
||
</view>
|
||
<!-- <view v-if="answers" class="interact-bar-item">
|
||
<view class="interact-bar-icon"><image style="width:34upx;height: 31upx;" src="/static/images/icon/comment.png" alt=""></view>
|
||
<view class="interact-bar-txt">{{data.answers}}</view>
|
||
</view> -->
|
||
<view class="" style="display:flex;width: 50%;justify-content: flex-end;padding-right: 20rpx;margin-top: 16upx;">
|
||
<view v-if="comments" class="interact-bar-item" @click="handleComment()">
|
||
<view class="interact-bar-icon"><image style="width:40upx;height: 40upx;" src="/static/images/icon/comment.png" alt=""></view>
|
||
<!-- <view class="interact-bar-txt">{{data.comments}}</view> -->
|
||
</view>
|
||
<view v-if="praises" @click="addPraise" class="interact-bar-item">
|
||
<view class="interact-bar-icon" v-if="isPraise"><image style="width:40upx;height: 40upx;" src="/static/images/icon/artice-praise-active.png" alt="" ></view>
|
||
<view class="interact-bar-icon" v-else><image style="width:40upx;height: 40upx;" src="/static/images/icon/artice-praise.png" alt="" ></view>
|
||
<!-- <view class="interact-bar-txt">{{data.praises}}</view> -->
|
||
</view>
|
||
<view v-if="favorites" @click="addFavorite()" class="interact-bar-item">
|
||
<view class="interact-bar-icon" v-if="isFavorite"><image style="width:40upx;height: 40upx;" src="/static/images/icon/favorite-active.png" alt="" ></view>
|
||
<view class="interact-bar-icon" v-else><image style="width:40upx;height: 40upx;" src="/static/images/icon/favorite.png" alt="" ></view>
|
||
<!-- <view class="interact-bar-txt">收藏</view> -->
|
||
<!-- <view class="interact-bar-txt">{{data.favorites}}</view> -->
|
||
<!-- 这里需要一个是否已经收藏的变量来控制，已收藏就显示收藏数 -->
|
||
</view>
|
||
<view v-if="shares" @click="addShare" class="interact-bar-item">
|
||
<view class="interact-bar-icon"><image style="width:40upx;height: 40upx;" src="/static/images/icon/share.png" alt=""></view>
|
||
<!-- <view class="interact-bar-txt">分享</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<u-toast ref="interactToast"></u-toast>
|
||
<u-popup :show="inputShow" @close="closeInput" @open="openInput" :round="16">
|
||
<view class="users-box" v-show="usersListShow">
|
||
<view class="users-list" v-for="u in usersList" :key="u.id" @click="userSelect(u)">
|
||
<u-avatar shape="circle" :size="50" v-if="u.avatar != ''" :src="u.avatar"></u-avatar>
|
||
<view v-else>
|
||
<u-avatar shape="circle" v-if="u.sex === 1" :size="50" src="../../static/images/man.png"></u-avatar>
|
||
<u-avatar shape="circle" v-else :size="50" src="../../static/images/woman.png"></u-avatar>
|
||
</view>
|
||
<!-- <u-avatar v-else :size="25" random-bg-color :text="data.name" shape="square"></u-avatar> -->
|
||
<view class="uavatar-scale">{{u.name}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view style="padding: 40upx 44upx 32upx 22upx;">
|
||
<view ><u--textarea style="border: none;background: #F4F4F4;" :height="50" v-model="inputValue" placeholder="写下您的评论(140字以内),可以@作者哦～" count ></u--textarea></view>
|
||
<view style="padding-top: 10px;line-height: 80upx;display: flex;float: right;">
|
||
<view @click="usersClick()">@</view>
|
||
<view style="padding:20upx;"><u-button @click="submit" style="padding: 2upx 30upx;height: 52upx;background: #87B3FF;border-color: #87B3FF;" type="primary" text="发布"></u-button></view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<interact-share ref="comShare" :data="data":type="type"></interact-share>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import apiPraises from '@/api/modules/praises.js'
|
||
import apiComment from '@/api/modules/comments.js'
|
||
import apiShares from '@/api/modules/shares.js'
|
||
import apiFavorites from '@/api/modules/favorites.js'
|
||
import apiUser from '@/api/system/user.js'
|
||
import apiCoursePortal from '@/api/modules/coursePortal.js'
|
||
import apiMessage from '@/api/system/message.js'
|
||
import { mapGetters } from 'vuex';
|
||
export default {
|
||
props: {
|
||
data:{
|
||
type:Object,
|
||
default(){
|
||
return{
|
||
id:'',
|
||
type:1,
|
||
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 //默认是课程
|
||
},
|
||
users:{
|
||
// type:Object,
|
||
}
|
||
},
|
||
computed:{
|
||
...mapGetters(['userInfo']),
|
||
},
|
||
data(){
|
||
return {
|
||
userData:{},
|
||
usersListShow: false,
|
||
usersList: [],
|
||
isPraise:false,
|
||
isFavorite:false,
|
||
inputShow:false,
|
||
inputValue:'',
|
||
loading:false,
|
||
shareInfo:{
|
||
show:false,
|
||
name:'',
|
||
users:[],
|
||
},
|
||
toUserDig:{
|
||
show:false,
|
||
name:'',
|
||
chooseUserId:'',
|
||
chooseUserName:'',
|
||
list:[]
|
||
}
|
||
}
|
||
},
|
||
watch:{
|
||
data(newVal,oldVal){
|
||
if(newVal && newVal.id!=''){
|
||
this.checkHas();
|
||
this.loadUser();
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.checkHas();
|
||
this.loadUser();
|
||
},
|
||
methods:{
|
||
handleComment() {
|
||
this.$emit('handle-comment');
|
||
},
|
||
messageSave(refId,title,sendName,acceptName,acceptId,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='问答'
|
||
}
|
||
content=sendName+typeText+content+'-'+title
|
||
let message={
|
||
content,
|
||
refId,
|
||
refType:this.type,
|
||
sendName,
|
||
acceptName,
|
||
acceptId,
|
||
title:'系统消息',
|
||
sendType:1,
|
||
conType,
|
||
content,
|
||
source:1,
|
||
// pageUrl:location.href,
|
||
pageUrl:'',
|
||
sendAid:this.userInfo.aid,
|
||
}
|
||
apiMessage.save(message).then(res=>{
|
||
if(res.status==200){
|
||
|
||
}
|
||
})
|
||
},
|
||
userSelect(data) {
|
||
this.usersListShow = false;
|
||
this.userData = data;
|
||
// this.toUserDig.chooseUserId = data.id;
|
||
// this.toUserDig.chooseUserName = data.name;
|
||
this.toUserDig.chooseUserId = data.sysCreateAid;
|
||
this.toUserDig.chooseUserName = data.sysCreateBy;
|
||
this.inputValue = "@"+data.name+this.inputValue;
|
||
},
|
||
usersClick() {
|
||
if(this.usersListShow) {
|
||
this.usersListShow = false;
|
||
} else {
|
||
this.usersListShow = true;
|
||
}
|
||
},
|
||
loadUser() {
|
||
if(this.type == 1) {
|
||
this.usersList = this.users;
|
||
}
|
||
if(this.type == 2) {
|
||
this.usersList = [];
|
||
this.usersList.push({
|
||
sysCreateAid: this.data.sysCreateAid,
|
||
sysCreateBy:this.data.sysCreateBy
|
||
})
|
||
}
|
||
let ids = [];
|
||
this.usersList && this.usersList.forEach(item=>{
|
||
if(this.type == 1) {
|
||
item.sysCreateAid = item.teacherId;
|
||
}
|
||
item.avatar= '';
|
||
item.name= '';
|
||
item.sex = '';
|
||
ids.push(item.sysCreateAid);
|
||
})
|
||
|
||
this.loadUserInfos(this.usersList,ids);
|
||
},
|
||
loadUserInfos(list,userIds){
|
||
let $this=this;
|
||
const noReapetIds=[...new Set(userIds)]
|
||
apiUser.getByIds(noReapetIds).then(res=>{
|
||
if(res.status==200){
|
||
list&& list.forEach(item=>{
|
||
res.result.some(author=>{
|
||
if(author.aid==item.sysCreateAid){
|
||
if(author.avatar!=''){
|
||
item.avatar=$this.$config.fileUrl+author.avatar;
|
||
}
|
||
item.name = author.name;
|
||
item.sex = author.sex;
|
||
return true;
|
||
}
|
||
return false;
|
||
})
|
||
})
|
||
}else{
|
||
console.log('查询用户信息失败:'+res.error);
|
||
}
|
||
})
|
||
},
|
||
checkHas(){
|
||
if(this.type>0 && this.data.id){
|
||
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;
|
||
}
|
||
});
|
||
}
|
||
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;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
submit(){
|
||
if(this.inputValue!=''){
|
||
let cdata={
|
||
objType:this.type,
|
||
objId:this.data.id,
|
||
parentId:'-1',
|
||
content:this.inputValue,
|
||
clevel:1,
|
||
toAid:'',
|
||
toAname:'',
|
||
}
|
||
if(this.inputValue.charAt(0) == '@' && this.toUserDig.chooseUserId!=='' && this.toUserDig.chooseUserName!=''){
|
||
cdata.toAid=this.toUserDig.chooseUserId;
|
||
cdata.toAname=this.toUserDig.chooseUserName;
|
||
}
|
||
apiComment.add(cdata).then(res=>{
|
||
if(res.status==200){
|
||
this.$refs.interactToast.show({message:'发布成功',type:'success'});
|
||
this.inputValue='';
|
||
this.data.comments++;
|
||
this.toUserDig.chooseUserId='';
|
||
this.toUserDig.chooseUserName='';
|
||
this.inputShow=false;
|
||
this.$emit("comment-success", res.result);
|
||
}else{
|
||
this.$refs.interactToast.show({message:'发布失败',type:'error'});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
addPraise(){
|
||
if(this.type==0){
|
||
//console.log('未设置type值,1表课程,2表文章，3表案例，4表问答')
|
||
return;
|
||
}
|
||
if(this.loading){
|
||
return;
|
||
}
|
||
//需要判断是否已点赞，已点赞的不再加
|
||
let postData={
|
||
objType:this.type,
|
||
objId:this.data.id,
|
||
title:'',
|
||
}
|
||
if(this.type==1){
|
||
postData.title=this.data.name;
|
||
}else{
|
||
postData.title=this.data.title;
|
||
}
|
||
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;
|
||
this.$refs.interactToast.show({message:'取消点赞',type:'success'});
|
||
this.$emit("praise-success", res.result);
|
||
}else{
|
||
this.$refs.interactToast.show({message:'取消失败',type:'error'});
|
||
}
|
||
})
|
||
} else {
|
||
|
||
apiPraises.save(postData).then(res=>{
|
||
this.loading=false;
|
||
if(res.status==200){
|
||
if(res.result){
|
||
this.data.praises++;
|
||
}
|
||
this.isPraise=true;
|
||
this.$refs.interactToast.show({message:'点赞成功',type:'success'});
|
||
this.messageSave(this.data.id,this.data.title,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'点赞了我的');
|
||
this.$emit("praise-success", res.result);
|
||
}else{
|
||
this.$refs.interactToast.show({message:'点赞失败',type:'error'});
|
||
}
|
||
})
|
||
}
|
||
},
|
||
addFavorite(){
|
||
if(this.type==0){
|
||
console.log('未设置type值,1表课程,2表文章，3表案例，4表问答')
|
||
return;
|
||
}
|
||
if(this.loading){
|
||
return;
|
||
}
|
||
//需要判断是否已点赞，已点赞的不再加
|
||
let postData={
|
||
objType:this.type,
|
||
objId:this.data.id,
|
||
title:'',
|
||
}
|
||
if(this.type==1){
|
||
postData.title=this.data.name;
|
||
}else{
|
||
postData.title=this.data.title;
|
||
}
|
||
this.loading=true;
|
||
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--;
|
||
}
|
||
this.$refs.interactToast.show({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 && res.result){
|
||
this.isFavorite=true;
|
||
this.data.favorites++;
|
||
this.$refs.interactToast.show({message:'已加入收藏',type:'success'});
|
||
if(this.type==1){
|
||
this.messageSave(this.data.id,this.data.name,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'收藏了我发布的');
|
||
}else{
|
||
this.messageSave(this.data.id,this.data.title,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'收藏了我发布的');
|
||
}
|
||
this.$emit('favorite-success',res.result);//添加收藏,如果是true代表添加成功，false代表已存在
|
||
}else{
|
||
this.$refs.interactToast.show({message:'收藏失败',type:'error'});
|
||
console.log('加入收藏失败：'+res.message);
|
||
}
|
||
})
|
||
}
|
||
},
|
||
openInput(){
|
||
this.inputShow=true;
|
||
},
|
||
closeInput(){
|
||
this.inputShow=false;
|
||
},
|
||
addShare(){
|
||
//分享
|
||
this.$refs.comShare.openShare();
|
||
}
|
||
}
|
||
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.users-box{
|
||
height: 150upx;
|
||
padding: 50upx;
|
||
display: flex;
|
||
.users-list{
|
||
width: 100upx;
|
||
.uavatar-scale{
|
||
text-align: center;
|
||
margin-top: 10upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.txtbtn{
|
||
background-color: #e9e9e9;
|
||
border: 1px solid #e0e0e0;
|
||
padding: 3px 10px;
|
||
border-radius: 6px;
|
||
font-size: 0.8em;
|
||
}
|
||
.interact-fixed{
|
||
position: fixed;
|
||
z-index: 999;
|
||
bottom: 0px;
|
||
width: 100%;
|
||
border-top: 1px solid rgba(153,153,153,0.12);;
|
||
height: 50px;
|
||
padding-top: 10px;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.interact-bar{
|
||
height: 35px;
|
||
// display: flex;
|
||
// justify-content: space-around;
|
||
padding-left: 40rpx;
|
||
.interact-bar-item {
|
||
width: 50px;
|
||
.interact-bar-icon{
|
||
text-align: center;
|
||
img{
|
||
width: 30upx;
|
||
height: 30upx;
|
||
}
|
||
}
|
||
.interact-bar-txt{
|
||
font-size: 12px;
|
||
color: #343434;
|
||
text-align: center;
|
||
|
||
}
|
||
}
|
||
}
|
||
.field{
|
||
width: 200px;
|
||
height: 40px;
|
||
line-height: 30px;
|
||
background: rgb(247,247,249);
|
||
border-radius: 34upx;
|
||
display: flex;
|
||
.field-icon{
|
||
margin-top: 2px;
|
||
margin-left: 10px;
|
||
}
|
||
.wenz{
|
||
font-size: 12px;
|
||
color: #666666;
|
||
margin-left: 2px;
|
||
margin-top: 6px;
|
||
}
|
||
}
|
||
|
||
</style>
|