client-base-v5/src/client/SingleNotification.vue

<template>
  <div class="container-fluid">
    <div class="flex-header">
      <Navbar title="消息详情" :is-go-back="true" />
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <a href="#" class="list-group-item active">
            <span class="user-text">{{ message.publishUserName }}</span>
            于
            {{ message.releaseDate }}
            发布
          </a>
          <a href="#" class="list-group-item">标题：{{ message.title }}</a>
          <a href="#" class="list-group-item">内容：{{ message.message }}</a>
          <a href="#" class="list-group-item">链接：<button
            class="btn btn-link"
            @click="queryReport(message.linkUrl)"
          >
            查看
          </button>
          </a>
        </div>
      </div>
    </div>
    <ImagePreview ref="imagePreview" />
  </div>
</template>

<script>
import Common from '../common/Common.js';

import AuthImage from '../widget/AuthImage.vue';
import { Notify, Uuid } from 'pc-component-v3';


export default {
  components: {
   
    AuthImage,
  },
  data: function () {
    this.Common = Common;
    return {
      messageId: null,
      message: {},
      className: 'com.leanwo.prodog.base.model.User',
    };
  },
  watch: {
    $route: function () {
      this.messageId = this.$route.params.messageId;
      this.getMessageById();
    },
  },
  mounted: function () {
    this.messageId = this.$route.params.messageId;
    this.getMessageById();
  },
  methods: {
    queryReport: function (linkUrl) {
      var _self = this;
      if (linkUrl != undefined && linkUrl.length > 0) {
        _self.$router.push(linkUrl);
      }
    },
    // 根据用户Id获取消息
    getMessageById: function (userId) {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('messageQueueResource/queryById'),
        type: 'get',
        dataType: 'json',
        data: {
          messageId: _self.messageId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          // data.linkUrl = Common.getRootPath() + data.linkUrl;
          if(data.errorCode != 0){
            Notify.error('提示', data.errorMessage, false);
            return;
          }
          _self.message = data.data;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
  },
};
</script>

<style scoped>
.message-body {
  background-color: white;
  padding: 10px 20px;
}
.user-text {
  font-weight: bold;
}
.message-time {
  color: #887;
}
.message-box {
  border: 1px #ccc solid;
}
.message-field {
  text-align: right;
}
.img-publish {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px #ffffff solid;
}
.title {
  font-size: 1.1em;
  font-weight: bold;
}
</style>