xdd-uniapp-new/pages/foodInfomation/foodInfomationDetail.vue

<template>
  <view class="newsDetail">
    <view class="title">{{ articleInfo.title }}</view>
    <view class="list acea-row row-middle">
      <view class="label line1" style="color: #999;">来源:{{articleInfo.author||"未知"}}</view>
      <view class="item">
        <!-- <text class="iconfont icon-shenhezhong"></text> -->
		{{ articleInfo.addTime }}
      </view>
	  <view class="item acea-row row-middle">
			<image :src="webUrl+'/20230304131559277594.png'" class="eye-icon" mode=""></image>
			<text class="see-num-text">{{articleInfo.visit||0}}</text>
	  </view>
    </view>
    <view class="conter" v-html="articleInfo.content"></view>
  </view>
</template>
<style>
	.conter>>>img{
	   display:block;
	   max-width:100% !important;
	 }
	 page{
	 	background: #fff !important;
	 }
</style>
<style scoped lang="less">

	
	.newsDetail .list .label{
		padding: 0;
		max-width: auto !important;
	}
	
	.eye-icon{
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
	
	.zan-icon{
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
	.zan-num-text{
		color: #080F1A;
		font-size: 24rpx;
	}
	.see-num-text{
		color: #080F1A;
		font-size: 24rpx;
	}
	
	.newsDetail .title{
		font-size: 40rpx !important;
		font-weight: bold;
		color: #080F1A !important;
	} 

	
.newsDetail .picTxt {
  width: 6.9*100rpx;
  height: 2*100rpx;
  border-radius: 0.2*100rpx;
  border: 1px solid #e1e1e1;
  position: relative;
  margin: 0.3*100rpx auto 0 auto;
}
.newsDetail .picTxt .pictrue {
  width: 2*100rpx;
  height: 2*100rpx;
}
.newsDetail .picTxt .pictrue image{
  width: 100%;
  height: 100%;
  border-radius: 0.2*100rpx 0 0 0.2*100rpx;
  display: block;
}
.newsDetail .picTxt .text {
  width: 4.6*100rpx;
}
.newsDetail .picTxt .text .name {
  font-size: 0.3*100rpx;
  color: #282828;
}
.newsDetail .picTxt .text .money {
  font-size: 0.24*100rpx;
  margin-top: 0.4*100rpx;
  font-weight: bold;
}
.newsDetail .picTxt .text .money .num {
  font-size: 0.36*100rpx;
}
.newsDetail .picTxt .text .y_money {
  font-size: 0.26*100rpx;
  color: #999;
  text-decoration: line-through;
}
.newsDetail .picTxt .label {
  position: absolute;
  background-color: #303131;
  width: 1.6*100rpx;
  height: 0.5*100rpx;
  right: -0.07*100rpx;
  border-radius: 0.25*100rpx 0 0.06*100rpx 0.25*100rpx;
  text-align: center;
  line-height: 0.5*100rpx;
  bottom: 0.24*100rpx;
}
.newsDetail .picTxt .label .span {
  background-image: linear-gradient(to right, #fff71e 0%, #f9b513 100%);
  background-image: -webkit-linear-gradient(to right, #fff71e 0%, #f9b513 100%);
  background-image: -moz-linear-gradient(to right, #fff71e 0%, #f9b513 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.newsDetail .picTxt .label:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 0.08*100rpx solid #303131;
  border-right: 0.08*100rpx solid transparent;
  top: -0.08*100rpx;
  right: 0;
}
.newsDetail .bnt {
  color: #fff;
  font-size: 0.3*100rpx;
  width: 6.9*100rpx;
  height: 0.9*100rpx;
  border-radius: 0.45*100rpx;
  margin: 0.48*100rpx auto 0 auto;
  text-align: center;
  line-height: 0.9*100rpx;
}
</style>
<script>
import { getArticleDetails } from "@/api/public";
export default {
  name: "FoodInfomationDetail",
  components: {},
  props: {},
  data: function() {
    return {
      articleInfo: {}
    };
  },
  watch: {
    $yroute(to) {
      if (to.name === "NewsDetail") this.articleDetails();
    }
  },
  mounted: function() {
    this.articleDetails();
  },
  methods: {
    updateTitle() {
      // document.title = this.articleInfo.title || this.$yroute.meta.title;
    },
    articleDetails: function() {
      let that = this,
        id = this.$yroute.query.id;
      getArticleDetails(id).then(res => {
        var data = res.data;
		data.content = that.formatRichText(data.content);
		that.articleInfo = data;
        that.updateTitle();
		
		console.log('current path:'+that.$yroute.path);
		
		//动态配置share参数
		that.$set(that, "share", {
								title:that.articleInfo.title,
								path:'/pages/foodInfomation/foodInfomationDetail?id='+that.$yroute.query.id,
								imageUrl:'',
								desc:'',
								content:''
							  });
		
      });
    },
	/**
	 * 处理富文本里的图片宽度自适应
	 * 1.去掉img标签里的style、width、height属性
	 * 2.img标签添加style属性：max-width:100%;height:auto
	 * 3.修改所有style里的width属性为max-width:100%
	 * 4.去掉<br/>标签
	 * @param html
	 * @returns {void|string|*}
	 */
	formatRichText:function(html){
	    let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
	        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
	        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
	        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
	        return match;
	    });
	    newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
	        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
	        return match;
	    });
	    newContent = newContent.replace(/<br[^>]*\/>/gi, '');
	    newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
	    return newContent;
	}
  }
};
</script>