raiwechat_link_h5/src/views/cygx/internalDetials.vue

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { inrernalApi } from "@/api/cygx/api.js";
import dlg from "./dlg.vue";
import { Icon, Dialog, Toast } from "vant";
const VanDialog = Dialog.Component;
// 路由
const route = useRoute();

// 免责声明弹框
const showTips = ref(false);

// 数据的初始
const reportDetail = ref({});

// 文字的ID
const reportId = ref(0);

const isBinding = ref(true);

const disclaimers = ref("");
// 获取数据
const reportSelectionDetail = async () => {
  const res = await inrernalApi.getProductInteriorDetail({
    ProductInteriorId: reportId.value,
  });
  if (res.Ret === 200) {
    reportDetail.value = res.Data.Detail;
    document.title = reportDetail.value.ColumnName;
    disclaimers.value = res.Data.Disclaimers;
  }
};

//  获取标签
const addLinkClickListeners = () => {
  // 获取所有的A标签
  const linkElements = document.querySelectorAll("a");
  linkElements.forEach((linkElement) => {
    linkElement.addEventListener("click", handleLinkClick);
  });
  // 获取所有的img标签
  const imageElements = document.querySelectorAll("img");
  imageElements.forEach((imageElement) => {
    imageElement.addEventListener("click", handleImageClick);
  });
};
let showDlg = ref(false);
let showLink = ref({});
// 处理a标签的点击事件
const handleLinkClick = (event) => {
  event.preventDefault();
  const linkHref = event.target.innerText;
  if (!linkHref) return;

  const number = linkHref.match(/\d+$/)[0];
  const routerToItem = reportDetail.value.BodySlice.find((item) => number == item.SourceId);
  switch (routerToItem.Type) {
    case 2:
      wx.miniProgram.navigateTo({
        url: "/pageMy/reportDetail/reportDetail?id=" + routerToItem.SourceId,
      });
      break;
    case 3:
      wx.miniProgram.navigateTo({
        url: "/activityPages/activityDetail/activityDetail?id=" + routerToItem.SourceId,
      });
      break;
    case 4:
      wx.miniProgram.navigateTo({
        url: "/reportPages/IndustryReport/IndustryReport?id=" + routerToItem.SourceId,
      });
      break;
    case 5:
      showDlg.value = true;
      showLink.value = routerToItem;
      console.log(showLink.value);
      voiceHistory();
      break;
    default:
      "";
  }
};

const pleaseGoLogin = () => {
  Dialog.alert({
    message: "即将前往登录页面，请确认是否继续",
    showCancelButton: true,
    confirmButtonColor: "#3385ff",
  }).then((res) => {
    if (res == "confirm") {
      wx.miniProgram.navigateTo({
        url: "/pageMy/login/login",
      });
    }
  });
};

// 记录视频的点击
const voiceHistory = async () => {
  const res = await inrernalApi.reportVoiceHistoryAdd({
    ActivityId: showLink.value.ActivityVideo.ActivityId,
    PlaySeconds: +showLink.value.ActivityVideo.VideoDuration,
    PageRouter: "产品内测",
  });
};

// 处理img标签的点击事件
const handleImageClick = (event) => {
  const imgArray = [];
  const srcTag = event.target.getAttribute("src");

  if (srcTag) {
    const reportImages = document.querySelectorAll("img");
    reportImages.forEach((image) => {
      const itemSrc = image.getAttribute("src");
      imgArray.push(itemSrc);
    });

    wx.previewImage({ current: srcTag, urls: imgArray });
  }
};

// 关闭弹框
const onClickHide = () => {
  showDlg.value = false;
};

// 页面加载渲染
onMounted(async () => {
  if (route.query.id) {
    isBinding.value = route.query.isBinding == "true" ? true : false;
    let access_token = route.query.token || "";
    localStorage.setItem("access_token", access_token);
    reportId.value = +route.query.id;
    await reportSelectionDetail();
    addLinkClickListeners();
  }
});
</script>

