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