Skip to content

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

more page

parent 82649518
Expand all 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
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