<template>
  <div class="cygx_internal-detials">
    <div class="report-content-title">{{ reportDetail.Title }}</div>
    <div class="author-time">
      <span>{{ reportDetail.Department }}</span>
      <span>{{ reportDetail.PublishTime }}</span>
    </div>
    <!-- <div class="content-statement">
      <span>注：请务必阅读</span>
      <span class="statement" @click="showTips = true">免责声明 </span>
    </div> -->
    <div id="report-content" class="content-abstract">摘要:{{ reportDetail.Abstract }}</div>
    <template v-if="isBinding">
      <div v-html="reportDetail.Body"></div>
      <div class="statement-content-box">
        <p>免责声明</p>
        本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会因接收人/接收机构收到本报告而将其视为客户。本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。在任何情况下，本公司不对客户/接收人/接收机构因使用报告中内容所引致的一切损失负责任，客户/接收人/接收机构需自行承担全部风险。
      </div>
    </template>
    <template v-else>
      <div v-if="reportDetail.Body" v-html="reportDetail.Body.slice(0, 200)"></div>
      <div class="please-login" @click="pleaseGoLogin">请登录后查看更多内容</div>
    </template>
    <dlg :showTips="showTips" type="产品内测" :disclaimers="disclaimers" @hideDlg="showTips = false" />
    <van-dialog v-model:show="showDlg" closeOnClickOverlay :show-confirm-button="false" @cancel="onClickHide">
      <view class="content-dialog">
        <div class="close">
          <Icon name="cross" color="#333" @click="onClickHide" />
        </div>
        <video width="320" height="200" :src="showLink.ActivityVideo.VideoUrl" controls></video>
      </view>
    </van-dialog>
  </div>
</template>

<style lang="scss">
.cygx_internal-detials {
  .please-login {
    margin: 50px auto 150px;
    width: 556px;
    height: 64px;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    background-color: #376cbb;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
  }
  padding: 30px 34px;
  color: #333;
  font-size: 28px;
  .author-time {
    display: flex;
    justify-content: space-between;
    line-height: 39px;
    margin: 25px 0 35px;
  }
  .content-statement {
    display: flex;
    color: #707070;
    .statement {
      margin-left: 10px;
      color: #3385ff;
    }
  }
  .report-content-title {
    font-weight: 500;
    font-size: 36px;
    line-height: 50px;
    color: #333333;
  }
  .content-abstract {
    position: relative;
    margin: 30px 0 20px;
    text-indent: 0.5em;
    line-height: 50px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #ececec;
    &::before {
      content: "";
      width: 4px;
      height: 28px;
      position: absolute;
      top: 11px;
      left: 0;
      background-color: #3385ff;
    }
  }
  .nodata-tip {
    color: #999;
    font-size: 30px;
  }
  word-break: break-all;
  p,
  span {
    font-size: 32px !important;
    line-height: 1.6 !important;
  }
  p {
    background-color: rgba(255, 255, 255, 0) !important;
  }
  img {
    width: 100% !important;
  }
  a {
    color: #3385ff;
  }
  iframe {
    width: 100% !important;
  }
  table {
    border-collapse: collapse;
    width: 100% !important;
    margin-left: 0 !important;
  }
  tr td,
  th {
    border: 1px solid #333;
  }
  pre {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    outline: none;
    border: 0;
    white-space: pre-wrap;
    word-break: normal;
  }
  .content-dialog {
    position: relative;
    font-size: 32px;
    color: #666;
    .close {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      height: 60px;
      padding: 20px 20px 0 20px;
      .van-icon-cross {
        float: right;
      }
    }
  }
  .statement-content-box {
    width: calc(100% + 100px);
    margin-left: -50px;
    padding: 40px 50px 50px;
    color: #666;
    background-color: #f3f5f9;
    p {
      font-weight: 500;
      font-size: 34px;
      line-height: 48px;
    }
  }
}
</style>