fangliaoxiaochengxv/subPages/accompanyingCamp/accompanyingCampDetail.vue

<template>
  <view>
    <view class="shopping-wrapper">
      <view class="list-item">
        <view class="list-item-title">
          {{ item.name }}
        </view>
        <view class="list-item-read mt10 display-flex-between">
          <view class="display-flex">
            <image :src="shop_logo" class="list-item-read-img mr8" mode="aspectFit"></image>
            <view class="list-item-read-text">
              {{shopName}}
            </view>
          </view>
          <view class="display-flex">
            <view>
              <u-icon
                  size="14"
                  name="eye"
              ></u-icon>
            </view>
             <view class="list-item-read-text2 ml8">
               {{ item.num_read }}
             </view>
          </view>
        </view>
        <u-divider ></u-divider>
        <view class="list-item-remark ">
          {{ item.remark }}
        </view>
      </view>
      <view class="list-item mt10">
        <view class="list-item-content ">
          <u-parse :content="item.content" :tagStyle="contentStyle"></u-parse>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import {getNewsRead} from "@/common/api/news";

export default {
  data() {
    return {
      item: {},
      itemId: 0,
      shopName: '',
      shop_logo: '',
      contentStyle:{
        p: "font-size:24rpx; background-color: #FFFFFF;",
        span: "font-size: 24rpx; background-color: #FFFFFF;",
        text:"font-size: 24rpx; background-color: #FFFFFF;"
      }
    };
  },
  created() {
    const configs = uni.getStorageSync("configs");
    if (configs) {
      console.log(configs)

      this.shopName = configs.shop_name
      this.shop_logo = configs.shop_logo
    }

  },
  onLoad(options) {
    console.log(options)
    this.itemId = options.id
    this.getData(options.id)
  },
  onShow() {
    this.getData(this.itemId)
  },
  methods: {
    setContent: function () {
      if (this.item.content) {
        this.item.content = this.item.content.replace(/\/apihttps:/g, 'https:');
        // 使用正则表达式匹配和修改 img 标签的 style 属性
        this.item.content = this.item.content.replace(/<img([^>]*)>/gi, (match, attributes) => {
          // 检查是否已经存在 style 属性
          if (attributes.includes('style')) {
            // 如果存在 style 属性，添加 width: 100%;
            return match.replace(/style="([^"]*)"/i, (styleMatch, styleContent) => {
              if (!styleContent.includes('width: 100%')) {
                return `style="${styleContent}; width: 100%;"`;
              }
              return styleMatch;
            });
          } else {
            // 如果不存在 style 属性，添加 style="width: 100%;"
            return match.replace(/<img/i, '<img style="width: 100%;"');
          }
        });
      }
    }, getData(id) {
      getNewsRead(
          {
            "id": id,
          }).then(({data}) => {
        if (data) {
          this.item = data
          this.setContent();
        }
      })
    },
  }
}
</script>

<style lang="scss">
.shopping-wrapper {
  width: calc(100% - 40rpx);
  margin: 20rpx auto 0rpx;
  padding: 0rpx 20rpx 60rpx;

  .list-item {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: calc(100% - 60rpx);
    padding:30rpx;
    &-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    &-read{
      &-img{
        width: 36rpx;
        height: 36rpx;
      }
      &-text{
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      &-text2{
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #666666;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
    &-remark{
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
      line-height: 40rpx;
      text-align: justify;
      font-style: normal;
      text-transform: none;
    }
  }
  .list-item-content{
    background-color: #FFFFFF;
  }

}
</style>