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; |