Skip to content

C
chart-web
Commit 5c6a9127 authored by looker's avatar looker
Browse files
Options

more page

parent 82649518
Show whitespace changes
Inline Side-by-side
Showing with 147 additions and 186 deletions
src/components/chatlist/chatlist.vue
View file @ 5c6a9127
<!-- 聊天列表 --> <!-- 聊天列表 -->
<template> <template>
<div class="msglist"> <div class="msglist">
<ul v-if="user.whichPane==panelStatus.CHART"> <ul>
<li v-for="item in chatlist" class="sessionlist" :class="{ active: item.id === user.selectId }" @click="selectSession(item)"> <li v-for="item in chartings" class="sessionlist" :class="{ active: item.id === user.selectId }" @click="selectSession(item)">
<div class="list-left"> <div class="list-left">
<img class="avatar" width="42" height="42" :alt="item.user.name" :src="item.user.img"> <img class="avatar" width="42" height="42" :alt="item.user.name" :src="item.user.img||'static/images/weixin.jpg'">
</div> </div>
<div class="list-right"> <div class="list-right">
<p class="name">{{item.user.name}}</p> <p class="name">{{item.user.name | name}}</p>
<span class="time">{{item.queryData | time}}</span> <span class="time">{{item.queryData | time}}</span>
<p class="lastmsg">{{item.messages[item.messages.length-1]?'':item.messages[item.messages.length-1].content}}</p> <p class="lastmsg">{{item.messages[0]?item.messages[0].content:''}}</p>
</div>
</li>
</ul>
<ul v-if="user.whichPane==panelStatus.SEARCH">
<li v-for="item in searchChatlist" class="sessionlist" :class="{ active: item.id === user.selectId }" @click="selectSession(item)">
<div class="list-left">
<img class="avatar" width="42" height="42" :alt="item.user.name" :src="item.user.img">
</div>
<div class="list-right">
<p class="name">{{item.user.name}}</p>
<span class="time">{{item.queryData | time}}</span>
<p class="lastmsg">{{item.messages[item.messages.length-1]?'':item.messages[item.messages.length-1].content}}</p>
</div> </div>
</li> </li>
</ul> </ul>
...@@ -40,8 +28,7 @@ export default { ...@@ -40,8 +28,7 @@ export default {
'user', 'user',
]), ]),
...mapGetters([ ...mapGetters([
'searchChatlist', 'chartings',
'chatlist'
]) ])
}, },
methods: { methods: {
...@@ -50,8 +37,8 @@ export default { ...@@ -50,8 +37,8 @@ export default {
]) ])
}, },
mounted() { mounted() {
let obj = this.searchedChatlist[0] let obj = this.chartings[0]
this.selectSession(obj) obj&&this.selectSession(obj)
}, },
filters: { filters: {
time (date) { time (date) {
...@@ -65,6 +52,9 @@ export default { ...@@ -65,6 +52,9 @@ export default {
}else{ }else{
return "" return ""
} }
},
name(name){
return name.length>8?name.substring(0,8)+'...':name;
} }
}, },
} }
......
src/components/message/message.vue
View file @ 5c6a9127
<template> <template>
<div> <div>
<div class="message" v-if="user.whichPane==panelStatus.CHART"> <div class="message">
<header class="header"> <header class="header">
<div class="friendname">{{selectedChat&&selectedChat.user.name}}</div> <div class="friendname">{{selectedChat&&selectedChat.user.name}}</div>
</header> </header>
...@@ -9,14 +9,14 @@ ...@@ -9,14 +9,14 @@
<ul v-if="selectedChat"> <ul v-if="selectedChat">
<li v-for="item in messages" class="message-item"> <li v-for="item in messages" class="message-item">
<div v-if="item.type==1" class="main" :class="{ self: item.isSend }"> <div v-if="item.type==1" class="main" :class="{ self: item.isSend }">
<img class="avatar" width="36" height="36" :src="item.isSend ? user.img : selectedChat.user.img" /> <img class="avatar" width="36" height="36" :src="item.isSend ? user.img : selectedChat.user.img||'static/images/weixin.jpg'" />
<div class="time"><span>{{item.createTime | time}}</span></div> <div class="time"><span>{{item.createTime | time}}</span></div>
<div class="content"> <div class="content">
<div class="text" v-html="replaceFace(item.content)"></div> <div class="text" v-html="replaceFace(item.content)"></div>
</div> </div>
</div> </div>
<div v-if="item.type==3" class="main" :class="{ self: item.isSend }"> <div v-if="item.type==3" class="main" :class="{ self: item.isSend }">
<img class="avatar" width="36" height="36" :src="item.isSend ? user.img : selectedChat.user.img" /> <img class="avatar" width="36" height="36" :src="item.isSend ? user.img : selectedChat.user.img||'static/images/weixin.jpg'" />
<div class="time"><span>{{item.createTime | time}}</span></div> <div class="time"><span>{{item.createTime | time}}</span></div>
<div class="content"> <div class="content">
<div class="img"><img style="width:300px; <div class="img"><img style="width:300px;
...@@ -27,40 +27,13 @@ ...@@ -27,40 +27,13 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="message" v-if="user.whichPane==panelStatus.SEARCH">
<header class="header">
<div class="friendname">{{selectedSearchChat&&selectedSearchChat.user.name}}</div>
</header>
<div class="message-wrapper" ref="list">
<ul v-if="selectedSearchChat">
<li v-for="item in messages" class="message-item">
<div v-if="item.type==1" class="main" :class="{ self: item.isSend }">
<img class="avatar" width="36" height="36" :src="item.isSend ? user.img : selectedSearchChat.user.img" />
<div class="time"><span>{{item.createTime | time}}</span></div>
<div class="content">
<div class="text" v-html="replaceFace(item.content)"></div>
</div>
</div>
<div v-if="item.type==3" class="main" :class="{ self: item.isSend }">
<img class="avatar" width="36" height="36" :src="item.isSend ? user.img : selectedSearchChat.user.img" />
<div class="time"><span>{{item.createTime | time}}</span></div>
<div class="content">
<div class="img"><img style="width:300px;
height:300px;" :src="imgUrl+item.imageUrl" alt=""></div>
</div> </div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template> </template>
<script> <script>
import moment from 'moment' import moment from 'moment'
import { panelStatus } from '@/utils/common' import { panelStatus } from '@/utils/common'
import { mapGetters, mapState } from 'vuex' import { mapGetters, mapState, mapActions } from 'vuex'
export default { export default {
data(){ data(){
return { return {
...@@ -68,12 +41,14 @@ export default { ...@@ -68,12 +41,14 @@ export default {
} }
}, },
computed: { computed: {
selectId(){
return this.$store.state.user.selectId
},
panelStatus(){ panelStatus(){
return panelStatus return panelStatus
}, },
...mapGetters([ ...mapGetters([
'selectedChat', 'selectedChat',
'selectedSearchChat',
'messages' 'messages'
]), ]),
...mapState([ ...mapState([
...@@ -81,16 +56,36 @@ export default { ...@@ -81,16 +56,36 @@ export default {
]) ])
}, },
mounted() { mounted() {
let temp = this
this.$refs.list.onscroll = function () {
console.log(this.scrollTop)
if(this.scrollTop ==0){
temp.moreMessage()
}
}
// console.log(this.$refs) // console.log(this.$refs)
// setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0) // setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
}, },
watch: { watch: {
messages() { selectId() {
console.log(44444444) console.log(44444444)
setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0) setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
},
messages(val, old){
console.log(val,old)
console.log(66666666666666666666666)
if(old.length+1==val.length){
setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
}
if((val.length-old.length)>5){
setTimeout(() => this.$refs.list.scrollTop = ~~this.$refs.list.scrollHeight-2000, 0)
}
} }
}, },
methods: { methods: {
...mapActions([
'moreMessage',
]),
// 在发送信息之后，将输入的内容中属于表情的部分替换成emoji图片标签 // 在发送信息之后，将输入的内容中属于表情的部分替换成emoji图片标签
// 再经过v-html 渲染成真正的图片 // 再经过v-html 渲染成真正的图片
replaceFace (con) { replaceFace (con) {
......
src/components/search/search.vue
View file @ 5c6a9127
...@@ -3,13 +3,14 @@ ...@@ -3,13 +3,14 @@
<div class="wrapper"> <div class="wrapper">
<div class="search-wrapper"> <div class="search-wrapper">
<input type="text" class="searchInput" v-model="search" @keyup="change" placeholder="搜索"> <input type="text" class="searchInput" v-model="search" @keyup="change" placeholder="搜索">
<i class="icon iconfont icon-search" v-show="noText"></i> <!-- <i class="icon iconfont icon-search" v-show="noText"></i> -->
<div class="searchInput-delete" v-show="haveText" @click="del"></div> <div class="searchInput-delete" v-show="haveText" @click="del"></div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { panelStatus } from '@/utils/common'
export default { export default {
methods: { methods: {
change () { change () {
...@@ -34,6 +35,9 @@ export default { ...@@ -34,6 +35,9 @@ export default {
} }
}, },
computed: { computed: {
selectId(){
return this.$store.state.user.selectId
},
noText () { noText () {
if(this.search === '') return true if(this.search === '') return true
return false return false
...@@ -42,6 +46,14 @@ export default { ...@@ -42,6 +46,14 @@ export default {
if(this.search === '') return false if(this.search === '') return false
return true return true
} }
},
watch:{
selectId(val){
console.log(33333333333333);
if(val!=panelStatus.SEARCH){
this.search =''
}
}
} }
} }
</script> </script>
......
src/components/text/text.vue
View file @ 5c6a9127
...@@ -164,7 +164,7 @@ export default { ...@@ -164,7 +164,7 @@ export default {
}, },
// 点击发送按钮发送信息 // 点击发送按钮发送信息
send () { send () {
if(this.content.length <= 1){ if(this.content.length < 1){
this.warn = true this.warn = true
this.content = '' this.content = ''
setTimeout(() => { setTimeout(() => {
......
src/store/getters.js
View file @ 5c6a9127
...@@ -6,24 +6,22 @@ const getters = { ...@@ -6,24 +6,22 @@ const getters = {
searchChatlist (state) { searchChatlist (state) {
return state.user.searchChatlist return state.user.searchChatlist
}, },
// searchedFriendlist (state) { chartings(state){
// let friends = state.user.friendlist.filter(friends => friends.remark.includes(state.user.searchText)); return state.user.chartings
// return friends },
// },
selectedChat (state) { selectedChat (state) {
let temp = state.user.chatlist.find(session => session.id === state.user.selectId); let temp = state.user.chartings.find(session => session.id === state.user.selectId);
return temp return temp
}, },
selectId(state){
return state.user.selectId
},
selectedSearchChat(state){ selectedSearchChat(state){
let temp = state.user.searchChatlist.find(session => session.id === state.user.selectId); let temp = state.user.searchChatlist.find(session => session.id === state.user.selectId);
return temp return temp
}, },
selectedFriend (state) {
let friend = state.user.friendlist.find(friend => friend.id === state.user.selectFriendId);
return friend
},
messages (state) { messages (state) {
let session = state.user.chatlist.find(session => session.id === state.user.selectId); let session = state.user.chartings.find(session => session.id === state.user.selectId);
return session&&session.messages return session&&session.messages
} }
} }
......
src/store/modules/user.js
View file @ 5c6a9127
...@@ -15,24 +15,11 @@ const user = { ...@@ -15,24 +15,11 @@ const user = {
whichPane:panelStatus.CHART, whichPane:panelStatus.CHART,
messagesPage:1, messagesPage:1,
messagesPer:30, messagesPer:30,
messagesObject:{},
chatlist: [], chatlist: [],
chartings:[],
searchChatlist:[], searchChatlist:[],
tempSearchChatlist:[], tempSearchChatlist:[],
tempChatlist:[], tempChatlist:[],
friendlist: [
// {
// id: 0,
// wxid: "", //微信号
// initial: '新的朋友', //姓名首字母
// img: 'static/images/newfriend.jpg', //头像
// signature: "", //个性签名
// nickname: "新的朋友", //昵称
// sex: 0, //性别 1为男，0为女
// remark: "新的朋友", //备注
// area: "", //地区
// }
],
emojis, emojis,
selectId: 1, selectId: 1,
selectFriendId: 0 selectFriendId: 0
...@@ -45,10 +32,10 @@ const user = { ...@@ -45,10 +32,10 @@ const user = {
}, },
CHANGE_CONVERSATIONPANEL(state, value){ CHANGE_CONVERSATIONPANEL(state, value){
if(panelStatus.CHART==value){ if(panelStatus.CHART==value){
state.chartings = state.chatlist
state.whichPane = panelStatus.CHART state.whichPane = panelStatus.CHART
state.searchChatlist = []
state.tempSearchChatlist = []
}else{ }else{
state.chartings = []
state.whichPane = panelStatus.SEARCH state.whichPane = panelStatus.SEARCH
state.whichPane = value state.whichPane = value
} }
...@@ -57,7 +44,6 @@ const user = { ...@@ -57,7 +44,6 @@ const user = {
state.wsObject = value state.wsObject = value
}, },
SELECT_SEESION (state, value) { SELECT_SEESION (state, value) {
state.messagesObject = value
state.selectId = value.id state.selectId = value.id
}, },
SET_SEARCHCHART_LIST(state, value){ SET_SEARCHCHART_LIST(state, value){
...@@ -65,8 +51,8 @@ const user = { ...@@ -65,8 +51,8 @@ const user = {
let tempList = [] let tempList = []
for(let i in value){ for(let i in value){
let temp = [{ let temp = [{
content: value[i].lastMessage&&value[i].lastMessage.content, content: value[i].content||'',
date: value[i].lastMessage&&value[i].lastMessage.createTime date: value[i].lastUpdateTime
}] }]
tempList.push({ tempList.push({
id: value[i].id, id: value[i].id,
...@@ -74,20 +60,23 @@ const user = { ...@@ -74,20 +60,23 @@ const user = {
name: value[i].userBo.nickname, name: value[i].userBo.nickname,
img: value[i].userBo.avatar img: value[i].userBo.avatar
}, },
page: 1,
rows: 30,
messages: temp, messages: temp,
queryData:value[i].lastUpdateTime, queryData:value[i].lastUpdateTime,
index: i index: i
}) })
} }
state.searchChatlist = tempList.sort(compare('queryData')) state.searchChatlist = tempList.sort(compare('queryData'))
state.chartings = tempList.sort(compare('queryData'))
}, },
SET_CHART_LIST(state, value){ SET_CHART_LIST(state, value){
state.tempChatlist = value state.tempChatlist = value
let tempList = [] let tempList = []
for(let i in value){ for(let i in value){
let temp = [{ let temp = [{
content: value[i].lastMessage&&value[i].lastMessage.content, content: value[i].content||'',
date: value[i].lastMessage&&value[i].lastMessage.createTime date: value[i].lastUpdateTime
}] }]
tempList.push({ tempList.push({
id: value[i].id, id: value[i].id,
...@@ -95,63 +84,34 @@ const user = { ...@@ -95,63 +84,34 @@ const user = {
name: value[i].userBo.nickname, name: value[i].userBo.nickname,
img: value[i].userBo.avatar img: value[i].userBo.avatar
}, },
page: 1,
rows: 30,
messages: temp, messages: temp,
queryData:value[i].lastUpdateTime, queryData:value[i].lastUpdateTime,
index: i index: i
}) })
} }
state.chatlist = tempList.sort(compare('queryData')) state.chatlist = tempList.reverse(compare('queryData'))
state.chartings =tempList.reverse(compare('queryData'))
}, },
SELECT_MESSAGE(state, value){ ADD_MESSAGE(state, value){
let { chatlist, selectId } = state let { chatlist, selectId } = state
for(let c in chatlist){ for(let c in chatlist){
if(chatlist[c].id==selectId){ if(chatlist[c].id==selectId){
chatlist[c].messages = value==null?[]:value.sort(compare('createTime')) let temp = value == null?[]:value.sort(compare('createTime'))
chatlist[c].messages = [...temp, ...chatlist[c].messages]
} }
} }
}, },
initData (state) { SEND_MESSAGE(state, value){
let data = localStorage.getItem('vue-chat'); let { chatlist, selectId } = state
if (data) { for(let c in chatlist){
state.chatlist = JSON.parse(data); if(chatlist[c].id==selectId){
let temp = value == null?[]:value.sort(compare('createTime'))
chatlist[c].messages = [...chatlist[c].messages, ...temp]
}
}
} }
},
search (state, value) {
state.searchText = value
},
selectFriend (state, value) {
state.selectFriendId = value
},
// send (state) {
// let result = state.friendlist.find(friend => friend.id === state.selectFriendId)
// let msg = state.chatlist.find(msg => msg.user.name === result.remark)
// if( !msg ){
// state.selectId = 1
// for(let i = 0; i < state.chatlist.length; i++ ){
// state.chatlist[i].id++;
// state.chatlist[i].index++;
// }
// state.chatlist.unshift({
// id: 1,
// user: {
// name: result.remark,
// img: result.img
// },
// messages: [
// {
// content: '已经置顶聊天，可以给我发信息啦！',
// date: new Date()
// }
// ],
// index: 1
// })
// }else {
// state.selectId = msg.index
// router.push({ path: '/chat'})
// }
// }
}, },
actions: { actions: {
...@@ -204,41 +164,21 @@ const user = { ...@@ -204,41 +164,21 @@ const user = {
connected({ state, commit }) { connected({ state, commit }) {
state.wsObject state.wsObject
.on('messages/message', (data, callback) => { .on('messages/message', (data, callback) => {
console.log(data) commit('SEND_MESSAGE', [data])
callback() callback()
if (data.eventType == "conversations/create" && data.message) {
// dispatch('conversation/newConversation', data, { root: true })
} else {
data.self = data.isSend == 1 || data.customerId == state.customerServiceId
// dispatch('conversation/newMessage', data, { root: true })
}
}) })
.on('conversations/index', (data, callback) => { .on('conversations/index', (data, callback) => {
console.log(data) console.log(data)
commit('SET_CHART_LIST', data) commit('SET_CHART_LIST', data)
// console.log('conversations/index')
// _.each(data, (conversation) => {
// dispatch('conversation/addConversation', {...conversation, from: 'index'}, { root: true })
// })
}) })
.on('conversations/friend', (data, callback) => { .on('conversations/friend', (data, callback) => {
console.log(data) console.log(data)
// console.log('conversations/friend')
// console.log(data)
// _.each(data, (conversation) => {
// dispatch('conversation/addFriendConversation', {...conversation, from: 'index'}, { root: true })
// })
}) })
.on('messages/index', (data, callback) => { .on('messages/index', (data, callback) => {
callback(true) callback(true)
commit('SELECT_MESSAGE', data) data&&commit('ADD_MESSAGE', data)
// console.log('messages/index') !data&&state.messagesPage--
// if (_.isEmpty(data)) return
// _.each(data, (message) => {
// message.self = message.isSend == 1 || message.customerId == state.customerServiceId
// dispatch('conversation/addMessage', message, { root: true })
// })
// dispatch('conversation/isMessagesDone', data, { root: true })
}) })
.on('conversations/show', (data, callback) => { .on('conversations/show', (data, callback) => {
const tempChatlist = state.tempChatlist const tempChatlist = state.tempChatlist
...@@ -250,48 +190,75 @@ const user = { ...@@ -250,48 +190,75 @@ const user = {
} }
} }
commit('SET_CHART_LIST', tempChatlist) commit('SET_CHART_LIST', tempChatlist)
// console.log('conversations/show')
// dispatch('conversation/addConversation', data, { root: true })
}) })
.on('conversions/search', (data, callback) => { .on('conversions/search', (data, callback) => {
console.log(data)
callback() callback()
commit('SET_SEARCHCHART_LIST', data) commit('SET_SEARCHCHART_LIST', data)
// _.each(data, (conversation) => {
// dispatch('conversation/addConversation', conversation, { root: true })
// })
}) })
// dispatch('conversation/init', {}, { root: true })
// dispatch('conversation/showConversation', { id: 3 }, { root: true })
// Common.wsClient.emit('appevent', {
// eventType: 'messages/create',
// message: {
// conversationId: 3,
// type: 3,
// content: "文本",
// imageUrl: "https://cdn-images.baozheng.cc/uploads/bag/order/front/000/248/943/medium_0789ee03.jpeg"
// },
// })
}, },
selectSession({ commit, state }, conversation) { selectSession({ dispatch, commit, state }, conversation) {
console.log(5555555555555555555555) if(state.selectId==conversation.id)return
let parm = {}
if(state.whichPane == panelStatus.SEARCH){
let temp = true
for(let i in state.chatlist){
if(state.chatlist[i].id == conversation.id){
state.chatlist.splice(i, 1);
temp = false
}
}
conversation.lastUpdateTime = Date.parse( new Date())
state.chatlist = [conversation].concat(state.chatlist)
commit('CHANGE_CONVERSATIONPANEL', panelStatus.CHART)
parm = {
conversationId:conversation.id,
page: 1,
rows: 30
}
dispatch('selectMessage', parm)
}
if(state.whichPane == panelStatus.CHART){
for(let obj of state.chatlist){
if(obj.id == conversation.id){
parm = {
conversationId:conversation.id,
page: obj.page,
rows: obj.rows
}
if(obj.messages.length<2){
obj.messages = []
dispatch('selectMessage', parm)
}
}
}
}
commit('SELECT_SEESION', conversation) commit('SELECT_SEESION', conversation)
},
selectMessage({ commit, state }, message){
state.wsObject.emit('appevent', { state.wsObject.emit('appevent', {
eventType: 'messages/index', eventType: 'messages/index',
message: { message
conversationId:conversation.id,
page: state.messagesPage,
rows: state.messagesPer
}
}) })
}, },
moreMessage({ dispatch, commit, state }, message){
let id = state.selectId
let parms = {}
for(let i in state.chatlist){
if(state.chatlist[i].id == id){
parms = {
conversationId:id,
page: ++state.chatlist[i].page,
rows: state.chatlist[i].rows
}
}
}
dispatch('selectMessage', parms)
},
changeChartPanel({ commit, state }){ changeChartPanel({ commit, state }){
commit('CHANGE_CONVERSATIONPANEL', panelStatus.CHART) commit('CHANGE_CONVERSATIONPANEL', panelStatus.CHART)
}, },
searchSession({ commit, state }, keyword) { searchSession({ commit, state }, keyword) {
console.log(44444)
commit('CHANGE_CONVERSATIONPANEL', panelStatus.SEARCH) commit('CHANGE_CONVERSATIONPANEL', panelStatus.SEARCH)
state.wsObject.emit('appevent', { state.wsObject.emit('appevent', {
eventType: 'conversions/search', eventType: 'conversions/search',
...@@ -311,15 +278,14 @@ const user = { ...@@ -311,15 +278,14 @@ const user = {
console.log(data); console.log(data);
console.log('这个socket发送成功了！'); console.log('这个socket发送成功了！');
}) })
let temp = state.messagesObject.messages let temp = {
temp.push({
conversationId:conversation.id, conversationId:conversation.id,
type: conversation.type, type: conversation.type,
isSend:1, isSend:1,
content: conversation.content, content: conversation.content,
createTime: Date.parse(new Date()) createTime: Date.parse(new Date())
}) }
commit('SELECT_MESSAGE', temp) commit('SEND_MESSAGE', [temp])
}, },
search: ({ commit }, value) => { search: ({ commit }, value) => {
setTimeout(() => { setTimeout(() => {
......
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