第一次提交
This commit is contained in:
wangxiaowei
1010
pages/plus/chat/chat.vue
Normal file
1010
pages/plus/chat/chat.vue
Normal file
File diff suppressed because it is too large
Load Diff
279
pages/plus/chat/chat_list.vue
Normal file
279
pages/plus/chat/chat_list.vue
Normal file
@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<view class="im_index">
|
||||
<view class="im_item" v-for="(item,index) in imList" :key="index"
|
||||
@click="jumpPage(item.supplier_user_id,item.shop_supplier_id,item.supplier.name)">
|
||||
<view class="im_item_left">
|
||||
<image :src="item.supplier.logo.file_path" mode=""></image>
|
||||
</view>
|
||||
<view class="im_item_right">
|
||||
<view class="im_item_right_item">
|
||||
<view class="title text-ellipsis">{{item.supplier.name}}</view>
|
||||
<view class="time">{{item.newMessage.create_time}}</view>
|
||||
</view>
|
||||
<view class="im_item_right_item">
|
||||
<view class="content" v-if="item.newMessage.type==0">{{item.newMessage.content}}</view>
|
||||
<view class="content" v-if="item.newMessage.type==1">[图片]</view>
|
||||
<view class="content" v-if="item.newMessage.type==2">[商品]</view>
|
||||
<view v-if="item.num>0" class="message">{{item.num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hint" v-if="imList.length==0">
|
||||
您当前并没有与任何人聊天哦！
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imList: [],
|
||||
user_id: '',
|
||||
official: '', //站内信数据
|
||||
logistic: '', //物流数据
|
||||
socketTask: null,
|
||||
// 确保websocket是打开状态
|
||||
is_open_socket: false,
|
||||
url: '',
|
||||
// 心跳定时器
|
||||
intervalId: null,
|
||||
/* 初次进入 */
|
||||
is_live: false,
|
||||
my_user_id: ''
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.get_im_list();
|
||||
},
|
||||
onLoad() {
|
||||
this.my_user_id = uni.getStorageSync('user_id');
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log('beforeDestroy');
|
||||
// 销毁监听
|
||||
this.closeSocket();
|
||||
this.is_live = true;
|
||||
},
|
||||
methods: {
|
||||
send: function(data) {
|
||||
let self = this;
|
||||
if (self.is_open_socket) {
|
||||
self.socketTask.send({
|
||||
data: data,
|
||||
success() {
|
||||
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("处于离线状态");
|
||||
self.socketTask = null;
|
||||
self.is_open_socket = false;
|
||||
clearInterval(self.intervalId);
|
||||
self.socketInit();
|
||||
}
|
||||
},
|
||||
socketInit() {
|
||||
let self = this;
|
||||
if (self.is_open_socket) {
|
||||
return;
|
||||
}
|
||||
self.socketTask = null;
|
||||
self.socketTask = uni.connectSocket({
|
||||
url: self.url + '/socket?user_id=' + self.getUserId() + '&usertype=user' + '&to=0',
|
||||
success() {
|
||||
console.log('Socket连接成功！');
|
||||
}
|
||||
});
|
||||
// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
|
||||
self.socketTask.onOpen((res) => {
|
||||
console.log("WebSocket连接正常打开中...！");
|
||||
self.is_open_socket = true;
|
||||
// 开始发送心跳
|
||||
self.startHeart();
|
||||
// 注：只有连接正常打开中 ，才能正常收到消息
|
||||
self.socketTask.onMessage(function(res) {
|
||||
console.log("收到服务器内容：");
|
||||
console.log(res);
|
||||
self.getNewcontent(res);
|
||||
});
|
||||
});
|
||||
// 这里仅是事件监听【如果socket关闭了会执行】
|
||||
self.socketTask.onClose(() => {
|
||||
console.log("已经被关闭了");
|
||||
//重连机制
|
||||
self.socketTask = null;
|
||||
self.is_open_socket = false;
|
||||
clearInterval(self.intervalId);
|
||||
!self.is_live && self.socketInit();
|
||||
});
|
||||
},
|
||||
getNewcontent(res) {
|
||||
let newdata = JSON.parse(res.data);
|
||||
//绑定用户
|
||||
if (newdata.type == 'init') {
|
||||
let self = this;
|
||||
self._post(
|
||||
'plus.chat.chat/bindClient', {
|
||||
client_id: newdata.client_id,
|
||||
supplier_user_id: 0,
|
||||
},
|
||||
function(res) {
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
//获取聊天列表
|
||||
get_im_list() {
|
||||
let self = this;
|
||||
self._post('plus.chat.chat/index', {
|
||||
|
||||
}, (res) => {
|
||||
console.log(res)
|
||||
self.imList = res.data.list;
|
||||
self.official = res.data.official;
|
||||
self.logistic = res.data.logistic;
|
||||
if(self.url==''){
|
||||
self.url = res.data.url;
|
||||
self.$nextTick(function() {
|
||||
self.socketInit();
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
closeSocket: function() {
|
||||
let self = this;
|
||||
let data = JSON.stringify({
|
||||
type: 'close',
|
||||
app_id: self.getAppId(),
|
||||
supplier_user_id: 0,
|
||||
user_id: self.my_user_id,
|
||||
shop_supplier_id: 0,
|
||||
msg_type: 2,
|
||||
});
|
||||
self.send(data);
|
||||
self.socketTask.close({
|
||||
success(res) {
|
||||
console.log("关闭成功", res)
|
||||
},
|
||||
fail(err) {
|
||||
console.log("关闭失败", err)
|
||||
}
|
||||
});
|
||||
self.socketTask = null;
|
||||
self.is_open_socket = false;
|
||||
clearInterval(self.intervalId);
|
||||
},
|
||||
jumpPage(user_id, shop_supplier_id, nickName) {
|
||||
if (shop_supplier_id == uni.getStorageInfoSync('user_id')) {
|
||||
return false
|
||||
}
|
||||
this.gotoPage('/pages/plus/chat/chat?user_id=' + user_id + '&shop_supplier_id=' + shop_supplier_id +
|
||||
'&nickName=' + nickName);
|
||||
},
|
||||
gotoMessage(val) {
|
||||
this.gotoPage('/pages/im/message?type=' + val);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.im_index {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.im_item {
|
||||
width: 90%;
|
||||
height: 120rpx;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.im_item_left {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.im_item_left image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 5%;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.im_item_right {
|
||||
width: 555rpx;
|
||||
padding: 10rpx;
|
||||
border-bottom: 1px #dcdcdc solid;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
background-color: red;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 15rpx;
|
||||
}
|
||||
|
||||
.im_item_right_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
|
||||
.guangfang {
|
||||
font-size: 16rpx;
|
||||
color: #F36A24;
|
||||
border: 1rpx #F36A24 solid;
|
||||
border-radius: 10rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
left: -65rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.hint {
|
||||
width: 750rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #585858;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
1000
pages/plus/chat/supplier_chat.vue
Normal file
1000
pages/plus/chat/supplier_chat.vue
Normal file
File diff suppressed because it is too large
Load Diff
157
pages/plus/chat/supplier_chat_list.vue
Normal file
157
pages/plus/chat/supplier_chat_list.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="im_index">
|
||||
<view class="im_item" v-for="(item,index) in imList" :key="index" @click="jumpPage(item.user_id,item.user.nickName)">
|
||||
<view class="im_item_left">
|
||||
<image :src="item.user.avatarUrl" mode=""></image>
|
||||
</view>
|
||||
<view class="im_item_right">
|
||||
<view class="im_item_right_item">
|
||||
<view class="title">{{item.user.nickName}}</view>
|
||||
<view class="time">{{item.newMessage.create_time}}</view>
|
||||
</view>
|
||||
<view class="im_item_right_item">
|
||||
<view class="content" v-if="item.newMessage.type==0">{{item.newMessage.content}}</view>
|
||||
<view class="content" v-if="item.newMessage.type==1">[图片]</view>
|
||||
<view class="content" v-if="item.newMessage.type==2">[商品]</view>
|
||||
<view v-if="item.num>0" class="message">{{item.num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hint" v-if="imList.length==0">
|
||||
您当前并没有与任何人聊天哦！
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imList: [
|
||||
],
|
||||
user_id: '',
|
||||
official: '', //站内信数据
|
||||
logistic: '', //物流数据
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.get_im_list();
|
||||
},
|
||||
methods: {
|
||||
//获取聊天列表
|
||||
get_im_list() {
|
||||
let self = this;
|
||||
self._post('plus.chat.supplierChat/index', {
|
||||
|
||||
}, (res) => {
|
||||
console.log(res)
|
||||
self.imList = res.data.list
|
||||
self.official = res.data.official
|
||||
self.logistic = res.data.logistic
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
jumpPage(user_id,nickName) {
|
||||
this.gotoPage('/pages/plus/chat/supplier_chat?user_id=' + user_id+'&nickName='+nickName);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.im_index {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.im_item {
|
||||
width: 90%;
|
||||
height: 120rpx;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.im_item_left {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.im_item_left image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 5%;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.im_item_right {
|
||||
width: 555rpx;
|
||||
padding: 10rpx;
|
||||
border-bottom: 1px #dcdcdc solid;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
background-color: red;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 15rpx;
|
||||
}
|
||||
|
||||
.im_item_right_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
|
||||
.guangfang {
|
||||
font-size: 16rpx;
|
||||
color: #F36A24;
|
||||
border: 1rpx #F36A24 solid;
|
||||
border-radius: 10rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
left: -65rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
word-break:break-all;
|
||||
}
|
||||
|
||||
.hint {
|
||||
width: 750rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #585858;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user