mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-08 02:16:46 +08:00
2022年5月29日 从svn移到git
This commit is contained in:
daihh
459
pages/my/toMeComments.vue
Normal file
459
pages/my/toMeComments.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-title :showBack="true">@我的</page-title>
|
||||
<u-toast ref="interactToast"></u-toast>
|
||||
<view class="input-search">
|
||||
<view class="top-ten" style="margin-right: 20upx;">
|
||||
<text class="textbtn" @click="statusSelecShow=!statusSelecShow">类型</text>
|
||||
</view>
|
||||
<u-search
|
||||
v-model="query.send"
|
||||
placeholder="搜索人员姓名"
|
||||
@search="findData(true)"
|
||||
@clear="findData(true)"
|
||||
:clearabled="true"
|
||||
:showAction="false"
|
||||
shape="square"
|
||||
bgColor="#ffffff">
|
||||
</u-search>
|
||||
</view>
|
||||
<view class="sea-show" v-show="statusSelecShow">
|
||||
<text v-for="(item,index) in typeArray" :key="index" :class="[item.value == query.type ?'sea-active':'','sea-index' ]" @click="Application(item.value)">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="data" v-for="(item,index) in data" :key="index" >
|
||||
<view class="data-item">
|
||||
<view class="data-item-text" @click="toArticleDetail(item)">
|
||||
<!-- <text> {{filterObjType(item.objType)}} </text> -->
|
||||
<text> {{item.title}} </text>
|
||||
</view>
|
||||
<view class="firstReply" @click="toArticleDetail(item)">
|
||||
<text class="firstReply-text">{{item.sysCreateBy}}@我:{{ item.content }}</text>
|
||||
|
||||
</view>
|
||||
<view style="display: flex;justify-content: space-between;">
|
||||
<view class="sysCreateTime">{{item.sysCreateTime}}</view>
|
||||
<view class="rowbtn rowbtn-primary">
|
||||
<u-icon name="chat" color="#3E7FFF" labelColor="#3E7FFF" @click="replay(item)" label="回复" size="16" labelSize="12"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view v-if="item.replys && item.replys.length>0" style="padding-left: 40upx;">
|
||||
<div v-for="(re,reIdx) in item.replys" :key="re.id">
|
||||
<span>回复：{{ re.content }}</span> -->
|
||||
<!--应该有删除的-->
|
||||
<!-- <u-button type="text" icon="el-icon-delete" size="mini"">删除</u-button> -->
|
||||
<!-- </div>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="total>query.pageSize">
|
||||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||||
</view>
|
||||
<u-popup :show="inputShow" @close="closeInput" @open="openInput">
|
||||
<view>
|
||||
<view style="display: flex;">
|
||||
<view style="flex: 1;padding: 15upx;">
|
||||
<u--textarea :height="150" v-model="inputValue" :plaholder="'回复'+reply.sysCreateBy" count></u--textarea>
|
||||
</view>
|
||||
<view style="width:160upx;text-align: center;padding-top: 10px;line-height: 80upx;">
|
||||
<view>
|
||||
<u-button type="primary" @click="publishReply" text="发布" style="width: 100upx;height: 80upx;margin-top: 80upx;"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import apiComments from '../../api/modules/comments.js';
|
||||
import apiQa from '@/api/modules/qa.js'
|
||||
import { mapGetters } from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
classType:4,
|
||||
statusSelecShow:false,
|
||||
query:{
|
||||
pageIndex:1,//当前页
|
||||
type:2,//当前只限于文章
|
||||
pageSize:10,//条数
|
||||
},//查询条件
|
||||
data:[],//拿到的数据
|
||||
total:0,//总条数
|
||||
inputShow:false,//控制回复弹窗
|
||||
inputValue:'',//回复内容
|
||||
reply:{
|
||||
|
||||
},//回复内容
|
||||
loadStatus:'more',//more,loading,noMore
|
||||
typeArray: [
|
||||
// {
|
||||
// name: '课程',
|
||||
// value: '1'
|
||||
// },
|
||||
{
|
||||
name: '文章',
|
||||
value: '2'
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
name: '问答',
|
||||
value: '4'
|
||||
}
|
||||
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
},
|
||||
onLoad() {
|
||||
this.findData(true);
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.onReachBottom();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.loadStatus='loading';//more,loading,noMore
|
||||
if(this.data.length<this.total){
|
||||
this.query.pageIndex++;
|
||||
this.findData(false);
|
||||
this.loadStatus='more'
|
||||
}else{
|
||||
this.loadStatus='noMore'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
Application(e){
|
||||
|
||||
|
||||
this.query.type = e;
|
||||
// this.searchData();
|
||||
this.findData(true);
|
||||
},
|
||||
|
||||
toArticleDetail(item) {
|
||||
|
||||
if(this.query.type == 2){
|
||||
uni.navigateTo({
|
||||
url: '/pages/resource/articeDetail?id=' + item.objId
|
||||
});
|
||||
}else if(this.query.type == 1){
|
||||
uni.navigateTo({
|
||||
url: '/pages/resource/courseDetail?id=' + item.objId
|
||||
});
|
||||
}else if(this.query.type == 4){
|
||||
uni.navigateTo({
|
||||
url: '/pages/resource/qaDetail?id=' + item.objId
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
filterObjType(objType){
|
||||
switch(objType){
|
||||
case 1:{
|
||||
return '[课程]'
|
||||
}
|
||||
case 2:{
|
||||
return '[文章]'
|
||||
}
|
||||
case 3:{
|
||||
return '[案例]'
|
||||
}
|
||||
case 4:{
|
||||
return '[问答]'
|
||||
}
|
||||
}
|
||||
},
|
||||
findData(flag) {
|
||||
uni.showLoading({ title: '加载中...' });
|
||||
if(flag){
|
||||
this.data=[]
|
||||
this.pageIndex=1
|
||||
}
|
||||
apiComments.pagelist(this.query).then(res=>{
|
||||
if (res.status == 200) {
|
||||
this.total=res.result.count
|
||||
if (res.result.list.length != 0) {
|
||||
res.result.list.forEach(item=>{
|
||||
this.data.push(item)
|
||||
})
|
||||
}
|
||||
}else{
|
||||
this.$refs.interactToast.show({message:'加载@我的评论失败',type:'error'});
|
||||
}
|
||||
uni.hideLoading();
|
||||
})
|
||||
},
|
||||
replay(item){
|
||||
this.reply={...item}
|
||||
this.reply.parentId=item.id;
|
||||
this.reply.objType=this.query.type;
|
||||
this.inputValue='';
|
||||
this.inputShow=true
|
||||
},
|
||||
openInput() {
|
||||
this.inputShow = true;
|
||||
},
|
||||
closeInput() {
|
||||
this.inputShow = false;
|
||||
},
|
||||
deleteMyReply(item){
|
||||
//当前界面中没有删除回复的操作
|
||||
console.log(item,"删除回复")
|
||||
},
|
||||
publishReply(){
|
||||
let replayInfo={
|
||||
clevel:2,
|
||||
commentId:this.reply.id,
|
||||
parentId:this.reply.id,
|
||||
content:this.inputValue,
|
||||
objType:this.reply.objType,
|
||||
objId:this.reply.objId,
|
||||
// replyAid:this.reply.sysCreateAid,
|
||||
// toAid:this.reply.sysCreateAid,
|
||||
// toAname:this.reply.sysCreateBy,
|
||||
replyAid:this.userInfo.aid,
|
||||
replyName:this.userInfo.name,
|
||||
// parentRead:true
|
||||
}
|
||||
if(this.query.type == 2) {
|
||||
apiComments.reply(replayInfo).then(res=>{
|
||||
if(res.status==200){
|
||||
this.$refs.interactToast.show({message:'回复成功',type:'success'});
|
||||
this.inputShow=''
|
||||
this.inputShow = false;
|
||||
this.findData(true)
|
||||
// if(!this.reply.replys){
|
||||
// this.reply.replys=[];
|
||||
// }
|
||||
// this.reply.replys.push(res.result);
|
||||
}else{
|
||||
this.$refs.interactToast.show({message:'回复失败',type:'error'});
|
||||
}
|
||||
}).catch(err=>{
|
||||
})
|
||||
} else {
|
||||
apiQa.saveComment({
|
||||
parentId:this.reply.parentId,
|
||||
content:this.inputValue,
|
||||
commentId:this.reply.id
|
||||
}).then(res=>{
|
||||
if(res.status==200){
|
||||
this.$refs.interactToast.show({message:'回复成功',type:'success'});
|
||||
this.inputShow=''
|
||||
this.inputShow = false;
|
||||
this.findData(true)
|
||||
}else{
|
||||
this.$refs.interactToast.show({message:'回复失败',type:'error'});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rowbtn{
|
||||
padding: 5px 8px 0px 8px;
|
||||
height: 20px;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
.rowbtn-primary{
|
||||
background-color: #ebf3fe;
|
||||
}
|
||||
.rowbtn-info{
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.repbox{
|
||||
padding-top: 10rpx;
|
||||
height: 45rpx;
|
||||
background: #fff;
|
||||
.reptext{
|
||||
color: #666;
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
padding-left: 5rpx;
|
||||
}
|
||||
|
||||
}
|
||||
.sea-show {
|
||||
padding: 20upx 30upx;
|
||||
|
||||
.sea-active {
|
||||
border: 1rpx solid #679cfc !important;
|
||||
color: #679cfc;
|
||||
}
|
||||
|
||||
.sea-index {
|
||||
font-size: 26rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 16rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.input-search{
|
||||
padding:28upx 20upx;
|
||||
display: flex;
|
||||
.u-input{
|
||||
background: #ffffff;
|
||||
}
|
||||
.top-ten {
|
||||
width: 120upx;
|
||||
height: 62upx;
|
||||
// margin-top: 26upx;
|
||||
// margin-left: 24upx;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
line-height: 62upx;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
// /deep/.u-icon{
|
||||
// span{
|
||||
// font-size: 50upx;
|
||||
// color: #588afc;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.txtbtn {
|
||||
background-color: #e9e9e9;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8em;
|
||||
|
||||
}
|
||||
|
||||
.top-content {
|
||||
padding: 5px 5px;
|
||||
// background-color: #6297FD;
|
||||
.top-bar-center {
|
||||
display: flex;
|
||||
font-size: 35upx;
|
||||
.top-bar-tab {
|
||||
margin: 0upx 50upx;
|
||||
}
|
||||
.active {
|
||||
border-bottom: 2px solid #588AFC;
|
||||
color: #5282eb;
|
||||
}
|
||||
}
|
||||
.top-content-options {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
margin-left: 40rpx;
|
||||
margin-bottom: 30upx;
|
||||
margin-top: 30rpx;
|
||||
border: 2px solid #5555ff;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.top_bottom {
|
||||
margin-bottom: 20upx;
|
||||
|
||||
.authors_reverse {
|
||||
display: flex;
|
||||
margin-bottom: 15upx;
|
||||
}
|
||||
|
||||
.ico {
|
||||
margin-top: 15upx;
|
||||
margin-left: 5upx;
|
||||
margin-right: 5upx;
|
||||
}
|
||||
}
|
||||
|
||||
.top_text {
|
||||
margin: 20upx 0 5upx 0;
|
||||
// padding-left: 40upx;
|
||||
line-height: 80rpx;
|
||||
font-size: 34rpx;
|
||||
color: #333333;
|
||||
margin: 10upx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.reply {
|
||||
font-size: 20upx;
|
||||
// padding-left: 45upx;
|
||||
color: #b6b6b6;
|
||||
|
||||
}
|
||||
|
||||
.reply text {
|
||||
margin-right: 20upx;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
|
||||
.data {
|
||||
margin-bottom: 15rpx;
|
||||
padding: 20upx 20upx;
|
||||
background-color: #fff;
|
||||
.data-item {
|
||||
padding-bottom: 30rpx;
|
||||
.data-item-text{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
color: #3E7FFF;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
text:last-of-type{
|
||||
color: black;
|
||||
flex-shrink: 10000;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.firstReply{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
line-height: 1.5;
|
||||
margin: 20upx 0;
|
||||
.firstReply-text{
|
||||
font-size: 28rpx;
|
||||
flex-shrink: 1000;
|
||||
color: #454545;
|
||||
display: -webkit-box;
|
||||
// white-space:pre-wrap;
|
||||
overflow: hidden;
|
||||
// text-overflow:ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.u-button{
|
||||
margin: 0;
|
||||
width: 100upx;
|
||||
height: 50upx;
|
||||
}
|
||||
}
|
||||
.sysCreateTime{
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
line-height: 48upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user