You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.4 KiB
86 lines
2.4 KiB
5 years ago
|
<view class="chatroom">
|
||
|
|
<view class="header">
|
||
|
|
<!-- display number of people in the room -->
|
||
|
|
<view class="left"></view>
|
||
|
|
<!-- room name -->
|
||
|
|
<view class="middle">{{groupName}}</view>
|
||
|
|
<!-- reserved -->
|
||
|
|
<view class="right"></view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- chats -->
|
||
|
|
<scroll-view
|
||
|
|
class="body"
|
||
|
|
scroll-y
|
||
|
|
scroll-with-animation="{{scrollWithAnimation}}"
|
||
|
|
scroll-top="{{scrollTop}}"
|
||
|
|
scroll-into-view="{{scrollToMessage}}"
|
||
|
|
bindscrolltoupper="onScrollToUpper"
|
||
|
|
>
|
||
|
|
<view
|
||
|
|
wx:for="{{chats}}"
|
||
|
|
wx:key="{{item._id}}"
|
||
|
|
id="item-{{index}}"
|
||
|
|
class="message {{openId == item._openid ? 'message__self' : ''}}"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
class="avatar"
|
||
|
|
src="{{item.avatar}}"
|
||
|
|
mode="scaleToFill"
|
||
|
|
></image>
|
||
|
|
<view class="main">
|
||
|
|
<view class="nickname">{{item.nickName}}</view>
|
||
|
|
<block wx:if="{{item.msgType === 'image'}}">
|
||
|
|
<view class="image-wrapper">
|
||
|
|
<view class="loading" wx:if="{{item.writeStatus > -1}}">{{item.writeStatus}}%</view>
|
||
|
|
<image
|
||
|
|
src="{{item.tempFilePath || item.imgFileID}}"
|
||
|
|
data-fileid="{{item.tempFilePath || item.imgFileID}}"
|
||
|
|
class="image-content"
|
||
|
|
style="{{item.imgStyle}}"
|
||
|
|
mode="scallToFill"
|
||
|
|
bindtap="onMessageImageTap"></image>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
<block wx:else>
|
||
|
|
<view class="text-wrapper">
|
||
|
|
<view class="loading" wx:if="{{item.writeStatus === 'pending'}}">···</view>
|
||
|
|
<view class="text-content">{{item.textContent}}</view>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
|
||
|
|
<!-- message sender -->
|
||
|
|
<view class="footer">
|
||
|
|
<view class="message-sender" wx:if="{{userInfo}}">
|
||
|
|
<input
|
||
|
|
class="text-input"
|
||
|
|
type="text"
|
||
|
|
confirm-type="send"
|
||
|
|
bindconfirm="onConfirmSendText"
|
||
|
|
cursor-spacing="20"
|
||
|
|
value="{{textInputValue}}"
|
||
|
|
></input>
|
||
|
|
|
||
|
|
<image
|
||
|
|
src="./photo.png"
|
||
|
|
class="btn-send-image"
|
||
|
|
mode="scaleToFill"
|
||
|
|
bindtap="onChooseImage"
|
||
|
|
></image>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="message-sender" wx:if="{{!userInfo}}">
|
||
|
|
<button
|
||
|
|
open-type="getUserInfo"
|
||
|
|
bindgetuserinfo="onGetUserInfo"
|
||
|
|
class="userinfo"
|
||
|
|
>请先登录后参与聊天</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|