2 完成需求对对碰小程序消息发送页面点击输入键盘顶起页面的优化,改为消息条数>5顶起页面,反之不顶hotfix/210830_二组聊天优化
@@ -30,7 +30,8 @@ Page({ | |||
}, | |||
onShow() { | |||
this.setData({ | |||
currentIndex: 2 | |||
currentIndex: 2, | |||
pageLoading:true | |||
}) | |||
const businessCommunicationCustomer = wx.getStorageSync('businessCommunicationCustomer') || null; | |||
if (businessCommunicationCustomer) { |
@@ -1,7 +1,7 @@ | |||
<!-- pages/msgPage/msgPage.wxml --> | |||
<view class="msg-page page-container"> | |||
<view class="list-loading text-center" wx:if="{{ pageLoading }}"> | |||
<van-loading size="24px">加载中...</van-loading> | |||
<van-loading size="24px">加载新消息...</van-loading> | |||
</view> | |||
<view wx:else class="body-view"> | |||
<view class="top-view {{ topShow ? 'topShow' : '' }}"> |
@@ -54,6 +54,10 @@ Page({ | |||
isSendImg: false, | |||
// 发送图片url | |||
mangerUrl: "", | |||
// 当前的键盘高度 | |||
inputHeight: null, | |||
// 点击键盘是否顶页面 | |||
adjustPosition: false, | |||
}, | |||
/** | |||
@@ -152,10 +156,10 @@ Page({ | |||
let _data = JSON.parse(res.data); | |||
// console.log(_data, '_data'); | |||
if (_data.readMessageCode) { | |||
list.forEach(el=>{ | |||
list.forEach(el => { | |||
el.isRead = true; | |||
}) | |||
historyList.forEach(el=>{ | |||
historyList.forEach(el => { | |||
el.isRead = true; | |||
}) | |||
_this.setData({ | |||
@@ -180,15 +184,15 @@ Page({ | |||
} | |||
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, | |||
}; | |||
$request.post('/businessCommunicationDemand/readChatRecord.action', param).then(res => { | |||
if (res.status == 0) { | |||
console.log(res.data,'res'); | |||
console.log(res.data, 'res'); | |||
} | |||
}).catch(err => { | |||
console.log(err) | |||
@@ -235,6 +239,7 @@ Page({ | |||
this.setData({ | |||
historyList | |||
}) | |||
this.isAdjustPosition(); | |||
} | |||
// 如果产品ID存在 | |||
if (businessCommunicationDemandId) { | |||
@@ -365,13 +370,12 @@ Page({ | |||
/** | |||
* 页面上拉触底事件的处理函数 | |||
*/ | |||
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) { | |||
@@ -415,18 +419,18 @@ Page({ | |||
this.setData({ | |||
newsList: list, | |||
input: null, | |||
inputShowed: true, | |||
}) | |||
this.scrollBottom() | |||
// 表情选择隐藏 | |||
this.setData({ | |||
emotionVisible: false, | |||
}) | |||
this.isAdjustPosition(); | |||
const client = wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 | |||
}, | |||
bindChange: function (res) { | |||
bindChange(res) { | |||
this.setData({ | |||
input: res.detail.value, | |||
input: res.detail, | |||
}) | |||
}, | |||
back: function () { | |||
@@ -508,6 +512,34 @@ Page({ | |||
current: 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 | |||
}) | |||
} | |||
}) | |||
@@ -15,10 +15,7 @@ | |||
<image class='other-head-img' src='{{item.senderHeadPortrait}}'></image> | |||
<view class='other-record-content-triangle'></view> | |||
<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> | |||
@@ -29,9 +26,7 @@ | |||
</view> | |||
<view class='own-record'> | |||
<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"> | |||
{{ item.isRead ? '已读' : '未读' }} | |||
</view> | |||
@@ -94,8 +89,7 @@ | |||
<image class='other-head-img' src='{{receivebaseInfo.avatar}}'></image> | |||
<view class='other-record-content-triangle'></view> | |||
<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> | |||
@@ -116,9 +110,7 @@ | |||
<!-- 图片消息 左 --> | |||
<view wx:elif="{{item.type==1 && item.messageType == 2}}" id="scrollid{{index}}"> | |||
<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 class='other-record'> | |||
<image class='other-head-img' src='{{receivebaseInfo.avatar}}'></image> | |||
@@ -157,11 +149,25 @@ | |||
</scroll-view> | |||
</view> | |||
</view> | |||
<view class="sendmessage"> | |||
<view class="sendmessage" style="bottom:{{ inputHeight }}px"> | |||
<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}}" /> --> | |||
<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" /> |
@@ -135,12 +135,8 @@ page { | |||
} | |||
.sendmessage input { | |||
height: 81rpx; | |||
background-color: #fff; | |||
line-height: 81rpx; | |||
font-size: 28rpx; | |||
padding-left: 20rpx; | |||
width: 530rpx; | |||
width: 460rpx; | |||
} | |||
.sendmessage .expression-msg-img, | |||
@@ -172,13 +168,7 @@ page { | |||
line-height: 80rpx; | |||
word-break: break-all; | |||
} | |||
.chat-input { | |||
width: 60%; | |||
height: 40px; | |||
border: 0; | |||
border-radius: 8px; | |||
margin-left: 5rpx; | |||
} | |||
.back-icon { | |||
margin-top: 25rpx; |