H5/pages/map/model/adDetail.vue

<template>
  <view class="adDetails">
    <view class="adTitle">{{ adDetail.adName }}</view>
    <view class="adTime">{{ adDetail.createTime }}</view>
    <rich-text :nodes="adDetail.description" class="adContent"></rich-text>
    <view v-if="adDetail.jumpType==1&&adDetail.videoUrl" class="adVideo">
      <video :src="adDetail.videoUrl" controls class="video-player"></video>
    </view>
  </view>
</template>
<script>
import { getMapAdDetail_Api } from "@/api/map.js";
export default {
  data() {
    return {
      adDetail: {},
      params: {
        adId: "",
      },
    };
  },
  watch: {
    "adDetail.description": { //富文本图片预览
      handler(newV, oldV) {
        this.$nextTick(() => {
          let imgArr = document.getElementsByTagName("img");
          console.log(111, imgArr);
          if (imgArr) {
            for (let i = 0; i < imgArr.length; i++) {
              imgArr[i].addEventListener("click", (e) => {
                console.log(imgArr[i]);
                uni.previewImage({
                  urls: [imgArr[i].src],
                })
              });
            }
          }
        });
      },
      deep: true,
    },
  },
  mounted() {
    this.params.adId = this.$route.query.mapAdId;
    this.getDetails();
  },
  methods: {
    getDetails() {
      getMapAdDetail_Api(this.params).then((res) => {
        this.adDetail = res;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.adDetails {
  padding: 20rpx;
  .adTitle {
    font-size: 32rpx;
    font-weight: bold;
    padding: 10rpx 20rpx;
  }
  .adTime {
    font-size: 24rpx;
    color: #999;
    padding: 10rpx 20rpx;
  }
  .adContent {
    font-size: 28rpx;
    line-height: 44rpx;
    margin-top: 20rpx;
    display: inline-block;
  }
  .adVideo {
    margin-top: 20rpx;
    .video-player {
      width: 100%;
      height: 400rpx;
    }
  }
}
</style>