| <template> |
| <view class="chatDetails" @touchmove.stop.prevent="moveHandle"> |
| <view class="chatDetails-header"> |
| <view class="chatDetails-header-title"> |
| 今天有去苍山的吗？一起拼个车呗！仅限女生哦，小姐姐快来联系我吧~ |
| </view> |
| <view class="chatDetails-header-avatar"> |
| <u-avatar :src="avatar" size="110"></u-avatar> |
| <view class="chatDetails-header-avatar-desc"> |
| <text class="chatDetails-header-avatar-desc-name">李萌萌</text> |
| <text class="chatDetails-header-avatar-desc-date">3小时前</text> |
| </view> |
| </view> |
| <view class="chatDetails-header-con"> |
| 今天下午1点到4点，有没有小伙伴想去苍山的啊？有的话我们就一起呗，路上有个陪伴，还能多认识一些小伙伴对不对呀，限女生哦~有一起拼车的小姐姐们记得找我哦！ |
| </view> |
| </view> |
| <view class="chatDetails-line"></view> |
| <scroll-view :scroll-y="true" :style="{height:height+'px'}" class="scrollView"> |
| <view class="chatDetails-items"> |
| <view class="chatDetails-items-desc"> |
| <view class="chatDetails-items-desc-left"> |
| <u-avatar :src="avatar" size="112"></u-avatar> |
| </view> |
| <view class="chatDetails-items-desc-right"> |
| <view class="chatDetails-items-desc-right-author"> |
| <text class="chatDetails-items-desc-right-author-name">刘壮壮</text> |
| <view class="chatDetails-items-desc-right-author-sup"> |
| <text>166</text> |
| <u-icon name="thumb-up-fill" color="#8A8A8A" size="26"></u-icon> |
| </view> |
| </view> |
| <view class="chatDetails-items-desc-right-date">1小时前</view> |
| <view class="chatDetails-items-desc-right-desc">男生就没有机会了吗？嘤嘤嘤~~~</view> |
| </view> |
| </view> |
| </view> |
| <view class="chatDetails-items"> |
| <view class="chatDetails-items-desc"> |
| <view class="chatDetails-items-desc-left"> |
| <u-avatar :src="avatar" size="112"></u-avatar> |
| </view> |
| <view class="chatDetails-items-desc-right"> |
| <view class="chatDetails-items-desc-right-author"> |
| <text class="chatDetails-items-desc-right-author-name">刘壮壮</text> |
| <view class="chatDetails-items-desc-right-author-sup"> |
| <text>166</text> |
| <u-icon name="thumb-up-fill" color="#8A8A8A" size="26"></u-icon> |
| </view> |
| </view> |
| <view class="chatDetails-items-desc-right-date">1小时前</view> |
| <view class="chatDetails-items-desc-right-desc">男生就没有机会了吗？嘤嘤嘤~~~</view> |
| </view> |
| </view> |
| </view> |
| <view class="chatDetails-items"> |
| <view class="chatDetails-items-desc"> |
| <view class="chatDetails-items-desc-left"> |
| <u-avatar :src="avatar" size="112"></u-avatar> |
| </view> |
| <view class="chatDetails-items-desc-right"> |
| <view class="chatDetails-items-desc-right-author"> |
| <text class="chatDetails-items-desc-right-author-name">刘壮壮</text> |
| <view class="chatDetails-items-desc-right-author-sup"> |
| <text>166</text> |
| <u-icon name="thumb-up-fill" color="#8A8A8A" size="26"></u-icon> |
| </view> |
| </view> |
| <view class="chatDetails-items-desc-right-date">1小时前</view> |
| <view class="chatDetails-items-desc-right-desc">男生就没有机会了吗？嘤嘤嘤~~~</view> |
| </view> |
| </view> |
| </view> |
| <view class="chatDetails-items"> |
| <view class="chatDetails-items-desc"> |
| <view class="chatDetails-items-desc-left"> |
| <u-avatar :src="avatar" size="112"></u-avatar> |
| </view> |
| <view class="chatDetails-items-desc-right"> |
| <view class="chatDetails-items-desc-right-author"> |
| <text class="chatDetails-items-desc-right-author-name">刘壮壮</text> |
| <view class="chatDetails-items-desc-right-author-sup"> |
| <text>166</text> |
| <u-icon name="thumb-up-fill" color="#8A8A8A" size="26"></u-icon> |
| </view> |
| </view> |
| <view class="chatDetails-items-desc-right-date">1小时前</view> |
| <view class="chatDetails-items-desc-right-desc">男生就没有机会了吗？嘤嘤嘤~~~</view> |
| </view> |
| </view> |
| </view> |
| </scroll-view> |
| <view class="chatDetails-bottom"> |
| <u-icon name="chat" color="#999999" size="44"></u-icon> |
| <text class="chatDetails-bottom-num">12</text> |
| <view class="chatDetails-bottom-ipt"> |
| <u-search placeholder="说点什么吧" v-model="val" :show-action="false"></u-search> |
| </view> |
| <u-icon name="thumb-up" color="#999999" size="44"></u-icon> |
| <u-button size="mini" :custom-style="chatDetailsBottomBtn">发送</u-button> |
| </view> |
| </view> |
| </template> |
| |
| <script> |
| export default { |
| data() { |
| return { |
| avatar: "", |
| val: "", |
| height: "", |
| chatDetailsBottomBtn:{ |
| color: '#ffffff', |
| backgroundColor: '#30A8E1', |
| borderRadius: '50rpx', |
| padding: '30rpx 40rpx', |
| marginLeft: '10rpx', |
| } |
| } |
| }, |
| methods: { |
| moveHandle() { |
| return |
| }, |
| getSrcollViewHeight(){ |
| let winHeight |
| let that =this |
| uni.getSystemInfo({ |
| success: function(res) { |
| winHeight = res.windowHeight |
| } |
| }); |
| const query = uni.createSelectorQuery().in(that); |
| let top,height |
| query.select('.scrollView').boundingClientRect(data => { |
| console.log(data) |
| top = Number(data.top) |
| }).exec(); |
| query.select('.chatDetails-bottom').boundingClientRect(data => { |
| height = Number(data.height) |
| that.height = winHeight - top - height |
| }).exec(); |
| } |
| }, |
| onLoad() { |
| |
| }, |
| onReady() { |
| this.getSrcollViewHeight() |
| } |
| } |
| </script> |
| |
| <style lang="scss" scoped> |
| scroll-view ::-webkit-scrollbar { |
| width: 0; |
| height: 0; |
| display: none; |
| background-color: transparent; |
| } |
| |
| .scrollView { |
| // height: calc(100vh - 560rpx); |
| // padding-bottom: 150rpx; |
| } |
| |
| .chatDetails { |
| width: 100vw; |
| background-color: #FFFFFF; |
| font-family: "PingFang-SC-Medium"; |
| |
| &-header { |
| padding: 30rpx; |
| |
| &-title { |
| color: #343434; |
| font-size: 31rpx; |
| } |
| |
| &-avatar { |
| display: flex; |
| margin: 30rpx 0 20rpx; |
| |
| &-desc { |
| display: flex; |
| flex-direction: column; |
| justify-content: space-around; |
| margin-left: 20rpx; |
| |
| &-name { |
| color: #343434; |
| font-size: 28rpx; |
| } |
| |
| &-date { |
| color: #9A9A9A; |
| font-size: 24rpx; |
| } |
| } |
| } |
| |
| &-con { |
| color: #666666; |
| font-size: 28rpx; |
| } |
| } |
| |
| &-line { |
| width: 100%; |
| height: 2rpx; |
| background-color: rgba(204, 204, 204, 1); |
| margin: 10rpx 0 0; |
| } |
| |
| &-items { |
| padding: 30rpx; |
| |
| &-desc { |
| display: flex; |
| |
| &-right { |
| width: 80%; |
| margin-left: 20rpx; |
| margin-top: 15rpx; |
| |
| &-author { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| |
| &-name { |
| color: #343434; |
| font-size: 28rpx; |
| } |
| |
| &-sup { |
| color: #9A9A9A; |
| font-size: 24rpx; |
| display: flex; |
| align-items: center; |
| |
| text { |
| margin-right: 10rpx; |
| } |
| } |
| } |
| |
| &-date { |
| color: #9A9A9A; |
| font-size: 24rpx; |
| margin: 10rpx 0; |
| } |
| |
| &-desc { |
| color: #666666; |
| font-size: 28rpx; |
| display: inline-block; |
| text-align: justify; |
| } |
| } |
| |
| } |
| } |
| |
| &-bottom { |
| position: fixed; |
| bottom: 0; |
| width: 100vw; |
| height: 120rpx; |
| padding: 30rpx; |
| display: flex; |
| background-color: #FFFFFF; |
| align-items: center; |
| border-top: 2rpx rgba(100, 100, 100, 0.09) solid; |
| |
| &-num { |
| color: #9A9A9A; |
| font-size: 24rpx; |
| font-family: "PingFang-SC-Regular"; |
| margin: 0 20rpx 0 5rpx; |
| } |
| |
| &-ipt { |
| width: 65%; |
| margin-right: 20rpx; |
| } |
| |
| &-btn { |
| color: #ffffff; |
| background-color: #30A8E1; |
| border-radius: 50rpx; |
| padding: 30rpx 40rpx; |
| margin-left: 10rpx; |
| } |
| } |
| } |
| </style> |