You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
9.8 KiB
278 lines
9.8 KiB
define([
|
|
'kefu-assets/components/empty/index',
|
|
'kefu-assets/api/kefu',
|
|
'dayjs',
|
|
'text!./index.html',
|
|
'css!./index.css'
|
|
], function (empty, kefuApi, dayjs, template) {
|
|
|
|
|
|
return {
|
|
template,
|
|
name: "chat-list",
|
|
props: {
|
|
userOnline: {
|
|
type: Object,
|
|
default: function () {
|
|
return {}
|
|
}
|
|
},
|
|
newRecored: {
|
|
type: Object,
|
|
default: function () {
|
|
return {}
|
|
}
|
|
},
|
|
searchData: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
components: {
|
|
empty
|
|
},
|
|
watch: {
|
|
userOnline: {
|
|
handler(nVal, oVal) {
|
|
if (nVal.hasOwnProperty('to_uid')) {
|
|
this.userList.forEach((el, index) => {
|
|
if (el.to_uid == nVal.to_uid) {
|
|
el.online = nVal.online
|
|
if (nVal.online == 1) {
|
|
this.$Notice.info({
|
|
title: '上线通知',
|
|
desc: `${el.nickname}上线`
|
|
});
|
|
}
|
|
|
|
}
|
|
})
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
searchData: {
|
|
handler(nVal, oVal) {
|
|
if (nVal != oVal) {
|
|
this.nickname = nVal
|
|
this.page = 1
|
|
this.isScroll = true
|
|
this.userList = []
|
|
this.isSearch = true
|
|
this.getList()
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
hdTabCur: 0,
|
|
hdTab: [
|
|
{
|
|
key: 0,
|
|
title: '用户列表'
|
|
},
|
|
{
|
|
key: 1,
|
|
title: '游客列表'
|
|
}
|
|
],
|
|
userList: [],
|
|
curId: '',
|
|
page: 1,
|
|
limit: 15,
|
|
isScroll: true,
|
|
nickname: '',
|
|
isSearch: false,
|
|
ops: {
|
|
vuescroll: {
|
|
mode: 'native',
|
|
enable: false,
|
|
tips: {
|
|
deactive: 'Push to Load',
|
|
active: 'Release to Load',
|
|
start: 'Loading...',
|
|
beforeDeactive: 'Load Successfully!'
|
|
},
|
|
auto: false,
|
|
autoLoadDistance: 0,
|
|
pullRefresh: {
|
|
enable: false
|
|
},
|
|
pushLoad: {
|
|
enable: true,
|
|
auto: true,
|
|
autoLoadDistance: 10
|
|
}
|
|
},
|
|
bar: {
|
|
background: '#393232',
|
|
opacity: '.5',
|
|
size: '5px'
|
|
}
|
|
},
|
|
}
|
|
},
|
|
filters: {
|
|
toDay: function (value) {
|
|
if (!value) return ''
|
|
return dayjs.unix(value).format('M月D日 HH:mm')
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
let that = this
|
|
this.$socket.then(ws => {
|
|
//用户转接
|
|
ws.$on('transfer', data => {
|
|
let status = false
|
|
that.userList.forEach((el, index, arr) => {
|
|
if (data.recored.id == el.id) {
|
|
status = true
|
|
if (data.recored.is_tourist == that.hdTabCur) {
|
|
let oldVal = data.recored
|
|
arr.splice(index, 1)
|
|
|
|
if (index == 0) {
|
|
this.$emit('set-data-id', oldVal)
|
|
oldVal.mssage_num = 0
|
|
}
|
|
arr.unshift(oldVal)
|
|
}
|
|
this.$Notice.info({
|
|
title: '您有一条转接消息！',
|
|
});
|
|
}
|
|
})
|
|
if (!status) {
|
|
if (data.recored.is_tourist == this.hdTabCur)
|
|
this.userList.unshift(data.recored)
|
|
}
|
|
})
|
|
ws.$on('mssage_num', data => {
|
|
if (data.recored.id) {
|
|
let status = false
|
|
that.userList.forEach((el, index, arr) => {
|
|
if (data.recored.id == el.id) {
|
|
status = true
|
|
if (data.recored.is_tourist == that.hdTabCur) {
|
|
let oldVal = data.recored
|
|
arr.splice(index, 1)
|
|
arr.unshift(oldVal)
|
|
}
|
|
}
|
|
})
|
|
if (!status) {
|
|
if (data.recored.is_tourist == this.hdTabCur)
|
|
this.userList.unshift(data.recored)
|
|
}
|
|
}
|
|
if (data.recored.is_tourist != this.hdTabCur && data.recored.id) {
|
|
this.$Notice.info({
|
|
title: this.hdTabCur ? '用户发来消息啦！' : '游客发来消息啦！',
|
|
});
|
|
}
|
|
});
|
|
ws.$on('chat', (data) => {
|
|
const targetId = data.is_kefu_send ? data.to_uid : data.uid;
|
|
const userRecord = this.userList.find(i => i.to_uid == targetId);
|
|
if (userRecord) {
|
|
userRecord.online = 1;
|
|
const isActiveUser = this.curId == userRecord.id;
|
|
Object.assign(userRecord, {
|
|
message: data.msn,
|
|
message_type: data.msn_type,
|
|
update_time: data.add_time,
|
|
mssage_num: isActiveUser ? 0 : userRecord.mssage_num + 1
|
|
});
|
|
|
|
if (document.hidden || !isActiveUser) {
|
|
mp3.play();
|
|
}
|
|
} else {
|
|
this.isScroll = true;
|
|
this.page = 1;
|
|
this.getList(true);
|
|
}
|
|
});
|
|
ws.$on('offline', (data) => {
|
|
if (data.self) return;
|
|
const userRecord = this.userList.find(i => i.to_uid == data.uid);
|
|
if (userRecord) {
|
|
userRecord.online = 0;
|
|
}
|
|
});
|
|
});
|
|
this.bus.$on('change', data => {
|
|
this.nickname = data
|
|
})
|
|
this.getList();
|
|
|
|
},
|
|
methods: {
|
|
//切换
|
|
changeTab(item) {
|
|
if (this.hdTabCur == item.key) return
|
|
this.hdTabCur = item.key
|
|
this.isScroll = true
|
|
this.page = 1
|
|
this.userList = []
|
|
this.$emit('change-type', item.key)
|
|
this.getList()
|
|
},
|
|
getList(forceUpdate = false) {
|
|
if (!this.isScroll) return
|
|
return kefuApi.record({
|
|
nickname: this.nickname,
|
|
page: this.page,
|
|
limit: this.limit,
|
|
is_tourist: this.hdTabCur
|
|
}).then(res => {
|
|
if (res.data.length > 0) {
|
|
res.data[0].mssage_num = 0
|
|
this.isScroll = res.data.length >= this.limit
|
|
|
|
if (forceUpdate) {
|
|
this.userList = res.data;
|
|
if (!this.curId && this.page == 1 && res.data.length > 0 && !this.isSearch) {
|
|
this.curId = res.data[0].id
|
|
this.$emit('set-data-id', res.data[0])
|
|
}
|
|
} else {
|
|
this.userList = this.userList.concat(res.data);
|
|
if (this.page == 1 && res.data.length > 0 && !this.isSearch) {
|
|
this.curId = res.data[0].id
|
|
this.$emit('set-data-id', res.data[0])
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.page++
|
|
} else {
|
|
this.$emit('set-data-id', 0)
|
|
}
|
|
|
|
})
|
|
},
|
|
chartReachBottom() {
|
|
this.getList()
|
|
},
|
|
// 选择用户
|
|
selectUser(item) {
|
|
if (this.curId == item.id) return
|
|
item.mssage_num = 0
|
|
this.curId = item.id
|
|
this.$emit('set-data-id', item)
|
|
},
|
|
handleScroll(vertical, horizontal, nativeEvent) {
|
|
if (vertical.process == 1) {
|
|
this.getList()
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}); |