product_wx/pages/subPackages/propertyNotice/detail.vue

<template>
    <div class="detailBody">
      <div class="detailBox">
        <div class="detailTitle">{{title}}</div>
        <div class="detailTime">{{releaseTime}}</div>
<!--        <div class="noticeTitle">这是通知内容</div>-->
        <!-- 这里用v-html-->
        <div class="noticeInfo" v-html="content"></div>
        <div class="file">
          附件：
          <div style="width: 100%;height: 100%" class="img-list" v-if="imgUrlList.length>0">
            <img style="width: 100%;height: 100%" v-for="item in imgUrlList" :src="item.url" alt="" />
          </div>
          <div v-for="item in fileUrlList" style=" font-size: 16px; margin: 10px;color: #0000FF" @click="jumpFile(item)">
            {{item.name}}
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { userNoticeAdd,getUserLocalStorageInfo,getParkNoticeById,getPropertyNoticeById } from "@/js_sdk/http";
export default {
  name: "detail",
  data(){
    return{
      getUserLocalStorageInfo: getUserLocalStorageInfo(),
      type:'',
      id:'',
      title:'',
      releaseTime:'',
      content:'',
      imgUrlList:[],
      fileUrlList:[]

    }
  },
  onLoad({type}){
    // console.log(JSON.parse(type))
    const item = JSON.parse(type)
    this.type = item.type
    this.id = item.id
    if(item.readStatus === '1'){
      userNoticeAdd({
        noticeId:item.id,
        userId:this.getUserLocalStorageInfo.userId,
        type:item.type
        }).then(res=>{

      })
    }
  },
  mounted(){
    this.selectById()
  },
  methods:{
    jumpFile(item) {
      console.log(window.location.href)
      console.log(window.location.href.split('#')[0])
      wx.miniProgram.navigateTo({ url: '/pages/file/download?callBackUrl=' + encodeURIComponent(window.location.href.split('#')[0]) +
            '&url=' + item.url })
    },
    selectById() {
      const _this = this
      if (_this.type === '1') {
        getParkNoticeById({ id: _this.id }).then((res) => {
          const data = res.data
          _this.title = data.title
          if (data.content.indexOf('src=') !== -1) {
            data.content = data.content.replace('server', 'smartParkH5Server')
          }
          if (data.content.indexOf('width') !== -1 && data.content.indexOf('height') !== -1) {
            data.content = data.content.replace(/width="(\S*)"/, 'width="100%"').replace(/height="(\S*)"/, 'height="100%"')
          }
          _this.content = data.content
          _this.releaseTime = _this.$common.transServDate(data.releaseTime)
          if (data.fileUrl && data.fileUrl.length > 2) {
            const themeUrlList = []
            const imgUrlList = []
            const files = JSON.parse(data.fileUrl)
            files.forEach(item => {
              if (item.url) {
                const ul = {
                  name: item.name,
                  url: item.url.replace('server', 'smartParkH5Server')
                }
                if (item.name.indexOf('png') > -1 || item.name.indexOf('jpg') > -1 || item.name.indexOf('jpeg') > -1) {
                  imgUrlList.push(ul)
                } else {
                  themeUrlList.push(ul)
                }
              }
            })
            if (imgUrlList.length > 0) {
              _this.imgUrlList = imgUrlList
            }
            _this.fileUrlList = themeUrlList
          }
        })
      } else {
        getPropertyNoticeById({ id: _this.id }).then((res) => {
          const data = res.data
          _this.title = data.title

          if (data.content.indexOf('src=') !== -1) {
            data.content = data.content.replace('server', 'smartParkH5Server').replaceAll('class="wscnph"', 'class="wscnph" width="100%"')
          }
          if (data.content.indexOf('width') !== -1 && data.content.indexOf('height') !== -1) {
            data.content = data.content.replace(/width="(\S*)"/, 'width="100%"').replace(/height="(\S*)"/, 'height="100%"')
          }
          _this.content = data.content
          _this.releaseTime = _this.$common.transServDate(data.releaseTime)
          if (data.fileUrl && data.fileUrl.length > 2) {
            const themeUrlList = []
            const imgUrlList = []
            const files = JSON.parse(data.fileUrl)
            files.forEach(item => {
              if (item.url) {
                const ul = {
                  name: item.name,
                  url: item.url.replace('server', 'smartParkH5Server')
                }
                if (item.name.indexOf('png') > -1 || item.name.indexOf('jpg') > -1 || item.name.indexOf('jpeg') > -1) {
                  imgUrlList.push(ul)
                } else {
                  themeUrlList.push(ul)
                }
              }
            })
            if (imgUrlList.length > 0) {
              _this.imgUrlList = imgUrlList
            }
            _this.fileUrlList = themeUrlList
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
    .detailBody{
      .detailBox{
        margin-top: 24rpx;
        background: white;
        width: 100%;
        height: 1424rpx;
        padding: 32rpx;
        box-sizing: border-box;
        .detailTitle{
          font-size: 32rpx;
          color: rgba(34, 34, 34, 1);
        }
        .detailTime{
          font-size: 28rpx;
          color: rgba(136, 136, 136, 1);
          padding: 16rpx 0 24rpx 0;
          border-bottom: 1px solid rgba(230, 230, 230, 1);
        }
        .noticeTitle{
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
          padding: 28rpx 0;
        }
        .noticeInfo{
          line-height: 38rpx;
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
        }
        .file{
          padding: 32rpx 0;
          font-size: 28rpx;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
</style>