6 changed files with 285 additions and 9 deletions
@ -0,0 +1,25 @@ |
|||
const app = getApp() |
|||
|
|||
Component({ |
|||
data: { |
|||
imagesList: ['../../../../images/mine/timg.jpg'] |
|||
}, |
|||
properties: { |
|||
topicObj: { |
|||
type: Object, |
|||
value: {} |
|||
} |
|||
}, |
|||
methods:{ |
|||
toDetail (e) { |
|||
this.triggerEvent('toTopicDetail', { topicId: e.currentTarget.dataset.topicid}) |
|||
}, |
|||
previewImage (e) { |
|||
app.globalData.previewImage = true |
|||
wx.previewImage({ |
|||
urls: this.data.topicObj.images, |
|||
current: e.currentTarget.dataset.src |
|||
}) |
|||
} |
|||
} |
|||
}) |
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
@ -0,0 +1,37 @@ |
|||
<view class="item-list"> |
|||
<view class="user-info"> |
|||
<image src="{{topicObj.userFace}}"></image> |
|||
<view class="name-date"> |
|||
<view class="name">{{topicObj.nickname}}</view> |
|||
<view class="date">{{topicObj.createdTime}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="details-info">{{topicObj.topicContent}}</view> |
|||
|
|||
<view wx:if="{{topicObj.images.length > 0}}" class="image-list" |
|||
style="height: {{topicObj.images.length === 3 ? '160rpx' : topicObj.images.length === 2 ? '205rpx' : topicObj.images.length === 1 ? '350rpx' : '' }}"> |
|||
<image mode="aspectFill" catchtap="previewImage" data-src="{{_item}}" data-imgArry="{{topicObj.images}}" |
|||
class="image-item" wx:for="{{topicObj.images}}" wx:key="index" wx:for-index="index" wx:for-item="_item" |
|||
src="{{_item}}" /> |
|||
</view> |
|||
<view class="attitude"> |
|||
<view class="all" data-id="{{topicObj.id}}" bindtap="clicklike" data-likeFlag="{{topicObj.likeFlag}}" |
|||
data-index="{{index}}"> |
|||
<!-- 用户是否已点赞 0否;1是 --> |
|||
<image src="{{topicObj.likeFlag == '0' ? 'https://epdc-kongcun.elinkit.com.cn/epdcFile/M00/00/10/rBAB717h_42ASDA5AAAFzKtahn0840.png' : 'https://epdc-kongcun.elinkit.com.cn/epdcFile/M00/00/10/rBAB717h_7CAYVYmAAAFufp5o5Q547.png'}}"></image> |
|||
<view class="give-data {{topicObj.likeFlag == '1' ? 'color' : ''}}">{{topicObj.supportNum}}</view> |
|||
</view> |
|||
<view class="all"> |
|||
<image src="https://epdc-kongcun.elinkit.com.cn/epdcFile/M00/00/10/rBAB717h_86ARGYpAAAHQgcbZfk201.png"></image> |
|||
<view class="give-data">{{topicObj.commentNum}}</view> |
|||
</view> |
|||
<!-- <view class="all" data-id="{{topicObj.id}}" data-index="{{index}}" bindtap="clickTextarea"> |
|||
<image src="../../images/ic_huifu@2x.png"></image> |
|||
<view class="give-data">评论</view> |
|||
</view> --> |
|||
</view> |
|||
<view wx:if="{{topicObj.comments.length > 0}}" class="comment"> |
|||
<view wx:for="{{topicObj.comments}}" wx:key="index" wx:for-index="index" wx:for-item="item_" |
|||
class="comment-list"><text>{{item_.username}}:</text>{{item_.content}}</view> |
|||
</view> |
|||
</view> |
@ -0,0 +1,211 @@ |
|||
.item-list { |
|||
/* width: calc(100% - 40rpx); */ |
|||
padding: 40rpx 29rpx 20rpx 29rpx; |
|||
background: #fff; |
|||
margin-top: 20rpx; |
|||
border-radius: 16rpx; |
|||
} |
|||
|
|||
.user-info { |
|||
/* width: calc(100% - 58rpx); */ |
|||
height: 64rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.user-info image { |
|||
border-radius: 50rpx; |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
} |
|||
|
|||
.user-info .name-date { |
|||
margin-left: 14rpx; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.user-info .name-date .name { |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
|
|||
.user-info .name-date .date { |
|||
font-size: 20rpx; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
|
|||
.details-info { |
|||
/* width: calc(100% - 58rpx); */ |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 54rpx; |
|||
} |
|||
|
|||
.image-list { |
|||
/* width: calc(100% - 58rpx); */ |
|||
margin-top: 30rpx; |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fit, minmax(216rpx, 1fr)); |
|||
grid-gap: 7rpx; |
|||
} |
|||
|
|||
.image-list .image-item { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
.attitude { |
|||
/* width: calc(100% - 300rpx); */ |
|||
margin-top: 21rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
/* justify-content: center; */ |
|||
height: 28rpx; |
|||
padding: 0 50rpx; |
|||
} |
|||
|
|||
.attitude .all { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.attitude .all image { |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
} |
|||
|
|||
.attitude .all .give-data { |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
margin-left: 9rpx; |
|||
/* width: 196rpx; */ |
|||
} |
|||
|
|||
.attitude .all .give-data.color { |
|||
color: #FFB103; |
|||
} |
|||
|
|||
.comment { |
|||
/* width: calc(100% - 98rpx); */ |
|||
padding: 26rpx 20rpx; |
|||
background: #F2F2F2; |
|||
border-radius: 8rpx; |
|||
margin-top: 25rpx; |
|||
} |
|||
|
|||
.comment .comment-list { |
|||
width: 100%; |
|||
margin-top: 11rpx; |
|||
font-size: 28rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.comment .comment-list text { |
|||
color: #333333; |
|||
} |
|||
|
|||
/* 评论样式 */ |
|||
.release { |
|||
align-items: flex-end; |
|||
/*底部对齐*/ |
|||
box-sizing: border-box; |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding: 13rpx 20rpx; |
|||
background-color: #fff; |
|||
font-size: 28rpx; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.replyinfo1 { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
/*两端对齐*/ |
|||
font-size: 35rpx; |
|||
} |
|||
|
|||
.replyinfo2 { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
/*两端对齐*/ |
|||
} |
|||
|
|||
.release textarea { |
|||
/* width: calc(100% - 200rpx); */ |
|||
min-height: 34rpx; |
|||
max-height: 102rpx; |
|||
/*最多显示三行*/ |
|||
border-width: 15rpx 20rpx; |
|||
/*使用padding与预期留白不一致,故使用border*/ |
|||
border-style: solid; |
|||
border-color: #F2F2F2; |
|||
line-height: 34rpx; |
|||
font-size: 28rpx; |
|||
background-color: #F2F2F2; |
|||
border-radius: 4rpx; |
|||
} |
|||
|
|||
.release .text { |
|||
font-size: 40rpx; |
|||
color: #c9c9c9; |
|||
} |
|||
|
|||
.cancel { |
|||
width: 240rpx; |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
text-align: center; |
|||
color: #6c0; |
|||
margin: 0 3px; |
|||
padding: 0; |
|||
} |
|||
|
|||
.release .submit { |
|||
width: 160rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
text-align: center; |
|||
margin: 0 3px; |
|||
padding: 0; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
color: rgba(255, 255, 255, 1); |
|||
background: linear-gradient(to right, #e95027, #db1a1f); |
|||
border-radius: 50rpx; |
|||
} |
|||
|
|||
|
|||
.pro-box .info .text .delete { |
|||
color: #f68135; |
|||
border-radius: 50rpx; |
|||
border: 1px solid #f68135; |
|||
font-size: 28 rpx; |
|||
width: 150rpx; |
|||
height: 48rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.addIssue { |
|||
width: 178rpx; |
|||
height: 178rpx; |
|||
position: fixed; |
|||
bottom: 30%; |
|||
right: 14rpx; |
|||
} |
|||
|
|||
.addIssue image { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
Loading…
Reference in new issue