HSW_WX/pages/subPackages/announcement/detail.vue

<template>
  <div class="detail">
    <div class="detail-body">
      <div class="detail-card top-tit-card">
        <div class="left">
          <van-icon
            name="bell"
            style="font-size: 6.4vw; color: #60f"
            custom-class="iconfont"
          />
        </div>
        <div class="right">
          <div class="top">
            {{ title }}
          </div>
          <div class="bottom">
            <span> {{ releaseTime }}</span>
            <span>{{ createUserDept }}</span>
          </div>
        </div>
        <div></div>
      </div>
      <div class="detail-card info" v-html="content"></div>
      <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: 10rpx; color: #0000ff"
        @click="jumpFile(item.url)"
      >
        {{ item.name }}
      </div>
    </div>
    <!--    <div class="white-bottom"></div>-->
  </div>
</template>
  
  <script>
import { getParkNoticeById, updateReadStatus } from "@/js_sdk/api_park_notice";
// import { addUserNotice } from "@/service/api_user_notice";
// import auth from "@/service/auth";
// import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      type: "", // 1 园区 2 物业
      id: "",
      title: "",
      readStatus: "",
      content: null,
      releaseTime: "",
      parkName: "",
      fileUrlList: [],
      imgUrlList: [],
      createUserDept: "",
      reader: {
        // companyId: auth.currUser().id,
        id: "",
      },
    };
  },

  onLoad(option) {
    this.readStatus = option.readStatus;
    this.id = option.id;
    this.reader.id = this.id;
    this.selectById();
    if (this.readStatus === "0") {
      this.getRead();
    }
  },
  methods: {
    getRead() {
      updateReadStatus(this.reader).then((res) => {});
    },
    jumpFile(url) {
      uni.downloadFile({
        url: url, // 网络文档地址
        success: (data) => {
          if (data.statusCode === 200) {
            uni.saveFile({
              tempFilePath: data.tempFilePath, //临时路径
              success: function (res) {
                // 保存路径
                console.log(res);
                setTimeout(() => {
                  //打开文档查看
                  uni.openDocument({
                    filePath: res.savedFilePath,
                    success: function (res) {
                      console.log("res", res);
                    },
                    fail: function (error) {
                      console.log(error);
                      wx.previewImage({
                        current: "", // 当前显示图片的http链接
                        urls: [url], // 需要预览的图片http链接列表
                      });
                    },
                  });
                }, 3000);
              },
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: "失败请重新下载",
          });
        },
      });
    },
    selectById() {
      const _this = this;
      getParkNoticeById({ id: _this.id }).then((res) => {
        const data = res;
        _this.title = data.noticeTitle;
        _this.createUserDept = data.createUserDept;
        // if (
        //   data.content.indexOf("width") !== -1 &&
        //   data.content.indexOf("height") !== -1
        // ) {
        //   _this.content = data.noticeContent
        //     .replace(/width="(\S*)"/, 'width="100%"')
        //     .replace(/height="(\S*)"/, 'height="100%"');
        // }
        let content = data.noticeContent;
        content = content.replaceAll(`<figure class="image">`, "");
        content = content.replaceAll(`</figure>`, "");
        content = content.replaceAll(
          "<img",
          `<img style="max-width:100%;height:auto"`
        );
        this.content = content;
        _this.releaseTime = _this.publishDate;
        if (data.noticeFileId && data.noticeFileId.length > 2) {
          const themeUrlList = [];
          const imgUrlList = [];
          const files = data.noticeFileId;
          console.log("files", files);
          // files.forEach((item) => {
          //   if (item.url) {
          //     const ul = {
          //       name: item.name,
          //       url: item.url,
          //     };
          //     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;
        }
        this.fileUrlList = JSON.parse(data.noticeFileId);
        console.log(this.fileUrlList);
        // 添加用户通知
        // const params = {
        //     userId: auth.currUser().id,
        //     noticeId: _this.id,
        //     type: '1'
        // }
        // addUserNotice(params).then((res) => {
        //
        // })
      });
    },
  },
};
</script>
  
  <style lang="scss" type="text/scss">
.detail {
  box-sizing: border-box;
  background-color: #f2f2f2;
  padding: 20rpx 30rpx 140rpx;
  overflow-y: auto;
  .detail-body {
    .detail-card {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      padding: 20rpx 30rpx;
      border-radius: 10rpx;

      &:first-child {
        margin-bottom: 20rpx;
      }
    }

    .info {
      font-size: 24rpx;
      color: #333333;
      line-height: 1.2;
    }
  }
}
.detail-card {
  img {
    width: 80vw !important;
  }
}
</style>
  <style scoped lang="scss">
.detail-card {
  position: relative;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border: 1px solid rgba(242, 242, 242, 1);
  background: rgba(255, 255, 255, 1);
  .card-body {
    padding: 10px 30px;
  }
}
</style>