蔡嘉凯

src/api/shouye.js

@@ -69,3 +69,10 @@ export const getDbZlList = params =>
 //首页待审批案件列表
 export const getDspAjList = params =>
     get(`${base.alyIP}/dbsx/getDspAjList`, params);
+
+//获取未读消息列表
+export const getMsgList = params =>
+    post(`${base.alyIP}/getXxList`,params);
+//查看未读消息
+export const updateMsgReaded = params =>
+    post(`${base.alyIP}/updateXxzt`,params)
\ No newline at end of file

src/components/msg.vue

+<template>
+  <div class="msg">
+    <div class="msgInfo" :class="[data.sfydPdbz == 0 ? 'unRead' : '']">
+      <div class="msgHeader">
+        <span class="msgTitle">{{ data.xxbt }}</span>
+        <span class="msgType">{{ data.xxname }}</span>
+        <span class="msgSender">{{ data.fsrName }}</span>
+        <span class="msgSendTime">{{ data.fssj }}</span>
+      </div>
+      <div class="msgContent">{{ data.xxnr }}</div>
+    </div>
+    <div class="msgMark">
+      <div class="msgMarkBtn" v-if="data.sfydPdbz == 0" @click="$emit('mark')">
+        <span>标为已读</span>
+      </div>
+      <span class="msgMarked" v-else>已读</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { data: Object },
+};
+</script>
+
+<style lang="scss" scoped>
+.msg {
+  width: 678px;
+  height: 59px;
+  padding: 8px 13px 0 16px;
+  overflow: hidden;
+  border-bottom: solid 1px #e9e9e9;
+  .msgInfo {
+    width: 550px;
+    float: left;
+    .msgHeader {
+      overflow: hidden;
+      line-height: 20px;
+      > * {
+        float: left;
+      }
+      .msgTitle {
+        font-size: 15px;
+        color: #222222;
+      }
+      .msgType {
+        margin-left: 25px;
+        font-size: 12px;
+        color: #007af8;
+      }
+      .msgSender {
+        margin-left: 20px;
+        font-size: 12px;
+        color: #888888;
+      }
+      .msgSendTime {
+        margin-left: 20px;
+        font-size: 12px;
+        color: #888888;
+      }
+    }
+    .msgContent {
+      margin-top: 8px;
+      font-size: 12px;
+      line-height: 16px;
+      color: #666666;
+    }
+    &.unRead {
+      .msgTitle {
+        font-weight: bold;
+      }
+      .msgSender {
+        color: #666666;
+      }
+      .msgSendTime {
+        color: #666666;
+      }
+      .msgContent {
+        color: #222222;
+      }
+    }
+  }
+  .msgMark {
+    width: 64px;
+    height: 24px;
+    float: right;
+    margin-top: 11px;
+    margin-right: 20px;
+    text-align: center;
+    .msgMarkBtn {
+      height: 22px;
+      cursor: pointer;
+      border: solid 1px #0086fe;
+      border-radius: 12px;
+      color: #0086fe;
+      span {
+        font-size: 12px;
+      }
+    }
+    .msgMarked {
+      font-size: 12px;
+      color: #aaaaaa;
+    }
+  }
+}
+</style>

src/components/msgDetail.vue

+<template>
+  <el-dialog
+    custom-class="msgDetail"
+    :visible.sync="visible"
+    width="800px"
+    append-to-body
+    :data="data"
+    @close="handleClose"
+  >
+    <template class="title" #title>
+      sdsdsd
+    </template>
+    <div class="header">
+      <div class="title">{{ data.xxbt }}</div>
+      <div class="breadCrumb">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
+          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
+          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+    </div>
+    <div style="border-top:solid 1px #AAAAAA"></div>
+    <div class="main">
+      <div class="type">
+        消息类型：<span>{{ data.xxname }}</span>
+      </div>
+      <div class="content">{{ data.xxnr }}</div>
+    </div>
+    <div class="footer">
+      <span>发送人：{{ data.fsrName }}</span>
+      <span>发送时间：{{ data.fssj }}</span>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: { data: Object, visible: Boolean },
+  methods: {
+    handleClose() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.msgDetail.el-dialog {
+  .el-dialog__header {
+    padding: 0;
+  }
+  .el-dialog__body {
+    .header {
+      padding: 4px;
+      overflow: hidden;
+      .title {
+        float: left;
+        font-size: $ns-font-size-lg;
+        font-weight: bold;
+        color: #39e;
+      }
+      .breadCrumb {
+        width: 40%;
+        float: right;
+        font-size: $ns-font-size-base;
+        color: #28d;
+      }
+    }
+    .main {
+      padding: 4px;
+      .type {
+        font-size: $ns-font-size-sm;
+        span {
+          color: #da8;
+        }
+      }
+      .content {
+        font-size: $ns-font-size-base;
+      }
+    }
+    .footer {
+      width: 100%;
+      position: absolute;
+      bottom: 4px;
+      font-size: $ns-font-size-sm;
+    }
+  }
+}
+</style>