|
@@ -8,7 +8,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class='leftList' v-if="conversationList.length>0">
|
|
<div class='leftList' v-if="conversationList.length>0">
|
|
|
|
|
|
|
|
- <div class="left-item" v-for="item in conversationList" @click="readAll(item)">
|
|
|
|
|
|
|
+ <div class="left-item" v-for="(item,index) in conversationList" @click="readAll(item)">
|
|
|
<img class="icon" :src="item.storeInfo.icon+'?x-oss-process=image/resize,m_fill,h_40,w_40'" alt="">
|
|
<img class="icon" :src="item.storeInfo.icon+'?x-oss-process=image/resize,m_fill,h_40,w_40'" alt="">
|
|
|
<div class="content">
|
|
<div class="content">
|
|
|
<div class="name">{{item.storeInfo.storeName}}</div>
|
|
<div class="name">{{item.storeInfo.storeName}}</div>
|
|
@@ -19,13 +19,16 @@
|
|
|
</el-badge>
|
|
</el-badge>
|
|
|
<span>{{getTime(item.updateTime)}}</span>
|
|
<span>{{getTime(item.updateTime)}}</span>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="close" @click.stop='del(item,index)'>
|
|
|
|
|
+ <i class="el-icon-error"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="nothing" v-else>
|
|
<div class="nothing" v-else>
|
|
|
- 还没有聊天记录哦,快去和人聊天吧~
|
|
|
|
|
|
|
+ 还没有聊天记录哦,快去咨询店铺吧~
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
@@ -37,14 +40,14 @@
|
|
|
<span>{{storeInfo.storeName}}</span>
|
|
<span>{{storeInfo.storeName}}</span>
|
|
|
<span style="font-size:14px;margin-left:20px;">{{storeInfo.citye}}</span>
|
|
<span style="font-size:14px;margin-left:20px;">{{storeInfo.citye}}</span>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="chatList" ref='chatList'>
|
|
|
|
|
|
|
+ <div class="chatList" ref='chatList' @scroll='scrollChat'>
|
|
|
<div class="chat-item" v-for="item in orderedHistory" :style="{flexDirection:item.typeFlag?'row':'row-reverse'}">
|
|
<div class="chat-item" v-for="item in orderedHistory" :style="{flexDirection:item.typeFlag?'row':'row-reverse'}">
|
|
|
<img class="icon" :src="(item.typeFlag?storeInfo.icon:userInfo.icon)+'?x-oss-process=image/resize,m_fill,h_40,w_40'" alt="">
|
|
<img class="icon" :src="(item.typeFlag?storeInfo.icon:userInfo.icon)+'?x-oss-process=image/resize,m_fill,h_40,w_40'" alt="">
|
|
|
<div class="chatInfo">{{item.content}}</div>
|
|
<div class="chatInfo">{{item.content}}</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="inputContent">
|
|
<div class="inputContent">
|
|
|
- <el-input type="textarea" maxlength="200" resize='none' :autosize="{ minRows:6}" placeholder="请输入内容" v-model="textarea3">
|
|
|
|
|
|
|
+ <el-input type="textarea" @keydown="keyDownEvent" maxlength="200" resize='none' :autosize="{ minRows:6}" placeholder="请输入内容" v-model="textarea3">
|
|
|
</el-input>
|
|
</el-input>
|
|
|
|
|
|
|
|
<el-button type="primary" class="submit" @click="send">发送</el-button>
|
|
<el-button type="primary" class="submit" @click="send">发送</el-button>
|
|
@@ -64,23 +67,26 @@
|
|
|
import { mapState } from 'vuex'
|
|
import { mapState } from 'vuex'
|
|
|
import moment from 'moment'
|
|
import moment from 'moment'
|
|
|
import 'moment/locale/zh-cn'
|
|
import 'moment/locale/zh-cn'
|
|
|
|
|
+import eventBus from '../eventBus'
|
|
|
export default {
|
|
export default {
|
|
|
created() {
|
|
created() {
|
|
|
- if (this.$route.name == 'shop') {
|
|
|
|
|
- this.storeId = this.$route.query.id
|
|
|
|
|
- this.getChatInfo(this.storeId)
|
|
|
|
|
- this.canBack = false
|
|
|
|
|
- }
|
|
|
|
|
- else if (this.$route.name == 'product') {
|
|
|
|
|
- this.storeId = this.$route.query.storeId
|
|
|
|
|
- this.getChatInfo(this.storeId)
|
|
|
|
|
- this.canBack = false
|
|
|
|
|
- }
|
|
|
|
|
- else {
|
|
|
|
|
- this.isLeft = true
|
|
|
|
|
- this.storeId = 0
|
|
|
|
|
- this.canBack = true
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ eventBus.$on('receiveMessage', this.onReceiveMessage)
|
|
|
|
|
+ // if (this.$route.name == 'shop') {
|
|
|
|
|
+ // this.storeId = this.$route.query.id
|
|
|
|
|
+ // this.getChatInfo(this.storeId)
|
|
|
|
|
+ // this.canBack = false
|
|
|
|
|
+ // }
|
|
|
|
|
+ // else if (this.$route.name == 'product') {
|
|
|
|
|
+ // this.storeId = this.$route.query.storeId
|
|
|
|
|
+ // this.getChatInfo(this.storeId)
|
|
|
|
|
+ // this.canBack = false
|
|
|
|
|
+ // }
|
|
|
|
|
+ // else {
|
|
|
|
|
+
|
|
|
|
|
+ // }
|
|
|
|
|
+ this.isLeft = true
|
|
|
|
|
+ this.storeId = 0
|
|
|
|
|
+ this.canBack = true
|
|
|
},
|
|
},
|
|
|
name: 'chatContent',
|
|
name: 'chatContent',
|
|
|
data() {
|
|
data() {
|
|
@@ -93,7 +99,8 @@ export default {
|
|
|
currentPage: 1,
|
|
currentPage: 1,
|
|
|
isLeft: true,
|
|
isLeft: true,
|
|
|
showBox: false,
|
|
showBox: false,
|
|
|
- canBack: true
|
|
|
|
|
|
|
+ canBack: true,
|
|
|
|
|
+ chatFlag: false
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -102,27 +109,38 @@ export default {
|
|
|
return this.chatList.sort((a, b) => {
|
|
return this.chatList.sort((a, b) => {
|
|
|
return a.time - b.time
|
|
return a.time - b.time
|
|
|
})
|
|
})
|
|
|
|
|
+ },
|
|
|
|
|
+ coventIndex() {
|
|
|
|
|
+ var index = -1
|
|
|
|
|
+ if (this.storeId) {
|
|
|
|
|
+ this.conversationList.forEach((item, i) => {
|
|
|
|
|
+ if (item.storeId == this.storeId && item.userId == this.userInfo.id) {
|
|
|
|
|
+ index = i
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ return index
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
watch: {
|
|
watch: {
|
|
|
- $route() {
|
|
|
|
|
- console.log(this.$route.name)
|
|
|
|
|
- if (this.$route.name == 'shop') {
|
|
|
|
|
- this.storeId = this.$route.query.id
|
|
|
|
|
- this.getChatInfo(this.storeId)
|
|
|
|
|
- this.canBack = false
|
|
|
|
|
- }
|
|
|
|
|
- else if (this.$route.name == 'product') {
|
|
|
|
|
- this.storeId = this.$route.query.storeId
|
|
|
|
|
- this.getChatInfo(this.storeId)
|
|
|
|
|
- this.canBack = false
|
|
|
|
|
- }
|
|
|
|
|
- else {
|
|
|
|
|
- this.isLeft = true
|
|
|
|
|
- this.storeId = 0
|
|
|
|
|
- this.canBack = true
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ // $route() {
|
|
|
|
|
+ // console.log(this.$route.name)
|
|
|
|
|
+ // if (this.$route.name == 'shop') {
|
|
|
|
|
+ // this.storeId = this.$route.query.id
|
|
|
|
|
+ // this.getChatInfo(this.storeId)
|
|
|
|
|
+ // this.canBack = false
|
|
|
|
|
+ // }
|
|
|
|
|
+ // else if (this.$route.name == 'product') {
|
|
|
|
|
+ // this.storeId = this.$route.query.storeId
|
|
|
|
|
+ // this.getChatInfo(this.storeId)
|
|
|
|
|
+ // this.canBack = false
|
|
|
|
|
+ // }
|
|
|
|
|
+ // else {
|
|
|
|
|
+ // this.isLeft = true
|
|
|
|
|
+ // this.storeId = 0
|
|
|
|
|
+ // this.canBack = true
|
|
|
|
|
+ // }
|
|
|
|
|
+ // },
|
|
|
isLeft() {
|
|
isLeft() {
|
|
|
if (!this.isLeft) {
|
|
if (!this.isLeft) {
|
|
|
this.goBottom()
|
|
this.goBottom()
|
|
@@ -134,16 +152,22 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ beforeDestroy() {
|
|
|
|
|
+ eventBus.$off('receiveMessage', this.onReceiveMessage)
|
|
|
|
|
+ },
|
|
|
methods: {
|
|
methods: {
|
|
|
- readAll(item) {
|
|
|
|
|
|
|
+ readAll(item, type) {
|
|
|
this.$http.get({
|
|
this.$http.get({
|
|
|
url: '/chatInfo/readAll',
|
|
url: '/chatInfo/readAll',
|
|
|
data: {
|
|
data: {
|
|
|
storeId: item.storeId,
|
|
storeId: item.storeId,
|
|
|
userId: item.userId,
|
|
userId: item.userId,
|
|
|
- typeFlag: 0
|
|
|
|
|
|
|
+ typeFlag: 1
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
+ if (type) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
this.storeId = item.storeId
|
|
this.storeId = item.storeId
|
|
|
this.getChatInfo(item.storeId)
|
|
this.getChatInfo(item.storeId)
|
|
|
},
|
|
},
|
|
@@ -167,6 +191,10 @@ export default {
|
|
|
}).then(res => {
|
|
}).then(res => {
|
|
|
if (res.success) {
|
|
if (res.success) {
|
|
|
this.storeInfo = res.data
|
|
this.storeInfo = res.data
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
}).catch(e => {
|
|
}).catch(e => {
|
|
|
console.log(e)
|
|
console.log(e)
|
|
@@ -183,7 +211,9 @@ export default {
|
|
|
res.data.splice(0, 0, item)
|
|
res.data.splice(0, 0, item)
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
+ console.log(res.data)
|
|
|
this.customerList = res.data
|
|
this.customerList = res.data
|
|
|
|
|
+ console.log(this.customerList)
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
}).catch(e => {
|
|
}).catch(e => {
|
|
@@ -196,6 +226,7 @@ export default {
|
|
|
|
|
|
|
|
},
|
|
},
|
|
|
getPageChat() {
|
|
getPageChat() {
|
|
|
|
|
+ this.chatFlag = false
|
|
|
this.$http.get({
|
|
this.$http.get({
|
|
|
url: '/chatInfo/page',
|
|
url: '/chatInfo/page',
|
|
|
data: {
|
|
data: {
|
|
@@ -210,6 +241,50 @@ export default {
|
|
|
this.chatList.push(item)
|
|
this.chatList.push(item)
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+ if (res.data.currentPage < res.data.totalPage) {
|
|
|
|
|
+ this.chatFlag = true
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (this.chatList.length == 0) {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ // this.$IM.newConversation({
|
|
|
|
|
+ // userId: this.userInfo.id,
|
|
|
|
|
+ // type: 0,
|
|
|
|
|
+ // storeId: this.storeId,
|
|
|
|
|
+ // success: (res) => {
|
|
|
|
|
+
|
|
|
|
|
+ // }
|
|
|
|
|
+ // })
|
|
|
|
|
+
|
|
|
|
|
+ // this.$IM.newConversation({
|
|
|
|
|
+ // userId: this.userInfo.id,
|
|
|
|
|
+ // type: 1,
|
|
|
|
|
+ // storeId: this.storeId,
|
|
|
|
|
+ // success: (res) => {
|
|
|
|
|
+
|
|
|
|
|
+ // }
|
|
|
|
|
+ // })
|
|
|
|
|
+ this.$http.post({
|
|
|
|
|
+ url: '/chatInfo/save',
|
|
|
|
|
+ data: {
|
|
|
|
|
+ 'content': '您好,感谢您对' + this.storeInfo.storeName + '的关注,我们会尽快回复您的咨询。',
|
|
|
|
|
+ 'contentType': 0,
|
|
|
|
|
+ 'state': 1,
|
|
|
|
|
+ 'storeId': this.storeId,
|
|
|
|
|
+ 'userId': this.userInfo.id,
|
|
|
|
|
+ 'typeFlag': 1
|
|
|
|
|
+ }
|
|
|
|
|
+ }).then(res2 => {
|
|
|
|
|
+ if (res2.success) {
|
|
|
|
|
+ this.chatList.push(res2.data)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ }, 1000)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
// this.chatList = res.data.pp
|
|
// this.chatList = res.data.pp
|
|
|
|
|
|
|
|
}
|
|
}
|
|
@@ -227,6 +302,8 @@ export default {
|
|
|
|
|
|
|
|
},
|
|
},
|
|
|
send() {
|
|
send() {
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
var customer = ''
|
|
var customer = ''
|
|
|
if (this.customerList.length > 0) {
|
|
if (this.customerList.length > 0) {
|
|
|
customer = this.customerList[0].username
|
|
customer = this.customerList[0].username
|
|
@@ -235,7 +312,11 @@ export default {
|
|
|
target: this.storeId,
|
|
target: this.storeId,
|
|
|
content: {
|
|
content: {
|
|
|
content: this.textarea3,
|
|
content: this.textarea3,
|
|
|
- extra: this.storeId
|
|
|
|
|
|
|
+ extra: {
|
|
|
|
|
+ storeId: this.storeId,
|
|
|
|
|
+ typeFlag: "0",
|
|
|
|
|
+ userId: this.userInfo.id.toString()
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
userId: this.userInfo.id,
|
|
userId: this.userInfo.id,
|
|
|
typeFlag: 0,
|
|
typeFlag: 0,
|
|
@@ -247,6 +328,43 @@ export default {
|
|
|
this.goBottom()
|
|
this.goBottom()
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
+ },
|
|
|
|
|
+ onReceiveMessage(message) {
|
|
|
|
|
+ if (!this.isLeft && message.storeId == this.storeId) {
|
|
|
|
|
+ this.chatList.push(message)
|
|
|
|
|
+ console.log('收到啦' + JSON.stringify(message))
|
|
|
|
|
+ this.goBottom()
|
|
|
|
|
+ this.readAll({
|
|
|
|
|
+ storeId: this.storeId,
|
|
|
|
|
+ userId: this.userInfo.userId,
|
|
|
|
|
+ }, 1)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ del(item, index) {
|
|
|
|
|
+ console.log(item)
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ this.$http.post({
|
|
|
|
|
+ url: '/usersSession/del',
|
|
|
|
|
+ data: {
|
|
|
|
|
+ id: item.id
|
|
|
|
|
+ }
|
|
|
|
|
+ }).then(res => {
|
|
|
|
|
+ if (res.success) {
|
|
|
|
|
+ var list = [...this.conversationList]
|
|
|
|
|
+ list.splice(index, 1)
|
|
|
|
|
+ this.$store.commit('updateConversationList', list);
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ scrollChat() {
|
|
|
|
|
+ if (this.$refs.chatList.scrollTop == 0 && this.chatFlag) {
|
|
|
|
|
+ this.getChatInfo()
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ keyDownEvent(e) {
|
|
|
|
|
+ console.log(e)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -300,6 +418,7 @@ export default {
|
|
|
|
|
|
|
|
.left {
|
|
.left {
|
|
|
width: 300px;
|
|
width: 300px;
|
|
|
|
|
+ min-height: 583px;
|
|
|
|
|
|
|
|
.item {
|
|
.item {
|
|
|
display: block;
|
|
display: block;
|
|
@@ -351,6 +470,17 @@ export default {
|
|
|
&:not(:last-child) {
|
|
&:not(:last-child) {
|
|
|
border-bottom: 1px solid #ebebeb;
|
|
border-bottom: 1px solid #ebebeb;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .close {
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ .close {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.nothing {
|
|
.nothing {
|