usky-web-mobile/src/pages/common/appMessage/nociteDetails.vue

<template>
  <u-navbar :titleStyle="{ color: '#fff' }" :autoBack="true" title="消息详情" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
    <template #left>
      <view class="u-navbar__content__left__item">
        <u-icon name="arrow-left" size="20" color="#fff"></u-icon>
      </view>
    </template>
  </u-navbar>
  <view>
    <view class="content">
      <view class="view-wrap">
        标题: <text class="weight-bold">{{ data?.noticeTitle || '' }}</text>
      </view>
      <view class="view-wrap">
        作者: <text class="uni-body">{{ data?.author || '' }}</text>
      </view>
      <view class="view-wrap">
        发送到: <text class="uni-body">{{ data?.deptId ? proxy.$common.mapping("deptName", "deptId", data.deptId, deptList)  : '' }}</text>
      </view>
      <view class="view-wrap">
        内容: 
        <rich-text :nodes="data?.noticeContent || ''" class="uni-body view-content"></rich-text>
      </view>
      <view class="view-wrap" v-if="data.fileUrl">
          <view v-for="(item, index) in JSON.parse(data.fileUrl)" :key="index" class="fileImg">
            <a :href="item.url" style="color: #333;">
              <image src="/static/images/system/doc.svg" alt="" v-if="item.name.split('.').pop() == 'doc'" />
              <image src="/static/images/system/docx.svg" alt="" v-if="item.name.split('.').pop() == 'docx'" />
              <image src="/static/images/system/pdf.svg" alt="" v-if="item.name.split('.').pop() == 'pdf'" />
              <image src="/static/images/system/ppt.svg" alt="" v-if="item.name.split('.').pop() == 'ppt'" />
              <image src="/static/images/system/pptx.svg" alt="" v-if="item.name.split('.').pop() == 'pptx'" />
              <image src="/static/images/system/xls.svg" alt="" v-if="item.name.split('.').pop() == 'xls'" />
              <image src="/static/images/system/xlsx.svg" alt="" v-if="item.name.split('.').pop() == 'xlsx'" />
              <image src="/static/images/system/zip.svg" alt="" v-if="item.name.split('.').pop() == 'zip'" />
              <span>{{ item.name }}</span>
            </a>
          </view>
        </view>
    </view>
  </view>
</template>
<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { infoOne } from "@/api/common/message.js";
import { listDeptNoAuth } from "@/api/system/user.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const data = ref();//详情数据
const deptList = ref([]);//部门列表
function init(options) {
  listDeptNoAuth().then((res) => {
    deptList.value = res.data;
    infoOne(options.moduleId).then((requset) => {
      data.value = requset.data
    });
  })
}
onLoad((options) => {
  init(options);
});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</script>

<style scoped lang="scss">
.content {
  max-height:calc(100vh - 80px);
  padding:10px;
  overflow: auto;
}

.view-content {
  font-size: 12px;
  padding: 12px 0 0;
  color: #333;
  line-height: 24px;
  font-weight: normal;
}
.view-time {
  margin: 30px 0 10px;
  font-size: 12px;
  float: right;
}
.view-wrap{
  margin-top:10px;
  font-weight: 400;
  padding-bottom:8px;
  border-bottom:4px solid rgba(243,243,243,1);
  .weight-bold{
    font-weight: 600;
  }
  .fileImg{
    height:auto;
    image{
      width:20px;
      height:20px;
      vertical-align: middle;
    }
    span{
      margin-left:10px;
    }
  }
}
.view-wrap:nth-child(1){
  margin-top:0;
}

</style>