聊天

project.private.config.json

@@ -23,7 +23,7 @@
           "id": -1,
           "name": "聊天页面",
           "pathName": "/pages/chat",
-          "query": "",
+          "query": "toUserId=1&toName=官方店铺",
           "scene": null
         },
         {

src/components/ChatInfo.vue

@@ -3,7 +3,7 @@
         <van-image round width="36" height="36" fit="cover" />
         <div class="chat-content">
             <div class="chat-text" v-if="contentType === 'text'">
-                你好，这个卡牌怎么拼箱？
+                {{ info.info }}
             </div>
             <van-image
                 @click="preview()"

src/components/NewsInfo.vue

@@ -1,20 +1,25 @@
 <template>
-    <div class="news-info" @click="navigateTo('/pages/chat')">
+    <div
+        class="news-info"
+        @click="navigateTo(`/pages/chat?toUserId=${otherUserInfo.userId}&toName=${otherUserInfo.name}`)"
+    >
         <div class="icon">
-            <van-image round width="50" height="50" fit="cover" />
+            <van-image :src="otherUserInfo.img" round width="50" height="50" fit="cover" />
             <div class="dot" v-if="dot">{{ dot }}</div>
         </div>
         <div class="content">
             <div class="text1">
-                系统消息
+                {{ otherUserInfo.name }}
             </div>
-            <span class="time">4月20日 20:56</span>
-            <div class="text2">您购买的拼箱订单店家已发货，请及时关注物流信息</div>
+            <span class="time">{{ time }}</span>
+            <div class="text2">{{ lastMsg.info }}</div>
         </div>
     </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import dayjs from 'dayjs';
 export default {
     name: 'NewsInfo',
     props: {
@@ -28,6 +33,40 @@ export default {
             type: Number,
             default: 0
         }
+    },
+    computed: {
+        ...mapState(['userInfo']),
+        otherUserInfo() {
+            if (!this.userInfo) {
+                return {};
+            }
+            if (this.info.storeUserId !== this.userInfo.id) {
+                return {
+                    userId: this.info.storeUserId,
+                    img: this.info.storeUser.store.logo,
+                    name: this.info.storeUser.store.storeName
+                };
+            }
+            if (this.info.userId !== this.userInfo.id) {
+                return {
+                    userId: this.info.userId,
+                    img: this.info.user.avatar,
+                    name: this.info.user.nickname
+                };
+            }
+
+            return {};
+        },
+        lastMsg() {
+            return this.info.lastMsg || { createdAt: '' };
+        },
+        time() {
+            if (this.lastMsg.createdAt) {
+                return dayjs().fromNow();
+            } else {
+                return '';
+            }
+        }
     }
 };
 </script>

src/pages/chat.vue

@@ -7,12 +7,17 @@
 <template>
     <div class="page">
         <div class="chat-list" @click="showAttach = false">
-            <div class="product">
+            <!-- <div class="product">
                 <product-info :showBtn="false"></product-info>
-            </div>
-            <chat-info></chat-info>
-            <chat-info isMine></chat-info>
-            <chat-info isMine contentType="image"></chat-info>
+            </div> -->
+            <chat-info
+                v-for="(item, index) in list"
+                :key="index"
+                :info="item"
+                :isMine="userInfo && item.sendId === userInfo.id"
+            ></chat-info>
+            <!-- <chat-info isMine></chat-info>
+            <chat-info isMine contentType="image"></chat-info> -->
         </div>
 
         <div class="bottom-box">
@@ -39,19 +44,23 @@
 <script>
 import ChatInfo from '@/components/ChatInfo';
 import ProductInfo from '@/components/ProductInfo';
+import { mapState } from 'vuex';
 export default {
     name: 'Chat',
     components: {
-        ChatInfo,
-        ProductInfo
+        ChatInfo
     },
     data() {
         return {
             message: '',
-            showAttach: false
+            showAttach: false,
+            topicInfo: null,
+            list: [],
+            toUserId: 0
         };
     },
     computed: {
+        ...mapState(['userInfo']),
         attachHeight() {
             return this.showAttach ? 114 : 0;
         }
@@ -62,12 +71,56 @@ export default {
                 title: options.toName
             });
         }
+        if (options.toUserId) {
+            this.toUserId = options.toUserId;
+        }
     },
     methods: {
+        loginMethods() {
+            this.$http
+                .post('/topic/newTopic', {
+                    targetId: this.toUserId
+                })
+                .then(res => {
+                    this.topicInfo = res;
+                    return this.getList();
+                })
+                .then(() => {
+                    // this.newMessage('欢迎管理本店，小店客服会尽快为您提供服务。', false, 'TEXT', true);
+                });
+        },
         sendImg() {
             this.choosePhoto().then(res => {
                 console.log(res);
             });
+        },
+        getList() {
+            return this.$http
+                .get('/message/findTopicMessages', {
+                    topicId: this.topicInfo.id
+                })
+                .then(res => {
+                    this.list = res;
+                    return Promise.resolve();
+                });
+        },
+        newMessage(info, isSend = true, messageType = 'TEXT', beenRead = false) {
+            let data = {
+                topicId: this.topicInfo.id,
+                info: info,
+                messageType: messageType,
+                beenRead: beenRead
+            };
+            if (isSend) {
+                data.sendId = this.$store.state.userInfo.id;
+                data.resId = this.toUserId;
+            } else {
+                data.sendId = this.toUserId;
+                data.resId = this.$store.state.userInfo.id;
+            }
+            this.$http.postJson('/message/save', data).then(res => {
+                this.getList();
+            });
         }
     }
 };

src/pages/news.vue

@@ -6,7 +6,11 @@
 </config>
 <template>
     <div>
-        <!-- <news-info></news-info>
+        <block v-for="item in list" :key="item.id">
+            <news-info :info="item"></news-info>
+        </block>
+
+        <!-- 
         <news-info :dot="1"></news-info>
         <news-info></news-info> -->
 
@@ -23,10 +27,19 @@ import NewsInfo from '../components/NewsInfo.vue';
 export default {
     name: 'News',
     components: {
-        // NewsInfo
+        NewsInfo
     },
     data() {
-        return {};
+        return {
+            list: []
+        };
+    },
+    methods: {
+        loginMethods() {
+            this.$http.get('/topic/getMyTopicList').then(res => {
+                this.list = res;
+            });
+        }
     }
 };
 </script>