konggang-city-miniprogram/pages/notice/notice_deatil.vue

<template>
  <view>
    <artical-deatil :model="model"></artical-deatil>
	<view class="closure-font" v-if="enClosureList.length">
		附件:
	</view>
	<view class="enClosure-box" v-for="(item,index) in enClosureList" :key="item.id">
		<view @click="showEnclosure(item.url)">{{index + 1}}.{{item.name}}</view>
	</view>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
import ArticalDeatil from "../../components/artical-deatil/index";
export default {
  data() {
    return {
      model: {
        title: "",
        way: "",
        time: "",
        artical: "",
        id: "",
      },
	  enClosureList:[],
	  shareUrl:getApp().globalData.shareUrl
    };
  },
  components: {
    ArticalDeatil,
  },
  onLoad(op) {
    this.model.id = op.id;
    this.getNotice();
  },
  methods: {
    getNotice() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=notice&action=info_by_id&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        id: this.model.id,
      };
      //获取文章
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          if (res.data.code === 200) {
            let data = res.data.data;
            this.model.title = data.title;
            this.model.way = data.sponsor;
            let time = this.$options.filters["globalTime"](data.publish_time);
            let timeSecond = this.$options.filters["globalTimeSecond"](
              data.publish_time
            );
            this.model.time = time + " " + timeSecond;
            this.getRich();
			if(data.attach_ids){
				this.getEnclosure(data.attach_ids)
			}
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
	showEnclosure(url){
		uni.showLoading({
			title:'加载中...'
		})
		let urls = this.shareUrl + url;
		uni.downloadFile({
		  url: urls,
		  success: function (res) {
			var filePath = res.tempFilePath;
			uni.openDocument({
			  filePath: filePath,
			  showMenu: true,
			  success: function (res) {
				uni.hideLoading();
			  }
			});
		  }
		});
	},
	getEnclosure(athId){
		let md5Sign = md5(
		  "method=" +"common" +"&timestamp=" + getApp().globalData.globalTimestamp +"&secret=" +getApp().globalData.secret
		);
		let url =
		  getApp().globalData.shareUrl + "api/api.php" +"?method=common&action=attach_ids&timestamp=" +
		  getApp().globalData.globalTimestamp + "&sign=" + md5Sign;
		let postData = {
		  attach_ids: athId,
		};
		//获取文章
		uni.request({
		  url: url,
		  method: "POST",
		  header: {
		    "content-type": "application/x-www-form-urlencoded",
		  },
		  data: postData,
		  success: (res) => {
		    if (res.data.code === 200) {
				this.enClosureList = res.data.data;
		    }
		  },
		  fail: () => {
		    console.log("连接失败");
		  },
		});
	},
    replaceImg(html) {
      let result = html.replace(
        /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
        function (match, capture) {
		  if(capture.includes('http')){
			  return (
				"<img src=" +
				capture +
				' style="max-width:100%;height:auto;display:block;margin:10px auto;"/>'
			  );
		  }else {
			return (
			  "<img src=" +
			  getApp().globalData.shareUrl +
			  capture +
			  ' style="max-width:100%;height:auto;display:block;margin:10px auto;"/>'
			);
		  }	
        }
      );
      return result;
    },
    getRich() {
      uni.request({
        url:getApp().globalData.shareUrl + `content/notice/${Math.floor(this.model.id / 1000)}/${this.model.id}.html`+'?version='+ Math.random(),
        method: "GET",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        success: (res) => {
          if (res.statusCode === 200) {
            this.model.artical = this.replaceImg(res.data);
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
	.closure-font {
		font-size: 28rpx;
		padding-left: 40rpx;
		margin-bottom: 20rpx;
	}
	.enClosure-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
		padding-left: 40rpx;
		color: cornflowerblue;
		cursor: pointer;
		margin-bottom: 20rpx;
	}
</style>