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": { |
|||
"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": "" |
|||
} |
|||
@ -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