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>
<div class="msglist">
<ul v-if="user.whichPane==panelStatus.CHART">
<li v-for="item in chatlist" class="sessionlist" :class="{ active: item.id === user.selectId }" @click="selectSession(item)">
<ul>
<li v-for="item in chartings" 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">
<img class="avatar" width="42" height="42" :alt="item.user.name" :src="item.user.img||'static/images/weixin.jpg'">
</div>
<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>
<p class="lastmsg">{{item.messages[item.messages.length-1]?'':item.messages[item.messages.length-1].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>
<p class="lastmsg">{{item.messages[0]?item.messages[0].content:''}}</p>
</div>
</li>
</ul>
......@@ -40,8 +28,7 @@ export default {
'user',
]),
...mapGetters([
'searchChatlist',
'chatlist'
'chartings',
])
},
methods: {
......@@ -50,8 +37,8 @@ export default {
])
},
mounted() {
let obj = this.searchedChatlist[0]
this.selectSession(obj)
let obj = this.chartings[0]
obj&&this.selectSession(obj)
},
filters: {
time (date) {
......@@ -65,6 +52,9 @@ export default {
}else{
return ""
}
},
name(name){
return name.length>8?name.substring(0,8)+'...':name;
}
},
}
......
src/components/message/message.vue
View file @ 5c6a9127
<template>
<div>
<div class="message" v-if="user.whichPane==panelStatus.CHART">
<div class="message">
<header class="header">
<div class="friendname">{{selectedChat&&selectedChat.user.name}}</div>
</header>
......@@ -9,14 +9,14 @@
<ul v-if="selectedChat">
<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 : 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="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 : 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="content">
<div class="img"><img style="width:300px;
......@@ -27,40 +27,13 @@
</ul>
</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>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
import { panelStatus } from '@/utils/common'
import { mapGetters, mapState } from 'vuex'
import { mapGetters, mapState, mapActions } from 'vuex'
export default {
data(){
return {
......@@ -68,12 +41,14 @@ export default {
}
},
computed: {
selectId(){
return this.$store.state.user.selectId
},
panelStatus(){
return panelStatus
},
...mapGetters([
'selectedChat',
'selectedSearchChat',
'messages'
]),
...mapState([
......@@ -81,16 +56,36 @@ export default {
])
},
mounted() {
let temp = this
this.$refs.list.onscroll = function () {
console.log(this.scrollTop)
if(this.scrollTop ==0){
temp.moreMessage()
}
}
// console.log(this.$refs)
// setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
},
watch: {
messages() {
selectId() {
console.log(44444444)
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: {
...mapActions([
'moreMessage',
]),
// 在发送信息之后，将输入的内容中属于表情的部分替换成emoji图片标签
// 再经过v-html 渲染成真正的图片
replaceFace (con) {
......
src/components/search/search.vue
View file @ 5c6a9127
......@@ -3,13 +3,14 @@
<div class="wrapper">
<div class="search-wrapper">
<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>
</div>
</template>
<script>
import { panelStatus } from '@/utils/common'
export default {
methods: {
change () {
......@@ -34,6 +35,9 @@ export default {
}
},
computed: {
selectId(){
return this.$store.state.user.selectId
},
noText () {
if(this.search === '') return true
return false
......@@ -42,6 +46,14 @@ export default {
if(this.search === '') return false
return true
}
},
watch:{
selectId(val){
console.log(33333333333333);
if(val!=panelStatus.SEARCH){
this.search =''
}
}
}
}
</script>
......
src/components/text/text.vue
View file @ 5c6a9127
......@@ -164,7 +164,7 @@ export default {
},
// 点击发送按钮发送信息
send () {
if(this.content.length <= 1){
if(this.content.length < 1){
this.warn = true
this.content = ''
setTimeout(() => {
......
src/store/getters.js
View file @ 5c6a9127
......@@ -6,24 +6,22 @@ const getters = {
searchChatlist (state) {
return state.user.searchChatlist
},
// searchedFriendlist (state) {
// let friends = state.user.friendlist.filter(friends => friends.remark.includes(state.user.searchText));
// return friends
// },
chartings(state){
return state.user.chartings
},
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
},
selectId(state){
return state.user.selectId
},
selectedSearchChat(state){
let temp = state.user.searchChatlist.find(session => session.id === state.user.selectId);
return temp
},
selectedFriend (state) {
let friend = state.user.friendlist.find(friend => friend.id === state.user.selectFriendId);
return friend
},
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
}
}
......
src/store/modules/user.js
View file @ 5c6a9127
......@@ -15,24 +15,11 @@ const user = {
whichPane:panelStatus.CHART,
messagesPage:1,
messagesPer:30,
messagesObject:{},
chatlist: [],
chartings:[],
searchChatlist:[],
tempSearchChatlist:[],
tempChatlist:[],
friendlist: [
// {
// id: 0,
// wxid: "", //微信号
// initial: '新的朋友', //姓名首字母
// img: 'static/images/newfriend.jpg', //头像
// signature: "", //个性签名
// nickname: "新的朋友", //昵称
// sex: 0, //性别 1为男，0为女
// remark: "新的朋友", //备注
// area: "", //地区
// }
],
emojis,
selectId: 1,
selectFriendId: 0
......@@ -45,10 +32,10 @@ const user = {
},
CHANGE_CONVERSATIONPANEL(state, value){
if(panelStatus.CHART==value){
state.chartings = state.chatlist
state.whichPane = panelStatus.CHART
state.searchChatlist = []
state.tempSearchChatlist = []
}else{
state.chartings = []
state.whichPane = panelStatus.SEARCH
state.whichPane = value
}
......@@ -57,7 +44,6 @@ const user = {
state.wsObject = value
},
SELECT_SEESION (state, value) {
state.messagesObject = value
state.selectId = value.id
},
SET_SEARCHCHART_LIST(state, value){
......@@ -65,8 +51,8 @@ const user = {
let tempList = []
for(let i in value){
let temp = [{
content: value[i].lastMessage&&value[i].lastMessage.content,
date: value[i].lastMessage&&value[i].lastMessage.createTime
content: value[i].content||'',
date: value[i].lastUpdateTime
}]
tempList.push({
id: value[i].id,
......@@ -74,20 +60,23 @@ const user = {
name: value[i].userBo.nickname,
img: value[i].userBo.avatar
},
page: 1,
rows: 30,
messages: temp,
queryData:value[i].lastUpdateTime,
index: i
})
}
state.searchChatlist = tempList.sort(compare('queryData'))
state.chartings = tempList.sort(compare('queryData'))
},
SET_CHART_LIST(state, value){
state.tempChatlist = value
let tempList = []
for(let i in value){
let temp = [{
content: value[i].lastMessage&&value[i].lastMessage.content,
date: value[i].lastMessage&&value[i].lastMessage.createTime
content: value[i].content||'',
date: value[i].lastUpdateTime
}]
tempList.push({
id: value[i].id,
......@@ -95,63 +84,34 @@ const user = {
name: value[i].userBo.nickname,
img: value[i].userBo.avatar
},
page: 1,
rows: 30,
messages: temp,
queryData:value[i].lastUpdateTime,
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
for(let c in chatlist){
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) {
let data = localStorage.getItem('vue-chat');
if (data) {
state.chatlist = JSON.parse(data);
SEND_MESSAGE(state, value){
let { chatlist, selectId } = state
for(let c in chatlist){
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: {
......@@ -204,41 +164,21 @@ const user = {
connected({ state, commit }) {
state.wsObject
.on('messages/message', (data, callback) => {
console.log(data)
commit('SEND_MESSAGE', [data])
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) => {
console.log(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) => {
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) => {
callback(true)
commit('SELECT_MESSAGE', data)
// console.log('messages/index')
// 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 })
data&&commit('ADD_MESSAGE', data)
!data&&state.messagesPage--
})
.on('conversations/show', (data, callback) => {
const tempChatlist = state.tempChatlist
......@@ -250,48 +190,75 @@ const user = {
}
}
commit('SET_CHART_LIST', tempChatlist)
// console.log('conversations/show')
// dispatch('conversation/addConversation', data, { root: true })
})
.on('conversions/search', (data, callback) => {
console.log(data)
callback()
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) {
console.log(5555555555555555555555)
selectSession({ dispatch, commit, state }, conversation) {
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)
},
selectMessage({ commit, state }, message){
state.wsObject.emit('appevent', {
eventType: 'messages/index',
message: {
conversationId:conversation.id,
page: state.messagesPage,
rows: state.messagesPer
}
message
})
},
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 }){
commit('CHANGE_CONVERSATIONPANEL', panelStatus.CHART)
},
searchSession({ commit, state }, keyword) {
console.log(44444)
commit('CHANGE_CONVERSATIONPANEL', panelStatus.SEARCH)
state.wsObject.emit('appevent', {
eventType: 'conversions/search',
......@@ -311,15 +278,14 @@ const user = {
console.log(data);
console.log('这个socket发送成功了！');
})
let temp = state.messagesObject.messages
temp.push({
let temp = {
conversationId:conversation.id,
type: conversation.type,
isSend:1,
content: conversation.content,
createTime: Date.parse(new Date())
})
commit('SELECT_MESSAGE', temp)
}
commit('SEND_MESSAGE', [temp])
},
search: ({ commit }, value) => {
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