mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-22 01:06:43 +08:00
2022年5月29日从svn移到git
This commit is contained in:
daihh
121
src/components/Portal/adFloat.vue
Normal file
121
src/components/Portal/adFloat.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<!--悬浮小广告样式的提示信息-->
|
||||
<div
|
||||
id="thediv"
|
||||
ref="thediv"
|
||||
style="position: absolute; z-index: 111; left: 0; top: 0"
|
||||
v-show="thedivShow"
|
||||
@click="toStudy"
|
||||
@mouseover="clearFdAd"
|
||||
@mouseout="starFdAd">
|
||||
<div
|
||||
style="cursor: pointer;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #999999;"
|
||||
@click="thedivShow = false">
|
||||
关闭
|
||||
</div>
|
||||
<a href="http://xxxxxx" target="_blank">
|
||||
<img src="/pc/ad/index_course.png" width="320" border="0" />
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var interval;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
xPos: 0,
|
||||
yPos: 0,
|
||||
xin: true,
|
||||
yin: true,
|
||||
step: 1,
|
||||
delay: 18,
|
||||
height: 0,
|
||||
Hoffset: 0,
|
||||
Woffset: 0,
|
||||
yon: 0,
|
||||
xon: 0,
|
||||
pause: true,
|
||||
thedivShow: true,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
interval = setInterval(this.changePos, this.delay);
|
||||
},
|
||||
|
||||
methods: {
|
||||
changePos() {
|
||||
let width = document.documentElement.clientWidth;
|
||||
let height = document.documentElement.clientHeight;
|
||||
this.Hoffset = this.$refs.thediv.offsetHeight; //获取元素高度
|
||||
this.Woffset = this.$refs.thediv.offsetWidth;
|
||||
|
||||
// 滚动部分跟随屏幕滚动
|
||||
// this.$refs.thediv.style.left = (this.xPos + document.body.scrollLeft + document.documentElement.scrollLeft) + "px";
|
||||
// this.$refs.thediv.style.top = (this.yPos + document.body.scrollTop + document.documentElement.scrollTop) + "px";
|
||||
|
||||
// 滚动部分不随屏幕滚动
|
||||
this.$refs.thediv.style.left =
|
||||
this.xPos + document.body.scrollLeft + "px";
|
||||
this.$refs.thediv.style.top = this.yPos + document.body.scrollTop + "px";
|
||||
|
||||
if (this.yon) {
|
||||
this.yPos = this.yPos + this.step;
|
||||
} else {
|
||||
this.yPos = this.yPos - this.step;
|
||||
}
|
||||
if (this.yPos < 0) {
|
||||
this.yon = 1;
|
||||
this.yPos = 0;
|
||||
}
|
||||
if (this.yPos >= height - this.Hoffset) {
|
||||
this.yon = 0;
|
||||
this.yPos = height - this.Hoffset;
|
||||
}
|
||||
|
||||
if (this.xon) {
|
||||
this.xPos = this.xPos + this.step;
|
||||
} else {
|
||||
this.xPos = this.xPos - this.step;
|
||||
}
|
||||
if (this.xPos < 0) {
|
||||
this.xon = 1;
|
||||
this.xPos = 0;
|
||||
}
|
||||
if (this.xPos >= width - this.Woffset) {
|
||||
this.xon = 0;
|
||||
this.xPos = width - this.Woffset;
|
||||
}
|
||||
},
|
||||
clearFdAd() {
|
||||
clearInterval(interval);
|
||||
},
|
||||
starFdAd() {
|
||||
interval = setInterval(this.changePos, this.delay);
|
||||
},
|
||||
toStudy(){
|
||||
location.href=this.webBaseUrl+'/course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course'
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#thediv {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
left: 2px;
|
||||
height: 184px;
|
||||
width: 280px;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
46
src/components/Portal/agreement.vue
Normal file
46
src/components/Portal/agreement.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="item-agr">
|
||||
<div style="padding: 40px 20px 0 20px;color: #8a8a8a;">
|
||||
<div style="text-align: center;font-size: 26px;padding-bottom:40px ;">京东方大学堂内容发布须知</div>
|
||||
<div style="min-height: 300px;max-height: 500px;overflow-y: auto;">
|
||||
|
||||
<div style="line-height: 30px; white-space:pre-line" v-html="context" ></div>
|
||||
</div>
|
||||
<!-- <div style="height: 100px;"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import apiProtocol from '@/api/modules/protocol.js';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
baseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||||
context:'',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getprotocol()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
methods:{
|
||||
getprotocol(){
|
||||
apiProtocol.query(1).then(res=>{
|
||||
if(res.status == 200){
|
||||
this.context = res.result.content;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
87
src/components/Portal/author.vue
Normal file
87
src/components/Portal/author.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="item-author">
|
||||
<div>
|
||||
<el-avatar shape="circle" size="small" :src="userAvatar"></el-avatar>
|
||||
<!-- <div class="avatar-text" :style="{width:width,height:height,fontSize:fontSize}">{{userName}}</div> -->
|
||||
</div>
|
||||
<div v-if="!onlyAvatar" style="padding-left: 5px;padding-top: 6px;font-size: 14px;color: #666666;">
|
||||
<span>{{userName}}</span>
|
||||
<span class="author-text" v-if="userInfo && userInfo!=''">({{userInfo}})</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
data:{
|
||||
type:Object,
|
||||
default(){
|
||||
return {
|
||||
avatar:'',
|
||||
name:'',
|
||||
info:'',
|
||||
sex:null,
|
||||
}
|
||||
}
|
||||
},
|
||||
width:{
|
||||
type:String,
|
||||
default:'28px'
|
||||
},
|
||||
height:{
|
||||
type:String,
|
||||
default:'28px'
|
||||
},
|
||||
onlyAvatar:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
baseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||||
userAvatar:'',
|
||||
userName:'',
|
||||
userInfo:'',
|
||||
usersex:null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.userAvatar=require("@/assets/images/user/default.png");
|
||||
},
|
||||
mounted() {
|
||||
this.loadAvatar()
|
||||
},
|
||||
watch:{
|
||||
data(newVal){
|
||||
this.loadAvatar()
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
loadAvatar(){
|
||||
this.userName=this.data.name;
|
||||
if(this.data.avatar && this.data.avatar!=''){
|
||||
this.userAvatar=this.data.avatar;
|
||||
}
|
||||
this.userInfo=this.data.info;
|
||||
this.usersex=this.data.sex
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.item-author{
|
||||
// font-size: 0.9em;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
.author-text{
|
||||
color: #666666;
|
||||
}
|
||||
.avatar-text{
|
||||
color: #73adfe;
|
||||
border: 1px solid #73adfe;
|
||||
background: #d9e9ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
135
src/components/Portal/authorInfo.vue
Normal file
135
src/components/Portal/authorInfo.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="item-author">
|
||||
<div style="width:28px;height:28px;">
|
||||
<!-- <el-avatar shape="square" size="small" :src="userAvatar" v-if="userAvatar"></el-avatar> -->
|
||||
<!-- <div v-else class="uavatar"><span class="uavatar-text">{{avatarText}}</span></div> -->
|
||||
<el-avatar shape="circle" size="small" :src="userAvatar" v-if="userAvatar"></el-avatar>
|
||||
<div v-else class="uavatar">
|
||||
<div v-if="sex == null" style="border-radius: 50%;width: 28px;height: 28px;"></div>
|
||||
<div v-else>
|
||||
<div v-if="sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
|
||||
<div v-else><img src="../../../public/images/Avatarwoman.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!onlyAvatar" style="padding-left: 5px;padding-top: 6px;font-size: 14px;color: #666666;">
|
||||
<span>{{userName}}</span>
|
||||
<span class="author-text" v-if="userInfo && userInfo!=''">({{userInfo}})</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
userAvatarText
|
||||
} from "@/utils/tools.js";
|
||||
export default {
|
||||
props:{
|
||||
avatar:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
width:{
|
||||
type:String,
|
||||
default:'200px'
|
||||
},
|
||||
sex:{
|
||||
type:Number,
|
||||
},
|
||||
name:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
info:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
onlyAvatar:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
baseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||||
userAvatar:'',
|
||||
userName:'',
|
||||
userInfo:'',
|
||||
usersex:null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.userAvatar=require("@/assets/images/user/default.png");
|
||||
},
|
||||
mounted() {
|
||||
this.userName=this.name;
|
||||
if(this.avatar && this.avatar!=''){
|
||||
this.userAvatar=this.avatar;
|
||||
}
|
||||
this.userInfo=this.info;
|
||||
this.usersex = this.sex;
|
||||
},
|
||||
watch:{
|
||||
name(newVal,oldVal){
|
||||
this.userName=newVal;
|
||||
},
|
||||
avatar(newVal,oldVal){
|
||||
if(newVal){
|
||||
this.userAvatar=this.baseUrl+newVal;
|
||||
}
|
||||
},
|
||||
sex(newVal,oldVal){
|
||||
this.usersex=newVal;
|
||||
},
|
||||
info(newVal,oldVal){
|
||||
this.userInfo=newVal;
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
avatarText(){
|
||||
return userAvatarText(this.userName);
|
||||
}
|
||||
},
|
||||
// computed:{
|
||||
// headImag(){
|
||||
// if(this.avatar || this.avatar==null || this.avatar==''){
|
||||
// return require("@/assets/images/user/default.png");
|
||||
// }else{
|
||||
// return this.baseUrl+this.avatar;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.item-author{
|
||||
// font-size: 0.9em;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
.author-text{
|
||||
color: #666666;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.uavatar{
|
||||
// border: 1px solid #73adfe;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
// background: #d9e9ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.uavatar-text{
|
||||
transform: scale(0.8);
|
||||
font-size: 12px;
|
||||
color: #73adfe;
|
||||
}
|
||||
img{
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
853
src/components/Portal/comments.vue
Normal file
853
src/components/Portal/comments.vue
Normal file
@@ -0,0 +1,853 @@
|
||||
<template>
|
||||
<!--评论组件-->
|
||||
<div class="comments">
|
||||
<div v-if="showTop" class="comments-top">
|
||||
<div class="comments-top-left">评论 <span style="color: #797979;">{{total}}条</span>
|
||||
<el-checkbox v-if="objType ==2" class="btn" v-model="value" type="primary">只看作者</el-checkbox>
|
||||
<el-checkbox v-if="objType ==3" class="btn" v-model="value" type="primary">{{value?'查看所有':'只看案主'}}</el-checkbox>
|
||||
</div>
|
||||
<div class="comments-top-right" v-if="objType !==2">
|
||||
<span @click="showList(false)" v-if="listShow">收起<i class="el-icon-arrow-down"></i></span>
|
||||
<span @click="showList(true)" v-else >打开<i class="el-icon-arrow-up"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-input" v-if="!readonly">
|
||||
<div class="grid-content bg-purple">
|
||||
<div style="position: relative !important" class="at-min">
|
||||
<!-- <el-popover placement="top" width="300" trigger="click">
|
||||
<el-radio-group v-model="teacherInfo">
|
||||
<el-radio-button class="reference-tag" v-for="item in teachers" :key="item.id" :label="item.teacherName"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-tag ref="tag" slot="reference"></el-tag>
|
||||
</el-popover> -->
|
||||
<el-popover placement="top-start" width="160" v-model="visible">
|
||||
<p style="margin-bottom: 10px">请选择要@的老师</p>
|
||||
<div>
|
||||
<el-radio-group v-model="toUserId" @change="confirmTeacher()">
|
||||
<el-radio-button
|
||||
class="reference-tag"
|
||||
v-for="item in toUsers"
|
||||
:key="item.aid"
|
||||
:label="item.aid">{{ item.name }}</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!-- <div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="cancelTeacher()">取消</el-button>
|
||||
<el-button type="primary" >确定</el-button>
|
||||
</div> -->
|
||||
<el-tag ref="tag" slot="reference" class="tag-block"></el-tag>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div style="width:100%;display:flex;">
|
||||
<div style="flex: 1;">
|
||||
<!-- type="textarea"
|
||||
:row="1" -->
|
||||
<el-input
|
||||
:autosize="{ minRows: 2, maxRows: 2 }"
|
||||
type="textarea"
|
||||
class="hideControl"
|
||||
show-word-limit
|
||||
v-model="inputValue"
|
||||
maxlength="800"
|
||||
placeholder="写下您的评论(800字以内)，可以@作者哦～"
|
||||
></el-input>
|
||||
</div>
|
||||
<div style="width: 90px;display: flex;justify-content: flex-end;">
|
||||
<el-button @click="submit()" style="height: 48px" type="primary">发布</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--列表内容-->
|
||||
<div class="comments-items" v-show="listShow">
|
||||
<!--一个评论-->
|
||||
<div class="zan-wu" v-if="list.length == 0">暂无评论～</div>
|
||||
<div class="comment" v-for="(com,comIdx) in list" :key="com.id">
|
||||
<div class="comment-top">
|
||||
<div class="comment-">
|
||||
<authorInfo :avatar="com.avatar" :name="com.sysCreateBy" :sex="com.sex"></authorInfo>
|
||||
</div>
|
||||
<div class="comment-time">
|
||||
<showTime :time="com.sysCreateTime"></showTime>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-body" >
|
||||
<div class="comment-info" @mouseover="showButtons(com.id)" @mouseout="hideButtons()">
|
||||
<div class="comment-content" @click="cancelReply()">{{com.content}}</div>
|
||||
<div class="comment-btns">
|
||||
<!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
|
||||
<div v-show="btnsShowRowId==com.id">
|
||||
<a @click="showReply(com)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
|
||||
<!--必须当前登录人是一个人-->
|
||||
<a v-if="userInfo.aid==com.sysCreateAid" @click="delCommnet(com,comIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
|
||||
<a v-if="com.replyList && com.replyList.length==5" @click="showMoreReply(com)" ><svg-icon icon-class="all" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>全部</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="replyInfo.parentId==com.id" class="comment-reply" style="padding-bottom: 5px;">
|
||||
<div style="width:100%;display:flex;">
|
||||
<div style="flex: 1;">
|
||||
<el-input class="hideControl" type="textarea" show-word-limit v-model="replyInfo.content" maxlength="800" placeholder="回复内容..."></el-input>
|
||||
</div>
|
||||
<div style="width: 120px;display: flex;justify-content: flex-end;">
|
||||
<el-button @click="submitReply(com)" type="primary">发布回复</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--回复内容-->
|
||||
<div v-if="com.replyList && com.replyList.length>0">
|
||||
<div class="comment" v-for="(reply,replyIdx) in com.replyList" :key="reply.id" :class="replyIdx===com.replyList.length-1 ? 'comment-last' : ''">
|
||||
<div class="comment-top">
|
||||
<div class="comment-author">
|
||||
<authorInfo :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex"></authorInfo>
|
||||
<span style="margin-left: 10px;color: #8590A6;font-size:14px; ">回复</span>
|
||||
<span style="margin-left: 10px; font-size:14px">{{reply.replyName || reply.toAname}}</span>
|
||||
</div>
|
||||
<div class="comment-time">
|
||||
<showTime :time="reply.sysCreateTime"></showTime>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-body" @mouseover="showButtons(reply.id)" @mouseout="hideButtons()">
|
||||
<div class="comment-info" >
|
||||
<div class="comment-content" @click="cancelReply()">{{reply.content}}</div>
|
||||
<div class="comment-btns">
|
||||
<!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
|
||||
<div v-show="btnsShowRowId==reply.id">
|
||||
<a @click="showReply(reply)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
|
||||
<a v-if="userInfo.aid==reply.sysCreateAid" @click="delReply(com,reply,replyIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--发布回复-->
|
||||
<div v-if="replyInfo.parentId==reply.id" class="comment-reply" style="padding-bottom: 5px;">
|
||||
<div style="width:100%;display:flex;">
|
||||
<div style="flex: 1;">
|
||||
<el-input show-word-limit class="hideControl" type="textarea" v-model="replyInfo.content" maxlength="100" placeholder="回复内容..."></el-input>
|
||||
</div>
|
||||
<div style="width: 120px;display: flex;justify-content: flex-end;">
|
||||
<el-button @click="submitReply(com)" type="primary">发布回复</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-div">
|
||||
<!-- v-if="moreState == 1 -->
|
||||
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
|
||||
<span class="pag-text-msg" style="font-size:14px;color: #444444;" v-else-if="list.length !== 0 && moreState == 3">没有更多数据了</span>
|
||||
</div>
|
||||
<el-dialog title="全部回复内容" width="60%" :visible.sync="replyDiaglog.show" :close-on-click-modal="false" custom-class="g-dialog">
|
||||
<div style="padding: 10px;max-height: 500px;overflow-y: auto;">
|
||||
<div class="comment" v-for="(reply,rIdx) in replyDiaglog.list" :key="rIdx">
|
||||
<div class="comment-top">
|
||||
<div class="comment-author">
|
||||
<authorInfo :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex"></authorInfo>
|
||||
<span style="margin-left: 10px;color: #8590A6;font-size:14px; ">回复</span>
|
||||
<span style="margin-left: 10px; font-size:14px">{{reply.replyName || reply.toAname}}</span>
|
||||
</div>
|
||||
<div class="comment-time">
|
||||
<showTime :time="reply.sysCreateTime"></showTime>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-body" @mouseover="showButtons(reply.id)" @mouseout="hideButtons()">
|
||||
<div class="comment-info">
|
||||
<div class="comment-content">{{reply.content}}</div>
|
||||
<div class="comment-btns"><!--操作还没有加-->
|
||||
<div v-show="btnsShowRowId==reply.id">
|
||||
<a @click="showDlgReply(reply)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
|
||||
<a v-if="userInfo.aid==reply.sysCreateAid" @click="delDlgReply(reply,rIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--发布回复-->
|
||||
<div v-if="replyInfo.parentId==reply.id" class="comment-reply" style="padding-bottom: 5px;">
|
||||
<div style="width:100%;display:flex;">
|
||||
<div style="flex: 1;">
|
||||
<el-input show-word-limit class="hideControl" type="textarea" v-model="replyInfo.content" maxlength="100" placeholder="回复内容..."></el-input>
|
||||
</div>
|
||||
<div style="width: 120px;display: flex;justify-content: flex-end;">
|
||||
<el-button @click="submitDlgReply(com)" type="primary">发布回复</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 20px 10px;text-align: center;">
|
||||
<div v-if="replyDiaglog.pages>replyDiaglog.pageIndex">
|
||||
<span class="pag-text" @click="loadMoreReply()">加载更多</span>
|
||||
</div>
|
||||
<div v-else >
|
||||
<span class="pag-text-msg">没有更多数据了</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="replyDiaglog.show= false"> 关 闭 </el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!-- <el-dialog title="选择@的人" :visible.sync="toUserDig.show" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
|
||||
<div style="height: 200px;padding-right: 30px;">
|
||||
<el-form label-width="100px" @submit.native.prevent >
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="toUserDig.name" maxlength="10" placeholder="根据姓名查找" @keyup.enter.native="findUserKeyupEnter">
|
||||
<el-button @click="findUser" slot="append" icon="el-icon-search"></el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="padding: 0px 20px;">
|
||||
<a style="margin: 5px;cursor: pointer;">
|
||||
<el-tag v-for="(u,uidx) in toUserDig.list" :key="uidx" :label="u.aid" @click="confirmUser(u)">{{u.name+'('+u.orgInfo+')'}}</el-tag>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="toUserDig.show= false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import showTime from '@/components/Portal/datetimeShow.vue'
|
||||
import apiComment from '@/api/modules/comments.js'
|
||||
import apiUser from '@/api/system/user.js'
|
||||
import authorInfo from '@/components/Portal/authorInfo.vue';
|
||||
// import author from '@/components/Portal/author.vue';
|
||||
import { mapGetters } from 'vuex';
|
||||
export default {
|
||||
props:{
|
||||
showTop:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
authorId:{
|
||||
type:String,
|
||||
},
|
||||
objId:{
|
||||
type:String,
|
||||
required:true
|
||||
},
|
||||
objType:{
|
||||
type:Number,
|
||||
required:true
|
||||
},
|
||||
objTitle:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
toUsers:{
|
||||
type:Array,
|
||||
},
|
||||
|
||||
readonly:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
components:{showTime,authorInfo},
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value:false,
|
||||
sex:null,
|
||||
author:'',
|
||||
moreState:1,
|
||||
isAuthor: false,
|
||||
authorList:[],//当前页面存储的用户信息，如果已经存在就不再重新请求了
|
||||
toUserId: '',
|
||||
loadStatus:'more',//more,loading,noMore
|
||||
pageSize:10,
|
||||
pageIndex:1,
|
||||
total:0,
|
||||
listShow:true,
|
||||
inputValue:'',
|
||||
list:[],
|
||||
replyParent:{},
|
||||
replyShow:false,
|
||||
btnsShowRowId:'',
|
||||
replyInfo:{
|
||||
clevel:2,
|
||||
parentId:'',
|
||||
replyAid:'',
|
||||
commentId:'',
|
||||
replyName:'',
|
||||
objType:'',
|
||||
objId:'',
|
||||
content:''
|
||||
},
|
||||
replyDiaglog:{
|
||||
show:false,
|
||||
pageIndex:1,
|
||||
pageSize:8,
|
||||
pages:1,
|
||||
count:0,
|
||||
commentId:'',
|
||||
list:[]
|
||||
},
|
||||
toUserDig:{
|
||||
show:false,
|
||||
name:'',
|
||||
chooseUserId:'',
|
||||
chooseUserName:'',
|
||||
list:[]
|
||||
},
|
||||
visible:false,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value(newVal,oldVal){
|
||||
if(newVal){
|
||||
this.author = this.authorId;
|
||||
} else {
|
||||
this.author = '';
|
||||
}
|
||||
this.loadData();
|
||||
},
|
||||
inputValue(val,oldVal) {
|
||||
let fu = val.substr(-1);
|
||||
if(fu == '@'&&!oldVal) {
|
||||
this.toUserId = '';
|
||||
if(this.toUsers.length == 1 && this.toUsers.length !== 0) {
|
||||
this.toUserDig.chooseUserId = this.toUsers[0].aid;
|
||||
this.toUserDig.chooseUserName=this.toUsers[0].name;
|
||||
this.inputValue+=this.toUsers[0].name;
|
||||
}else {
|
||||
this.$refs.tag.$el.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.author = this.authorId;
|
||||
this.loadData(false);
|
||||
//在中文输入法状态下输入光标不在文字最后，同时会被遮挡两个文字大小的长度
|
||||
// let vm=document.querySelector('.hideControl input')
|
||||
// vm.addEventListener('compositionstart',(e)=>{
|
||||
// vm.style.padding='0 63px 0 0'
|
||||
// vm.size=100
|
||||
//以上两种方式都未解决
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
loadMore() {
|
||||
this.pageIndex +=1;
|
||||
this.loadData(true);
|
||||
},
|
||||
// lookYourself() {// 只看作者
|
||||
// this.pageIndex =1;
|
||||
// this.isAuthor = !this.isAuthor;
|
||||
// if(this.isAuthor){
|
||||
// this.author = this.authorId;
|
||||
// } else{
|
||||
// this.author = '';
|
||||
// }
|
||||
// this.loadData();
|
||||
// },
|
||||
loadAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
|
||||
// console.log(list,ids)
|
||||
if(ids.length==0){
|
||||
return;
|
||||
}
|
||||
const noReapetIds=[...new Set(ids)]
|
||||
apiUser.getByIds(ids).then(res=>{
|
||||
if(res.status==200){
|
||||
list.forEach((item,index)=>{
|
||||
res.result.some(author=>{
|
||||
if(author.aid==item.sysCreateAid){
|
||||
item.avatar=author.avatar;
|
||||
item.orgInfo=author.orgInfo;
|
||||
item.sex=author.sex;
|
||||
return true;
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
});
|
||||
}else{
|
||||
console.log('加载用户头像信息:'+res.error);
|
||||
//this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
// cancelTeacher() {
|
||||
// this.inputValue = this.inputValue.substr(0, this.inputValue.length -1);
|
||||
// this.visible = false;
|
||||
// },
|
||||
confirmTeacher() {
|
||||
this.toUserDig.chooseUserId = this.toUserId;
|
||||
this.toUsers.forEach(item=>{
|
||||
if(item.aid == this.toUserId) {
|
||||
this.toUserDig.chooseUserName=item.name;
|
||||
this.inputValue+=item.name;
|
||||
}
|
||||
})
|
||||
this.visible = false;
|
||||
},
|
||||
loadData(append){
|
||||
let params={
|
||||
pageIndex:this.pageIndex,
|
||||
pageSize:this.pageSize,
|
||||
type:this.objType,
|
||||
id:this.objId,
|
||||
author: this.author,
|
||||
}
|
||||
let $this=this;
|
||||
apiComment.pageQuery(params).then(res=>{
|
||||
if(res.status==200){
|
||||
let ids=[];
|
||||
let allList=[];
|
||||
res.result.list.forEach(item=>{
|
||||
item.avatar='';
|
||||
item.orgInfo='';
|
||||
// item.sex=null;
|
||||
allList.push(item);
|
||||
ids.push(item.sysCreateAid);
|
||||
if(item.replyList && item.replyList!=''){
|
||||
item.replyList.forEach(reply=>{
|
||||
reply.avatar='';
|
||||
reply.orgInfo='';
|
||||
reply.sex=null;
|
||||
allList.push(reply);
|
||||
ids.push(reply.sysCreateAid);
|
||||
})
|
||||
}
|
||||
});
|
||||
this.loadAuthorInfo(allList,ids);
|
||||
this.total=res.result.count;
|
||||
if(append){
|
||||
res.result.list.forEach(item=>{
|
||||
$this.list.push(item);
|
||||
});
|
||||
}else{
|
||||
$this.list=res.result.list;
|
||||
}
|
||||
if($this.list.length == this.total) {
|
||||
this.moreState = 3;
|
||||
}
|
||||
this.$emit('writeTotal',this.total);
|
||||
}else{
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
showList(flag){
|
||||
this.listShow=flag;
|
||||
},
|
||||
submit(){
|
||||
|
||||
if(this.inputValue!=''){
|
||||
let cdata={
|
||||
objType:this.objType,
|
||||
objId:this.objId,
|
||||
parentId:'-1',
|
||||
content:this.inputValue,
|
||||
clevel:1,
|
||||
toAid:'',
|
||||
toAname:'',
|
||||
}
|
||||
if(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.list.unshift(res.result);
|
||||
// this.sex =
|
||||
res.result.sex=null;
|
||||
this.list.unshift(res.result);
|
||||
this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
|
||||
this.$message.success('发布成功');
|
||||
//
|
||||
|
||||
this.total++;
|
||||
this.$emit('success',res.result);
|
||||
this.inputValue='';
|
||||
this.toUserDig.chooseUserId='';
|
||||
this.toUserDig.chooseUserName='';
|
||||
}else{
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
showButtons(id){
|
||||
if(!this.readonly){
|
||||
this.btnsShowRowId=id;
|
||||
}
|
||||
},
|
||||
hideButtons(){
|
||||
this.btnsShowRowId='';
|
||||
},
|
||||
showReply(item){
|
||||
this.replyInfo.objType=this.objType;
|
||||
this.replyInfo.objId=this.objId;
|
||||
this.replyInfo.parentId=item.id;
|
||||
this.replyInfo.replyAid=item.sysCreateAid;
|
||||
this.replyInfo.replyName=item.sysCreateBy;
|
||||
this.replyShow=true;
|
||||
},
|
||||
cancelReply(){
|
||||
this.replyInfo.parentId='';
|
||||
},
|
||||
submitReply(comment){
|
||||
if(this.replyInfo.content==''){
|
||||
return;
|
||||
}
|
||||
this.replyInfo.content=this.replyInfo.content.replace(/^\s*|\s*$/g,"");
|
||||
if(this.replyInfo.content==''){
|
||||
return;
|
||||
}
|
||||
this.replyInfo.commentId=comment.id;
|
||||
if(comment.replyList==''){
|
||||
comment.replyList=[];
|
||||
}
|
||||
apiComment.reply(this.replyInfo).then(res=>{
|
||||
if(res.status==200){
|
||||
res.result.sex = null;
|
||||
this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
|
||||
comment.replyList.push(res.result);
|
||||
this.replyInfo.parentId='';
|
||||
this.replyInfo.content='';
|
||||
this.$message.success("发布成功");
|
||||
}else{
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
delCommnet(com,idx){
|
||||
if(com.replyList!='' && com.replyList.length>0){
|
||||
this.$message.error('有回复的评论不能删除');
|
||||
return;
|
||||
}
|
||||
this.$confirm('您确定要删除所选评论吗?', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
apiComment.del(com.id,this.userInfo.aid).then(res=>{
|
||||
if(res.status==200){
|
||||
this.list.splice(idx,1);
|
||||
this.total--;
|
||||
this.$message.success("删除成功");
|
||||
this.$emit('delSuccess');
|
||||
}else{
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
delReply(com,re,idx){
|
||||
// if(com.replyList!='' && com.replyList.length>0){
|
||||
// this.$message.error('有回复的评论不能删除');
|
||||
// }
|
||||
let params={
|
||||
id:re.id,
|
||||
user:this.userInfo.aid,
|
||||
pid:re.parentId
|
||||
}
|
||||
this.$confirm('您确定要删除所选评论吗?', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
apiComment.delReply(params).then(res=>{
|
||||
if(res.status==200){
|
||||
com.replyList.splice(idx,1);
|
||||
this.$message.success("删除成功");
|
||||
}else{
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
delDlgReply(re,idx){ //弹出窗口中的删除操作
|
||||
let params={
|
||||
id:re.id,
|
||||
user:this.userInfo.aid,
|
||||
pid:re.parentId
|
||||
}
|
||||
let $this=this;
|
||||
this.$confirm('您确定要删除所选评论吗?', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
apiComment.delReply(params).then(res=>{
|
||||
if(res.status==200){
|
||||
$this.replyDiaglog.list.splice(idx,1);
|
||||
$this.$message.success("删除成功");
|
||||
}else{
|
||||
$this.$message.error(res.message);
|
||||
}
|
||||
}).catch(()=>{
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
showDlgReply(item){
|
||||
this.replyInfo.objType=this.objType;
|
||||
this.replyInfo.objId=this.objId;
|
||||
this.replyInfo.parentId=item.id;
|
||||
this.replyInfo.replyAid=item.sysCreateAid;
|
||||
this.replyInfo.replyName=item.sysCreateBy;
|
||||
this.replyShow=true;
|
||||
},
|
||||
submitDlgReply(){
|
||||
if(this.replyInfo.content==''){
|
||||
return;
|
||||
}
|
||||
this.replyInfo.content=this.replyInfo.content.replace(/^\s*|\s*$/g,"");
|
||||
if(this.replyInfo.content==''){
|
||||
return;
|
||||
}
|
||||
this.replyInfo.commentId=this.replyDiaglog.commentId;
|
||||
|
||||
apiComment.reply(this.replyInfo).then(res=>{
|
||||
if(res.status==200){
|
||||
res.result.sex = null;
|
||||
this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
|
||||
this.replyDiaglog.list.push(res.result);
|
||||
this.replyInfo.parentId='';
|
||||
this.replyInfo.content='';
|
||||
this.$message.success("发布成功");
|
||||
}else{
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
showMoreReply(comment){
|
||||
this.replyDiaglog.pages=1;
|
||||
this.replyDiaglog.count=0;
|
||||
this.replyDiaglog.pageIndex=1;
|
||||
this.replyDiaglog.list=[];
|
||||
this.replyDiaglog.show=true;
|
||||
this.replyDiaglog.commentId=comment.id;
|
||||
this.loadAllReplyData(false);
|
||||
},
|
||||
loadMoreReply(){
|
||||
this.replyDiaglog.pageIndex++;
|
||||
this.loadAllReplyData(true);
|
||||
},
|
||||
loadAllReplyData(append){
|
||||
let params={
|
||||
pageIndex:this.replyDiaglog.pageIndex,
|
||||
pageSize:this.replyDiaglog.pageSize,
|
||||
type:this.objType,
|
||||
commentId:this.replyDiaglog.commentId
|
||||
}
|
||||
let $this=this;
|
||||
apiComment.replyList(params).then(rs=>{
|
||||
if(rs.status==200){
|
||||
$this.replyDiaglog.count=rs.result.count;
|
||||
$this.replyDiaglog.pages=rs.result.totalPages;
|
||||
let ids=[];
|
||||
if(append){
|
||||
rs.result.list.forEach(item=>{
|
||||
item.avatar='';
|
||||
ids.push(item.sysCreateAid);
|
||||
$this.replyDiaglog.list.push(item);
|
||||
})
|
||||
}else{
|
||||
rs.result.list.forEach(item=>{
|
||||
item.avatar='';
|
||||
ids.push(item.sysCreateAid);
|
||||
})
|
||||
$this.replyDiaglog.list=rs.result.list;
|
||||
}
|
||||
this.loadAuthorInfo(rs.result.list,ids);
|
||||
}else{
|
||||
this.$message.error(rs.message);
|
||||
}
|
||||
})
|
||||
},
|
||||
showToUser(){
|
||||
this.toUserDig.show=true;
|
||||
this.toUserDig.chooseUserId='';
|
||||
this.toUserDig.chooseUserName='';
|
||||
},
|
||||
findUserKeyupEnter(){
|
||||
this.findUser();
|
||||
},
|
||||
findUser(){
|
||||
this.toUserDig.list=[];
|
||||
var name=this.toUserDig.name;
|
||||
if(name==''){
|
||||
return;
|
||||
}
|
||||
apiUser.findByName(name).then(rs=>{
|
||||
if(rs.status==200){
|
||||
this.toUserDig.list=rs.result;
|
||||
}else{
|
||||
this.$message.error('查询用户失败');
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
confirmUser(u){
|
||||
this.toUserDig.chooseUserId=u.aid;
|
||||
this.toUserDig.chooseUserName=u.name;
|
||||
this.toUserDig.show=false;
|
||||
this.toUserDig.name='';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-input--medium .el-input__inner {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
::v-deep .at-min{
|
||||
.el-popper[x-placement^=bottom] {
|
||||
// left: 0 !important;
|
||||
// bottom: 0 !important;
|
||||
margin-left: 30px !important;
|
||||
}
|
||||
.el-popover{
|
||||
|
||||
}
|
||||
}
|
||||
.tag-block{
|
||||
top:0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
|
||||
height: 1px;
|
||||
}
|
||||
.pag-text{
|
||||
border: 1px solid #292828;
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.reference-tag{
|
||||
display: block;
|
||||
// width: 100%;
|
||||
.el-radio-button__inner{
|
||||
border: 1px solid #fff !important;
|
||||
}
|
||||
|
||||
}
|
||||
.svg-btn{
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.comments{
|
||||
margin-top: 10px;
|
||||
background-color: #FFFFFF;
|
||||
padding: 5px 15px;
|
||||
.comments-top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding:10px;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
font-weight: 500;
|
||||
font-size: 1.1em;
|
||||
.comments-top-left{
|
||||
.btn{
|
||||
// width: 68px;
|
||||
// height: 32px;
|
||||
// background: #3C7EFF;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
.comments-top-center{
|
||||
|
||||
}
|
||||
.comments-top-right{
|
||||
color: #6b6b6b;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.comments-input{
|
||||
// border-bottom: 1px solid #dddddd;
|
||||
padding: 5px 15px 10px 15px;
|
||||
}
|
||||
.comments-items{
|
||||
padding: 5px 15px;
|
||||
.zan-wu{
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #6666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment{
|
||||
margin-top: 10px;
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.comment-top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom:10px;
|
||||
font-weight: 500;
|
||||
line-height: 30px;
|
||||
font-size: 1.1em;
|
||||
.comment-author{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.comment-time{
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.comment-body{
|
||||
padding-left: 40px;
|
||||
.comment-content{
|
||||
padding-bottom: 0px;
|
||||
word-break:break-all;
|
||||
}
|
||||
.comment-btns{
|
||||
// padding: 5px 10px 10px 0px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
a{
|
||||
margin-right:15px;
|
||||
span{
|
||||
margin-left: 6px;
|
||||
color: #8590A6;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-replys{
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
.comment-last{
|
||||
border-bottom: none;
|
||||
}
|
||||
::v-deep .hideControl{
|
||||
.el-input__count{
|
||||
}
|
||||
.el-textarea__inner{
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
222
src/components/Portal/course/courseItem.vue
Normal file
222
src/components/Portal/course/courseItem.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<el-card class="course-card" :body-style="{ padding: '0px' }">
|
||||
<router-link :to="jumpRouter(item)">
|
||||
<div class="course-image-box">
|
||||
<img :src="baseUrl+item.coverImg" style="width: 100%;height: 100%;" />
|
||||
<img :src="jumpPicture(item)" class="course-flag" />
|
||||
<div class="course-tip">
|
||||
<!-- <span class="course-study-count" ><i class="el-icon-view"></i> 499人在学</span> -->
|
||||
<!-- <span class="course-time">{{item.timeLength}}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
<div class="course-info-box">
|
||||
<div class="course-info-title">
|
||||
<router-link class="one-line-ellipsis" :to="jumpRouter(item)"><span v-html="item.name"></span></router-link>
|
||||
<div class="course-other-info">
|
||||
<div class="course-author">
|
||||
<img :src="item.avater"/>
|
||||
<!--这里应该是教师-->
|
||||
<!-- 这里需要调整 -->
|
||||
<div class="one-line-ellipsis" style="width:100%">{{item.sysCreateBy}}({{item.position}})</div>
|
||||
<!-- <authorInfo :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo"></authorInfo> -->
|
||||
<!-- <div>
|
||||
<svg-icon icon-class="viewsTwo"></svg-icon><span style="color:#444444">{{item.studys}}</span>
|
||||
<svg-icon icon-class="like"></svg-icon><span style="color:#444444">{{item.praises}}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="course-score-info">
|
||||
<span class="course-score">{{item.gradeScore}}</span>
|
||||
<span class="course-score-title">分</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="course-other-detail">
|
||||
<span>{{item.studys}}人学习</span>
|
||||
<div class="course-score-info">
|
||||
<el-rate disabled v-model="item.score"></el-rate>
|
||||
<span class="course-score">{{item.score}}</span>
|
||||
<!-- <span class="course-score-title">分</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cardmark">
|
||||
<div class="cardmark-name">目标学员</div>
|
||||
<div class="cardmark-info">{{item.forUsers}}</div>
|
||||
<div class="cardmark-name">课程价值</div>
|
||||
<div class="cardmark-info">{{item.value}}</div>
|
||||
<div class="cardmark-name">课程介绍</div>
|
||||
<div class="cardmark-info">{{item.summary}}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
props:{
|
||||
course:Object
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
baseUrl:process.env.VUE_APP_FILE_BASE_URL
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
item(){
|
||||
return this.course;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
jumpRouter(c){
|
||||
if(c.type==20){
|
||||
return '/course/detail?id='+c.id
|
||||
}else if(c.type==10){
|
||||
return '/course/micro?id='+c.id
|
||||
}
|
||||
},
|
||||
jumpPicture(c){
|
||||
if(c.type==20){
|
||||
return '/images/loglu.png'
|
||||
}else{
|
||||
return '/images/flag_wk.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-card {
|
||||
width: 290px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
.course-image-box {
|
||||
position: relative;
|
||||
height: 165px;
|
||||
.course-image {
|
||||
width: 288px;
|
||||
height: 165px;
|
||||
}
|
||||
.course-flag {
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 0;
|
||||
}
|
||||
.course-tip {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 0 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
.course-study-count {
|
||||
float: left;
|
||||
}
|
||||
.course-time {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-info-box {
|
||||
font-size: 14px;
|
||||
padding: 15px;
|
||||
.course-info-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #343434;
|
||||
// height: 58px;
|
||||
}
|
||||
.course-other-detail{
|
||||
margin:2px 0;
|
||||
font-size:12px;
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
span{
|
||||
color: #787878;
|
||||
}
|
||||
}
|
||||
.course-other-info {
|
||||
height: 40px;
|
||||
// margin-top: 10px;
|
||||
.course-author {
|
||||
float: left;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-bottom:1px solid #e4e4e4;
|
||||
img {
|
||||
margin-right: 5px;
|
||||
width: 30px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
>div:last-of-type{
|
||||
margin-left: auto;
|
||||
.svg-icon:last-of-type{
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.course-score-info {
|
||||
// float: right;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
// height: 40px;
|
||||
// line-height: 40px;
|
||||
.course-score {
|
||||
color: #f8a114;
|
||||
font-family: "Arial";
|
||||
font-size: 36px;
|
||||
}
|
||||
// .course-score-title {
|
||||
// font-size: 14px;
|
||||
// color: #787878;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.cardmark{
|
||||
position:absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(101,101,101,0.8);
|
||||
pointer-events: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 1.5s;
|
||||
-moz-transition: all 1.5s;
|
||||
-ms-transition: all 1.5s;
|
||||
-o-transition: all 1.5s;
|
||||
transition: all 1.5s;
|
||||
.cardmark-name{
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
.cardmark-info{
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-card:hover .cardmark{
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
72
src/components/Portal/datetimeShow.vue
Normal file
72
src/components/Portal/datetimeShow.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<!--此组件用于显示时间，几天前，几个小时前-->
|
||||
<span>{{showTime}}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
css:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
time:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
showTime(){
|
||||
if(this.time!=null && this.time!=''){
|
||||
let showStr='';
|
||||
let dt1=new Date(this.time.replace(/-/g,'/'));
|
||||
let dt2=new Date();
|
||||
var dateDiff = dt2.getTime() - dt1.getTime();//时间差的毫秒数
|
||||
var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
|
||||
var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
|
||||
var hours=Math.floor(leave1/(3600*1000))//计算出小时数
|
||||
var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
|
||||
var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
|
||||
var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
|
||||
var seconds=Math.round(leave3/1000)
|
||||
if(dayDiff>31){
|
||||
let monthDiff=Math.floor(dayDiff/30);//以30天为一个月不够精准严谨
|
||||
if(monthDiff>12){
|
||||
let yearDiff=Math.floor(monthDiff/12);//获取相差的年份
|
||||
// showStr=yearDiff+'年之前';
|
||||
showStr = this.time;
|
||||
}else{
|
||||
// showStr=monthDiff+'个月之前';
|
||||
showStr = this.time;
|
||||
}
|
||||
}else{
|
||||
if(dayDiff>0){
|
||||
// showStr=dayDiff+'天之前';
|
||||
showStr = this.time;
|
||||
}else if(hours>0){
|
||||
showStr=hours+'小时之前';
|
||||
}else if(minutes>0){
|
||||
showStr=minutes+'分钟之前';
|
||||
}else if(seconds>0){
|
||||
showStr=seconds+'秒之前';
|
||||
}else{
|
||||
showStr='刚刚';
|
||||
}
|
||||
}
|
||||
return showStr;
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
78
src/components/Portal/daytimeShow.vue
Normal file
78
src/components/Portal/daytimeShow.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<!--此组件用于显示时间，几天前，几个小时前-->
|
||||
<span>{{showTime}}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
css:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
time:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
showTime(){
|
||||
if(this.time!=null && this.time!=''){
|
||||
let showStr='';
|
||||
let dt1=new Date(this.time.replace(/-/g,'/'));
|
||||
let dt2=new Date();
|
||||
var dateDiff = dt2.getTime() - dt1.getTime();//时间差的毫秒数
|
||||
var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
|
||||
var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
|
||||
var hours=Math.floor(leave1/(3600*1000))//计算出小时数
|
||||
var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
|
||||
var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
|
||||
var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
|
||||
var seconds=Math.round(leave3/1000)
|
||||
if(dayDiff<1){
|
||||
if(hours>0){
|
||||
showStr=hours+'小时之前';
|
||||
}else if(minutes>0){
|
||||
showStr=minutes+'分钟之前';
|
||||
}else if(seconds>0){
|
||||
showStr=seconds+'秒之前';
|
||||
}
|
||||
}else{
|
||||
showStr=this.time;
|
||||
}
|
||||
// if(dayDiff>31){
|
||||
// let monthDiff=Math.floor(dayDiff/30);//以30天为一个月不够精准严谨
|
||||
// if(monthDiff>12){
|
||||
// let yearDiff=Math.floor(monthDiff/12);//获取相差的年份
|
||||
// showStr=yearDiff+'年之前';
|
||||
// }else{
|
||||
// showStr=monthDiff+'个月之前';
|
||||
// }
|
||||
// }else{
|
||||
// if(dayDiff>0){
|
||||
// showStr=dayDiff+'天之前';
|
||||
// }else if(hours>0){
|
||||
// showStr=hours+'小时之前';
|
||||
// }else if(minutes>0){
|
||||
// showStr=minutes+'分钟之前';
|
||||
// }else if(seconds>0){
|
||||
// showStr=seconds+'秒之前';
|
||||
// }
|
||||
// }
|
||||
return showStr;
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
214
src/components/Portal/discussItem.vue
Normal file
214
src/components/Portal/discussItem.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div class="article-info-tools">
|
||||
<div v-if="isAvater" class="article-info-tools-auth">
|
||||
<el-avatar size="small" :src="data.avater||'/temp/index/male.jpg'"></el-avatar>
|
||||
{{ data.name}}
|
||||
</div>
|
||||
<div class="article-info-tools-btns" style="cursor: pointer;">
|
||||
<div v-if="iconFilter.isAnswer" @click="jumpRouter('answer')" style="display:inline-block;margin-left:20px">
|
||||
<el-tooltip effect="light" content="回答" placement="left">
|
||||
<svg-icon icon-class="comment"></svg-icon>
|
||||
</el-tooltip>
|
||||
<span>{{data.answers}}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="!iconFilter.isRemark" @click="jumpRouter()" style="display:inline-block;margin-left:20px">
|
||||
<el-tooltip effect="light" content="评论" placement="left">
|
||||
<svg-icon icon-class="comment"></svg-icon>
|
||||
</el-tooltip>
|
||||
<span>{{ data.comments }}</span>
|
||||
</div>
|
||||
<!-- <a v-if="!iconFilter.isRemark" @mouseover="showText('showRemark')" @mouseout="hideText('showRemark')" :href="`${webBaseUrl}/article/detail`" >
|
||||
<svg-icon icon-class="comment"></svg-icon>
|
||||
{{ article[fieldsList.comments] }}
|
||||
<span v-show="showList.showRemark">评论</span>
|
||||
</a> -->
|
||||
<div v-if="!iconFilter.isShare" @click="addShare()" style="display:inline-block;margin-left:20px">
|
||||
<el-tooltip effect="light" content="分享" placement="top">
|
||||
<svg-icon icon-class="share"></svg-icon>
|
||||
</el-tooltip>
|
||||
{{ data.shares }}
|
||||
</div>
|
||||
<div v-if="!iconFilter.isPraise" @click="addPraise()" style="display:inline-block;margin-left:20px">
|
||||
<el-tooltip effect="light" content="点赞" placement="top">
|
||||
<svg-icon @click="emit('praise')" :icon-class="data.isPraise?'praised':'like'"></svg-icon>
|
||||
</el-tooltip>
|
||||
{{ data.praises }}
|
||||
</div>
|
||||
|
||||
<!-- <a v-if="!iconFilter.isShare" @mouseover="showText('showShare')" @mouseout="hideText('showShare')" :href="`${webBaseUrl}/article/detail`" >
|
||||
<svg-icon icon-class="share"></svg-icon>
|
||||
{{ article[fieldsList.shares] }}
|
||||
<span v-show="showList.showShare">分享</span>
|
||||
</a> -->
|
||||
<div v-if="!iconFilter.isCollect" @click="addCollect()" style="display:inline-block;margin-left:20px">
|
||||
<el-tooltip effect="light" content="收藏" placement="top">
|
||||
<svg-icon @click="emit('collect')" :icon-class="data.isCollect?'collected':'collection'"></svg-icon>
|
||||
</el-tooltip>
|
||||
{{ data.favorites }}
|
||||
</div>
|
||||
<!-- <a v-if="!iconFilter.isCollect" @mouseover="showText('showCollect')" @mouseout="hideText('showCollect')" :href="`${webBaseUrl}/article/detail`" >
|
||||
<svg-icon icon-class="collection"></svg-icon>
|
||||
{{ article[fieldsList.collects] }}
|
||||
<span v-show="showList.showCollect">收藏</span>
|
||||
</a> -->
|
||||
|
||||
|
||||
<!-- <a v-if="!iconFilter.isPraise" @mouseover="showText('showPraise')" @mouseout="hideText('showPraise')" :href="`${webBaseUrl}/article/detail`" >
|
||||
<svg-icon icon-class="like"></svg-icon>
|
||||
{{ article[fieldsList.praises] }}
|
||||
<span v-show="showList.showPraise">点赞</span>
|
||||
</a> -->
|
||||
<div v-if="!iconFilter.isBrowse" style="display:inline-block;margin-left:20px;cursor: default;">
|
||||
<el-tooltip effect="light" content="浏览量" placement="top">
|
||||
<svg-icon icon-class="views"></svg-icon>
|
||||
</el-tooltip>
|
||||
{{ data.views}}
|
||||
</div>
|
||||
|
||||
<!-- <a v-if="!iconFilter.isBrowse" @mouseover="showText('showBrowse')" @mouseout="hideText('showBrowse')" :href="`${webBaseUrl}/article/detail`" >
|
||||
<svg-icon icon-class="views"></svg-icon>
|
||||
{{ article[fieldsList.browses] }}
|
||||
<span v-show="showList.showBrowse">浏览量</span>
|
||||
</a> -->
|
||||
<!-- <el-tooltip class="article-info-tools-btn" effect="dark" content="Top Left 提示文字" placement="top-start">
|
||||
<svg-icon icon-class="comment"></svg-icon>{{ article[fieldsList.comments] }}
|
||||
</el-tooltip> -->
|
||||
<!-- <el-link v-if="!iconFilter.isRemark" :href="`${webBaseUrl}/article/detail`" >
|
||||
<svg-icon icon-class="comment"></svg-icon>
|
||||
评论
|
||||
</el-link> -->
|
||||
<!-- {{ article[fieldsList.comments] }} -->
|
||||
<!-- <a @mouseover="showText(1)" @mouseout="hideText(1)" v-if="!iconFilter.isShare" :href="`${webBaseUrl}/article/detail`" class="article-info-tools-btn">
|
||||
<svg-icon icon-class="share"></svg-icon>
|
||||
<span v-if="shareText">分享</span>{{ article[fieldsList.shares] }}
|
||||
</a> -->
|
||||
<!-- <el-link v-if="!iconFilter.isCollect" class="article-info-tools-btn">
|
||||
<svg-icon icon-class="collection"></svg-icon>
|
||||
收藏{{ article[fieldsList.collects] }}
|
||||
</el-link>
|
||||
<el-link v-if="!iconFilter.isPraise" class="article-info-tools-btn">
|
||||
<svg-icon icon-class="like"></svg-icon>
|
||||
点赞{{ article[fieldsList.praises] }}
|
||||
</el-link>
|
||||
<el-link v-if="!iconFilter.isBrowse" class="article-info-tools-btn">
|
||||
<svg-icon icon-class="views"></svg-icon>
|
||||
浏览量{{ article[fieldsList.browses] }}
|
||||
</el-link> -->
|
||||
</div>
|
||||
<el-dialog title="分享" :visible.sync="shareShow" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
|
||||
<div style="height: 200px;padding-right: 30px;">
|
||||
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="工号">
|
||||
<el-input v-model="shareInfo.code" placeholder="您要分享的人的工号">
|
||||
<el-button slot="append" icon="el-icon-search">搜索</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="shareShow= false">取 消</el-button>
|
||||
<el-button type="primary" >提交分享</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import apiPraise from "@/api/modules/praises.js"
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type:Object,
|
||||
default:function(){
|
||||
return {
|
||||
avater: '',
|
||||
name: '',
|
||||
comments: 0,
|
||||
shares: 0,
|
||||
collects: 0,
|
||||
praises: 0,
|
||||
browses: 0,
|
||||
answers:0
|
||||
}
|
||||
}
|
||||
},
|
||||
iconFilter: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
isAvater:{
|
||||
type:Boolean,
|
||||
default:function(){
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
shareShow:false,
|
||||
shareInfo:{
|
||||
code:''
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
methods:{
|
||||
addShare(){
|
||||
//分享
|
||||
this.shareShow=true;
|
||||
},
|
||||
addPraise(){
|
||||
//需要判断是否已点赞，已点赞的不再加
|
||||
this.$message({message:'点赞成功',type:'success'})
|
||||
},
|
||||
addCollect(){
|
||||
//需要判断是否已点赞，已点赞的不再加
|
||||
this.$message({message:'已加入收藏',type:'success'});
|
||||
},
|
||||
jumpRouter(type){
|
||||
if(type=='answer'){
|
||||
this.$router.push({path:'/qa/answer',query:{id:this.article.id}})
|
||||
}
|
||||
else{
|
||||
}
|
||||
// this.$router.push({path:'/article/detail'})
|
||||
},
|
||||
emit(type){
|
||||
this.$emit('enSure',type)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-info-tools {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.article-info-tools-auth {
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.el-avatar {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.article-info-tools-btns {
|
||||
line-height: 30px;
|
||||
.article-info-tools-btn {
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
544
src/components/Portal/interactBar.vue
Normal file
544
src/components/Portal/interactBar.vue
Normal file
@@ -0,0 +1,544 @@
|
||||
<template>
|
||||
<div class="interact-bar">
|
||||
<div v-show="theme==2" class="bottom-btn">
|
||||
<el-button class="btn fen-xiang" @click="addShare()"><img src="@/assets/images/icon/fenxiang@2x.png" alt="" srcset="">{{data.shares}}</el-button>
|
||||
<el-button class="btn dian-zan" @click="addPraise()"><img src="@/assets/images/icon/dianzan@2x.png" alt="" srcset="">{{data.praises}}</el-button>
|
||||
<el-button class="btn shou-cang" @click="addFavorite()"><img src="@/assets/images/icon/shoucang@2x.png" alt="" srcset="">{{data.favorites}}</el-button>
|
||||
</div>
|
||||
<div v-show="theme==1" class="interact-bar-btns" :style="{'justify-content':showAlign}">
|
||||
<div v-if="answers" @click="addAnswers()" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly || clickAnswer}">
|
||||
<el-tooltip effect="light" content="回答" placement="left">
|
||||
<!-- <svg-icon style="margin-right: 0;" icon-class="comment"></svg-icon> -->
|
||||
<img style="width:16px;height:16px;vertical-align: middle;" :src="require('@/assets/images/icon/answers.png')">
|
||||
</el-tooltip>
|
||||
<span class="interact-bar-value"> {{ data.answers}}</span>
|
||||
</div>
|
||||
<div v-if="comments" class="interact-bar-btn" :style="`min-width: ${nodeWidth};`" :class="{cursor:!readonly}">
|
||||
<el-tooltip effect="light" content="评论" placement="left">
|
||||
<svg-icon style="margin-right: 0;font-size: 16px;" icon-class="comment"></svg-icon>
|
||||
</el-tooltip>
|
||||
<span class="interact-bar-value"> {{data.comments}}</span>
|
||||
</div>
|
||||
<div v-if="shares" @click="addShare()" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly}">
|
||||
<el-tooltip effect="light" content="分享" placement="top">
|
||||
<svg-icon icon-class="share" style="margin-right: 0;font-size: 16px;"></svg-icon>
|
||||
</el-tooltip>
|
||||
<span class="interact-bar-value"> {{data.shares}}</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">
|
||||
<svg-icon style="margin-right: 0;font-size: 20px;" :icon-class="isPraise?'praised':'like'"></svg-icon>
|
||||
</el-tooltip>
|
||||
<span class="interact-bar-value"> {{ data.praises}}</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">
|
||||
<svg-icon style="font-size: 16px;margin-right: 0;" :icon-class="isFavorite?'collected':'collection'"></svg-icon>
|
||||
<!-- <svg-icon :icon-class="isFavorite?'collected':'dropdown_collected'"></svg-icon> -->
|
||||
<!-- dropdown_collected -->
|
||||
</el-tooltip>
|
||||
<span class="interact-bar-value"> {{ data.favorites}}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="views" style="cursor: default;" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly}">
|
||||
<el-tooltip effect="light" content="浏览量" placement="top">
|
||||
<svg-icon style="margin-right: 0;font-size: 16px;" icon-class="views"></svg-icon>
|
||||
</el-tooltip>
|
||||
<span class="interact-bar-value"> {{ data.views}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="分享" :visible.sync="shareShow" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
|
||||
<div style="height: 200px;padding-right: 30px;">
|
||||
<el-form label-width="100px" @submit.native.prevent >
|
||||
<el-form-item label="姓名或工号">
|
||||
<el-input v-model="shareInfo.name" maxlength="10" placeholder="您要分享的人的姓名查询" @keyup.enter.native="keyupEnter">
|
||||
<el-button @click="findUser" slot="append" icon="el-icon-search">搜索</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="padding: 0px 20px;">
|
||||
<el-checkbox-group v-model="shareUsers">
|
||||
<el-checkbox v-for="(u,uidx) in shareInfo.list" :key="uidx" :label="u.aid">{{u.name+'('+u.code+')'}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="shareShow= false">取 消</el-button>
|
||||
<el-button @click="submitShare" type="primary" >提交分享</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</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';
|
||||
export default {
|
||||
props: {
|
||||
data:{
|
||||
type:Object,
|
||||
default(){
|
||||
return{
|
||||
id:'',
|
||||
answers:0,
|
||||
favorites:0,
|
||||
comments:0,
|
||||
shares:0,
|
||||
praises:0,
|
||||
views:0,
|
||||
}
|
||||
}
|
||||
},
|
||||
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
|
||||
},
|
||||
shares:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
praises:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
views:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
type:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
theme:{
|
||||
type:Number,
|
||||
default:1
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
loading:false,
|
||||
isPraise:false,
|
||||
isFavorite:false,
|
||||
shareShow:false,
|
||||
shareUsers:[],
|
||||
shareInfo:{
|
||||
name:'',
|
||||
load:false,
|
||||
list:[]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed:{
|
||||
...mapGetters(['userInfo']),
|
||||
|
||||
showAlign(){
|
||||
if(this.align=='left'){
|
||||
return 'flex-start';
|
||||
}else if(this.align=='right'){
|
||||
return 'flex-end';
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
data(newVal,oldVal){
|
||||
// console.log(newVal,'newVal');
|
||||
// if(newVal && newVal.id!=''){
|
||||
// this.checkHas();
|
||||
// }
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.data && this.data.id!='' && !this.readonly){
|
||||
this.checkHas();
|
||||
}
|
||||
},
|
||||
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='回答'
|
||||
}
|
||||
content=sendName+typeText+content+'-'+title
|
||||
let message={
|
||||
content,
|
||||
refId,
|
||||
refType:this.type,
|
||||
sendName,
|
||||
acceptName,
|
||||
acceptId,
|
||||
title:'系统消息',
|
||||
sendType:1,
|
||||
conType,
|
||||
}
|
||||
apiMessage.save(message).then(res=>{
|
||||
if(res.status==200){
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
checkHas(){
|
||||
if(this.type>0){
|
||||
apiPraises.has(this.type,this.data.id).then(rs=>{
|
||||
if(rs.status==200 && rs.result){
|
||||
this.isPraise=true;
|
||||
}else{
|
||||
this.isPraise=false;
|
||||
}
|
||||
});
|
||||
apiFavorites.has(this.type,this.data.id).then(rs=>{
|
||||
if(rs.status==200 && rs.result){
|
||||
this.isFavorite=true;
|
||||
}else{
|
||||
this.isFavorite=false;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
addShare(){
|
||||
if(this.readonly){
|
||||
return
|
||||
}
|
||||
this.shareShow=true;
|
||||
},
|
||||
addPraise(){
|
||||
|
||||
if(this.type==0){
|
||||
console.log('未设置type值,1表课程,2表文章，3表案例，4表问答')
|
||||
return;
|
||||
}
|
||||
//需要判断是否已点赞，已点赞的不再加
|
||||
if(!this.readonly){
|
||||
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;
|
||||
}
|
||||
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;
|
||||
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'})
|
||||
}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{
|
||||
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--;
|
||||
}
|
||||
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.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:'',
|
||||
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;
|
||||
$this.data.shares++;
|
||||
if(rs.status!=200){
|
||||
this.$message.error("分享失败")
|
||||
}else{
|
||||
if(rs.result){
|
||||
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,'分享给我的');
|
||||
}
|
||||
}
|
||||
}else{
|
||||
this.$message.warning("您已分享给对方，分享失败")
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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:#8590A6
|
||||
}
|
||||
}
|
||||
}
|
||||
.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>
|
||||
217
src/components/Portal/interactRowBar.vue
Normal file
217
src/components/Portal/interactRowBar.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="interact-bar">
|
||||
<div class="interact-bar-left">
|
||||
<img :src="data[fieldsList.avater]" />
|
||||
<span style="width: 170px;display:inline-block;vertical-align: middle;" class="one-line-ellipsis">{{ data[fieldsList.author] }}</span>
|
||||
</div>
|
||||
<div class="interact-bar-btns" :style="{'justify-content':showAlign}">
|
||||
<div v-if="answers" class="interact-bar-btn">
|
||||
<el-tooltip effect="light" content="回答" placement="left">
|
||||
<svg-icon icon-class="comment"></svg-icon>
|
||||
</el-tooltip>
|
||||
<span>{{ data[fieldsList.answers] }}</span>
|
||||
</div>
|
||||
<div v-if="comments" @click="jumpRouter()" class="interact-bar-btn">
|
||||
<el-tooltip effect="light" content="评论" placement="left">
|
||||
<svg-icon icon-class="comment"></svg-icon>
|
||||
</el-tooltip>
|
||||
<span>{{ data[fieldsList.comments] }}</span>
|
||||
</div>
|
||||
<div v-if="shares" @click="addShare()" class="interact-bar-btn">
|
||||
<el-tooltip effect="light" content="分享" placement="top">
|
||||
<svg-icon icon-class="share"></svg-icon>
|
||||
</el-tooltip>
|
||||
{{ data[fieldsList.shares] }}
|
||||
</div>
|
||||
|
||||
<div v-if="favorites" @click="addCollect()" class="interact-bar-btn">
|
||||
<el-tooltip effect="light" content="收藏" placement="top">
|
||||
<svg-icon icon-class="collection"></svg-icon>
|
||||
</el-tooltip>
|
||||
{{ data[fieldsList.favorites] }}
|
||||
</div>
|
||||
|
||||
<div v-if="praises" @click="addPraise()" class="interact-bar-btn">
|
||||
<el-tooltip effect="light" content="点赞" placement="top">
|
||||
<svg-icon icon-class="like"></svg-icon>
|
||||
</el-tooltip>
|
||||
{{ data[fieldsList.praises] }}
|
||||
</div>
|
||||
|
||||
<div v-if="views" style="cursor: default;" class="interact-bar-btn">
|
||||
<el-tooltip effect="light" content="浏览量" placement="top">
|
||||
<svg-icon icon-class="views"></svg-icon>
|
||||
</el-tooltip>
|
||||
{{ data[fieldsList.views] }}
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="分享" :visible.sync="shareShow" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
|
||||
<div style="height: 200px;padding-right: 30px;">
|
||||
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="工号或姓名">
|
||||
<el-input v-model="shareInfo.code" placeholder="您要分享的人的工号或姓名">
|
||||
<el-button slot="append" icon="el-icon-search">搜索</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="shareShow= false">取 消</el-button>
|
||||
<el-button type="primary" >提交分享</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data:{
|
||||
type:Object,
|
||||
default(){
|
||||
return {
|
||||
avater:'/temp/index/female.jpg',
|
||||
author:'李玉冰（BOEU/教育技术中心）',
|
||||
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
|
||||
},
|
||||
fieldsList: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
avater: 'avater',
|
||||
author: 'author',
|
||||
answers:'answers',
|
||||
comments: 'comments',
|
||||
shares: 'shares',
|
||||
favorites: 'favorites',
|
||||
praises: 'praises',
|
||||
views: 'views'
|
||||
};
|
||||
}
|
||||
},
|
||||
iconFilter: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
type:{
|
||||
type:String,
|
||||
default:'article'
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
shareShow:false,
|
||||
shareInfo:{
|
||||
code:''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
showAlign(){
|
||||
if(this.align=='left'){
|
||||
return 'flex-start';
|
||||
}else if(this.align=='right'){
|
||||
return 'flex-end';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
addShare(){
|
||||
//分享
|
||||
this.shareShow=true;
|
||||
},
|
||||
addPraise(){
|
||||
//需要判断是否已点赞，已点赞的不再加
|
||||
this.$message({message:'点赞成功',type:'success'})
|
||||
},
|
||||
addCollect(){
|
||||
//需要判断是否已点赞，已点赞的不再加
|
||||
this.$message({message:'已加入收藏',type:'success'});
|
||||
},
|
||||
jumpRouter(){
|
||||
if(this.type=='article'){
|
||||
this.$router.push({path:'/article/detail'})
|
||||
}
|
||||
if(this.type=='case'){
|
||||
this.$router.push({path:'/case/detail'})
|
||||
}
|
||||
if(this.type=='course'){
|
||||
this.$router.push({path:'/course/detail'})
|
||||
}
|
||||
if(this.type=='qa'){
|
||||
this.$router.push({path:'/qa/answer'})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.interact-bar{
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.interact-bar-left{
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
img {
|
||||
margin-right: 10px;
|
||||
width: 30px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.interact-bar-btns {
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.interact-bar-btn {
|
||||
margin: 0 0 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
9
src/components/Portal/teacherList.vue
Normal file
9
src/components/Portal/teacherList.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<!--封装课程详细页面的右下方教师列表-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user