update

src/components/enterprise/enterprisexx.vue

@@ -25,7 +25,7 @@
             </el-col>
           </el-col>
           <el-col :span="19" class="right">
-            消息管理
+            <contextxx></contextxx>
           </el-col>
         </div>
       </el-col>
@@ -45,6 +45,7 @@ import menuInfo from '@/layout/index/menuInfo.vue';
 import foot from '@/layout/index/foot.vue';
 import examine from '@/layout/personCenter/question.vue';
 import mainMenu from '@/layout/enterprise/mainMenu.vue';
+import contextxx from '@/layout/enterprise/contextxx.vue';
 export default {
   name: 'adviserList',
   props: {
@@ -58,6 +59,7 @@ export default {
     foot, //底部
     examine, //网上调查
     mainMenu, //分类导航
+    contextxx, //消息管理
   },
   data: () => ({}),
   created() {},

src/components/wang-editor.vue

@@ -38,6 +38,7 @@ export default {
   data() {
     return {
       editorContent: this.value,
+      editor: undefined,
     };
   },
   mounted() {
@@ -67,11 +68,15 @@ export default {
     };
     editor.create();
     editor.txt.html(this.value);
+    this.$set(this, `editor`, editor);
   },
   methods: {
     getContent: function() {
       return this.editorContent;
     },
+    setContent() {
+      this.editor.txt.clear();
+    },
   },
 };
 </script>

src/layout/enterprise/contextxx.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="contextxx">
+    <template v-if="view == 'room'">
+      <rooms :list="list" @toChat="toChat"></rooms>
+    </template>
+    <template v-else>
+      <chat :room="room"></chat>
+    </template>
+  </div>
+</template>
+
+<script>
+import rooms from './parts/room.vue';
+import chat from './parts/chat.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('personalroom');
+export default {
+  name: 'contextxx',
+  props: {},
+  components: { rooms, chat },
+  data: () => {
+    return {
+      view: 'room',
+      list: [],
+      room: {},
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...mapActions(['query', 'fetch']),
+    async search() {
+      let res = await this.query({ seller_id: this.user.uid });
+      if (this.$checkRes(res)) this.$set(this, `list`, res.data);
+    },
+    async toChat(data) {
+      let res = await this.fetch(data.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `room`, res.data);
+        this.view = 'chat';
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/layout/enterprise/mainMenu.vue

@@ -30,7 +30,7 @@ export default {
   components: {},
   data: () => ({
     src: require('@/assets/swfl.png'),
-    haveMsg: true,
+    haveMsg: false,
   }),
   created() {},
   computed: {},

src/layout/enterprise/parts/chat.vue

@@ -0,0 +1,136 @@
+<template>
+  <div id="chats">
+    <el-row :span="24" class="chat">
+      <el-col :span="24" class="chatInfo" id="chatBorder" ref="chatBorder">
+        <template v-for="(i, index) in talk">
+          <template v-if="isSender(i)">
+            <span :key="`senderTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
+            <span v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
+          </template>
+          <template v-else>
+            <span :key="`receverTime${i.id}${index}`">[{{ i.send_time }}] {{ i.receiver_name }}</span>
+            <span v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
+          </template>
+        </template>
+      </el-col>
+      <el-col :span="24" class="chatBtn">
+        <wang-editor v-model="content" style="height:130px;padding-bottom:120px" ref="editor"></wang-editor>
+        <el-button type="primary" @click="chatClick">发送</el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import wangEditor from '@/components/wang-editor.vue';
+const { mapActions: personalChat } = createNamespacedHelpers('personalchat');
+export default {
+  name: 'chats',
+  props: {
+    room: { type: Object, default: () => {} },
+  },
+  components: {
+    wangEditor,
+  },
+  data: () => {
+    return {
+      content: '',
+      talk: [],
+    };
+  },
+  created() {},
+  mounted() {
+    this.channel();
+  },
+  methods: {
+    ...personalChat(['create', 'query']),
+    async search() {
+      let res = await this.query({ personroom_id: this.room.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `talk`, res.data);
+        this.turnBottom();
+      }
+    },
+    async chatClick() {
+      if (this.content != '') {
+        let obj = { personroom_id: this.room.id, content: this.content, sender_id: this.user.uid, sender_name: this.user.name, send_time: '13:00' };
+        let keys = Object.keys(this.room);
+        let fres = keys.filter(f => this.room[f] == this.user.uid);
+        obj.receiver_id = fres === 'buyer_id' ? this.room['seller_id'] : this.room['buyer_id'];
+        obj.receiver_name = fres === 'buyer_id' ? this.room['seller_name'] : this.room['buyer_name'];
+        let res = await this.create(obj);
+        this.$refs.editor.setContent();
+        this.$set(this, `content`, '');
+        this.$forceUpdate();
+        if (this.$checkRes(res, null, res.errmsg || '发言失败')) {
+          this.talk.push(res.data);
+          this.turnBottom();
+        }
+      } else this.$message.error('请输入信息后发送');
+    },
+    turnBottom() {
+      this.$nextTick(() => {
+        document.getElementById('chatBorder').scrollTop = document.getElementById('chatBorder').scrollHeight + 150;
+      });
+    },
+    isSender(data) {
+      return this.user.uid == data.sender_id;
+    },
+    channel() {
+      //TODO 修改订阅地址
+      if (!this.room.id) {
+        console.warn('未获取到房间id,无法进行订阅');
+        return;
+      }
+      this.$stomp({
+        [`/exchange/person_chat/${this.room.id}_${this.user.uid}`]: this.onMessage,
+      });
+    },
+  },
+  watch: {
+    room: {
+      handler(val) {
+        if (val.id) this.search();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chat {
+  float: left;
+  width: 100%;
+  padding: 30px;
+}
+.chat .chatInfo {
+  float: left;
+  width: 100%;
+  height: 280px;
+  overflow: hidden;
+  border: 1px solid #ccc;
+  margin: 0 0 30px 0;
+  overflow-y: auto;
+}
+.chatBtn {
+  float: left;
+  width: 100%;
+  text-align: center;
+}
+/deep/.chatBtn .el-button {
+  padding: 10px 80px;
+  font-size: 20px;
+}
+</style>

src/layout/enterprise/parts/room.vue

@@ -0,0 +1,38 @@
+<template>
+  <div id="room">
+    <el-table :data="list" border stripe :show-header="false" @row-click="toChat">
+      <el-table-column prop="buyer_name" align="center"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'room',
+  props: {
+    list: { type: Array, default: () => [] },
+  },
+  components: {},
+  data: () => {
+    return {};
+  },
+  created() {},
+  methods: {
+    toChat(row) {
+      this.$emit('toChat', row);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/router/before.js

@@ -1,19 +0,0 @@
-import store from '@/store/index';
-
-const checkLogin = router => {
-  router.beforeEach((to, form, next) => {
-    store.commit('setUser');
-    // if (to.name === 'login') {
-    //   next();
-    //   return;
-    // }
-    // let user = store.state.user;
-    // if (user) {
-    //   next();
-    // }
-    // //下面是没登录的情况,需要跳转页面到用户未登录页
-    // else next({ name: 'login' });
-    next();
-  });
-};
-export default checkLogin;

src/store/index.js

@@ -30,7 +30,8 @@ import login from '@common/store/login';
 
 import * as ustate from '@common/store/user/state';
 import * as umutations from '@common/store/user/mutations';
-
+import personalchat from '@common/store/live/personalchat';
+import personalroom from '@common/store/live/personalroom';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -62,6 +63,8 @@ export default new Vuex.Store({
     talentExperts,
     room,
     login,
+    personalchat,
+    personalroom,
   },
   state: { ...ustate },
   mutations: { ...umutations },