This commit is contained in:
高健 2021-09-15 10:15:17 +08:00
parent 9a5a5a188d
commit 463532b0f8
8 changed files with 592 additions and 17 deletions

1
app.js
View File

@ -30,5 +30,6 @@ App({
token: '',
userId: '',
showUserId: '', //当前浏览的人的ID
currentUserId: '', //当前登录人的UserID
},
})

View File

@ -4162,6 +4162,247 @@ l .text-depblack {
}
/* 自定义 */
/* 单文本评论框 */
.comment-line-box {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
background-color: #ffffff;
width: 100%;
padding: 15rpx;
}
.comment-line-input-box {
min-height: 200rpx;
color: #000000;
border-radius: 5rpx;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 15rpx;
background-color: #ffffff;
}
.comment-line-input-box text {
display: block;
visibility: hidden;
word-break: break-all;
word-wrap: break-word;
font-size: 28rpx;
color: #000000;
}
.comment-line-input-box .weui-textarea {
height: 180rpx;
width: 80%;
text-align: left;
padding: 15rpx;
background-color: #f2f2f2;
border-radius: 10rpx;
}
.comment-line-input {
flex-grow: 0.8;
background-color: #f0f0f0;
padding: 15rpx;
font-size: 28rpx;
line-height: 70rpx;
text-align: left;
height: 70rpx;
}
.comment-line-btn {
background-color: #E6B980;
color: #ffffff;
font-size: 28rpx;
padding: 15rpx;
text-align: center;
margin-left: 15rpx;
width: 20%;
border-radius: 5rpx;
}
/*多媒体 评论发布框 */
.comment-box {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
background-color: #ffffff;
width: 100%;
}
/* 评论输入框按钮 */
.comment-box .input {
background-color: #f0f0f0;
border-radius: 15rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 15rpx 0rpx;
flex-grow: 0.6;
}
.click-white {
background-color: #ffffff;
}
/* 评论输入框 */
.comment-content-box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
width: 100%;
padding: 15rpx;
}
.comment-content-box .btn {
font-size: 32rpx;
color: #ff0000;
text-align: center;
flex-grow: 0.1;
}
.comment-content-input {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-height: 200rpx;
background-color: #f0f0f0;
padding: 15rpx;
font-size: 28rpx;
flex-grow: 0.9;
border-radius: 10rpx;
}
.comment-content-input textarea {
font-size: 28rpx;
height: 180rpx;
width: 100%;
}
.comment-content-funcs {
display: flex;
width: 100%;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 0rpx 15rpx 15rpx 15rpx;
}
.comment-comment-funcs .icons {
font-size: 50rpx;
padding: 0rpx 15rpx;
}
.icon-comment {
font-size: 50rpx;
flex-grow: 0.2;
text-align: center;
}
.icon-comment:nth-child(1) {
margin-left: 15rpx;
}
.comment-list-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 100%;
margin-top: 15rpx;
background-color: #ffffff;
padding: 15rpx;
min-height: 1000rpx;
margin-bottom: 100rpx;
}
.comment-list-title {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
font-size: 32rpx;
color: #000000;
}
.comment-list-item-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
margin: 15rpx 0rpx;
}
.comment-list-item-content {
font-size: 28rpx;
padding: 15rpx 0rpx 15rpx 0rpx;
margin-left: 64rpx;
width: 90%;
}
.comment-count {
background-color: #f0f0f0;
padding: 0rpx 15rpx 0rpx 15rpx;
border-radius: 10rpx;
font-size: 24rpx;
}
.item-title-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
padding-right: 30rpx;
}
.restore-box {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
align-items: center;
padding: 15rpx 30rpx 15rpx 64rpx;
}
.comment-item-title {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 100%;
}
.comment-item-title image {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
}
.comment-item-title .comment-user-name {
font-size: 28rpx;
color: #000000;
text-align: center;
line-height: 48rpx;
margin-left: 15rpx;
}
.tab {
position: fixed;
display: flex;

View File

@ -9,18 +9,32 @@ Page({
imgUrl: app.urls.baseImgUrl,
uId: '',
columnId: '',
publishTime: ''
publishTime: '',
isShowComment: false, //是否显示评论输入框
maxVideo: 1, //评论最大可以上传的视频数量
maxPhoto: 1, //评论最大可以上传的图片数量
commentValue: '', //评论输入的内容
mediaBean: null, //评论图片或视频bean {id:'',type:'video or image',coverPath:'图片路径'}
uploadCount: 0, //上传图片的次数
uploadVideoCount: 0, //上传视频的次数
maxDuration: 60, //上传视频时长限制
dataId: '', //当前评论Id
commentList: [], //评论列表
commentCount: 0,
currentPage: 1, //当前评论页数
curUserId: app.globalData.currentUserId
},
onLoad(options) {
var _self = this
this.setData({
uId: options.uId,
columnId: options.cId
columnId: options.cId,
dataId: options.uId
})
_self.getMainMoment()
_self.getCommentList()
},
// 获取栏目内容
getMainMoment() {
wx.showLoading({
title: '加载中...',
@ -155,6 +169,32 @@ Page({
dataList: data.list
})
},
//获取评论列表
getCommentList() {
var _self = this
app.http.get(app.urls.getCommentList.format({
projectId: 'column',
businessId: _self.data.dataId
}), {
header: {
token: app.globalData.token
},
data: {
page: _self.data.currentPage
}
})
.then(res => {
_self.data.commentList = _self.data.commentList.concat(res.data.rows)
_self.setData({
commentList: _self.data.commentList,
commentCount: res.data.total
})
})
.catch(err => {
console.log(res)
})
},
//预览图片
viewImg(e) {
@ -665,4 +705,219 @@ Page({
// // return返回 title 转发标题 path 路径 imageUrl 自定义图片,可以本地路径 代码包文件路径 支持png jpg 显示长宽比5:4
// }
// },
inputWatch(e) {
this.setData({
commentValue: e.detail.value
})
},
delMedia() {
var _self = this
wx.showModal({
title: '警告',
content: '确定要删除该数据吗?',
success(res) {
if (res.confirm) {
_self.setData({
mediaBean: null
})
}
}
})
},
//删除评论
delComment(e) {
var _self = this
var id = e.currentTarget.dataset.id
wx.showModal({
title: '提示',
content: '确定要删除该评论吗?',
success(res) {
if (res.confirm) {
//删除评论,刷新列表
}
}
})
},
//点赞
doLike(e) {
},
//评论的评论
doCommentToComment(e) {
var id = e.currentTarget.dataset.id
var count = e.currentTarget.dataset.count
},
//显示评论输入框
showComment() {
this.setData({
isShowComment: true
})
},
//关闭评论输入框
onCloseDialog(e) {
this.setData({
isShowComment: false
})
},
//选择图片
chooseImg() {
var _self = this
wx.chooseImage({
count: _self.data.maxPhoto,
sourceType: ['album', 'camera'],
success: (res) => {
if (res.tempFilePaths.length > 0) {
_self.doUploadImg(res.tempFilePaths)
}
},
fail: (err) => {
}
})
},
doUploadImg(paths) {
wx.showLoading({
title: '上传中...',
})
let _self = this
app.http.upload(app.urls.doUploadImg, {
path: paths[0],
name: 'image',
header: {
token: app.globalData.token
}
})
.then(res => {
wx.hideLoading({})
//插入到集合中
var id = JSON.parse(res).data
var pathStr = app.urls.baseImgUrl + id
var item = {
id: id,
type: 'image',
coverPath: pathStr,
path: pathStr
}
_self.setData({
mediaBean: item
})
})
.catch(err => {
wx.hideLoading({})
_self.setData({
mediaBean: null
})
})
},
//选择视频
chooseVideo() {
var _self = this
wx.chooseMedia({
count: _self.data.maxVideo,
mediaType: ['video'],
sourceType: ['camera', 'album'],
maxDuration: 60,
success: (res) => {
console.log(res)
if (res.tempFiles.length > 0) {
if (res.tempFiles[0].duration <= _self.data.maxDuration) {
_self.doUploadVideo(res.tempFiles)
} else {
wx.showToast({
title: '视频最长60秒',
icon: 'none'
})
}
}
},
fail: (err) => {}
})
},
//上传视频
doUploadVideo(paths) {
wx.showLoading({
title: '上传中...',
})
let _self = this
app.http.upload(app.urls.doUploadVideo, {
path: paths[0].tempFilePath,
name: 'video',
header: {
token: app.globalData.token
}
})
.then(res => {
wx.hideLoading({})
var id = JSON.parse(res).data
var pathStr = app.urls.baseImgUrl + id
var item = {
id: id,
type: 'video',
coverPath: paths[0].thumbTempFilePath,
path: pathStr
}
_self.setData({
mediaBean: item
})
})
.catch(err => {
wx.hideLoading({})
_self.setData({
mediaBean: null
})
})
},
//校验评论参数
doSubmitComment(e) {
var _self = this
console.log(e)
var id = e.currentTarget.dataset.id
if (_self.data.commentValue.length > 0) {
_self.doSaveComment(id)
} else {
wx.showToast({
title: '请输入要发布的内容',
icon: 'none'
})
}
},
//保存评论
doSaveComment(id) {
var _self = this
wx.showLoading({
title: '保存中...',
})
app.http.post(app.urls.doSaveComment, {
header: {
token: app.globalData.token
},
data: {
businessId: id,
projectId: 'column',
contentCommentContent: _self.data.commentValue
}
})
.then(res => {
wx.hideLoading({})
wx.showToast({
title: '评论成功',
})
_self.setData({
commentValue: '',
isShowComment: false,
currentPage: 1, //重置评论列表
commentList: [],
commentCount: 0
})
//刷新列表
_self.getCommentList()
})
.catch(err => {
wx.hideLoading({})
_self.setData({
isShowComment: false
})
})
},
})

View File

@ -191,7 +191,90 @@
</view>
</view>
<!-- 评论信息 -->
<scroll-view>
</scroll-view>
</view>
<view class="comment-list-box">
<view class="comment-list-title">
<view>评论{{commentCount}}</view>
</view>
<block wx:if="{{commentList.length>0}}">
<view wx:for="{{commentList}}" wx:key="index" class="comment-list-item-box">
<view class="item-title-box">
<view class="comment-item-title">
<image src="{{item.contentCommentUserIcon}}"></image>
<view class="comment-user-name">{{item.contentCommentUserName}}</view>
</view>
<view catchtap="doLike" data-id="{{item.contentCommentId}}" data-idx="{{index}}">
<text style="margin-right: 15rpx;">{{item.contentCommentLike}}</text>
<text class="cuIcon-appreciate" style="font-size: 32rpx;"></text>
</view>
</view>
<view class="comment-list-item-content">
{{item.contentCommentContent}}
</view>
<view class="restore-box">
<view class="comment-count" catchtap="doCommentToComment" data-id="{{item.contentCommentId}}"
data-count="{{item.contentCommentSubCount}}">
{{item.contentCommentSubCount}} 回复
</view>
<text class="cuIcon-close" style="font-size: 32rpx;color: #5d5d5d;" catchtap="delComment"
data-id="{{item.contentCommentId}}" wx:if="{{curUserId== item.creator}}"></text>
</view>
</view>
</block>
<view wx:else>
暂无评论
</view>
</view>
<view class="foot bg-white" style="padding: 15rpx;">
<view class="comment-box">
<view class="input" hover-class="click-white" catchtap="showComment">
<text class="cuIcon-write"></text>
<text>写评论...</text>
</view>
<text class="icon-comment cuIcon-favor line-yellowlight2" style="font-size: 50rpx;"></text>
<text class="icon-comment cuIcon-appreciate line-yellowlight2" style="font-size: 50rpx;"></text>
<button class="icon-comment"
style="width: 0rpx;padding: 0rpx;background-color: #fff;line-height: 50rpx;margin:0rpx;">
<text class="cuIcon-share text-gray" style="font-size: 50rpx;"></text>
</button>
</view>
</view>
</view>
<!-- 单文本内容评论 -->
<van-action-sheet show="{{isShowComment}}" round="{{false}}" bind:close="onCloseDialog">
<view class="comment-line-input-box">
<textarea class="weui-textarea" placeholder="请输入评论内容" focus="true" cursor-spacing="100" value="{{commentValue}}"
placeholder-style="color:#f3f3f3;font-size:28rpx;" bindinput="inputWatch"></textarea>
<view class="comment-line-btn" catchtap="doSubmitComment" data-id="{{dataId}}">
发布
</view>
</view>
</van-action-sheet>
<!-- 文本加多媒体评论内容 -->
<!-- <van-action-sheet show="{{isShowComment}}" round="{{false}}" bind:close="onCloseDialog">
<view class="comment-content-box">
<view class="comment-content-input">
<textarea placeholder="请输入评论内容" placeholder-style="font-size:28rpx;" cursor-spacing="200"
value="{{inputWatch}}" bindinput="inputWatch"></textarea>
<view wx:if="{{mediaBean != null}}"
style="display: flex;flex-direction: row;justify-content: center;align-items: center;width: 128rpx;height: 128rpx;position: relative;">
<image src="{{mediaBean.coverPath}}" mode="aspectFill" style="width: 100%;height: 100%;"></image>
<text class="cuIcon-close" catchtap="delMedia"
style="font-size: 38rpx;position: absolute;top:-15rpx;right:-15rpx;background:rgba(130,130,130, 0.8);border-radius: 50%;text-align: center;opacity: 0.8;color:#ffffff;"></text>
<image src="/images/ic_video_play.png" mode="scaleToFill" wx:if="{{mediaBean.type=='video'}}"
style="width: 30rpx;height: 30rpx;position: absolute;top: 40%;left: 40%;">
</image>
</view>
</view>
<view class="btn">
发布
</view>
</view>
<view class="comment-content-funcs">
<text class="cuIcon-pic" style="margin: 0rpx 30rpx;font-size: 50rpx;" catchtap="chooseImg"></text>
<text class="cuIcon-record" style="margin: 0rpx 30rpx;font-size: 50rpx;" catchtap="chooseVideo"></text>
</view>
</van-action-sheet> -->

View File

@ -645,13 +645,6 @@
line-height: 50rpx;
}
.comment-box {
width: 95%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.movie-item {
height: 280rpx;

View File

@ -426,7 +426,6 @@ Page({
.then(res => {
wx.hideLoading({})
res.data.forEach(it => {
console.log(it)
_self.data.dataList.forEach(item => {
item.list.forEach(iem => {
if (iem.uid == it.businessId) {
@ -666,6 +665,7 @@ Page({
})
.then(res => {
wx.setStorageSync('usercode', res.data.userCode)
app.globalData.currentUserId = res.data.userId
})
.catch(err => {
console.log(err)

View File

@ -763,7 +763,7 @@
flex: 1;
color: #000;
width: 23%;
border-right: 1rpx solid #d8d8d8;
border-right: 1rpx solid #f0f0f0;
}
.func-item:last-child {

View File

@ -127,6 +127,8 @@ var apis = {
doSaveLike: `app/contentlike/save`, //保存取消点赞 ?businessId=xx& projectId=xx
getPosterFavorList: `app/cardtemplate/mylistposter`, //获取我的海报收藏列表
getColumnContentHandle: `app/contentcomment/countlist/{projectId}/{businessIds}`, //获取栏目内容评论 点赞 收藏数量
doSaveComment: `app/contentcomment/save`, //?businessId=xx&projectId=columnComment&contentCommentContent=xxx 保存评论
getCommentList: `app/contentcomment/listpagerelease/{projectId}/{businessId}`, // ?contentCommentParentId=xxx 获取评论列表
//名片信息
getCardList: `app/cardtemplate/list`, //获取名片列表
getCardDetail: `app/cardtemplate/get/{cardTemplateId}`, //获取名片详情