171 lines
4.1 KiB
Vue
171 lines
4.1 KiB
Vue
<template>
|
|
<view class="">
|
|
<view v-if="chatList.length" class="content ">
|
|
<view class="radius padding-lr-sm bg" style="margin-top: 4rpx;" @click="goIM(item)"
|
|
v-for="(item,index) in chatList" :key='index'>
|
|
<view class="flex padding-tb " v-if="userId == item.userId">
|
|
<view>
|
|
<u-image shape="circle" width='80rpx' height="80rpx" :src="item.shopCover"></u-image>
|
|
</view>
|
|
<view class="flex-sub margin-left-sm">
|
|
<view class="flex justify-between">
|
|
<view style="width: 55%;">{{item.shopName}}</view>
|
|
<view class="text-grey">{{item.createTime}}</view>
|
|
</view>
|
|
<view class="flex justify-between">
|
|
<view class="text-grey">{{ item.messageType == 1? item.content : '[图片]'}}</view>
|
|
<view v-if="item.riderUnread"
|
|
style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
|
|
{{item.riderUnread}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex padding-tb" v-else>
|
|
<view>
|
|
<u-image shape="circle" width='80rpx' height="80rpx" :src="item.shopCover"></u-image>
|
|
</view>
|
|
<view class="flex-sub margin-left-sm">
|
|
<view class="flex justify-between">
|
|
<view style="width: 55%;">{{item.shopName}}</view>
|
|
<view class="text-grey">{{item.createTime}}</view>
|
|
</view>
|
|
<view class="flex justify-between">
|
|
<view class="text-grey">{{ item.messageType == 1? item.content : '[图片]'}}</view>
|
|
<view v-if="item.riderUnread"
|
|
style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
|
|
{{item.riderUnread}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<empty v-if="!chatList.length && !msgList.length" content='暂无消息'></empty>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import empty from '../../../components/empty.vue'
|
|
export default {
|
|
components: {
|
|
empty
|
|
},
|
|
data() {
|
|
return {
|
|
page: 1,
|
|
limit: 20,
|
|
chatList: [],
|
|
userId: '',
|
|
msgList: [],
|
|
count: 0,
|
|
time: '',
|
|
messageCount: 0,
|
|
scrollTop: false,
|
|
}
|
|
},
|
|
|
|
onPullDownRefresh: function() {
|
|
this.page = 1;
|
|
this.getChatList();
|
|
},
|
|
onLoad() {
|
|
this.$queue.showLoading("加载中...")
|
|
that.userId = uni.getStorageSync('userId')
|
|
if (that.userId) {
|
|
that.time = setInterval(function() {
|
|
that.getChatList()
|
|
// that.getMsgList()
|
|
that.$nextTick(function() {
|
|
that.messageCount = uni.getStorageSync('messageCount')
|
|
})
|
|
|
|
}, 10000)
|
|
|
|
} else {
|
|
that.chatList = []
|
|
that.msgList = []
|
|
}
|
|
|
|
},
|
|
onShow() {
|
|
let that = this
|
|
|
|
this.page = 1;
|
|
this.getChatList();
|
|
|
|
},
|
|
onHide() {
|
|
clearInterval(this.time)
|
|
|
|
},
|
|
methods: {
|
|
getChatList() {
|
|
this.$Request.getT("/app/ordersChat/selectOrdersChatPageRider", {
|
|
page: this.page,
|
|
limit: this.limit,
|
|
// shopId: uni.getStorageSync('shopId')
|
|
}).then(res => {
|
|
if (res.code === 0) {
|
|
this.totalCount = res.data.totalCount
|
|
if (this.page == 1) {
|
|
this.chatList = res.data.list
|
|
} else {
|
|
res.data.list.forEach(d => {
|
|
this.chatList.push(d);
|
|
});
|
|
}
|
|
this.count = res.data.totalCount;
|
|
}
|
|
uni.hideLoading();
|
|
uni.stopPullDownRefresh();
|
|
// if (res.code == 0) {
|
|
// this.chatList = res.data.list
|
|
// }
|
|
});
|
|
},
|
|
goIM(e) {
|
|
let userId = this.$queue.getData('userId');
|
|
if (e.userId == userId) {
|
|
userId = e.byUserId
|
|
} else {
|
|
userId = e.userId
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pages/riderMy/kefu/liaotianshi?orderId=' + e.ordersId
|
|
})
|
|
},
|
|
goMsg() {
|
|
uni.navigateTo({
|
|
url: '/pages/msg/message'
|
|
})
|
|
}
|
|
},
|
|
onPageScroll: function(e) {
|
|
this.scrollTop = e.scrollTop > 200;
|
|
},
|
|
onReachBottom: function() {
|
|
if (this.chatList.length == this.count) {
|
|
uni.showToast({
|
|
title: '已经到底了',
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
this.page = this.page + 1;
|
|
this.getChatList();
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #F7F7F7;
|
|
}
|
|
|
|
.bg {
|
|
background: #FFFFFF;
|
|
}
|
|
</style>
|