zm/medicine_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

评论组件化

Browse Source
This commit is contained in:
@fawn-nine
2024-06-18 11:47:37 +08:00
parent b930cfc084
commit dc2f278594
4 changed files with 490 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
pages/course/courseDetail.vue
View File

@@ -137,84 +137,9 @@
</template>
</uni-section>
<view class="liuyanBox">
<view class="box" v-if="sayList.length > 0">
<view class="firstLeve flexbox leve" v-for="(item, index) in sayList" :key="index" style="flex-wrap: wrap;">
<view class="imgbox" :style="getBackGround(item.user.avatar)">
<view class="img">
<image :src="item.user.avatar" mode="aspectFit"></image>
</view>
</view>
<view class="contentBox contentBoxfirstLeve">
<view class="name">
{{item.user.name == '' ? '暂无昵称': item.user.name}}
</view>
<view class="content" v-if="item.content != ''">
<rich-text class="content" :nodes="formatRichText(item.content)"></rich-text>
</view>
<view class="imagesList flexbox" v-if="item.images !=''">
<view class="item" v-for="(item2, index2) in item.imgList" :key="index2">
<image @click="previewImage(item2)" :src="item2" mode="widthFix"
style="width: 80rpx; height: 80rpx;"></image>
</view>
</view>
<view class="others flexbox">
<view class="dianzan flexbox" @click="support('one',index,item)">
<u-icon v-if="item.support" name="heart-fill" color="#ff5500" size="24"></u-icon>
<u-icon v-else name="heart" color="#999" size="24"></u-icon>
<text>{{item.supportCount}}</text>
</view>
<view class="pinglun flexbox" @click="addSay(index,item)">
<!-- <u-icon name="chat-fill" color="#999" size="24"></u-icon> -->
<u-icon name="chat" color="#999" size="24"></u-icon>
<text>{{item.children && item.children.length > 0? item.children.length : 0}}</text>
</view>
<text>{{item.createTime}}</text>
</view>
</view>
<!-- 二级 -->
<view class="boxB" v-if="item.Bchildren && item.Bchildren.length > 0" style="width: 100%;">
<view class=" flexbox leve" v-for="(citem, cindex) in item.Bchildren" :key="cindex">
<view class="imgbox" :style="getBackGround(citem.user.avatar)">
<view class="img">
<image :src="citem.user.avatar" mode="aspectFit"></image>
</view>
</view>
<view class="contentBox">
<view class="name">
{{citem.user.name == '' ? '暂无昵称': citem.user.name}}
</view>
<view class="content" v-if="citem.content != ''">
<rich-text class="content" :nodes="formatRichText(citem.content)"></rich-text>
</view>
<view class="imagesList flexbox" v-if="citem.images !=''">
<view class="item" v-for="(item3, index3) in citem.imgList" :key="index3">
<image @click="previewImage(item3)" :src="item3" mode="widthFix"
style="width: 80rpx; height: 80rpx;"></image>
</view>
</view>
<view class="others flexbox">
<view class="dianzan flexbox" @click="support(index,cindex,citem)">
<u-icon v-if="citem.support" name="heart-fill" color="#ff5500" size="24"></u-icon>
<u-icon v-else name="heart" color="#999" size="24"></u-icon>
<text>{{citem.supportCount}}</text>
</view>
<!-- <view class="pinglun flexbox" @click="addSay(cindex,citem)">
<u-icon name="chat" color="#999" size="24"></u-icon>
<text>{{citem.children && citem.children.length > 0? item.children.length : 0}}</text>
</view> -->
<text style="margin-left: 20rpx;">{{citem.createTime}}</text>
</view>
</view>
</view>
<view class="loadMore" v-show="item.Bchildren.length < item.children.length" @click="showMoreChildren(index,item)">
<text>加载更多追评</text>
</view>
</view>
<!-- end -->
</view>
</view>
<view class="" v-if="sayList.length > 0">
<commentsList :sayList = "sayList" @support="support" @showSayModule="showSayModule"></commentsList>
</view>
<u-divider v-show="status == 2" text="已加载全部"></u-divider>
<u-divider v-show="status == 3" text="暂无留言数据"></u-divider>
<u-divider v-show="status == 1" text="加载中..."></u-divider>
@@ -332,6 +257,7 @@
<script>
// import musicPlay from '@/components/music.vue'
import commentsList from '@/components/commentsList.vue'
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
import $http from '@/config/requestConfig.js';
@@ -394,6 +320,7 @@
status: 88,
loadFlag: false,
fatherSay:{},
fatherIndex:null,
supportFlag:false,
};
},
@@ -437,6 +364,7 @@
components: {
// musicPlay
emotion,
commentsList
},
//方法
@@ -452,24 +380,18 @@
// }
},
// 评论
// 加载更多子评论
showMoreChildren(i,val){
console.log('更多评论');
if(val.children.length <= val.Bchildren.length){
uni.showToast({
title:'没有更多了哦',
icon:'none'
})
return
}
let _list = []
let _cc = [...val.children]
_list = _cc.slice(val.Bchildren.length, val.Bchildren.length + 6)
this.sayList[i].Bchildren = this.sayList[i].Bchildren.concat(_list)
showSayModule(data){
console.log(data,'父级收到值了');
this.fatherSay = data.item
this.fatherIndex = data.index
console.log(this.fatherSay,this.fatherIndex,'父级收到值了');
this.sayVisible = true
},
// 点赞
support(index1,index,val){
console.log(index1,index,val);
support(data){
console.log(data,'父级收到值了吗？');
let _obj = {...data} // index,index1,val
if(this.supportFlag){
uni.showToast({
title:'操作太快了，歇一下吧~',
@@ -478,13 +400,13 @@
return
}
this.supportFlag = true
if(!val.support){
if(!_obj.val.support){
$http.request({
url: "common/courseGuestbook/addCourseGuestbookSupport",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"userId": this.userInfo.id,
"guestbookId":val.id ,
"guestbookId":_obj.val.id ,
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
@@ -496,13 +418,13 @@
title:"点赞成功",
icon:'success'
})
if(index1 == 'one'){ // 一级
this.sayList[index].support = true
this.sayList[index].supportCount++
if(_obj.index1 == 'one'){ // 一级
this.sayList[_obj.index].support = true
this.sayList[_obj.index].supportCount++
}
if(index1 != undefined && index1 != null && index1 != 'one'){
this.sayList[index1].Bchildren[index].support = true
this.sayList[index1].Bchildren[index].supportCount++
if(_obj.index1 != undefined && _obj.index1 != null && _obj.index1 != 'one'){
this.sayList[_obj.index1].Bchildren[_obj.index].support = true
this.sayList[_obj.index1].Bchildren[_obj.index].supportCount++
}
this.supportFlag = false
}).catch(e => {
@@ -519,7 +441,7 @@
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"userId": this.userInfo.id,
"guestbookId":val.id ,
"guestbookId":_obj.val.id ,
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
@@ -532,12 +454,12 @@
icon:'success'
})
if(index1 == 'one'){ // 一级
this.sayList[index].support = false
this.sayList[index].supportCount--
this.sayList[_obj.index].support = false
this.sayList[_obj.index].supportCount--
}
if(index1 != undefined && index1 != null && index1 != 'one'){
this.sayList[index1].Bchildren[index].support = false
this.sayList[index1].Bchildren[index].supportCount--
if(_obj.index1 != undefined && _obj.index1 != null && _obj.index1 != 'one'){
this.sayList[_obj.index1].Bchildren[_obj.index].support = false
this.sayList[_obj.index1].Bchildren[_obj.index].supportCount--
}
this.supportFlag = false
}).catch(e => {
@@ -593,7 +515,7 @@
forUserId = this.fatherSay.user.id
pid = this.fatherSay.id
}
console.log(this.fatherSay.cIndex,'this.fatherSay.cIndex');
console.log(this.fatherIndex,'this.fatherIndex');
// return false
$http.request({
url: "common/courseGuestbook/addCourseGuestbook",
@@ -630,15 +552,18 @@
_obj.imgList = []
}
console.log(this.sayList[this.fatherSay.cIndex],'this.fatherSay.cIndex------------')
if(this.fatherSay.cIndex != undefined && this.fatherSay.cIndex != null ){ // 二级
this.sayList[this.fatherSay.cIndex].Bchildren.unshift(_obj)
console.log(this.sayList[this.fatherIndex],'this.fatherSay.cIndex------------')
if(this.fatherIndex != undefined && this.fatherIndex != null ){ // 二级
this.sayList[this.fatherIndex].children.push(_obj)
this.sayList[this.fatherIndex].Bchildren.unshift(_obj)
}else{ // 一级
this.sayList.unshift(_obj)
console.log(_obj,'_obj返回的一级')
}
this.sayVisible = false
this.fatherSay = {}
this.fatherIndex = null
// this.getSayList()
// 获得的新实例，插入到数组的前面
@@ -795,7 +720,7 @@
// #ifdef APP-PLUS || MP-WEIXIN || H5
uni.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context
// this.editorCtx.clear()
this.editorCtx.clear()
this.editorCtx.setContents(res.context)
}).exec()
// #endif
@@ -812,6 +737,7 @@
sayclose() {
this.sayVisible = false
this.fatherSay = {}
this.fatherIndex = null
},
goToLearn(){
uni.navigateTo({
@@ -1008,26 +934,7 @@
url: `${url}?id=${id}`
});
},
getBackGround(src){
return `background: url(${src});background-size: contain;`
},
formatRichText(html) { //控制图片大小
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi,
'<img style="max-width:40rpx;height:40rpx;display:inline-block;margin:10rpx auto;"');
return newContent;
},
},
};
</script>
@@ -1226,17 +1133,6 @@
border-radius: 100%; overflow: hidden;
}
// .img {
// width: 80rpx;
// height: 80rpx;
// border-radius: 100%;
// image {
// width: 100%;
// height: 80rpx;
// }
// }
.contentBox {
font-size: 24rpx;