caimei-database-caimei/src/views/Preview/index.vue

<template>
  <video-preview
    v-if="params.type === '2' && fileUrl"
    :url="fileUrl"
    :is-permi="isPermi"
  />
  <pdf-preview v-if="params.type === '3' && fileUrl" :url="fileUrl" :is-permi="isPermi" />
  <image-preview
    v-if="params.type === '1' && form?.waters"
    :urls="form?.waters"
    :is-permi="isPermi"
  />
  <permi-mode v-if="!query.isSp" />
  <!--<iframe frameborder="0" src="http://localhost:8009/login.html" />-->
  <!--<div class="hidden">
    <div>pageHide: {{ pageHide }}</div>
    <div>visibility: {{ visibility }}</div>
    <div>onbeforeLoad: {{ onbeforeLoad }}</div>
  </div>-->
</template>

<script lang="ts" setup>
import { usePermission } from "@/Hooks/usePermission/usePermission";
import { previewData } from "@/api/context/context";
import useStatisticalTime from "@/Hooks/useStatisticalTime";
import { onMounted, computed, onUnmounted, ref, watch } from 'vue';
import { useRoute } from "vue-router";
import { ChangeTabEmit } from "@/types/views/database.type";
import useWeChatShare, { shareOptions, shareParams } from "@/Hooks/useWeChatShare";
import { IPreviewForm } from "@/types/api/context.type";
import { myDecrypt } from "@/util/authStorage";
import useStopWindowContext from "@/Hooks/useStopWindowContext";
import createWebShareCard from "@/Hooks/useCreateWebShareCard";
const { query } = useRoute();

const form = ref<IPreviewForm>({
  waters: [],
  permission: 0,
  productId: "0",
  fileArchiveList: [],
  image: "",
});

//if (!window.localStorage.getItem("pageHide")) {
//  window.localStorage.setItem("pageHide", "2");
//}
//if (!window.localStorage.getItem("visibility")) {
//  window.localStorage.setItem("visibility", "2");
//}
//if (!window.localStorage.getItem("onbeforeLoad")) {
//  window.localStorage.setItem("onbeforeLoad", "2");
//}
//const pageHide = window.localStorage.getItem("pageHide");
//const visibility = window.localStorage.getItem("visibility");
//const onbeforeLoad = window.localStorage.getItem("onbeforeLoad");
const fileUrl = ref<string>();
const { isPermi, PermiMode } = usePermission(form.value?.permission! as number); // 权限hook
const params = computed<shareParams & { url: string }>(
  () =>
    (({
      type: query?.t as ChangeTabEmit,
      userId: query?.uid as string,
      id: query?.id as string,
      spId: query?.spId as string,
      imageUrl: form.value?.image,
      url: query?.url as string,
    } as unknown) as shareParams & { url: string })
);
watch(() => params.value.url, () => {
  fileUrl.value = params.value.url
})
const getPreviewData = async () => {
  const { data } = await previewData({
    userId: (query.uid as string) || "0",
    id: query.id as string,
    type: query.t as ChangeTabEmit,
  });
  const DcreptoList = {
    ...data,
    ...{ waters: myDecrypt(data?.waters as string[]) },
  } as IPreviewForm;
  form.value = DcreptoList;
  fileUrl.value = form.value.waters[0]?.split("?")[0];
  console.log(form.value.waters);
};
const statistical = useStatisticalTime((time) => {
  const t = Math.floor(time / 1000);
  console.log("时长为：", t, Math.floor(time / 1000));
  localStorage.setItem("spentTime", t.toString());
  const f = {
    productArchiveId: params.value.id,
    headUserId: params.value.spId,
    accessClient: "0",
    pagePath: location.href,
    accessDuration: t * 1000,
    pageType: params.value.type === "1" ? "70" : params.value.type === "2" ? "71" : "69",
    pageLabel: "内容库预览",
    userId: params.value.userId || "0",
    productId: form.value?.productId || "0",
    shopId: "" || "0",
    behaviorType: "1",
  };
  fetch(
    `
    ${import.meta.env.VITE_BASE_URL}/user/record/Statistics?accessClient=${
      f.accessClient
    }&userId=${f.userId}&pagePath=${f.pagePath}&productId=${f.productId}&accessDuration=${
      f.accessDuration
    }&pageLabel=${f.pageLabel}&behaviorType=${f.behaviorType}&shopId=${
      f.shopId
    }&pageType=${f.pageType}
    `,
    {
      method: "GET",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      keepalive: true,
    }
  )
    .then((res) => res.json())
    .then(() => {
      console.log("时间推送记录成功");
    });
});
useStopWindowContext(params.value.userId!);
onUnmounted(() => {
  statistical();
});

onMounted(() => {
  const obj = shareOptions.filter(e => e.type === params.value.type)[0]
  if (!params.value.url) {
    getPreviewData();
  }
  useWeChatShare(params.value);
  createWebShareCard({
    title: obj.text,
    description: obj.text,
    image: params.value.imageUrl!,
  });
});
</script>

<style scoped lang="scss">
body {
  user-select: none !important;
}
.hidden {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media print {
  .no-print {
    display: none !important;
  }
}
</style>