Skip to content

L
lumastoreapp
Commit 760aaabb authored by xieyishang's avatar xieyishang
Browse files
Options

1~

parent c3a95dfc
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 98 deletions
pages/chat/chat/chat.vue
View file @ 760aaabb
......@@ -44,110 +44,112 @@
<!-- 单聊 type=1 群聊 type=2 -->
<!-- push 发出 pull 收到 -->
<view class="chatboxtwo" id="list-box" @tap.stop="listboxtap">
<view class="talk-list">
<view v-for="(item,index) in msgslist" :key="index" :id="`msg-${item.msgId}`">
<view v-if="item.elemType==1" class="item flex_col" :class="item.isSelf == true ? 'push':'pull' ">
<image :src="item.userAvatar" mode="aspectFill" class="pic"></image>
<view>
<view class="contentss">{{item.textElem.msg}}</view>
<view v-if="item.isSelf == true && item.isPeerRead && type==1" class="isread">已读</view>
<scroll-view :style="{height: scrollheight+'px'}" class="scrollview" scroll-y :scroll-top="scrollTop" :scroll-with-animation="false">
<view class="chatboxtwo" id="list-box" @tap.stop="listboxtap">
<view class="talk-list">
<view v-for="(item,index) in msgslist" :key="index" :id="`msg-${item.msgId}`">
<view v-if="item.elemType==1" class="item flex_col" :class="item.isSelf == true ? 'push':'pull' ">
<image :src="item.userAvatar" mode="aspectFill" class="pic"></image>
<view>
<view class="contentss">{{item.textElem.msg}}</view>
<view v-if="item.isSelf == true && item.isPeerRead && type==1" class="isread">已读</view>
</view>
</view>
</view>
<!-- 2 自定义消息 -->
<view v-if="item.elemType==2 && item.customdata">
<!-- 1发送的产品消息 -->
<view v-if="item.customdata.type==1" class="item flex_col"
:class="item.isSelf == true ? 'push':'pull' ">
<image :src="item.userAvatar" mode="aspectFill" class="pic "></image>
<view class="" v-if="item.customdata.img">
<view class="kjsendproduct goodscard flex"
:class="item.isSelf == true ? 'push':'pull' ">
<image class="thumbnails" :src="staticUrl+item.customdata.img" mode="">
</image>
<view class="showgoodsinfo flex1">
<view class="flex jus-b">
<view class="goods_names twoline flex1">{{item.customdata.title}}</view>
</view>
<view class="isprice flex ali-c jus-b">
<view class="price"><text class="fuhao">￥</text>{{item.customdata.price}}</view>
<!-- 2 自定义消息 -->
<view v-if="item.elemType==2 && item.customdata">
<!-- 1发送的产品消息 -->
<view v-if="item.customdata.type==1" class="item flex_col"
:class="item.isSelf == true ? 'push':'pull' ">
<image :src="item.userAvatar" mode="aspectFill" class="pic "></image>
<view class="" v-if="item.customdata.img">
<view class="kjsendproduct goodscard flex"
:class="item.isSelf == true ? 'push':'pull' ">
<image class="thumbnails" :src="staticUrl+item.customdata.img" mode="">
</image>
<view class="showgoodsinfo flex1">
<view class="flex jus-b">
<view class="goods_names twoline flex1">{{item.customdata.title}}</view>
</view>
<view class="isprice flex ali-c jus-b">
<view class="price"><text class="fuhao">￥</text>{{item.customdata.price}}</view>
</view>
</view>
</view>
<view v-if="item.isSelf == true && item.isPeerRead && type==1" class="isread">已读</view>
</view>
<view v-if="item.isSelf == true && item.isPeerRead && type==1" class="isread">已读</view>
</view>
</view>
<!-- 2 订单状态通知 -->
<view class="ordernoticebox" v-else-if="item.customdata.type==2">
<view class="msgstime">{{item.time|dateFormat}}</view>
<view class="ordernotice">
<view class="orderstatit">温馨提示</view>
<view class="ordertextets">您已成功下单,可与商家及骑手在此群联系,快速了解出餐进度及修改备注信息。</view>
</view>
</view>
<view class="ordernoticebox" v-else-if="item.customdata.type==3">
<view class="msgstime">{{item.time|dateFormat}}</view>
<view class="ordernotice">
<view class="orderstatit">温馨提示</view>
<view class="ordertextets">亲,群创建成功了,有问题可以在群里咨询哦。</view>
<!-- 2 订单状态通知 -->
<view class="ordernoticebox" v-else-if="item.customdata.type==2">
<view class="msgstime">{{item.time|dateFormat}}</view>
<view class="ordernotice">
<view class="orderstatit">温馨提示</view>
<view class="ordertextets">您已成功下单,可与商家及骑手在此群联系,快速了解出餐进度及修改备注信息。</view>
</view>
</view>
</view>
<view @tap="tomsglink(item)" class="ordernoticebox" v-else-if="item.customdata.type==4">
<view class="msgstime">{{item.time|dateFormat}}</view>
<view class="ordernotice">
<view class="orderstatit">{{item.customdata.title}}</view>
<view class="ordertextets">{{item.customdata.content}}</view>
<view class="tovieews" v-show="item.customdata.s_link">点击查看 > ></view>
<view class="ordernoticebox" v-else-if="item.customdata.type==3">
<view class="msgstime">{{item.time|dateFormat}}</view>
<view class="ordernotice">
<view class="orderstatit">温馨提示</view>
<view class="ordertextets">亲,群创建成功了,有问题可以在群里咨询哦。</view>
</view>
</view>
</view>
<view v-else class="item flex_col" :class="item.isSelf == true ? 'push':'pull' ">
<image :src="item.userAvatar" mode="aspectFill" class="pic"></image>
<view>
<view class="contentss">[自定义消息 暂时无法识别]</view>
<view v-if="item.isSelf == true && item.isPeerRead && type==1" class="isread">已读</view>
<view @tap="tomsglink(item)" class="ordernoticebox" v-else-if="item.customdata.type==4">
<view class="msgstime">{{item.time|dateFormat}}</view>
<view class="ordernotice">
<view class="orderstatit">{{item.customdata.title}}</view>
<view class="ordertextets">{{item.customdata.content}}</view>
<view class="tovieews" v-show="item.customdata.s_link">点击查看 > ></view>
</view>
</view>
<view v-else class="item flex_col" :class="item.isSelf == true ? 'push':'pull' ">
<image :src="item.userAvatar" mode="aspectFill" class="pic"></image>
<view>
<view class="contentss">[自定义消息 暂时无法识别]</view>
<view v-if="item.isSelf == true && item.isPeerRead && type==1" class="isread">已读</view>
</view>
</view>
</view>
</view>
<!-- 自定义消息end -->
<!-- 自定义消息end -->
<!-- 图片消息 elemType==3 -->
<view v-if="item.elemType==3" class="item flex_col" :class="item.isSelf == true ? 'push':'pull' ">
<image :src="item.userAvatar" mode="aspectFill" class="pic"></image>
<view class="contentss">
<view class="xiaoxineir" >
<image @load="loadimgbefor" @tap="showimgdetaile(item)" class="xiaoxiimgs" style="width: 100upx;"
:src="item | geturlfun" mode="widthFix">
</image>
<!-- 图片消息 elemType==3 -->
<view v-if="item.elemType==3" class="item flex_col" :class="item.isSelf == true ? 'push':'pull' ">
<image :src="item.userAvatar" mode="aspectFill" class="pic"></image>
<view class="contentss">
<view class="xiaoxineir" >
<image @load="loadimgbefor" @tap="showimgdetaile(item)" class="xiaoxiimgs" style="width: 100upx;"
:src="item | geturlfun" mode="widthFix">
</image>
</view>
</view>
</view>
</view>
<!-- 语音消息 4 -->
<view v-if="item.elemType==4" class="item flex_col" :class="item.isSelf == true ? 'push':'pull' ">
<image :src="item.userAvatar" mode="aspectFill" class="pic"></image>
<view class="contentss flex">
<text v-if="item.isSelf == true"
class="timess">{{item.soundElem.duration==0?1:item.soundElem.duration}}''</text>
<image @tap="bofangmp3(item)" class="yuyingicons"
:src="mp3msgId==item.msgId?'/static/chat/mp3fileicon1.gif':'/static/chat/mp3fileicon1.png'"
mode=""></image>
<text v-if="item.isSelf == false"
class="timess">{{item.soundElem.duration==0?1:item.soundElem.duration}}''</text>
<!-- 语音消息 4 -->
<view v-if="item.elemType==4" class="item flex_col" :class="item.isSelf == true ? 'push':'pull' ">
<image :src="item.userAvatar" mode="aspectFill" class="pic"></image>
<view class="contentss flex">
<text v-if="item.isSelf == true"
class="timess">{{item.soundElem.duration==0?1:item.soundElem.duration}}''</text>
<image @tap="bofangmp3(item)" class="yuyingicons"
:src="mp3msgId==item.msgId?'/static/chat/mp3fileicon1.gif':'/static/chat/mp3fileicon1.png'"
mode=""></image>
<text v-if="item.isSelf == false"
class="timess">{{item.soundElem.duration==0?1:item.soundElem.duration}}''</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<view class="chatboxinps" id="chatboxinps">
<view class="flex_col lineinputboxs textbox">
<view @tap="taggleisVoice" class="leftnavicons">
......@@ -318,6 +320,9 @@
if(item.url_imageList){
if(item.url_imageList.length!=0){
url = item.url_imageList[0].url;
if(item.url_imageList.length>1){
url = item.url_imageList[1].url;
}
}
}
// #endif
......@@ -402,7 +407,9 @@
dftype:1,//对方的身份 1 用户 2商家 3骑手 4 客服
IMtitle:"聊天",
dfuinfo:{},//单聊对方的信息
scrollTop:0,
scrollheight:513,
}
},
computed: {
......@@ -422,12 +429,16 @@
msgslist() {
if (this.type == 1) {
if(this.msgslist.length!=0){
this.ToTheBottom();
setTimeout(()=>{
this.ToTheBottom();
}, 200);
}
this.markC2CMessageAsReadfun();
} else if (this.type == 2) {
if(this.msgslist.length!=0){
this.ToTheBottom();
setTimeout(()=>{
this.ToTheBottom();
}, 200);
}
this.markGroupMessageAsRead();
}
......@@ -435,6 +446,19 @@
}
},
onLoad(options) {
try{
//获取设备信息
let resinfo = uni.getSystemInfoSync();
console.info(resinfo,"resinfo");
let windowHeight = resinfo.windowHeight;//可使用窗口高度 768
//上面的是95 下面的是56
//上面44 下面 42
let scrollheight = windowHeight-44-43-resinfo.statusBarHeight;
this.scrollheight = scrollheight;//可滑动区域的高度 计算出来是
}catch(error){
console.error("error",error);
}
setTimeout(() => {
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
......@@ -485,6 +509,8 @@
//删除缓存消息
//......
this.$store.commit("setqunmsgslist", []);
this.$store.commit("Setmsgslist", []);
},
onPageScroll(e) {
if (e.scrollTop < 5) {
......@@ -574,18 +600,34 @@
//页面置底
ToTheBottom() {
console.info("置底");
// this.$nextTick(() => {
// // dom元素更新后执行，因此这里能正确打印更改之后的值
// let curRoute = this.$mp.page.route;
// if(curRoute=='pages/chat/chat/chat'){
// uni.pageScrollTo({
// scrollTop: 9999999999, // 设置一个超大值，以保证滚动条滚动到底部
// duration: 0
// });
// }else{
// console.info("不在当前页面了 不能置底");
// }
// })
this.$nextTick(() => {
// dom元素更新后执行，因此这里能正确打印更改之后的值
let curRoute = this.$mp.page.route;
if(curRoute=='pages/chat/chat/chat'){
uni.pageScrollTo({
scrollTop: 9999999999, // 设置一个超大值，以保证滚动条滚动到底部
duration: 0
});
}else{
console.info("不在当前页面了 不能置底");
}
let view = uni.createSelectorQuery().select(".chatboxtwo");
view.boundingClientRect((data)=> {
//获取固定尾部的高度=data.height
// that.style.footViewHeight = data.height
// console.info(" data.height", data.height);
if(data){
this.scrollTop = data.height+460;
}else{
console.info("加载快了");
this.scrollTop = 999999999;
}
}).exec();
})
},
// 获取历史消息
......
pages/chat/chat/global.scss
View file @ 760aaabb
......@@ -445,6 +445,20 @@ page{
}
}
.talk-list.isbottoms{
padding-bottom: 375upx;
}
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
/deep/::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.isread{
color: #999999;@at-root
margin-top: 10upx;
......
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