Skip to content

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

v0.1

parent 5c6a9127
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 26 deletions
src/components/load/moreDot.vue 0 → 100644
View file @ f7f02a9f
<template>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</template>
<style lang="stylus" scoped>
.spinner {
margin: 10px auto 0;
width: 150px;
text-align: center;
}
.spinner > div {
width: 30px;
height: 30px;
background-color: #c3c3c3;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
src/components/message/message.vue
View file @ f7f02a9f
......@@ -7,23 +7,26 @@
</header>
<div class="message-wrapper" ref="list">
<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||'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>
<Load v-if="isSelectMore"/>
<template v-for="item in messages">
<li :class="['dnf'+item.id, '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||'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>
<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||'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 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||'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>
</div>
</li>
</li>
</template>
</ul>
</div>
</div>
......@@ -34,12 +37,18 @@
import moment from 'moment'
import { panelStatus } from '@/utils/common'
import { mapGetters, mapState, mapActions } from 'vuex'
import Load from '../load/moreDot'
export default {
data(){
return {
imgUrl:process.env.IMG_ADDRESS
imgUrl:process.env.IMG_ADDRESS,
headerId:0,
loadStatus:false,
}
},
components: {
Load
},
computed: {
selectId(){
return this.$store.state.user.selectId
......@@ -49,7 +58,8 @@ export default {
},
...mapGetters([
'selectedChat',
'messages'
'messages',
'isSelectMore'
]),
...mapState([
'user'
......@@ -58,7 +68,6 @@ export default {
mounted() {
let temp = this
this.$refs.list.onscroll = function () {
console.log(this.scrollTop)
if(this.scrollTop ==0){
temp.moreMessage()
}
......@@ -68,18 +77,40 @@ export default {
},
watch: {
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){
if(!val||val.length==0){
return
}
if(!old||old.length==0){
setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
}else if(val[0].conversationId!=old[0].conversationId){
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)
if(this.headerId != val[val.length-1].conversationId){
setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
}else{
this.$refs.list.scrollTop= 140
// }
// let liArray = this.$refs.list.children[0].children
// let index = val.length - old.length
// console.log('------------------------=======================')
// console.log(index)
// for(let li of liArray){
// if(li.className.split(' ')[0] == 'dnf'+val[index].id){
// this.$refs.list.scrollTop = li.scrollHeight*9
// }
// }
}
this.headerId = val[0].conversationId
// 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: {
......
src/store/getters.js
View file @ f7f02a9f
......@@ -23,6 +23,9 @@ const getters = {
messages (state) {
let session = state.user.chartings.find(session => session.id === state.user.selectId);
return session&&session.messages
},
isSelectMore(state){
return state.user.isSelectMore
}
}
export default getters
\ No newline at end of file
src/store/modules/user.js
View file @ f7f02a9f
......@@ -21,6 +21,7 @@ const user = {
tempSearchChatlist:[],
tempChatlist:[],
emojis,
isSelectMore:false,
selectId: 1,
selectFriendId: 0
},
......@@ -40,6 +41,9 @@ const user = {
state.whichPane = value
}
},
CHANGE_ISSELECTMORE(state,value){
state.isSelectMore = value
},
SET_WXOBJECT(state, value){
state.wsObject = value
},
......@@ -175,6 +179,8 @@ const user = {
console.log(data)
})
.on('messages/index', (data, callback) => {
console.log(45454545454545454)
commit('CHANGE_ISSELECTMORE',false)
callback(true)
data&&commit('ADD_MESSAGE', data)
!data&&state.messagesPage--
......@@ -232,10 +238,11 @@ const user = {
}
}
}
commit('SELECT_SEESION', conversation)
commit('SELECT_SEESION', conversation)
},
selectMessage({ commit, state }, message){
commit('CHANGE_ISSELECTMORE',true)
state.wsObject.emit('appevent', {
eventType: 'messages/index',
message
......
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