Skip to content

W
wechat_lung
Commit bb3fa512 by zujiaozhang
Options

'优化聊天下拉获取消息记录功能'

parent 5fe1a36d
Showing with 102 additions and 85 deletions
wechat_lung_chat/css/freeChat.css
body {
background: #F6F6FC;
background: #f6f6fc;
font-size: 0.32rem;
}
* { touch-action: pan-y; }
* {
touch-action: pan-y;
}
/* .mui-icon-pulldown:before{
display: none;
} */
......@@ -16,7 +18,7 @@ body {
.chat_info {
background: #fff;
padding: 0.4rem 0.32rem 0.15rem 0.32rem;
border-bottom: 0.01rem solid #f1f1f1
border-bottom: 0.01rem solid #f1f1f1;
}
.chat_info .info_warp {
......@@ -47,7 +49,7 @@ body {
}
.chat_info .info_warp .info_detail .info_title {
color: #999999
color: #999999;
}
.no_follow {
......@@ -60,7 +62,7 @@ body {
text-align: center;
border-radius: 0.08rem;
color: #999;
display:none;
display: none;
}
.assistant_info {
......@@ -79,16 +81,16 @@ body {
line-height: 0.48rem;
display: inline-block;
text-align: center;
color: #37D488;
border: 0.01rem solid #37D488;
color: #37d488;
border: 0.01rem solid #37d488;
border-radius: 0.04rem;
font-size: 0.2rem;
margin: 0.15rem;
}
.service_btn_list .grayBtn{
color:#999999;
background:#F9F9F9;
border:none;
.service_btn_list .grayBtn {
color: #999999;
background: #f9f9f9;
border: none;
}
.top_btn {
......@@ -100,7 +102,7 @@ body {
}
.top_btn span {
color: #1D8AEF;
color: #1d8aef;
font-size: 0.28rem;
}
......@@ -119,9 +121,21 @@ body {
padding-bottom: 1rem;
position: relative;
}
.refreshText {
position: absolute;
width: 100%;
line-height: .5rem;
text-align: center;
left: 0;
top: 0;
transform: translateY(-0.2rem);
}
.chat_list .container {
height: 100%;
padding-top: .1rem;
}
.chat_list .chat_item {
margin-bottom: 0.32rem
margin-bottom: 0.32rem;
}
.chat_list .chat_item .message_time {
......@@ -170,7 +184,7 @@ body {
}
.chat_message_send {
background: #2CBCA0;
background: #2cbca0;
color: #fff;
border-radius: 0.28rem 0.28rem 0 0.28rem;
}
......@@ -213,7 +227,7 @@ body {
text-decoration: line-through;
}
.sevice_img_consult {
background: #37D488;
background: #37d488;
}
.service_message .service_right_box {
......@@ -227,11 +241,11 @@ body {
}
.service_right_box .detail_patient_name {
margin-bottom: 0.2rem
margin-bottom: 0.2rem;
}
.consult_box {
background: #FC624A;
background: #fc624a;
margin-top: 0.2rem;
}
......@@ -251,12 +265,12 @@ body {
top: 0;
}
.footer .footer_addPic{
margin:0.08rem 0 0 .15625rem;
.footer .footer_addPic {
margin: 0.08rem 0 0 .15625rem;
height: .5rem;
width: .5rem;
}
.footer .footer_addPic img{
.footer .footer_addPic img {
height: 100%;
width: 100%;
}
......@@ -264,7 +278,7 @@ body {
height: 0.64rem;
width: 4.375rem;
line-height: 0.64rem;
background: #F9F9F9;
background: #f9f9f9;
border: none;
border-radius: 0.08rem;
padding-left: 0.2rem;
......@@ -276,7 +290,7 @@ body {
height: 0.64rem;
line-height: 0.64rem;
text-align: center;
background: #37D488;
background: #37d488;
color: #fff;
font-size: 0.32rem;
float: left;
......@@ -321,20 +335,20 @@ body {
}
.card .content .content_item .txt_blue {
color: #1D8AEF;
color: #1d8aef;
}
.card .content .content_item .txt_black {
color: #777777;
font-weight: 600
font-weight: 600;
}
.card .content .content_item .txt_orange {
color: #F45E19
color: #f45e19;
}
.card .content .content_item .content_item_right {
float: right
float: right;
}
.card .content .content_item .content_item_descArea {
......@@ -352,13 +366,13 @@ body {
.card .content .content_item_imgList img {
width: 0.96rem;
height: 0.96rem;
margin-right: 0.08rem
margin-right: 0.08rem;
}
.service_btn_list .service_none {
background: #F9F9F9;
background: #f9f9f9;
border: none;
color: #999
color: #999;
}
.go_emr {
......@@ -367,5 +381,5 @@ body {
line-height: 0.6rem;
text-align: center;
border-top: 0.01rem solid #f1f1f1;
color: #1D8AEF
color: #1d8aef;
}
wechat_lung_chat/javaScript/freeChat.js
......@@ -34,58 +34,58 @@ define([ 'zepto', 'medtap','mui'], function($, medtap,mui) {
// 显示的图文价格
pic_price:0,
// 显示的私人医生价格
private_price: 0,
private_price: 0,
// 没消息后请求开关
noTalkList:true,
init: function() {
chat.getDoctorDetail();
chat.bindEve();
chat.talkRelation();
chat.getWechatTicket();
chat.getAttention();
$(window).scroll(function() {
// var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
// var scrollHeight = $(document).height(); //当前页面的总高度
// var clientHeight = $('.chat_lsit').height(); //当前可视的页面高度
// if (scrollTop + clientHeight >= scrollHeight) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
// //滚动条到达底部
// chat.offset = 1;
// chat.refreshRecord(0);
// } else if (scrollTop <= 0) {
// //滚动条到达顶部
// chat.offset = 1;
// chat.refreshRecord(1);
// }
if($(window).scrollTop() == 0){
console.log('到顶部了')
chat.refreshRecord(1);
}
document.body.addEventListener('touchmove' , function(e){
e.preventDefault();
})
},
// chat.getTalkRecord();
// var getTalk = setInterval(function() {
// chat.getTalkRecord();
// if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
// setTimeout(function() {
// document.documentElement.scrollTop = document.documentElement.scrollHeight;
// });
// }
// }, 5000);
// $('input').on('focus', function() {
// $('body').scrollTop(0);
// clearInterval(getTalk);
// });
// $('input').on('blur', function() {
// $('body').scrollTop(0);
// var getTalk = setInterval(function() {
// chat.getTalkRecord();
// if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
// setTimeout(function() {
// document.documentElement.scrollTop = document.documentElement.scrollHeight;
// });
// }
// }, 5000);
// });
//1.获取到列表的dom，刷新显示部分的dom，列表父容器的dom
let container = document.querySelector('.chat_list');
let refreshText = document.querySelector('.refreshText');
let parent = document.querySelector('.container');
//2.定义一些需要常用的变量
let startY = 0;//手指触摸最开始的Y坐标
let endY = 0;//手指结束触摸时的Y坐标
//3.给列表dom监听touchstart事件,得到起始位置的Y坐标
parent.addEventListener('touchstart',function(e){
startY = e.touches[0].pageY;
container.style.position = 'relative';
container.style.transition = 'transform 0s';
});
//4.给列表dom监听touchmove事件，当移动到一定程度需要显示上面的文字
parent.addEventListener('touchmove',function (e) {
medtap.loading(1);
if(isTop() && (e.touches[0].pageY-startY) > 0){
refreshText.style.height = "50px";
parent.style.transform = "translateY(50px)";
parent.style.transition = "all ease 0.3s";
refreshText.innerHTML = "获取更多聊天记录...";
}
});
//5.给列表dom监听touchend事件，此时说明用户已经松开了手指，应该进行异步操作了
parent.addEventListener('touchend',function (e) {
if(isTop()){
refreshText.innerHTML = "正在刷新...";
setTimeout(function(){
parent.style.transform = "translateY(0)";
console.log('成功刷新');
},800)
}
chat.refreshRecord(1)
return;
})
function isTop(){
var t = document.documentElement.scrollTop||document.body.scrollTop;
return t === 0 ? true : false;
}
},
bindEve: function() {
$('.close_info_btn').unbind().bind('click', function() {
$('.chat_info').hide();
......@@ -475,14 +475,14 @@ define([ 'zepto', 'medtap','mui'], function($, medtap,mui) {
}
//$('.chat_list').html(html);
if (chat.offset == 1) {
$('.chat_list').html(html);
$('.chat_list .container').html(html);
if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
setTimeout(function() {
document.documentElement.scrollTop = document.documentElement.scrollHeight;
});
}
} else {
$('.chat_list').prepend(html);
$('.chat_list .container').prepend(html);
if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
setTimeout(function() {
document.documentElement.scrollTop = document.documentElement.scrollHeight;
......@@ -515,14 +515,13 @@ define([ 'zepto', 'medtap','mui'], function($, medtap,mui) {
},
//刷新消息列表
refreshRecord: function(operateType) {
console.log('执行了下拉刷新')
$('.refreshText').html('正在刷新...')
var id = 0;
if (operateType == 0) {
id = chat.maxId;
} else {
id = chat.minId;
}
medtap.loading(1);
medtap.submitAjax({
url: 'https://testdevgw.medtap.cn/operation/talk/talkRecord/refresh',
type: 'get',
......@@ -536,7 +535,7 @@ define([ 'zepto', 'medtap','mui'], function($, medtap,mui) {
startId: id
},
success: function(res) {
console.log('刷新成功',res)
$('.refreshText').html('')
medtap.loading(0);
chat.offsetRefresh += 1;
var record = res.content.list
......@@ -544,9 +543,9 @@ define([ 'zepto', 'medtap','mui'], function($, medtap,mui) {
var html = '';
if (record.length == 0) {
chat.hasMore = false;
/* medtap.toast({
medtap.toast({
message: '没有更多了'
}) */
})
} else {
chat.hasMore = true;
if (operateType == 0) {
......@@ -706,7 +705,7 @@ define([ 'zepto', 'medtap','mui'], function($, medtap,mui) {
}
}
}
$('.chat_list').append(html);
$('.chat_list .container').append(html);
} else {
chat.minId = record[0].id;
for (var i = 0; i < record.length; i++) {
......@@ -864,7 +863,7 @@ define([ 'zepto', 'medtap','mui'], function($, medtap,mui) {
}
}
}
$('.chat_list').prepend(html);
$('.chat_list .container').prepend(html);
}
}
......
wechat_lung_chat/pages/freeChat.html
......@@ -68,6 +68,10 @@
</div>
</div>
<div class="chat_list">
<p class="refreshText"></p>
<div class="container">
</div>
<!-- <div class="chat_item chat_item_left">
<p class="message_time">05-01 08:21</p>
<div class="chat_info_warp clearfix">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment