queenshow/src/pages/share/h5/Promotion.tsx

import Empty from "@/components/Empty";
import { initEditor } from "@/modules/editor";
import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
import { initResource } from "@/modules/resource";
import { cx } from "@linaria/core";
import { isPc } from "@queenjs/utils";
import { defineComponent, provide } from "vue";

export default defineComponent(() => {
  const editor = initEditor();
  initResource();
  const params = new URLSearchParams(location.href.split("?")[1].split("#")[0]);
  const id = params.get("id");
  const isSys = params.get("isSys");
  const isWk = params.get("isWk");

  provide("isPreview", true);

  editor.actions.switchMode("display");

  if (id) {
    if (isWk) {
      editor.actions.initWkDesign(id);
    } else {
      editor.actions.initDesign(id, isSys);
    }

    editor.controls.wxCtrl.setup(window.location.href);

    editor.actions.on("initDesign:success", () => {
      const data = editor.controls.pageCtrl.designData;
      document.title = data.title;
      const shareData = {
        title: data.title,
        link: location.href,
        imgUrl: data.thumbnail || "",
        desc: data.desc,
      };
      editor.controls.wxCtrl.setShareData(shareData);
      editor.controls.wxCtrl.setShare(shareData);

      editor.controls.screenCtrl.applyScreen();
    });
  }
  // fetch("https://restapi.amap.com/v3/ip?key=6f53b2e09f72ad63423b2da6e08b25d7").then(response=>{
  //    return response.json();
  // }).then(data=>{
  //   console.log(data);
  // })
  if (!isPc()) {
    return () => <editor.components.Preview />;
  }

  function getPageH() {
    const rootPage = editor.controls.pageCtrl.rootPage;
    const pageH = rootPage?.layout.size?.[1] || Design_Page_Size[1];
    return editor.helper.designToNaturalSize(pageH, {
      adaptiveH: true,
    });
  }

  return () => {
    const rootPage = editor.controls.pageCtrl.rootPage;
    const isPcDesign = rootPage?.value.useFor == "pc";

    // pc in mobile
    if (isPcDesign && !isPc()) return <Empty />;

    // mobile in pc
    if (!isPcDesign && isPc()) {
      const pegeH = getPageH();
      return (
        <div class="h-100vh flex items-center justify-center">
          <div class="scrollbar !overflow-x-hidden" style={{ height: pegeH }}>
            <editor.components.Preview />
          </div>
        </div>
      );
    }

    // mobile in mobile
    return <editor.components.Preview />;
  };
});