前台提交

src/main/vue/src/RongIM/index.js

@@ -52,12 +52,13 @@ export default {
     sendMessage: (options) => {
         let target = options.target || ''
         let content = options.content || ''
-        let success = options.success || function() {}
         let userId = options.userId || ''
         let typeFlag = options.typeFlag || 0
+        let customer = options.customer || ''
         let msg = new RongIMLib.TextMessage(content)
+        let success = options.success || function() {}
 
-        RongIMClient.getInstance().sendMessage(RongIMLib.ConversationType.PRIVATE, '' + target, msg, {
+        RongIMClient.getInstance().sendMessage(RongIMLib.ConversationType.PRIVATE, typeFlag ? userId : customer, msg, {
             onSuccess: (message) => {
                 // let formData = {
                 //     'content': content,
@@ -70,26 +71,24 @@ export default {
                 // }
 
                 var formData = new FormData()
-                formData.append('content', content)
+                formData.append('content', content.content)
                 formData.append('contentType', 0)
                 formData.append('state', 0)
                 formData.append('time', message.sentTime)
                 formData.append('storeId', target)
                 formData.append('userId', userId)
                 formData.append('typeFlag', typeFlag)
+                formData.append('customer', customer)
 
 
                 // vue.$http.post(api.saveChatInfo, formData).then(res => { success(res.body.data) })
 
                 axios.post('/chatInfo/save', formData)
                     .then(res => {
-                        if (res.success) {
-                            success(res.data)
+                        if (res.data.success) {
+                            success(res.data.data)
                         }
                     })
-                    .catch(e => {
-                        console.log(e);
-                    })
 
             },
             onError: (errorCode, message) => {

src/main/vue/src/pagesPre/App.vue

@@ -58,7 +58,7 @@
         </div>
 
         <div class="little-menu">
-            <div class="little-item" @click="sendMsg('hello world')">
+            <div class="little-item" @click="sendMsg">
                 <img src="../assetsPre/fankui1.png" style="width:17px;height:18px;" alt="">
                 <div>咨询</div>
             </div>
@@ -71,7 +71,7 @@
             </div>
         </div>
 
-        <chatContent></chatContent>
+        <chatContent ref='chatContent'></chatContent>
 
     </div>
 </template>
@@ -235,18 +235,7 @@ export default {
             console.log('收到啦' + JSON.stringify(message))
         },
         sendMsg() {
-            var content = {
-                content: '姓名：111' + '\n手机：111' + + '\n微信：1111',
-                extra: { projectId: 1 }
-            }
-            this.$IM.sendMessage({
-                target: this.$route.query.id,
-                content: content,
-                success: (res) => {
-                    console.log(res)
-
-                }
-            })
+            this.$refs.chatContent.showBox = true
         }
     },
     watch: {

src/main/vue/src/pagesPre/ChatContent.vue

@@ -1,14 +1,14 @@
 <template>
-    <div class='box'>
+    <div class='box' v-if="showBox">
         <div class="chatContent">
-            <div class="left">
+            <div class="left" v-if="isLeft">
                 <div class="topContent">
                     <img class="icon" :src="userInfo.icon+'?x-oss-process=image/resize,m_fill,h_40,w_40'" alt="">
                     <span>{{userInfo.nickname}}</span>
                 </div>
                 <div class='leftList' v-if="conversationList.length>0">
 
-                    <div class="left-item" v-for="item in conversationList">
+                    <div class="left-item" v-for="item in conversationList" @click="readAll(item)">
                         <img class="icon" :src="item.storeInfo.icon+'?x-oss-process=image/resize,m_fill,h_40,w_40'" alt="">
                         <div class="content">
                             <div class="name">{{item.storeInfo.storeName}}</div>
@@ -30,15 +30,16 @@
 
             </div>
 
-            <div class="right">
+            <div class="right" v-else>
                 <div class="topContent">
+                    <el-button v-if='canBack' style="color:#fff;font-size:20px;margin-right:10px" @click="isLeft=true,storeId=0,chatList=[]" icon="el-icon-back" type="text" circle></el-button>
                     <img class="icon" :src="storeInfo.icon+'?x-oss-process=image/resize,m_fill,h_40,w_40'" alt="">
                     <span>{{storeInfo.storeName}}</span>
                     <span style="font-size:14px;margin-left:20px;">{{storeInfo.citye}}</span>
                 </div>
                 <div class="chatList" ref='chatList'>
-                    <div class="chat-item" v-for="item in chatList" :style="{flexDirection:item.typeFlag?'row':'row-reverse'}">
-                        <img class="icon" :src="(item.typeFlag?storeInfo.icon:item.icon)+'?x-oss-process=image/resize,m_fill,h_40,w_40'" alt="">
+                    <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="">
                         <div class="chatInfo">{{item.content}}</div>
                     </div>
                 </div>
@@ -49,6 +50,11 @@
                     <el-button type="primary" class="submit" @click="send">发送</el-button>
                 </div>
             </div>
+
+            <div class="floatRight">
+
+                <el-button @click="showBox=false" style="color:#fff;font-size:30px" icon="el-icon-close" type="text" circle></el-button>
+            </div>
         </div>
     </div>
 
@@ -60,24 +66,87 @@ import moment from 'moment'
 import 'moment/locale/zh-cn'
 export default {
     created() {
-        if (this.storeId) {
+        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',
     data() {
         return {
-            storeId: 1,
+            storeId: 0,
             chatList: [],
             storeInfo: {},
             textarea3: '',
-            customerList: []
+            customerList: [],
+            currentPage: 1,
+            isLeft: true,
+            showBox: false,
+            canBack: true
         }
     },
     computed: {
         ...mapState(['userInfo', 'conversationList']),
+        orderedHistory() {
+            return this.chatList.sort((a, b) => {
+                return a.time - b.time
+            })
+        }
+    },
+    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
+            }
+        },
+        isLeft() {
+            if (!this.isLeft) {
+                this.goBottom()
+            }
+        },
+        showBox() {
+            if (this.showBox) {
+                this.goBottom()
+            }
+        }
     },
     methods: {
+        readAll(item) {
+            this.$http.get({
+                url: '/chatInfo/readAll',
+                data: {
+                    storeId: item.storeId,
+                    userId: item.userId,
+                    typeFlag: 0
+                }
+            })
+            this.storeId = item.storeId
+            this.getChatInfo(item.storeId)
+        },
         getTime(str) {
             var time = ''
             if (str) {
@@ -86,10 +155,14 @@ export default {
             return time
         },
         getChatInfo(id) {
+            this.isLeft = false
+            this.chatList = []
+            this.storeInfo = {}
+            this.customerList = []
             this.$http.get({
                 url: '/storeInfo/getOne',
                 data: {
-                    storeId: this.storeId,
+                    id: id,
                 }
             }).then(res => {
                 if (res.success) {
@@ -101,7 +174,7 @@ export default {
             this.$http.get({
                 url: '/customerService/recently',
                 data: {
-                    storeId: this.storeId,
+                    storeId: id,
                 }
             }).then(res => {
                 if (res.success) {
@@ -117,11 +190,17 @@ export default {
                 console.log(e)
             })
 
+            this.currentPage = 1
+            this.getPageChat()
+
+
+        },
+        getPageChat() {
             this.$http.get({
                 url: '/chatInfo/page',
                 data: {
-                    currentPage: 1,
-                    pageNumber: 20,
+                    currentPage: this.currentPage,
+                    pageNumber: 10,
                     storeId: this.storeId,
                     userId: this.userInfo.id
                 }
@@ -132,7 +211,7 @@ export default {
                     });
 
                     // this.chatList = res.data.pp
-                    this.goBottom()
+
                 }
             }).catch(e => {
                 console.log(e)
@@ -140,7 +219,10 @@ export default {
         },
         goBottom() {
             setTimeout(() => {
-                this.$refs.chatList.scrollTop = this.$refs.chatList.scrollHeight
+                if (this.$refs.chatList) {
+                    this.$refs.chatList.scrollTop = this.$refs.chatList.scrollHeight
+                }
+
             }, 50)
 
         },
@@ -151,11 +233,16 @@ export default {
             }
             this.$IM.sendMessage({
                 target: this.storeId,
-                content: this.textarea3,
+                content: {
+                    content: this.textarea3,
+                    extra: this.storeId
+                },
                 userId: this.userInfo.id,
                 typeFlag: 0,
                 customer: customer,
                 success: (res) => {
+                    this.textarea3 = ''
+                    console.log(res)
                     this.chatList.push(res)
                     this.goBottom()
                 }
@@ -295,7 +382,7 @@ export default {
         .chat-item {
             display: flex;
             align-items: flex-start;
-            margin-top: 23px;
+            margin-top: 10px;
             padding: 0 15px;
             .icon {
                 min-width: 40px;
@@ -317,5 +404,11 @@ export default {
             }
         }
     }
+
+    .floatRight {
+        position: absolute;
+        right: 0px;
+        top: 0px;
+    }
 }
 </style>

src/main/vue/src/pagesPre/Shop.vue

@@ -52,7 +52,7 @@
                 <el-tab-pane label="在售商品" name="first">
                     <div class="allGoods">
                         <template v-for="(item,index) in goodsList">
-                            <router-link :to='{name:"product",query:{id:item.id,breHref:breHref}}' class="goods-item">
+                            <router-link :to='{name:"product",query:{id:item.id,breHref:breHref,storeId:item.storeId}}' class="goods-item">
                                 <div class="icon" :style="{backgroundImage:'url('+item.image+')'}"></div>
                                 <div class="title">{{item.title}}</div>
                                 <div class="subTitle">