2 完成需求对对碰小程序消息发送页面点击输入键盘顶起页面的优化,改为消息条数>5顶起页面,反之不顶hotfix/210830_二组聊天优化
}, | }, | ||||
onShow() { | onShow() { | ||||
this.setData({ | this.setData({ | ||||
currentIndex: 2 | |||||
currentIndex: 2, | |||||
pageLoading:true | |||||
}) | }) | ||||
const businessCommunicationCustomer = wx.getStorageSync('businessCommunicationCustomer') || null; | const businessCommunicationCustomer = wx.getStorageSync('businessCommunicationCustomer') || null; | ||||
if (businessCommunicationCustomer) { | if (businessCommunicationCustomer) { |
<!-- pages/msgPage/msgPage.wxml --> | <!-- pages/msgPage/msgPage.wxml --> | ||||
<view class="msg-page page-container"> | <view class="msg-page page-container"> | ||||
<view class="list-loading text-center" wx:if="{{ pageLoading }}"> | <view class="list-loading text-center" wx:if="{{ pageLoading }}"> | ||||
<van-loading size="24px">加载中...</van-loading> | |||||
<van-loading size="24px">加载新消息...</van-loading> | |||||
</view> | </view> | ||||
<view wx:else class="body-view"> | <view wx:else class="body-view"> | ||||
<view class="top-view {{ topShow ? 'topShow' : '' }}"> | <view class="top-view {{ topShow ? 'topShow' : '' }}"> |
isSendImg: false, | isSendImg: false, | ||||
// 发送图片url | // 发送图片url | ||||
mangerUrl: "", | mangerUrl: "", | ||||
// 当前的键盘高度 | |||||
inputHeight: null, | |||||
// 点击键盘是否顶页面 | |||||
adjustPosition: false, | |||||
}, | }, | ||||
/** | /** | ||||
let _data = JSON.parse(res.data); | let _data = JSON.parse(res.data); | ||||
// console.log(_data, '_data'); | // console.log(_data, '_data'); | ||||
if (_data.readMessageCode) { | if (_data.readMessageCode) { | ||||
list.forEach(el=>{ | |||||
list.forEach(el => { | |||||
el.isRead = true; | el.isRead = true; | ||||
}) | }) | ||||
historyList.forEach(el=>{ | |||||
historyList.forEach(el => { | |||||
el.isRead = true; | el.isRead = true; | ||||
}) | }) | ||||
_this.setData({ | _this.setData({ | ||||
} | } | ||||
let param = { | let param = { | ||||
sendno: _this.data.receiveMemberId+'', | |||||
userno: _this.data.sendMemberId+'', | |||||
messageModule : "010", | |||||
sendno: _this.data.receiveMemberId + '', | |||||
userno: _this.data.sendMemberId + '', | |||||
messageModule: "010", | |||||
readMessageCode: _data.chatRecord.chatRecord.chatRecordCode, | readMessageCode: _data.chatRecord.chatRecord.chatRecordCode, | ||||
}; | }; | ||||
$request.post('/businessCommunicationDemand/readChatRecord.action', param).then(res => { | $request.post('/businessCommunicationDemand/readChatRecord.action', param).then(res => { | ||||
if (res.status == 0) { | if (res.status == 0) { | ||||
console.log(res.data,'res'); | |||||
console.log(res.data, 'res'); | |||||
} | } | ||||
}).catch(err => { | }).catch(err => { | ||||
console.log(err) | console.log(err) | ||||
this.setData({ | this.setData({ | ||||
historyList | historyList | ||||
}) | }) | ||||
this.isAdjustPosition(); | |||||
} | } | ||||
// 如果产品ID存在 | // 如果产品ID存在 | ||||
if (businessCommunicationDemandId) { | if (businessCommunicationDemandId) { | ||||
/** | /** | ||||
* 页面上拉触底事件的处理函数 | * 页面上拉触底事件的处理函数 | ||||
*/ | */ | ||||
onReachBottom: function () { | |||||
onReachBottom() { | |||||
}, | }, | ||||
send: function () { | |||||
var _this = this; | |||||
if (_this.data.input) { | |||||
this.sendmsgApi(_this.data.input, 0); | |||||
send() { | |||||
if (this.data.input) { | |||||
this.sendmsgApi(this.data.input, 0); | |||||
} | } | ||||
}, | }, | ||||
sendmsgApi(content, msgType) { | sendmsgApi(content, msgType) { | ||||
this.setData({ | this.setData({ | ||||
newsList: list, | newsList: list, | ||||
input: null, | input: null, | ||||
inputShowed: true, | |||||
}) | }) | ||||
this.scrollBottom() | this.scrollBottom() | ||||
// 表情选择隐藏 | // 表情选择隐藏 | ||||
this.setData({ | this.setData({ | ||||
emotionVisible: false, | emotionVisible: false, | ||||
}) | }) | ||||
this.isAdjustPosition(); | |||||
const client = wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 | const client = wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 | ||||
}, | }, | ||||
bindChange: function (res) { | |||||
bindChange(res) { | |||||
this.setData({ | this.setData({ | ||||
input: res.detail.value, | |||||
input: res.detail, | |||||
}) | }) | ||||
}, | }, | ||||
back: function () { | back: function () { | ||||
current: url, // 当前显示图片的http链接 | current: url, // 当前显示图片的http链接 | ||||
urls: [url] // 需要预览的图片http链接列表 | urls: [url] // 需要预览的图片http链接列表 | ||||
}) | }) | ||||
}, | |||||
// 计算页面是否需要顶起 | |||||
isAdjustPosition() { | |||||
let { newsList, historyList } = this.data; | |||||
// 如果消息条数大于5条就要顶页面了 | |||||
if (newsList.length + historyList.length > 5) { | |||||
this.setData({ | |||||
adjustPosition: true | |||||
}) | |||||
} else { | |||||
this.setData({ | |||||
adjustPosition: false | |||||
}) | |||||
} | |||||
}, | |||||
// 输入框获取焦点 | |||||
inputFocus(e) { | |||||
if(!this.data.adjustPosition){ | |||||
this.setData({ | |||||
inputHeight: e.detail.height | |||||
}) | |||||
} | |||||
}, | |||||
// 输入框失去焦点 | |||||
inputBlur(e) { | |||||
this.setData({ | |||||
inputHeight: 0 | |||||
}) | |||||
} | } | ||||
}) | }) | ||||
<image class='other-head-img' src='{{item.senderHeadPortrait}}'></image> | <image class='other-head-img' src='{{item.senderHeadPortrait}}'></image> | ||||
<view class='other-record-content-triangle'></view> | <view class='other-record-content-triangle'></view> | ||||
<view class='other-record-content' style="user-select:text!important;-webkit-user-select:text"> | <view class='other-record-content' style="user-select:text!important;-webkit-user-select:text"> | ||||
<text selectable="{{true}}" user-select='true'> | |||||
{{item.content}} | |||||
</text> | |||||
<!-- <view class="msg-isRead left">{{ item.isRead ? '已读' : '未读' }}</view> --> | |||||
<text selectable="{{true}}" user-select='true'>{{item.content}}</text> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class='own-record'> | <view class='own-record'> | ||||
<view class='own-record-content' style="user-select:text!important;-webkit-user-select:text"> | <view class='own-record-content' style="user-select:text!important;-webkit-user-select:text"> | ||||
<text selectable="{{true}}" user-select='true'> | |||||
{{item.content}} | |||||
</text> | |||||
<text selectable="{{true}}" user-select='true'>{{item.content}}</text> | |||||
<view class="msg-isRead right"> | <view class="msg-isRead right"> | ||||
{{ item.isRead ? '已读' : '未读' }} | {{ item.isRead ? '已读' : '未读' }} | ||||
</view> | </view> | ||||
<image class='other-head-img' src='{{receivebaseInfo.avatar}}'></image> | <image class='other-head-img' src='{{receivebaseInfo.avatar}}'></image> | ||||
<view class='other-record-content-triangle'></view> | <view class='other-record-content-triangle'></view> | ||||
<view class='other-record-content' style="user-select:text!important;-webkit-user-select:text"> | <view class='other-record-content' style="user-select:text!important;-webkit-user-select:text"> | ||||
<text selectable="{{true}}">{{item.message}}</text> | |||||
<!-- <view class="msg-isRead left">{{ item.isRead ? '已读' : '未读' }}</view> --> | |||||
<text selectable="{{true}}" user-select='true'>{{item.message}}</text> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<!-- 图片消息 左 --> | <!-- 图片消息 左 --> | ||||
<view wx:elif="{{item.type==1 && item.messageType == 2}}" id="scrollid{{index}}"> | <view wx:elif="{{item.type==1 && item.messageType == 2}}" id="scrollid{{index}}"> | ||||
<view> | <view> | ||||
<text class='chat-time' style="display:none;" user-select='true'> | |||||
{{item.date}} | |||||
</text> | |||||
<text class='chat-time' style="display:none;">{{item.date}}</text> | |||||
</view> | </view> | ||||
<view class='other-record'> | <view class='other-record'> | ||||
<image class='other-head-img' src='{{receivebaseInfo.avatar}}'></image> | <image class='other-head-img' src='{{receivebaseInfo.avatar}}'></image> | ||||
</scroll-view> | </scroll-view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="sendmessage"> | |||||
<view class="sendmessage" style="bottom:{{ inputHeight }}px"> | |||||
<view class="send-message"> | <view class="send-message"> | ||||
<van-cell-group> | |||||
<van-field value="{{ input }}" placeholder="" border="{{ false }}" bind:change="bindChange" /> | |||||
</van-cell-group> | |||||
<!-- <van-cell-group> --> | |||||
<van-field | |||||
type="text" | |||||
value="{{ input }}" | |||||
placeholder="" | |||||
border="{{ false }}" | |||||
bind:change="bindChange" | |||||
confirm-hold="{{ true }}" | |||||
confirm-type="send" | |||||
cursor-spacing="{{ 26 }}" | |||||
bind:confirm="send" | |||||
adjust-position="{{ adjustPosition }}" | |||||
bind:focus="inputFocus" | |||||
bind:blur="inputBlur" | |||||
focus="{{inputShowed}}" | |||||
/> | |||||
<!-- </van-cell-group> --> | |||||
<!-- <input class="chat-input" type="text" bindinput="bindChange" confirm-type="send" value='{{input}}' cursor-spacing="16px" hold-keyboard="{{true}}" placeholder="" bindconfirm="send" focus="{{inputShowed}}" /> --> | <!-- <input class="chat-input" type="text" bindinput="bindChange" confirm-type="send" value='{{input}}' cursor-spacing="16px" hold-keyboard="{{true}}" placeholder="" bindconfirm="send" focus="{{inputShowed}}" /> --> | ||||
<image class="expression-msg-img" src="/images/home/expression-msg-icon.png" bind:tap="emotionChange" /> | <image class="expression-msg-img" src="/images/home/expression-msg-icon.png" bind:tap="emotionChange" /> | ||||
<image class="img-msg-img" src="/images/home/img-msg-icon.png" bindtap="upImg" /> | <image class="img-msg-img" src="/images/home/img-msg-icon.png" bindtap="upImg" /> |
} | } | ||||
.sendmessage input { | .sendmessage input { | ||||
height: 81rpx; | |||||
background-color: #fff; | background-color: #fff; | ||||
line-height: 81rpx; | |||||
font-size: 28rpx; | |||||
padding-left: 20rpx; | |||||
width: 530rpx; | |||||
width: 460rpx; | |||||
} | } | ||||
.sendmessage .expression-msg-img, | .sendmessage .expression-msg-img, | ||||
line-height: 80rpx; | line-height: 80rpx; | ||||
word-break: break-all; | word-break: break-all; | ||||
} | } | ||||
.chat-input { | |||||
width: 60%; | |||||
height: 40px; | |||||
border: 0; | |||||
border-radius: 8px; | |||||
margin-left: 5rpx; | |||||
} | |||||
.back-icon { | .back-icon { | ||||
margin-top: 25rpx; | margin-top: 25rpx; |