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