1

src/views/userCenter/menuParst/message.vue

@@ -1,27 +1,93 @@
 <template>
   <div id="message">
     <el-row>
-      <el-col :span="24">
-        <p>message</p>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          消息管理
+        </el-col>
+        <el-col :span="24" class="two">
+          <list :messageList="messageList" @toView="toView"></list>
+        </el-col>
       </el-col>
     </el-row>
+    <el-dialog title="聊天" :visible.sync="dialog" width="35%" :before-close="handleClose">
+      <chat :chatList="chatList" @send="toSend"></chat>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import list from '../message/list.vue';
+import chat from '../message/chat.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapPersonRoom } = createNamespacedHelpers('personRoom');
+const { mapActions: personChat } = createNamespacedHelpers('personChat');
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
   name: 'message',
   props: {},
-  components: {},
+  components: {
+    list,
+    chat,
+  },
   data: function() {
-    return {};
+    return {
+      messageList: [],
+      // 聊天
+      dialog: false,
+      chatList: [],
+      // 房间信息
+      room: {},
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...mapPersonRoom({ roomQuery: 'query' }),
+    ...personChat({ chatQuery: 'query', chatCreate: 'create' }),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let res = await this.roomQuery({ p_id: this.user.id, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `messageList`, res.data);
+      }
+    },
+    // 查看未读消息
+    async toView(data) {
+      this.$set(this, `room`, data);
+      let res = await this.chatQuery({ room_id: data.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `chatList`, res.data);
+      }
+      this.dialog = true;
+    },
+    // 关闭
+    handleClose() {
+      this.dialog = false;
+      this.search();
+    },
+    // 发言提交
+    async toSend(text) {
+      if (text) {
+        let data = {
+          room_id: this.room.id,
+          content: text,
+          sender_id: this.user.id,
+          sender_name: this.user.name,
+          receiver_id: this.room.p1_id == this.user.id ? this.room.p2_id : this.room.p1_id,
+          receiver_name: this.room.p1_id == this.user.id ? this.room.p2 : this.room.p1,
+        };
+        let res = await this.chatCreate(data);
+        if (this.$checkRes(res)) {
+          this.chatList.push(res.data);
+        }
+      } else {
+        this.$message({ message: '内容不能为空', type: 'warning' });
+      }
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
@@ -29,4 +95,22 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  padding: 10px;
+  .one {
+    height: 40px;
+    line-height: 30px;
+    padding: 0 10px;
+    border-bottom: 1px solid #e5e5e5;
+    font-size: 18px;
+    font-weight: bold;
+    color: #22529a;
+    margin: 0 0 10px 0;
+  }
+}
+/deep/.el-dialog__body {
+  height: 400px;
+  padding: 10px 20px;
+}
+</style>

src/views/userCenter/message/chat.vue

@@ -0,0 +1,134 @@
+<template>
+  <div id="chat">
+    <el-row>
+      <el-col :span="24" class="chat">
+        <el-col :span="24" class="list" id="chatBorder" ref="chatBorder">
+          <el-col :span="24" class="chatList" v-for="(item, index) in chatList" :key="index">
+            <template v-if="isSender(item, index)">
+              <el-col :span="20" class="left">
+                <el-col :span="24" class="name">
+                  <span>{{ item.sender_name }}</span>
+                  <span>[{{ getDate(item.meta.createdAt) }}]</span>
+                </el-col>
+                <el-col :span="24" class="content">
+                  {{ item.content }}
+                </el-col>
+              </el-col>
+            </template>
+            <template v-else>
+              <el-col :span="20" class="right">
+                <el-col :span="24" class="name">
+                  <span>[{{ getDate(item.meta.createdAt) }}]</span>
+                  <span> {{ item.sender_name }}</span>
+                </el-col>
+                <el-col :span="24" class="content">
+                  {{ item.content }}
+                </el-col>
+              </el-col>
+            </template>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="btn">
+          <el-col :span="21">
+            <el-input v-model="text" placeholder="请输入内容"></el-input>
+          </el-col>
+          <el-col :span="3">
+            <el-button type="primary" size="mini" @click="send">发送</el-button>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+var moment = require('moment');
+export default {
+  name: 'chat',
+  props: {
+    chatList: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {
+      text: '',
+    };
+  },
+  created() {},
+  methods: {
+    // 判断身份
+    isSender(data) {
+      return this.user.id != data.sender_id;
+    },
+    getDate(date) {
+      let newDate = moment(date).format('YYYY-MM-DD HH:mm:ss');
+      if (newDate) return newDate;
+    },
+    // 发言提交
+    send() {
+      this.$emit('send', this.text);
+      this.text = '';
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.chat {
+  .list {
+    height: 360px;
+    overflow-y: auto;
+    padding: 0 15px 0 0;
+    .left {
+      float: left;
+      text-align: left;
+      margin: 0 0 10px 0;
+      .name {
+        margin: 0 0 5px 0;
+        span:nth-child(1) {
+          font-size: 16px;
+          font-weight: bold;
+          margin: 0 5px 0 0;
+        }
+      }
+      .content {
+        background-color: #f1f1f1;
+        border-radius: 5px;
+        min-height: 30px;
+        padding: 10px;
+      }
+    }
+    .right {
+      float: right;
+      text-align: right;
+      margin: 0 0 10px 0;
+      .name {
+        margin: 0 0 5px 0;
+        span:nth-child(1) {
+          font-size: 16px;
+          font-weight: bold;
+          margin: 0 5px 0 0;
+        }
+      }
+      .content {
+        background-color: #f1f1f1;
+        border-radius: 5px;
+        min-height: 30px;
+        padding: 10px;
+      }
+    }
+  }
+  .btn {
+    height: 40px;
+    overflow: hidden;
+    /deep/.el-button {
+      padding: 12px 26px;
+    }
+  }
+}
+</style>

src/views/userCenter/message/list.vue

@@ -0,0 +1,78 @@
+<template>
+  <div id="list">
+    <el-row>
+      <el-col :span="24" class="main">
+        <data-table :data="messageList" :fields="fields" :opera="opera" :usePage="false" @views="toView">
+          <template #custom="{item,row}">
+            <template v-if="item.prop == 'name'">
+              {{ toFormat(row) }}
+            </template>
+          </template>
+        </data-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import dataTable from '@common/src/components/frame/filter-page-table.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'list',
+  props: {
+    messageList: { type: Array },
+  },
+  components: {
+    dataTable,
+  },
+  data: function() {
+    return {
+      opera: [
+        {
+          label: '查看',
+          method: 'views',
+        },
+      ],
+      fields: [
+        {
+          label: '发言人',
+          prop: 'name',
+          custom: true,
+        },
+        {
+          label: '是否有未读消息',
+          prop: 'is_read',
+          format: item => {
+            return item === false ? '有' : '未有';
+          },
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    // 查看消息
+    toView({ data }) {
+      this.$emit('toView', data);
+    },
+    toFormat(data) {
+      if (data.p1_id == this.user.id) {
+        return data.p2;
+      } else {
+        return data.p1;
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  height: 465px;
+  overflow-y: auto;
+}
+</style>