Skip to content

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

more page

parent 82649518
Expand all Hide 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,40 +9,14 @@ ...@@ -9,40 +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="content">
<div class="img"><img style="width:300px;
height:300px;" :src="imgUrl+item.imageUrl" alt=""></div>
</div>
</div>
</li>
</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="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;
...@@ -54,13 +28,12 @@ ...@@ -54,13 +28,12 @@
</div> </div>
</div> </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
This diff is collapsed.
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