colexiu-mobile/src/components/TheFooterApp/index.tsx

import { defineComponent, onMounted, ref } from "vue";
import styles from "./index.module.less";
import IconLogo1 from "../../assets/logo-1.png";
import { Button, Icon, Popup } from "vant";
import { useToggle } from "@vant/use";
import { useRoute } from "vue-router";
import { isDingTalk, isWeChat } from "@/helpers/utils";
import wx_bg from "@/assets/wx_bg.png";

export const [footerAppShow, toggleFooterApp] = useToggle(false);
export default defineComponent({
  name: "TheFooterApp",
  setup() {
    const route = useRoute();
    const firstShow = () => {
      if (route.name == "index") {
        toggleFooterApp(true);
      }
    };
    onMounted(() => {
      firstShow();
    });
    const btns = [
      {
        title: "酷乐秀",
        des: "学习海量优质乐谱",
        tag: "推荐",
        type: "ColexiuStudent",
      },
      {
        title: "酷乐秀学院",
        des: "我要提供优质内容",
        tag: "",
        type: "ColexiuTeacher",
      },
    ];
    const showTip = ref(false);
    const onTansfer = (type: any) => {
      if (isWeChat() || isDingTalk()) {
        showTip.value = true;
        return;
      }

      // ColexiuStudent 唤起学生端
      // ColexiuTeacher 唤起老师端
      const query = {
        url: "",
        action: "h5", // app, h5
        pageTag: 1, // 页面标识
      };
      try {
        const iosStr = encodeURIComponent(JSON.stringify(query));
        if (type == "ColexiuStudent") {
          if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            window.location.href = `ColexiuStudent://linkUrl=${iosStr}`;
          } else if (/(Android)/i.test(navigator.userAgent)) {
            window.location.href = `colexiustudent://html:8888/SplashActivity?url=${iosStr}`;
          }
        } else {
          if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            window.location.href = `ColexiuTeacher://linkUrl=${iosStr}`;
          } else if (/(Android)/i.test(navigator.userAgent)) {
            window.location.href = `colexiuteacher://html:8888/SplashActivity?url=${iosStr}`;
          }
        }
      } catch (error) {}
    };
    return () => (
      <>
        {showTip.value && (
          <div class={styles.wx_bg}>
            <img src={wx_bg} />
          </div>
        )}
        <div class={styles.theFooterApp} onClick={() => toggleFooterApp(true)}>
          <img class={styles.img} src={IconLogo1} />
          <span>打开APP看海量热门乐谱</span>
        </div>

        <Popup position="bottom" round v-model:show={footerAppShow.value}>
          <div class={styles.appContent}>
            <div class={styles.top}>
              <span>打开方式</span>
              <div class={styles.des} onClick={() => toggleFooterApp(false)}>
                <span>继续使用浏览器</span>
                <Icon name="play" size={10} />
              </div>
            </div>

            <div class={styles.content}>
              {btns.map((n) => (
                <div class={styles.item}>
                  <img class={styles.itemLogo} src={IconLogo1} alt="" />
                  <div class={styles.description}>
                    <div class={styles.title}>
                      {n.title}
                      {n.tag && <span class={styles.tag}>{n.tag}</span>}
                    </div>
                    <div class={styles.des}>{n.des}</div>
                  </div>
                  <Button
                    round
                    type="primary"
                    onClick={() => onTansfer(n.type)}
                  >
                    打开
                  </Button>
                </div>
              ))}
            </div>
          </div>
        </Popup>
      </>
    );
  },
});