ZhaoTongYao
5 years ago
30 changed files with 849 additions and 24 deletions
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,46 @@ |
|||||
|
Component({ |
||||
|
data: { |
||||
|
support: "../../../../images/ic_zhicihuise@2x.png", |
||||
|
supported: "../../../../images/ic_zhici@2x.png", |
||||
|
dispport: "../../../../images/ic_fanduihuise@2x.png", |
||||
|
dispported: "../../../../images/ic_fandu@2x.png" |
||||
|
}, |
||||
|
properties: { |
||||
|
remarkObj: { |
||||
|
type: Object, |
||||
|
value: {} |
||||
|
}, |
||||
|
remarkType: { |
||||
|
type: String, |
||||
|
value: "new" |
||||
|
} |
||||
|
}, |
||||
|
lifetimes: { |
||||
|
|
||||
|
}, |
||||
|
pageLifetimes: { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
// 对评论进行回复
|
||||
|
replyRemark (e) { |
||||
|
this.triggerEvent("replyRemark", { commentId: e.currentTarget.dataset.commentid }) |
||||
|
}, |
||||
|
// 支持评论
|
||||
|
supportRemark (e) { |
||||
|
this.triggerEvent("supportRemark", { commentId: e.currentTarget.dataset.commentid }) |
||||
|
}, |
||||
|
// 反对 评论
|
||||
|
dispportRemark (e) { |
||||
|
this.triggerEvent("dispportRemark", { commentId: e.currentTarget.dataset.commentid }) |
||||
|
}, |
||||
|
// 最新最热 切换
|
||||
|
changeRemarkType () { |
||||
|
if (this.data.remarkType === "new") { |
||||
|
this.triggerEvent("changeRemarkType", { type: "hot"}) |
||||
|
} else { |
||||
|
this.triggerEvent("changeRemarkType", { type: "new"}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"component": true |
||||
|
} |
||||
@ -0,0 +1,57 @@ |
|||||
|
<view class="detail-remark"> |
||||
|
|
||||
|
<view class="title"> |
||||
|
<view class="left"> |
||||
|
<view class="remark-title">评论</view> |
||||
|
<view class="remark-altitude">表达态度{{remarkObj.statementNum}}次</view> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<view class="flip {{remarkType === 'hot' ? 'reverse' : ''}}" bindtap="changeRemarkType"> |
||||
|
<view class="front"> |
||||
|
<view class="latest">最新</view> |
||||
|
<image class="latest-image" src="../../../../images/ic_qiehuan@2x.png" /> |
||||
|
</view> |
||||
|
<view class="back"> |
||||
|
<image class="latest-image" src="../../../../images/ic_qiehuan@2x.png" /> |
||||
|
<view class="latest">最热</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="remark-list"> |
||||
|
<view |
||||
|
class="remark-list-item" |
||||
|
wx:for="{{remarkObj.commentsList}}" |
||||
|
wx:key="{{index}}" |
||||
|
wx:for-index="index" |
||||
|
wx:for-item="item"> |
||||
|
<view class="user-info"> |
||||
|
<image class="avatar" src="{{item.user.userFace}}" /> |
||||
|
<view class="right"> |
||||
|
<view class="identify"> |
||||
|
<view class="nickname">{{item.user.userName}}</view> |
||||
|
<image class="party-flag" wx:if="{{item.user.partyFlag == '1'}}" src="../../../../images/ic_dangbiaoqian.png" /> |
||||
|
</view> |
||||
|
<view class="time">{{item.commentTime}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="remark-content">{{item.content}}</view> |
||||
|
<view class="remarked-content" wx:if="{{item.replyComment.userName}}">{{item.replyComment.userName}}：{{item.replyComment.content}}</view> |
||||
|
<view class="operation"> |
||||
|
<view class="support type" bindtap="supportRemark" data-commentid="{{item.commentId}}"> |
||||
|
<image src="{{item.userLike ? supported : support}}" /> |
||||
|
<view style="color: {{item.userLike ? '#FFB100' : '#a7a7a7'}}">支持 {{item.approveNum}}</view> |
||||
|
</view> |
||||
|
<view class="dispport type" bindtap="dispportRemark" data-commentid="{{item.commentId}}"> |
||||
|
<image src="{{item.userDislike ? dispported : dispport}}" /> |
||||
|
<view style="color: {{item.userDislike ? '#FFB100' : '#a7a7a7'}}">不支持 {{item.opposeNum}}</view> |
||||
|
</view> |
||||
|
<view class="reply type" bindtap="replyRemark" data-commentid="{{item.commentId}}"> |
||||
|
<image src="../../../../images/ic_huifu@2x.png" /> |
||||
|
<view>回复</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,168 @@ |
|||||
|
.detail-remark { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.title { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
box-sizing: border-box; |
||||
|
padding-right: 25rpx; |
||||
|
} |
||||
|
.title .left { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
} |
||||
|
.title .left .remark-title { |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
font-weight: bolder; |
||||
|
margin-right: 11rpx; |
||||
|
} |
||||
|
.title .left .remark-altitude { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
.title .right { |
||||
|
height: 80rpx; |
||||
|
width: 110rpx; |
||||
|
perspective: 1000; |
||||
|
transform-style: preserve-3d; |
||||
|
} |
||||
|
.title .right .flip { |
||||
|
position: relative; |
||||
|
transition: 0.6s; |
||||
|
transform-style: preserve-3d; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.title .right .flip.reverse { |
||||
|
transform: rotateY(180deg); |
||||
|
} |
||||
|
.title .right .flip .front, .title .right .flip .back { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
position:absolute; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.title .right .flip .front { |
||||
|
z-index: 2; |
||||
|
background: #f7f7f7; |
||||
|
} |
||||
|
.title .right .flip .back { |
||||
|
transform: rotateY(-180deg); |
||||
|
background: #f7f7f7; |
||||
|
} |
||||
|
.title .right .latest { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
} |
||||
|
.title .right .latest-image { |
||||
|
width: 28rpx; |
||||
|
height: 23rpx; |
||||
|
object-fit: cover; |
||||
|
margin: 0 10rpx 0 10rpx; |
||||
|
} |
||||
|
|
||||
|
.remark-list { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.remark-list .remark-list-item { |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
border-radius: 16rpx; |
||||
|
background: #fff; |
||||
|
padding: 37rpx 25rpx 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.remark-list .remark-list-item + .remark-list-item { |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
.remark-list-item .user-info { |
||||
|
width: 100%; |
||||
|
height: 64rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.remark-list-item .user-info .avatar { |
||||
|
width: 64rpx; |
||||
|
height: 64rpx; |
||||
|
border-radius: 8rpx; |
||||
|
margin-right: 13rpx; |
||||
|
} |
||||
|
.remark-list-item .user-info .right { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.remark-list-item .user-info .right .identify { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.remark-list-item .user-info .right .nickname { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
.remark-list-item .user-info .right .party-flag { |
||||
|
width: 27rpx; |
||||
|
height: 27rpx; |
||||
|
object-fit: cover; |
||||
|
margin-left: 6rpx; |
||||
|
} |
||||
|
.remark-list-item .user-info .right .time { |
||||
|
font-size: 20rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
.remark-list-item .remark-content { |
||||
|
margin-top: 28rpx; |
||||
|
margin-bottom: 24rpx; |
||||
|
font-size: 36rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
.remark-list-item .remarked-content { |
||||
|
width: 100%; |
||||
|
height: 88rpx; |
||||
|
border-radius: 16rpx; |
||||
|
background: #f2f2f2; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 20rpx; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
font-size: 30rpx; |
||||
|
color: #999; |
||||
|
line-height: 88rpx; |
||||
|
margin-bottom: 25rpx; |
||||
|
} |
||||
|
.remark-list-item .operation { |
||||
|
width: 100%; |
||||
|
height: 85rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
border-top: 1rpx solid #eaeaea; |
||||
|
} |
||||
|
.remark-list-item .operation .type { |
||||
|
flex: 1; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.remark-list-item .operation .type image { |
||||
|
width: 28rpx; |
||||
|
height: 28rpx; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.remark-list-item .operation .type view { |
||||
|
font-size: 24rpx; |
||||
|
color: #A7A7A7; |
||||
|
margin-left: 15rpx; |
||||
|
} |
||||
@ -1,7 +1,11 @@ |
|||||
{ |
{ |
||||
"usingComponents": { |
"usingComponents": { |
||||
"no-data": "../../../../components/nodata/nodata", |
"no-data": "../../../../components/nodata/nodata", |
||||
"parser": "../../../../components/parser/parser" |
"parser": "../../../../components/parser/parser", |
||||
|
"completeInfo-dialog": "../../../../components/completeInfoDialog/completeInfoDialog", |
||||
|
"detail-remark": "./components/detailRemark/detailRemark", |
||||
|
"load-more": "../../../../components/loadMore/loadMore", |
||||
|
"tip-dialog": "../../compontents/notice/notice" |
||||
}, |
}, |
||||
"navigationBarTitleText": "" |
"navigationBarTitleText": "" |
||||
} |
} |
||||
@ -0,0 +1,108 @@ |
|||||
|
const api = require('../../../../utils/understandJs') |
||||
|
|
||||
|
Page({ |
||||
|
data: { |
||||
|
textareaValue: "", |
||||
|
faCommentId: "", |
||||
|
noticeId: "", |
||||
|
violationsCount: 0, //违规次数
|
||||
|
isConReview: false, |
||||
|
lock: false, //锁定提交状态，防止双击
|
||||
|
}, |
||||
|
onLoad (options) { |
||||
|
this.setData({ |
||||
|
noticeId: options.noticeId, |
||||
|
faCommentId: options.faCommentId |
||||
|
}) |
||||
|
}, |
||||
|
// textarea 双向绑定
|
||||
|
bindTextareaValue (e) { |
||||
|
this.setData({ |
||||
|
textareaValue: e.detail.value.trim(' ') |
||||
|
}) |
||||
|
}, |
||||
|
remarkOrReply () { |
||||
|
if (!this.data.textareaValue) { |
||||
|
wx.showToast({ |
||||
|
title: "请输入评论内容", |
||||
|
icon: "none" |
||||
|
}) |
||||
|
return false |
||||
|
} |
||||
|
if (this.data.lock) { |
||||
|
return false |
||||
|
} |
||||
|
this.setData({ |
||||
|
lock: true |
||||
|
}) |
||||
|
const para = { |
||||
|
noticeId: this.data.noticeId, |
||||
|
faCommentId: this.data.faCommentId, |
||||
|
content: this.data.textareaValue, |
||||
|
// isConReview: this.data.isConReview
|
||||
|
} |
||||
|
wx.showLoading({ |
||||
|
title: "提交中..." |
||||
|
}) |
||||
|
let that = this |
||||
|
if (this.data.faCommentId) { //评论 回复 回调
|
||||
|
api.commentReplySubmit(para).then(res => { |
||||
|
wx.hideLoading() |
||||
|
this.setData({ |
||||
|
lock: false |
||||
|
}) |
||||
|
console.log("评论或回复", res) |
||||
|
wx.showToast({ |
||||
|
title: "评论成功", |
||||
|
icon: "none", |
||||
|
duration: 1000 |
||||
|
}) |
||||
|
this.setData({ |
||||
|
textareaValue: '' |
||||
|
}) |
||||
|
const pages = getCurrentPages() |
||||
|
const page = pages[pages.length - 2] |
||||
|
if (page.getRemarkList) { |
||||
|
page.getRemarkList() |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
wx.navigateBack() |
||||
|
}, 500) |
||||
|
}).catch(err => { |
||||
|
console.log(err) |
||||
|
this.setData({ |
||||
|
lock: false |
||||
|
}) |
||||
|
}) |
||||
|
} else { //对 内容 进行评论
|
||||
|
api.commentSubmit(para).then(res => { |
||||
|
wx.hideLoading() |
||||
|
this.setData({ |
||||
|
lock: false |
||||
|
}) |
||||
|
console.log("评论或回复", res) |
||||
|
wx.showToast({ |
||||
|
title: "评论成功", |
||||
|
icon: "none", |
||||
|
duration: 1000 |
||||
|
}) |
||||
|
this.setData({ |
||||
|
textareaValue: '' |
||||
|
}) |
||||
|
const pages = getCurrentPages() |
||||
|
const page = pages[pages.length - 2] |
||||
|
if (page.getRemarkList) { |
||||
|
page.getRemarkList() |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
wx.navigateBack() |
||||
|
}, 500) |
||||
|
}).catch(err => { |
||||
|
console.log(err) |
||||
|
this.setData({ |
||||
|
lock: false |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "评论" |
||||
|
} |
||||
@ -0,0 +1,20 @@ |
|||||
|
<view class="remark-or-reply"> |
||||
|
<view class="remark-content"> |
||||
|
<textarea |
||||
|
maxlength="200" |
||||
|
value="{{textareaValue}}" |
||||
|
bindinput="bindTextareaValue" |
||||
|
placeholder="请您表达观点态度吧" |
||||
|
placeholder-class="textarea-placeholder"> |
||||
|
</textarea> |
||||
|
<view class="content-num"> |
||||
|
{{textareaValue.length}}/200 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="reply-btn"> |
||||
|
<button hover-class="hover-button" bindtap="remarkOrReply" disabled="{{lock}}"> |
||||
|
<image src="../../images/submitbk.png" /> |
||||
|
<text >发布</text> |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,76 @@ |
|||||
|
page { |
||||
|
width:100%; |
||||
|
height:100vh; |
||||
|
} |
||||
|
.remark-or-reply { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: #f7f7f7; |
||||
|
box-sizing: border-box; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
.remark-or-reply .remark-content { |
||||
|
width: 100%; |
||||
|
border-radius: 16rpx; |
||||
|
background: #fff; |
||||
|
height: 930rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding: 25rpx; |
||||
|
} |
||||
|
.remark-or-reply .remark-content textarea { |
||||
|
width: 100%; |
||||
|
height: calc(100% - 50rpx); |
||||
|
overflow-y: auto; |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
line-height: 50rpx; |
||||
|
} |
||||
|
.remark-or-reply .remark-content .content-num { |
||||
|
width:100%; |
||||
|
height: 50rpx; |
||||
|
line-height: 50rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #999; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.remark-or-reply .remark-content .textarea-placeholder { |
||||
|
font-size: 32rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
.reply-btn { |
||||
|
width: 100%; |
||||
|
height: 84rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-top: 70rpx; |
||||
|
} |
||||
|
.reply-btn button { |
||||
|
width: 560rpx; |
||||
|
height: 100rpx; |
||||
|
line-height: 84rpx; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
font-size: 36rpx; |
||||
|
padding: 0; |
||||
|
outline: 0; |
||||
|
border-radius: 16rpx; |
||||
|
/* background: linear-gradient(to right, #f40f0f, #ff4c4c); */ |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
.reply-btn .hover-button { |
||||
|
/* background:red; */ |
||||
|
} |
||||
|
button image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
button text { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
left: 0; |
||||
|
} |
||||
|
button::after { |
||||
|
border: none; |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
export function formatTimestamp () { |
||||
|
const date = new Date() |
||||
|
const year = date.getFullYear() |
||||
|
const month = (date.getMonth() + 1).toString().padStart(2, "0") |
||||
|
const day = (date.getDate()).toString().padStart(2, "0") |
||||
|
const hour = (date.getHours()).toString().padStart(2, "0") |
||||
|
const minute = (date.getMinutes()).toString().padStart(2, "0") |
||||
|
const second = (date.getSeconds()).toString().padStart(2, "0") |
||||
|
return `${year}-${month}-${day} ${hour}:${minute}:${second}` |
||||
|
} |
||||
Loading…
Reference in new issue