Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
foreign
/
customer-service
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Snippets
Settings
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit
585e1c18
authored
Jul 17, 2021
by
panjiangyi
Browse files
Options
_('Browse Files')
Download
Email Patches
Plain Diff
从im拿会话列表
parent
c102ba83
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
390 additions
and
402 deletions
chat-list.vue
chat-room.vue
store/index.ts
chat-list.vue
View file @
585e1c18
<
template
>
<div
class=
"chat-list-con h-100"
>
<div
class=
"chat-list h-100"
>
<el-input
class=
"keyword-input"
placeholder=
"昵称、手机、Email、备注"
prefix-icon=
"el-icon-search"
v-model=
"searchKeyword"
v-on:keyup
.
enter
.
native=
"search"
clearable
@
clear=
"search"
></el-input>
<div
class=
"chat-list-scroll"
>
<el-scrollbar
class=
"h-100 no-bottom-scrollbar"
>
<div
v-for=
"item in chatRooms"
:key=
"item.chat_id"
class=
"chat-item"
:class=
"
{ selected: isSelected(item) }"
@click="goToChatRoom(item)"
>
<div
class=
"chat-avatar pos-rel"
:class=
"
{ 'red-dot': item.unread_msg_count > 0 }"
>
<avatar
shape=
"circle"
:size=
"36"
:src=
"item.customer_avatar_url"
/>
</div>
<div
class=
"chat-info"
>
<div
class=
"
<div
class=
"chat-list-con h-100"
>
<div
class=
"chat-list h-100"
>
<el-input
class=
"keyword-input"
placeholder=
"昵称、手机、Email、备注"
prefix-icon=
"el-icon-search"
v-model=
"searchKeyword"
v-on:keyup
.
enter
.
native=
"search"
clearable
@
clear=
"search"
></el-input>
<div
class=
"chat-list-scroll"
>
<el-scrollbar
class=
"h-100 no-bottom-scrollbar"
>
<div
v-for=
"item in chatRooms"
:key=
"item.chat_id"
class=
"chat-item"
:class=
"
{ selected: isSelected(item) }"
@click="goToChatRoom(item)"
>
<div
class=
"chat-avatar pos-rel"
:class=
"
{ 'red-dot': item.unread_msg_count > 0 }"
>
<avatar
shape=
"circle"
:size=
"36"
:src=
"item.customer_avatar_url"
/>
</div>
<div
class=
"chat-info"
>
<div
class=
"
chat-info-left
d-flex
justify-content-between
align-items-center
"
>
<div
:title=
"item.customer_name"
class=
"chat-name flex-fill text-dot-dot-dot"
>
<!--
<span>
{{
>
<div
:title=
"item.customer_name"
class=
"chat-name flex-fill text-dot-dot-dot"
>
<!--
<span>
{{
item
.
customer_name
||
item
.
customer_mobile
||
item
.
customer_eid
}}
</span>
-->
<span>
{{
item
.
chat_id
}}
</span>
</div>
<div
v-if=
"item.last_msg_ts"
class=
"chat-time"
>
{{
formatTimestamp
(
item
.
last_msg_ts
)
}}
</div>
</div>
<div
class=
"chat-msg text-dot-dot-dot"
>
{{
parseMesage
(
item
)
}}
</div>
<span>
{{
item
.
chat_id
}}
</span>
</div>
<div
v-if=
"item.last_msg_ts"
class=
"chat-time"
>
{{
formatTimestamp
(
item
.
last_msg_ts
)
}}
</div>
</div>
<div
class=
"chat-msg text-dot-dot-dot"
>
{{
parseMesage
(
item
)
}}
</div>
</div>
</div>
<div
class=
"empty"
v-if=
"chatRooms && chatRooms.length
<
=
0
"
>
{{
searchKeyword
?
"无相关接待"
:
"无接待"
}}
</div>
</el-scrollbar>
</div>
</div>
<div
class=
"empty"
v-if=
"chatRooms && chatRooms.length
<
=
0
"
>
{{
searchKeyword
?
"无相关接待"
:
"无接待"
}}
</div>
</el-scrollbar>
</div>
</div>
</div>
</div>
</
template
>
<
script
lang=
"ts"
>
...
...
@@ -78,234 +81,232 @@ import { chatStore, ChatStore } from "@/customer-service/store/model";
import
{
formatTime
,
TimeFormatRule
}
from
"@/customer-service/utils/time"
;
import
Chat
from
"@/customer-service/xim"
;
export
function
parserMessage
(
type
:
string
,
rawMsg
:
string
)
{
if
(
!
type
)
return
""
;
if
(
!
rawMsg
)
return
""
;
const
msg
=
JSON
.
parse
(
rawMsg
);
if
(
type
===
"text"
)
{
return
msg
.
text
;
}
else
if
(
type
===
"image"
)
{
return
`[图片]`
;
}
else
if
(
type
===
"file"
)
{
return
`[文件]`
;
}
else
{
return
`[不支持的消息格式]`
;
}
if
(
!
type
)
return
""
;
if
(
!
rawMsg
)
return
""
;
const
msg
=
JSON
.
parse
(
rawMsg
);
if
(
type
===
"text"
)
{
return
msg
.
text
;
}
else
if
(
type
===
"image"
)
{
return
`[图片]`
;
}
else
if
(
type
===
"file"
)
{
return
`[文件]`
;
}
else
{
return
`[不支持的消息格式]`
;
}
}
type
Chat
=
NonNullable
<
ChatStore
.
STATE_MY_CHAT_ROOM_LIST
>
[
"list"
][
number
];
@
Component
({
components
:
{
avatar
}
})
export
default
class
ChatList
extends
Vue
{
@
chatStore
.
Action
(
ChatStore
.
ACTION_GET_MY_CHAT_LIST
)
private
readonly
getMyChatList
!
:
ChatStore
.
ACTION_GET_MY_CHAT_LIST
;
@
chatStore
.
Action
(
ChatStore
.
ACTION_GET_MY_CHAT_LIST
)
private
readonly
getMyChatList
!
:
ChatStore
.
ACTION_GET_MY_CHAT_LIST
;
@
chatStore
.
State
(
ChatStore
.
STATE_CHAT_CURRENT_CHAT_ID
)
private
readonly
chatId
!
:
ChatStore
.
STATE_CHAT_CURRENT_CHAT_ID
;
@
chatStore
.
State
(
ChatStore
.
STATE_CHAT_CURRENT_CHAT_ID
)
private
readonly
chatId
!
:
ChatStore
.
STATE_CHAT_CURRENT_CHAT_ID
;
@
chatStore
.
State
(
ChatStore
.
STATE_CHAT_CURRENT_CHAT_VERSION
)
private
readonly
uniplatVersion
!
:
ChatStore
.
STATE_CHAT_CURRENT_CHAT_VERSION
;
@
chatStore
.
State
(
ChatStore
.
STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID
)
private
readonly
currentChatUniplatId
!
:
ChatStore
.
STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID
;
@
chatStore
.
State
(
ChatStore
.
STATE_MY_CHAT_ROOM_LIST
)
private
readonly
chatList
!
:
ChatStore
.
STATE_MY_CHAT_ROOM_LIST
;
@
chatStore
.
State
(
ChatStore
.
STATE_CHAT_CURRENT_CHAT
_VERSION
)
private
readonly
uniplatVersion
!
:
ChatStore
.
STATE_CHAT_CURRENT_CHAT
_VERSION
;
@
chatStore
.
Action
(
ChatStore
.
ACTION_SAVE_CURRENT_CHAT_ID
_VERSION
)
private
readonly
saveChatId
!
:
ChatStore
.
ACTION_SAVE_CURRENT_CHAT_ID
_VERSION
;
@
chatStore
.
State
(
ChatStore
.
STATE_MY_CHAT_ROOM_LIST
)
private
readonly
chatList
!
:
ChatStore
.
STATE_MY_CHAT_ROOM_LIST
;
@
chatStore
.
Mutation
(
ChatStore
.
MUTATION_SAVE_MYSELF_ID
)
private
readonly
saveMyId
!
:
ChatStore
.
MUTATION_SAVE_MYSELF_ID
;
@
chatStore
.
Action
(
ChatStore
.
ACTION_SAVE_CURRENT_CHAT_ID_VERSION
)
private
readonly
saveChatId
!
:
ChatStore
.
ACTION_SAVE_CURRENT_CHAT_ID_VERSION
;
@
chatStore
.
Mutation
(
ChatStore
.
MUTATION_SET_CHAT_SOURCE
)
private
readonly
setSource
!
:
ChatStore
.
MUTATION_SET_CHAT_SOURCE
;
@
chatStore
.
Mutation
(
ChatStore
.
MUTATION_SAVE_MYSELF_ID
)
private
readonly
saveMyId
!
:
ChatStore
.
MUTATION_SAVE_MYSELF_ID
;
@
chatStore
.
Mutation
(
ChatStore
.
MUTATION_SAVE_CHAT_TITLE
)
private
readonly
saveChatTitle
!
:
ChatStore
.
MUTATION_SAVE_CHAT_TITLE
;
@
chatStore
.
Mutation
(
ChatStore
.
MUTATION_SET_CHAT_SOURCE
)
private
readonly
setSource
!
:
ChatStore
.
MUTATION_SET_CHAT_SOURCE
;
@
chatStore
.
Mutation
(
ChatStore
.
MUTATION_SHOW_CHAT
)
private
readonly
showChat
:
ChatStore
.
MUTATION_SHOW_CHAT
;
@
chatStore
.
Mutation
(
ChatStore
.
MUTATION_SAVE_CHAT_TITLE
)
private
readonly
saveChatTitle
!
:
ChatStore
.
MUTATION_SAVE_CHAT_TITLE
;
@
Prop
({
type
:
String
,
default
:
"-1"
}
)
private
selected
!
:
string
;
@
chatStore
.
Mutation
(
ChatStore
.
MUTATION_SHOW_CHAT
)
private
readonly
showChat
:
ChatStore
.
MUTATION_SHOW_CHAT
private
searchKeyword
=
""
;
@
Prop
({
type
:
String
,
default
:
"-1"
})
private
selected
!
:
string
;
private
get
chatRooms
()
{
return
this
.
chatList
?.
list
||
[];
}
private
isSelected
(
item
:
Chat
)
{
if
(
this
.
chatId
)
{
return
item
.
chat_id
===
this
.
chatId
;
}
return
this
.
selected
===
item
.
uniplatId
;
}
private
searchKeyword
=
""
;
async
created
()
{
await
this
.
getMyChatList
();
this
.
setSource
(
ChatStore
.
StateChatSourceDirection
.
Server
);
this
.
selectFirstChat
();
}
private
get
chatRooms
()
{
return
this
.
chatList
?.
list
||
[];
}
mounted
()
{
this
.
saveMyId
();
this
.
goToOnlyRoom
();
}
private
isSelected
(
item
:
Chat
)
{
if
(
this
.
currentChatUniplatId
)
{
return
item
.
uniplatId
===
this
.
currentChatUniplatId
;
private
goToOnlyRoom
()
{
if
(
this
.
chatRooms
.
length
===
1
)
{
const
wantedChat
=
this
.
chatRooms
[
0
];
this
.
goToChatRoom
(
wantedChat
);
}
}
return
this
.
selected
===
item
.
uniplatId
;
}
async
created
()
{
await
this
.
getMyChatList
();
this
.
setSource
(
ChatStore
.
StateChatSourceDirection
.
Server
);
this
.
selectFirstChat
();
}
mounted
()
{
this
.
saveMyId
();
this
.
goToOnlyRoom
();
}
private
goToOnlyRoom
()
{
if
(
this
.
chatRooms
.
length
===
1
)
{
const
wantedChat
=
this
.
chatRooms
[
0
];
this
.
goToChatRoom
(
wantedChat
);
private
selectFirstChat
()
{
if
(
this
.
chatId
!=
null
)
return
;
if
(
!
this
.
chatRooms
.
length
)
return
;
const
{
chat_id
,
uniplat_version
,
uniplatId
}
=
this
.
chatRooms
[
0
];
this
.
saveChatId
({
chatId
:
chat_id
,
v
:
uniplat_version
,
uniplatId
,
});
}
}
private
selectFirstChat
()
{
if
(
this
.
chatId
!=
null
)
return
;
if
(
!
this
.
chatRooms
.
length
)
return
;
const
{
chat_id
,
uniplat_version
,
uniplatId
}
=
this
.
chatRooms
[
0
];
this
.
saveChatId
({
chatId
:
chat_id
,
v
:
uniplat_version
,
uniplatId
,
});
}
@
buttonThrottle
()
private
async
search
()
{
this
.
searchKeyword
=
this
.
searchKeyword
.
trim
();
if
(
!
this
.
searchKeyword
)
{
await
this
.
getMyChatList
();
}
else
{
await
this
.
getMyChatList
(
this
.
searchKeyword
);
private
async
search
()
{
this
.
searchKeyword
=
this
.
searchKeyword
.
trim
();
if
(
!
this
.
searchKeyword
)
{
await
this
.
getMyChatList
();
}
else
{
await
this
.
getMyChatList
(
this
.
searchKeyword
);
}
}
private
goToChatRoom
(
data
:
Chat
)
{
if
(
this
.
chatId
===
data
.
chat_id
)
{
this
.
showChat
();
return
;
}
const
wantedChatRoom
=
this
.
chatRooms
.
find
(
(
k
)
=>
k
.
chat_id
===
data
.
chat_id
);
if
(
wantedChatRoom
==
null
)
return
;
console
.
log
(
"fuck"
,
wantedChatRoom
);
this
.
saveChatId
({
chatId
:
wantedChatRoom
.
chat_id
,
v
:
data
.
uniplat_version
,
uniplatId
:
data
.
uniplatId
,
}).
finally
(
this
.
raiseChatIdChanged
);
this
.
showChat
();
this
.
$emit
(
"close"
);
this
.
saveChatTitle
(
data
.
uniplatId
);
}
private
raiseChatIdChanged
()
{
this
.
$emit
(
"change"
);
}
}
private
goToChatRoom
(
data
:
Chat
)
{
if
(
this
.
currentChatUniplatId
===
data
.
uniplatId
)
{
this
.
showChat
();
return
;
private
parseMesage
(
data
:
Chat
)
{
return
parserMessage
(
data
.
msg_type
,
data
.
msg
);
}
private
formatTimestamp
(
v
:
number
)
{
return
formatTime
(
v
,
{
short
:
true
,
rule
:
TimeFormatRule
.
Hour12
});
}
const
wantedChatRoom
=
this
.
chatRooms
.
find
(
(
k
)
=>
k
.
uniplatId
===
data
.
uniplatId
);
if
(
wantedChatRoom
==
null
)
return
;
this
.
saveChatId
({
chatId
:
wantedChatRoom
.
chat_id
,
v
:
data
.
uniplat_version
,
uniplatId
:
data
.
uniplatId
,
}).
finally
(
this
.
raiseChatIdChanged
);
this
.
showChat
();
this
.
$emit
(
"close"
);
this
.
saveChatTitle
(
data
.
uniplatId
);
}
private
raiseChatIdChanged
()
{
this
.
$emit
(
"change"
);
}
private
parseMesage
(
data
:
Chat
)
{
return
parserMessage
(
data
.
msg_type
,
data
.
msg
);
}
private
formatTimestamp
(
v
:
number
)
{
return
formatTime
(
v
,
{
short
:
true
,
rule
:
TimeFormatRule
.
Hour12
});
}
}
</
script
>
<
style
lang=
"less"
scoped
>
.chat-list-con
{
.title
{
padding-left
:
20px
;
line-height
:
59px
;
font-size
:
18px
;
border-bottom
:
1px
solid
#e1e1e1
;
}
.title
{
padding-left
:
20px
;
line-height
:
59px
;
font-size
:
18px
;
border-bottom
:
1px
solid
#e1e1e1
;
}
}
.chat-list
{
text-align
:
center
;
text-align
:
center
;
}
.chat-list-scroll
{
height
:
calc
(
100%
-
50px
);
height
:
calc
(
100%
-
50px
);
.empty
{
margin-top
:
100%
;
}
.empty
{
margin-top
:
100%
;
}
}
.keyword-input
{
width
:
200px
;
margin
:
15px
0
;
/deep/
.el-input__inner
{
font-size
:
13px
;
height
:
30px
;
line-height
:
30px
;
border-radius
:
15px
;
padding-right
:
15px
;
}
/
deep
/
.el-icon-time
{
background
:
transparent
;
}
}
.chat-list
{
.chat-item
{
cursor
:
pointer
;
padding
:
10px
15px
;
&:hover
{
background
:
#e4f0ff
;
}
&
.selected
{
background
:
#f0f0f0
;
}
.chat-avatar
{
display
:
inline-block
;
vertical-align
:
middle
;
width
:
36px
;
height
:
36px
;
margin-right
:
15px
;
&.
red-dot
::
before
{
content
:
""
;
position
:
absolute
;
width
:
8px
;
height
:
8px
;
background
:
#e87005
;
border-radius
:
50%
;
z-index
:
1
;
right
:
-4px
;
top
:
-4px
;
}
}
.chat-info
{
display
:
inline-block
;
vertical-align
:
middle
;
width
:
calc
(
100%
-
51px
);
}
.chat-info-left
{
text-align
:
start
;
font-size
:
14px
;
line-height
:
20px
;
color
:
#333333
;
margin-bottom
:
10px
;
.chat-time
{
text-align
:
end
;
flex
:
none
;
color
:
#999999
;
margin-left
:
10px
;
width
:
200px
;
margin
:
15px
0
;
/deep/
.el-input__inner
{
font-size
:
13px
;
line-height
:
1
;
}
height
:
30px
;
line-height
:
30px
;
border-radius
:
15px
;
padding-right
:
15px
;
}
.chat-msg
{
color
:
#888
;
text-align
:
start
;
font-size
:
13px
;
margin-top
:
-3px
;
/
deep
/
.el-icon-time
{
background
:
transparent
;
}
}
.chat-list
{
.chat-item
{
cursor
:
pointer
;
padding
:
10px
15px
;
&:hover
{
background
:
#e4f0ff
;
}
&
.selected
{
background
:
#f0f0f0
;
}
.chat-avatar
{
display
:
inline-block
;
vertical-align
:
middle
;
width
:
36px
;
height
:
36px
;
margin-right
:
15px
;
&.
red-dot
::
before
{
content
:
""
;
position
:
absolute
;
width
:
8px
;
height
:
8px
;
background
:
#e87005
;
border-radius
:
50%
;
z-index
:
1
;
right
:
-4px
;
top
:
-4px
;
}
}
.chat-info
{
display
:
inline-block
;
vertical-align
:
middle
;
width
:
calc
(
100%
-
51px
);
}
.chat-info-left
{
text-align
:
start
;
font-size
:
14px
;
line-height
:
20px
;
color
:
#333333
;
margin-bottom
:
10px
;
.chat-time
{
text-align
:
end
;
flex
:
none
;
color
:
#999999
;
margin-left
:
10px
;
font-size
:
13px
;
line-height
:
1
;
}
}
.chat-msg
{
color
:
#888
;
text-align
:
start
;
font-size
:
13px
;
margin-top
:
-3px
;
}
}
}
}
</
style
>
chat-room.vue
View file @
585e1c18
<
template
>
<div
class=
"chat-room-con h-100 pos-rel"
>
<div
class=
"chat-panel"
>
<div
class=
"chat-area h-100"
>
<template
v-if=
"notOnlyCheck"
>
<div
class=
"chat-messages pos-rel"
>
<div
v-if=
"getCurrentInputingPeople.length"
class=
"someone-inputing"
>
{{
getCurrentInputingPeople
}}
正在输入
<div
class=
"chat-room-con h-100 pos-rel"
>
{{
chatId
}}
-
{{
uniplatId
}}
<div
class=
"chat-panel"
>
<div
class=
"chat-area h-100"
>
<template
v-if=
"notOnlyCheck"
>
<div
class=
"chat-messages pos-rel"
>
<div
v-if=
"getCurrentInputingPeople.length"
class=
"someone-inputing"
>
{{
getCurrentInputingPeople
}}
正在输入
</div>
<messages
/>
</div>
<div
class=
"chat-input"
>
<message-input
@
error=
"onError"
/>
</div>
</
template
>
<
template
v-else
>
<messages
/>
</
template
>
</div>
<messages
/>
</div>
<div
class=
"chat-input"
>
<message-input
@
error=
"onError"
/>
</div>
</
template
>
<
template
v-else
>
<messages
/>
</
template
>
</div>
</div>
</div>
</div>
</template>
<
script
lang=
"ts"
>
import
{
Component
,
Prop
,
Provide
,
Vue
,
Watch
,
}
from
"vue-property-decorator"
;
import
{
Component
,
Prop
,
Provide
,
Vue
,
Watch
}
from
"vue-property-decorator"
;
import
MessageInput
from
"@/customer-service/message-input.vue"
;
import
messages
from
"@/customer-service/message-list.vue"
;
...
...
@@ -39,152 +34,157 @@ import { ChatStore, chatStore } from "@/customer-service/store/model";
type
RoomInfoTab
=
"customer"
|
"order"
;
@
Component
({
components
:
{
MessageInput
,
messages
,
},
components
:
{
MessageInput
,
messages
,
},
})
export
default
class
ChatRoom
extends
Vue
{
@
chatStore
.
Getter
(
ChatStore
.
GETTER_CURRENT_CHAT_PRESENT_MEMBERS
)
private
readonly
chatMembers
!
:
ChatStore
.
GETTER_CURRENT_CHAT_PRESENT_MEMBERS
;
@
chatStore
.
State
(
ChatStore
.
STATE_CHAT_CURRENT_CHAT_ID
)
private
readonly
chatId
!
:
ChatStore
.
STATE_CHAT_CURRENT_CHAT_ID
;
@
chatStore
.
Mutation
(
ChatStore
.
MUTATION_CLEAR_CURRENT_CHAT_MEMBERS
)
private
readonly
clearChatMembers
!
:
ChatStore
.
MUTATION_CLEAR_CURRENT_CHAT_MEMBERS
;
@
chatStore
.
State
(
ChatStore
.
STATE_CHAT_CURRENT_CHAT_VERSION
)
private
readonly
uniplatId
!
:
ChatStore
.
STATE_CHAT_CURRENT_CHAT_VERSION
;
@
chatStore
.
State
(
ChatStore
.
STATE_CURRENT_CHAT_TITLE
)
private
readonly
chatTitle
!
:
ChatStore
.
STATE_CURRENT_CHAT_TITLE
;
@
chatStore
.
Getter
(
ChatStore
.
GETTER_CURRENT_CHAT_PRESENT_MEMBERS
)
private
readonly
chatMembers
!
:
ChatStore
.
GETTER_CURRENT_CHAT_PRESENT_MEMBERS
;
@
chatStore
.
State
(
ChatStore
.
STATE_CURRENT_CHAT_INPUTING
)
private
readonly
currentInputPeople
!
:
ChatStore
.
STATE_CURRENT_CHAT_INPUTING
;
@
chatStore
.
Mutation
(
ChatStore
.
MUTATION_CLEAR_CURRENT_CHAT_MEMBERS
)
private
readonly
clearChatMembers
!
:
ChatStore
.
MUTATION_CLEAR_CURRENT_CHAT_MEMBERS
;
@
chatStore
.
State
(
ChatStore
.
STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID
)
private
readonly
currentChatUniplatId
!
:
ChatStore
.
STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID
;
@
chatStore
.
State
(
ChatStore
.
STATE_CURRENT_CHAT_TITLE
)
private
readonly
chatTitle
!
:
ChatStore
.
STATE_CURRENT_CHAT_TITLE
;
@
chatStore
.
State
(
ChatStore
.
STATE_MY_CHAT_ROOM_LIST
)
private
readonly
myChatList
!
:
ChatStore
.
STATE_MY_CHAT_ROOM_LIST
;
@
chatStore
.
State
(
ChatStore
.
STATE_CURRENT_CHAT_INPUTING
)
private
readonly
currentInputPeople
!
:
ChatStore
.
STATE_CURRENT_CHAT_INPUTING
;
private
allChatList
=
{
list
:
[]
};
@
chatStore
.
State
(
ChatStore
.
STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID
)
private
readonly
currentChatUniplatId
!
:
ChatStore
.
STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID
;
@
Prop
({
type
:
Function
}
)
private
close
?:
()
=>
void
;
@
chatStore
.
State
(
ChatStore
.
STATE_MY_CHAT_ROOM_LIST
)
private
readonly
myChatList
!
:
ChatStore
.
STATE_MY_CHAT_ROOM_LIST
;
@
Provide
()
showReadSummary
=
true
;
private
allChatList
=
{
list
:
[]
}
;
@
Watch
(
"currentChatUniplatId"
)
private
whenCurrentChatIdChanged
(
newValue
:
string
,
oldValue
:
string
)
{
if
(
Number
(
oldValue
)
===
Number
(
newValue
))
return
;
this
.
clearChatMembers
();
}
@
Prop
({
type
:
Function
})
private
close
?:
()
=>
void
;
private
activeTab
:
RoomInfoTab
=
"customer"
;
@
Provide
()
showReadSummary
=
true
;
private
get
getCurrentInputingPeople
()
{
return
this
.
currentInputPeople
.
map
(()
=>
""
/* this.userInfo[k].name */
)
.
join
(
"、"
);
}
@
Watch
(
"currentChatUniplatId"
)
private
whenCurrentChatIdChanged
(
newValue
:
string
,
oldValue
:
string
)
{
if
(
Number
(
oldValue
)
===
Number
(
newValue
))
return
;
this
.
clearChatMembers
();
}
private
activeTab
:
RoomInfoTab
=
"customer"
;
private
get
getCurrentInputingPeople
()
{
return
this
.
currentInputPeople
.
map
(()
=>
""
/* this.userInfo[k].name */
)
.
join
(
"、"
);
}
private
get
currentChat
()
{
const
chatId
=
this
.
currentChatUniplatId
;
if
(
this
.
myChatList
==
null
)
return
;
const
result
=
this
.
myChatList
.
list
.
find
((
k
)
=>
k
.
uniplatId
===
chatId
);
// if (result) return result;
// result = this.allChatList.list.find((k) => k.uniplatId === chatId);
return
result
??
{};
}
private
get
currentChat
()
{
const
chatId
=
this
.
currentChatUniplatId
;
if
(
this
.
myChatList
==
null
)
return
;
const
result
=
this
.
myChatList
.
list
.
find
((
k
)
=>
k
.
uniplatId
===
chatId
);
// if (result) return result;
// result = this.allChatList.list.find((k) => k.uniplatId === chatId);
return
result
??
{};
}
private
get
notOnlyCheck
():
boolean
{
return
true
;
}
private
get
notOnlyCheck
():
boolean
{
return
true
;
}
private
get
customerInfoTabShow
()
{
return
this
.
activeTab
===
"customer"
;
}
private
get
customerInfoTabShow
()
{
return
this
.
activeTab
===
"customer"
;
}
private
get
orderInfoTabShow
()
{
return
this
.
activeTab
===
"order"
;
}
private
get
orderInfoTabShow
()
{
return
this
.
activeTab
===
"order"
;
}
private
onError
(
msg
:
string
)
{
// eslint-disable-next-line no-console
console
.
error
(
msg
);
this
.
$message
.
error
(
msg
);
}
private
onError
(
msg
:
string
)
{
// eslint-disable-next-line no-console
console
.
error
(
msg
);
this
.
$message
.
error
(
msg
);
}
}
</
script
>
<
style
lang=
"less"
scoped
>
.chat-status
{
display
:
inline-block
;
width
:
46px
;
height
:
20px
;
line-height
:
20px
;
background
:
#22bd7a
;
font-size
:
13px
;
border-radius
:
2px
;
color
:
#ffffff
;
text-align
:
center
;
margin-left
:
10px
;
&.chat-done
{
background
:
#c5d4e5
;
}
display
:
inline-block
;
width
:
46px
;
height
:
20px
;
line-height
:
20px
;
background
:
#22bd7a
;
font-size
:
13px
;
border-radius
:
2px
;
color
:
#ffffff
;
text-align
:
center
;
margin-left
:
10px
;
&.chat-done
{
background
:
#c5d4e5
;
}
}
.chat-panel
{
height
:
100%
;
.chat-area,
.chat-info
{
display
:
inline-block
;
vertical-align
:
top
;
}
.chat-area
{
width
:
100%
;
}
.chat-info
{
width
:
349px
;
border-left
:
1px
solid
#e1e1e1
;
}
height
:
100%
;
.chat-area,
.chat-info
{
display
:
inline-block
;
vertical-align
:
top
;
}
.chat-area
{
width
:
100%
;
}
.chat-info
{
width
:
349px
;
border-left
:
1px
solid
#e1e1e1
;
}
}
.info-tabs
{
height
:
40px
;
line-height
:
40px
;
border-bottom
:
1px
solid
#f0f0f0
;
.info-tab
{
display
:
inline-block
;
vertical-align
:
top
;
width
:
50%
;
text-align
:
center
;
font-size
:
15px
;
color
:
#333
;
cursor
:
pointer
;
&.active
{
font-weight
:
600
;
height
:
40px
;
line-height
:
40px
;
border-bottom
:
1px
solid
#f0f0f0
;
.info-tab
{
display
:
inline-block
;
vertical-align
:
top
;
width
:
50%
;
text-align
:
center
;
font-size
:
15px
;
color
:
#333
;
cursor
:
pointer
;
&.active
{
font-weight
:
600
;
}
}
}
}
.chat-area
{
--input-height
:
130px
;
--input-height
:
130px
;
.chat-messages
{
height
:
calc
(
100%
-
130px
+
1px
);
border-bottom
:
1px
solid
#e1e1e1
;
}
.chat-messages
{
height
:
calc
(
100%
-
130px
+
1px
);
border-bottom
:
1px
solid
#e1e1e1
;
}
.chat-input
{
height
:
var
(
--input-height
);
}
.chat-input
{
height
:
var
(
--input-height
);
}
}
.order-info-con
{
height
:
calc
(
100%
-
40px
);
height
:
calc
(
100%
-
40px
);
}
.someone-inputing
{
position
:
absolute
;
left
:
20px
;
bottom
:
20px
;
z-index
:
1
;
color
:
#c2c2c2
;
position
:
absolute
;
left
:
20px
;
bottom
:
20px
;
z-index
:
1
;
color
:
#c2c2c2
;
}
</
style
>
store/index.ts
View file @
585e1c18
...
...
@@ -285,28 +285,15 @@ export default {
commit
,
})
/* ...params: Parameters<ChatStore.ACTION_GET_MY_CHAT_LIST> */
{
const
data
=
await
xim
.
fetchChatList
();
console
.
log
(
"debugg"
,
data
);
const
{
pageData
}
=
await
model
().
list
().
query
({
pageIndex
:
1
,
item_size
:
50
,
});
const
result
=
pageData
.
rows
.
map
((
row
)
=>
{
const
chatList
=
data
.
args
[
0
];
commit
(
ChatStore
.
MUTATION_SAVE_CHAT_LIST
,
{
list
:
chatList
.
map
(
chat
=>
{
return
{
uniplatId
:
row
.
id
.
value
,
chat_id
:
Number
(
row
.
ImChatId
.
value
),
msg
:
row
.
LastMsgContent
.
value
,
customer_name
:
row
.
id
.
value
,
customer_avatar_url
:
""
,
uniplat_version
:
Number
(
row
.
uniplat_version
.
value
),
msg_type
:
row
.
LastMsgType
.
value
,
is_finish
:
row
.
Status
.
value
,
...
chat
,
chat_id
:
chat
.
id
,
};
})
.
filter
((
k
)
=>
!
k
.
is_finish
);
commit
(
ChatStore
.
MUTATION_SAVE_CHAT_LIST
,
{
list
:
result
,
total
:
pageData
.
record_count
,
}),
total
:
9999
,
});
},
// async [ChatStore.ACTION_JOIN_CHAT](
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment