mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 02:46:44 +08:00
留言页面
This commit is contained in:
zhaofang
334
src/components/HomePage/homePage.vue
Normal file
334
src/components/HomePage/homePage.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="uc-header xcontent">
|
||||
<div class="header-box" >
|
||||
<div class="personalData">
|
||||
<!-- <div >
|
||||
<img src="../../../public/images/Avatarwoman.png" alt="">
|
||||
</div> -->
|
||||
<div class="uesr-avaer">
|
||||
<img :src="userInfo.avatar" v-if="userInfo.avatar !== '' ">
|
||||
<div v-else class="uavatar">
|
||||
<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 class="user-content">
|
||||
<div class="content-top">
|
||||
<h6 content-bottom><router-link to="/homePage"> {{userInfo.name}}</router-link>
|
||||
</h6>
|
||||
<div class="grade">
|
||||
<div>LV.1</div>
|
||||
<span style="color: #A3680A;margin-left:12px;line-height: 24px;">经验值：367</span>
|
||||
</div>
|
||||
<el-button round plain class="btn-user" size="small">关注TA</el-button>
|
||||
<el-button round plain class="btn-user" size="small"><router-link to="/homePage/leavingMessage">去留言</router-link></el-button>
|
||||
</div>
|
||||
<div class="content-bottom">
|
||||
<p class="portal-summary-text">你必须非常努力才能看起来毫不费力</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="learningData">
|
||||
<div class="learning-info">
|
||||
<div class="learning-qus">当月学习时长</div>
|
||||
<div class="learning-an"><span>{{uinfo.monthStudy}}</span>h</div>
|
||||
</div>
|
||||
<div class="learning-info">
|
||||
<div class="learning-qus">累计学习时长</div>
|
||||
<div class="learning-an"><span>{{uinfo.monthTotal}}</span>h</div>
|
||||
</div>
|
||||
<div class="learning-border" ></div>
|
||||
<div class="learning-info" style="margin-left:22px">
|
||||
<div class="learning-qus">当月学习天数</div>
|
||||
<div class="learning-an"><span>{{uinfo.monthDay}}</span>天</div>
|
||||
</div>
|
||||
<div class="learning-info">
|
||||
<div class="learning-qus">累计学习天数</div>
|
||||
<div class="learning-an"><span>{{uinfo.monthTotalDay}}</span>天</div>
|
||||
</div>
|
||||
<div class="learning-border" ></div>
|
||||
<div class="learning-info" style="margin-left:22px">
|
||||
<div class="learning-qus">我的U币（累计）</div>
|
||||
<div class="learning-an"><span>{{uinfo.uCurrency}}</span></div>
|
||||
</div>
|
||||
<div class="list">
|
||||
BOE 排行榜 >>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {userAvatarText,cutFullName} from "@/utils/tools.js";
|
||||
import { mapGetters } from 'vuex'
|
||||
import apiStart from '@/api/phase2/stat.js'
|
||||
export default {
|
||||
name: 'UcHeader',
|
||||
computed:{
|
||||
...mapGetters(['curIdentity','identity','userInfo']),
|
||||
avatarText(){
|
||||
return userAvatarText(this.userInfo.name);
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||||
uinfo:{
|
||||
monthStudy:0,//当月学习时长
|
||||
monthTotal: 0,
|
||||
monthDay:0,
|
||||
monthTotalDay:0,
|
||||
uCurrency:0
|
||||
},
|
||||
orgInfo:'',
|
||||
sex:'',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.sex = this.userInfo.sex;
|
||||
// 判断路由是进入的学员默认页面就重置setCurIdentity
|
||||
if(this.$route.path == '/uc/study/task' || this.$route.path == '/study/index'){
|
||||
this.setCurIdentity(1);
|
||||
}
|
||||
//let testName='京东方科技集团股份有限公司/北京中祥英科技有限公司/技术中心';
|
||||
//this.orgInfo=cutFullName(testName,1);
|
||||
this.orgInfo=cutFullName(this.userInfo.departFullName,1);
|
||||
this.getInfo();
|
||||
},
|
||||
methods:{
|
||||
getInfo(){
|
||||
apiStart.userTotal(this.userInfo.aid,[10,11,30]).then(res=>{
|
||||
if(res.status == 200 && res.result.length > 0) {
|
||||
res.result.forEach(item => {
|
||||
if(item.statType == 10) {
|
||||
this.uinfo.monthStudy = item.months;
|
||||
this.uinfo.monthTotal = item.total;
|
||||
}
|
||||
if(item.statType == 11) {
|
||||
this.uinfo.monthDay = item.months;
|
||||
this.uinfo.monthTotalDay = item.total;
|
||||
}
|
||||
if(item.statType == 30) {
|
||||
this.uinfo.uCurrency = item.total;
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
setCurIdentity(iden){
|
||||
this.$store.dispatch('SetCurIdentity',iden);
|
||||
},
|
||||
toPage(url){
|
||||
this.$router.push({path:url})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.learningData{
|
||||
width: 50%;
|
||||
padding-top: 70px;
|
||||
box-sizing: border-box;
|
||||
margin-left:auto;
|
||||
.learning-info{
|
||||
float: left;
|
||||
margin-right: 22px;
|
||||
.learning-qus{
|
||||
font-size: 14px;
|
||||
color: #666660;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.learning-an{
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
span{
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: #0060FF;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.learning-border{
|
||||
width: 1px;
|
||||
height: 49px;
|
||||
opacity: 0.3;
|
||||
border: 1px solid #AAA6A6;
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
// .content-bottom{
|
||||
// margin-top: 12px;
|
||||
.medal{
|
||||
float: left;
|
||||
img{
|
||||
width: 36px;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.medalbutt{
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.grade{
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
div{
|
||||
margin-left: 22px;
|
||||
font-weight: 600;
|
||||
float: left;
|
||||
width: 57px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
color: #9D6110 ;
|
||||
background: url('../../../public/images/lvbg.png') no-repeat 100% / 100%;
|
||||
}
|
||||
}
|
||||
// }
|
||||
.personalData{
|
||||
|
||||
flex: 1;
|
||||
padding-top: 40px;
|
||||
padding-left: 115px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.uesr-avaer{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-right: 30px;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.user-content{
|
||||
flex: 1;
|
||||
.content-top{
|
||||
margin-top: 15px;
|
||||
height: 56px;
|
||||
.btn-user{
|
||||
margin-top: 6px;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #0060FF;
|
||||
color: #0060FF;
|
||||
}
|
||||
h6{
|
||||
color: #333333;
|
||||
font-size: 26px;
|
||||
margin:0;
|
||||
float: left;
|
||||
}
|
||||
span{
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
.editbutt{
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 210px;
|
||||
background: url('../../../public/images/userbgimg.png') no-repeat;
|
||||
background-size:445px 210px;
|
||||
background-position: right 0;
|
||||
}
|
||||
|
||||
.uc-header{
|
||||
height: 210px;
|
||||
margin: 0 auto;
|
||||
|
||||
background: #fff;
|
||||
// background-color: #c9c2c2;
|
||||
}
|
||||
.upicon{
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
margin-left: 15px;
|
||||
font-size: 14px;
|
||||
i{font-size: 30px;color: #ffb30f;}
|
||||
div{color: #7b7b7b;padding: 5px 0px 10px 0px;}
|
||||
}
|
||||
.upicon:focus div{
|
||||
color: #588afc;
|
||||
}
|
||||
.identity{
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #fcfcfc;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
background-color: #ffffff;
|
||||
margin: 5px;
|
||||
}
|
||||
.active{
|
||||
background-color: #ffb30f;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #ffb30f;
|
||||
}
|
||||
.uc-alert{
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
padding: 0px 50x;
|
||||
.uc-alert-label{
|
||||
color: #3f3f3f;
|
||||
}
|
||||
.uc-alert-value{
|
||||
padding-top: 10px;
|
||||
color: #aa0000;
|
||||
}
|
||||
}
|
||||
.uavatar{
|
||||
border-radius: 50%;
|
||||
// border: 1px solid #73adfe;
|
||||
// color: #73adfe;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
line-height: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
// background: #d9e9ff;
|
||||
div{
|
||||
border-radius: 50%;
|
||||
img{
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -154,7 +154,23 @@ export const constantRoutes = [{
|
||||
hidden: true,
|
||||
component: (resolve) => require(['@/views/homepage/Index'], resolve),
|
||||
name: 'homePage',
|
||||
redirect: '/homePage/page',
|
||||
meta: { title: '主页', icon: 'dashboard', noCache: true, affix: false },
|
||||
children: [{
|
||||
path: 'page',
|
||||
hidden: true,
|
||||
component: (resolve) => require(['@/views/homepage/page'], resolve),
|
||||
name: 'page',
|
||||
meta: { title: '主页', icon: 'dashboard', noCache: true, affix: true }
|
||||
},
|
||||
{
|
||||
path: 'leavingMessage',
|
||||
hidden: true,
|
||||
component: (resolve) => require(['@/views/homepage/leavingMessage'], resolve),
|
||||
name: 'leavingMessage',
|
||||
meta: { title: '留言', icon: 'dashboard', noCache: true, affix: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/comments',
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
<top></top>
|
||||
<div style="height:72px"></div>
|
||||
<UcHeader></UcHeader>
|
||||
<div class="home-page-box">
|
||||
<router-view />
|
||||
<!-- <div class="home-page-box">
|
||||
<div class="home-page-left">
|
||||
<div class="book-input">
|
||||
<span>分享书籍</span>
|
||||
@@ -84,13 +85,13 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import top from '../../layout/components/TopNav/Index.vue'
|
||||
import UcHeader from '@/components/UcHeader/Index.vue'
|
||||
import UcHeader from '@/components/HomePage/homePage.vue'
|
||||
import CaseList from '@/components/HomePage/caseList.vue'
|
||||
import CourseList from '@/components/HomePage/courseList.vue'
|
||||
import NoteList from "@/components/HomePage/noteList.vue"
|
||||
|
||||
907
src/views/homepage/leavingMessage.vue
Normal file
907
src/views/homepage/leavingMessage.vue
Normal file
@@ -0,0 +1,907 @@
|
||||
<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> -->
|
||||
<!-- <el-radio-group class="btn" v-if="objType ==3" v-model="radio">
|
||||
<el-radio v-show="radio == 2" :label="1">查看所有</el-radio>
|
||||
<el-radio v-show="radio == 1" :label="2">只看案主 @案主可以给他发私信哦</el-radio>
|
||||
</el-radio-group> -->
|
||||
<el-checkbox v-if="objType ==3" class="btn" v-model="value" type="primary">{{'只看案主'}}</el-checkbox>
|
||||
<span v-if="objType ==3" class="anzhu"> @案主可以给他发私信哦</span>
|
||||
<!-- <span v-if="objType ==3"><span v-if="value" @click="value = true">查看所有</span><span v-if="!value" @click="value = false">只看案主 @案主可以给他发私信哦</span></span> -->
|
||||
</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
|
||||
v-if="objType !==3"
|
||||
:autosize="{ minRows: 2, maxRows: 2 }"
|
||||
type="textarea"
|
||||
class="hideControl"
|
||||
show-word-limit
|
||||
v-model="inputValue"
|
||||
maxlength="800"
|
||||
placeholder="写下您的评论(800字以内)，可以@作者哦～"
|
||||
></el-input>
|
||||
<el-input
|
||||
v-if="objType ==3"
|
||||
: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-author">
|
||||
<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()">
|
||||
<span style="color: #303133" v-html="displayAll(com)"></span>
|
||||
<span v-if="com.content.length>170" @click="changeIsAll(com)">
|
||||
{{com.isAll?'收起':'全文'}}
|
||||
</span>
|
||||
</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()">
|
||||
<span style="color: #303133" v-html="displayAll(reply)"></span>
|
||||
<span v-if="reply.content.length>170" @click="changeIsAll(reply)">
|
||||
{{reply.isAll?'收起':'全文'}}
|
||||
</span>
|
||||
</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>
|
||||
</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 {
|
||||
radio:1,
|
||||
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();
|
||||
},
|
||||
radio(newVal){
|
||||
if(newVal == 2){
|
||||
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.isAll=false;
|
||||
//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;
|
||||
reply.isAll=false;
|
||||
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.trim()!=''){
|
||||
let cdata={
|
||||
objType:this.objType,
|
||||
objId:this.objId,
|
||||
parentId:'-1',
|
||||
content:this.inputValue.trim(),
|
||||
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;
|
||||
res.result.isAll=false;
|
||||
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='';
|
||||
},
|
||||
//展示全部
|
||||
displayAll(item) {
|
||||
let content = '';
|
||||
content = item.content.replace(/(\n){2,}/,'<br>');
|
||||
item.content = content;
|
||||
if(!item.isAll && item.content && item.content.length > 170) {
|
||||
return item.content.slice(0, 170) + "...";
|
||||
}
|
||||
return item.content;
|
||||
},
|
||||
changeIsAll(item) {
|
||||
item.isAll=!item.isAll;
|
||||
},
|
||||
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){
|
||||
this.replyInfo.content = this.replyInfo.content.trim();
|
||||
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;
|
||||
res.result.isAll=false;
|
||||
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(){
|
||||
this.replyInfo.content = this.replyInfo.content.trim();
|
||||
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;
|
||||
res.result.isAll=false;
|
||||
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>
|
||||
.anzhu{
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
::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;
|
||||
::v-deep .el-radio__inner{
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
white-space: pre-wrap;
|
||||
word-break:break-all;
|
||||
span {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
||||
254
src/views/homepage/page.vue
Normal file
254
src/views/homepage/page.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<!-- <top></top>
|
||||
<div style="height:72px"></div>
|
||||
<UcHeader></UcHeader>
|
||||
<router-view /> -->
|
||||
<div class="home-page-box">
|
||||
<div class="home-page-left">
|
||||
<div class="book-input">
|
||||
<span>分享书籍</span>
|
||||
<el-input style="width:130px" v-model="input" placeholder="请输入内容"></el-input>
|
||||
<i style="color: #333333" class="el-icon-search"></i>
|
||||
</div>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane name="first">
|
||||
<span slot="label"><svg-icon icon-class="home-dynamic" style="font-size: 30px;"></svg-icon> <span class="tabs-info">动态</span></span>
|
||||
动态
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="second">
|
||||
<span slot="label"><svg-icon icon-class="home-course" style="font-size: 30px;"></svg-icon><span class="tabs-info">课程</span></span>
|
||||
<course-list></course-list>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="case">
|
||||
<span slot="label"><svg-icon icon-class="home-case" style="font-size: 30px;"></svg-icon><span class="tabs-info">案例</span></span>
|
||||
<case-list></case-list>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="note">
|
||||
<span slot="label"><svg-icon icon-class="home-note" style="font-size: 30px;"></svg-icon><span class="tabs-info">笔记</span></span>
|
||||
<note-list></note-list>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="qa">
|
||||
<span slot="label"><svg-icon icon-class="home-qa" style="font-size: 30px;"></svg-icon><span class="tabs-info">提问</span></span>
|
||||
<put-list></put-list>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="answer">
|
||||
<span slot="label"><svg-icon icon-class="home-answer" style="font-size: 30px;"></svg-icon><span class="tabs-info">回答</span></span>
|
||||
<answer-list></answer-list>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="article">
|
||||
<span slot="label"><svg-icon icon-class="home-article" style="font-size: 30px;"></svg-icon><span class="tabs-info">文章</span></span>
|
||||
<article-list></article-list>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="fourth">
|
||||
<span slot="label"><svg-icon icon-class="home-follow" style="font-size: 30px;"></svg-icon><span class="tabs-info">关注</span></span>
|
||||
<follow-list></follow-list>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="book">
|
||||
<span slot="label"><svg-icon icon-class="home-book" style="font-size: 30px;"></svg-icon><span class="tabs-info">书籍</span></span>
|
||||
<book-list></book-list>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div style="width:200px"></div>
|
||||
</div>
|
||||
<div class="home-page-right">
|
||||
<ul class="total-per">
|
||||
<li class="per-li">
|
||||
<span class="per-info">456</span>
|
||||
<span class="per-text">关注他的人</span>
|
||||
</li>
|
||||
<li class="per-li">
|
||||
<span class="per-info">456</span>
|
||||
<span class="per-text">他关注的人</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div style="padding-top:10px;">
|
||||
<p class="ach-title">TA的成就</p>
|
||||
<ul class="ach-ul">
|
||||
<li class="ach-box" v-for="ach in 5">
|
||||
<img src="/images/medal.png" alt="">
|
||||
<p>跬步千里</p>
|
||||
<p>LV.1</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="padding-top:16px">
|
||||
<p class="ach-title">可能感兴趣</p>
|
||||
<ul>
|
||||
<li class="ava-info" v-for="ava in 3">
|
||||
<img src="/images/Avatarwoman.png" />
|
||||
<div class="ava-text">
|
||||
<p style="color: #333333;">王明</p>
|
||||
<p style="color: #666666;">你必须非常努力才能看起来毫不费力</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import top from '../../layout/components/TopNav/Index.vue'
|
||||
import UcHeader from '@/components/HomePage/homePage.vue'
|
||||
import CaseList from '@/components/HomePage/caseList.vue'
|
||||
import CourseList from '@/components/HomePage/courseList.vue'
|
||||
import NoteList from "@/components/HomePage/noteList.vue"
|
||||
import PutList from "@/components/HomePage/putTo.vue"
|
||||
import AnswerList from "@/components/HomePage/answerList.vue"
|
||||
import ArticleList from "@/components/HomePage/articleList.vue"
|
||||
import FollowList from "@/components/HomePage/followList.vue"
|
||||
import BookList from "@/components/HomePage/bookList.vue"
|
||||
|
||||
export default{
|
||||
components:{top,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
|
||||
data(){
|
||||
return{
|
||||
input:'',
|
||||
activeName:'first',
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleClick() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home-page{
|
||||
::v-deep .el-tabs__active-bar{
|
||||
height: 4px;
|
||||
border-radius: 3px;
|
||||
background: #387DF7;
|
||||
margin-top: 15px;
|
||||
}
|
||||
::v-deep .el-tabs__item{
|
||||
padding: 0 17px;
|
||||
height: 55px;
|
||||
}
|
||||
::v-deep .el-tabs__nav-wrap::after{
|
||||
height: 1px;
|
||||
background-color: 979797;
|
||||
}
|
||||
.home-page-box{
|
||||
padding: 24px 84px;
|
||||
display: flex;
|
||||
.home-page-left{
|
||||
flex: 1;
|
||||
// width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
padding: 25px 47px;
|
||||
position: relative;
|
||||
.book-input{
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
width: 250px;
|
||||
height: 40px;
|
||||
border: 1px solid rgba(153,153,153,0.5);
|
||||
border-radius: 19px;
|
||||
span{
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
padding: 0 10px 0 16px;
|
||||
border-right: 1px solid rgba($color: #999999, $alpha: 0.48);
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
border: none !important;
|
||||
}
|
||||
::v-deep .el-icon-search{
|
||||
color: #333333 !important;
|
||||
}
|
||||
}
|
||||
// display: flex;
|
||||
.svg-icon{
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tabs-info{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
.home-page-right{
|
||||
width: 395px;
|
||||
padding: 40px 52px 18px 52px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
margin-left: 25px;
|
||||
.total-per{
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
padding-bottom: 28px;
|
||||
border-bottom: 1px solid rgba($color: #999999, $alpha: 0.21);
|
||||
.per-li{
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
margin: 0 25px;
|
||||
.per-info{
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
.per-text{
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.ach-title{
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
.ach-ul{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid rgba($color: #999999, $alpha: 0.21);
|
||||
padding-bottom: 4px;
|
||||
.ach-box{
|
||||
flex: 33%;
|
||||
width: 57px;
|
||||
text-align: center;
|
||||
margin-bottom: 18px;
|
||||
img{
|
||||
width: 52px;
|
||||
height: 58px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.ava-info{
|
||||
display: flex;
|
||||
padding: 10px 0 30px 0;
|
||||
img{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
.ava-text{
|
||||
padding: 2px 0;
|
||||
margin-left: 18px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user