From 463532b0f85621f1263dc6941fe62a7bdea1e7e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AB=98=E5=81=A5?= Date: Wed, 15 Sep 2021 10:15:17 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=84=E8=AE=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.js | 1 + class/main.wxss | 241 ++++++++++++++++ .../moments/momentsdetail/momentsdetail.js | 263 +++++++++++++++++- .../moments/momentsdetail/momentsdetail.wxml | 91 +++++- .../moments/momentsdetail/momentsdetail.wxss | 7 - pages/index/index.js | 2 +- pages/index/index.wxss | 2 +- utils/api.js | 2 + 8 files changed, 592 insertions(+), 17 deletions(-) diff --git a/app.js b/app.js index ecb9817..c9c2a32 100644 --- a/app.js +++ b/app.js @@ -30,5 +30,6 @@ App({ token: '', userId: '', showUserId: '', //当前浏览的人的ID + currentUserId: '', //当前登录人的UserID }, }) \ No newline at end of file diff --git a/class/main.wxss b/class/main.wxss index 30c364f..6cbaa87 100644 --- a/class/main.wxss +++ b/class/main.wxss @@ -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; diff --git a/packagecard/moments/momentsdetail/momentsdetail.js b/packagecard/moments/momentsdetail/momentsdetail.js index 085aa09..5b7dedf 100644 --- a/packagecard/moments/momentsdetail/momentsdetail.js +++ b/packagecard/moments/momentsdetail/momentsdetail.js @@ -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 + }) + }) + }, + }) \ No newline at end of file diff --git a/packagecard/moments/momentsdetail/momentsdetail.wxml b/packagecard/moments/momentsdetail/momentsdetail.wxml index b15418d..d07b0c8 100644 --- a/packagecard/moments/momentsdetail/momentsdetail.wxml +++ b/packagecard/moments/momentsdetail/momentsdetail.wxml @@ -191,7 +191,90 @@ - - - - \ No newline at end of file + + + 评论{{commentCount}} + + + + + + + {{item.contentCommentUserName}} + + + {{item.contentCommentLike}} + + + + + {{item.contentCommentContent}} + + + + {{item.contentCommentSubCount}} 回复 + + + + + + + 暂无评论 + + + + + + + + 写评论... + + + + + + + + + + + + + + + 发布 + + + + + + \ No newline at end of file diff --git a/packagecard/moments/momentsdetail/momentsdetail.wxss b/packagecard/moments/momentsdetail/momentsdetail.wxss index e63bd7d..14de068 100644 --- a/packagecard/moments/momentsdetail/momentsdetail.wxss +++ b/packagecard/moments/momentsdetail/momentsdetail.wxss @@ -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; diff --git a/pages/index/index.js b/pages/index/index.js index 47ee330..29b7fa7 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -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) diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 8e43e7a..c0c73b7 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -763,7 +763,7 @@ flex: 1; color: #000; width: 23%; - border-right: 1rpx solid #d8d8d8; + border-right: 1rpx solid #f0f0f0; } .func-item:last-child { diff --git a/utils/api.js b/utils/api.js index 1f72c5e..3f9377d 100644 --- a/utils/api.js +++ b/utils/api.js @@ -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}`, //获取名片详情