classroom-instruments/src/views/login/index.tsx

import {
  defineComponent,
  onBeforeUnmount,
  reactive,
  ref,
  onMounted
} from 'vue';
import loginStyles from './images/login_styles.png';
import loginLeft from './images/login-left.png';
import loginRight from './images/loginright.png';
import colLogo from './images/colLogo.png';
import CodeLogin from './components/codeLogin';
import PwdLogin from './components/pwdLogin';
import {
  NTabs,
  NTabPane,
  useDialog,
  NModal,
  NButton,
  NSpace,
  NAlert,
  NImage
} from 'naive-ui';
import styles from './index.module.less';
import ForgotPassword from './components/forgotPassword';
import moveTop from './images/moveTopBg.png';
import dingPng from './images/ding.png';
import closeAble from './images/closeAble.png';
import infoIcon from './images/infoIcon.png';
import { state } from '/src/state';
export default defineComponent({
  name: 'login-page',
  setup() {
    const isForgot = ref(false);
    const NavsValue = ref('pwdLogin');
    const pwdLoginRef = ref();
    const forgotPasswordRef = ref();
    const popEvent = ref();
    const dialog = useDialog();
    const showModalMask = ref(false);
    const checkInstall = async (event: any) => {
      event.preventDefault();
      console.log('checkInstall', event);
      popEvent.value = event;
      console.log('beforeoutcome');
      // const { outcome } = await event.userChoice;
      // console.log(outcome, 'outcome')
      // setTimeout(async function () {
      //   try {
      //     const { outcome } = await event.userChoice;
      //     console.log(outcome, 'outcome')
      //   } catch (e) {
      //     console.log(e)
      //   }

      // }, 2000)

      if (window.matchMedia('(display-mode: standalone)').matches) {
        state.application = window.matchMedia(
          '(display-mode: standalone)'
        ).matches;
        console.log('应用内打开');
      } else {
        console.log(popEvent.value, 'popEvent.value');
        if (popEvent.value) {
          showModalMask.value = true;
          setTimeout(() => {
            const btn = document.querySelector('#submitBtn');
            console.log(btn);
            if (btn) {
              btn.addEventListener('click', () => {
                showModalMask.value = false;
                if (!popEvent.value) {
                  return;
                }
                popEvent.value.prompt();
                popEvent.value.userChoice.then((choiceResult: any) => {
                  if (choiceResult.outcome === 'accepted') {
                    console.log('用户已同意添加到桌面');
                    showModalMask.value = false;
                  } else {
                    console.log('用户已取消添加到桌面');
                    showModalMask.value = false;
                  }
                });
              });
            }
          }, 500);
        }
      }
    };

    window.addEventListener('beforeinstallprompt', checkInstall, {
      once: true
    });

    onBeforeUnmount(() => {
      window.removeEventListener('beforeinstallprompt', checkInstall);
    });

    onMounted(async () => {
      // const relatedApps = await navigator?.getInstalledRelatedApps();
      //
    });
    const downChrome = () => {
      const agent = navigator.userAgent.toLowerCase();
      const isMac = (function () {
        return /macintosh|mac os x/i.test(navigator.userAgent);
      })();
      if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
        window.open(
          'https://appstore.ks3-cn-beijing.ksyuncs.com/ChromeStandaloneSetup32.exe'
        );
      }
      if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
        window.open(
          'https://appstore.ks3-cn-beijing.ksyuncs.com/ChromeStandaloneSetup64.exe'
        );
      }
      if (isMac) {
        window.open(
          'https://appstore.ks3-cn-beijing.ksyuncs.com/googlechrome-mac.dmg'
        );
      }
    };

    return () => (
      <div class={styles['view-account']}>
        <div class={styles['view-account-container']}>
          <img src={loginLeft} class={styles.loginLeft} alt="" />
          <img src={loginRight} class={styles.loginRight} alt="" />
          <div class={styles['stylesWrap']}>
            <img src={loginStyles} alt="" />
          </div>
        </div>
        <div class={styles['view-account-form']}>
          <img class={styles.colLogo} src={colLogo}></img>
          {isForgot.value ? (
            <NTabs
              key="forgotPassword"
              default-value={NavsValue.value}
              class={[styles.loginTabs, styles.loginForgot]}
              ref={forgotPasswordRef}
              justify-content="center">
              <NTabPane name="forgotPassword" tab="重置密码">
                <ForgotPassword
                  onChangType={() => {
                    isForgot.value = false;
                    NavsValue.value = 'pwdLogin';
                    // pwdLoginRef.value.syncBarPosition();
                  }}></ForgotPassword>
              </NTabPane>
            </NTabs>
          ) : (
            <NTabs
              key="pwdLogin"
              ref={pwdLoginRef}
              default-value={NavsValue.value}
              class={[styles.loginTabs]}
              justify-content="center">
              <NTabPane name="pwdLogin" tab="密码登录">
                <PwdLogin
                  onChangType={() => {
                    isForgot.value = true;
                    NavsValue.value = 'forgotPassword';
                    // forgotPasswordRef.value.syncBarPosition();
                  }}></PwdLogin>
              </NTabPane>
              <NTabPane name="codeLogin" tab="短信验证">
                <CodeLogin></CodeLogin>
              </NTabPane>
            </NTabs>
          )}

          <div class={styles.alertWrap}>
            <div class={styles.alertInfo}>
              <NImage
                src={infoIcon}
                class={styles.infoIcon}
                previewDisabled></NImage>
              为了您更好的上课体验，推荐使用Chrome浏览器
            </div>
            <div class={styles.down} onClick={downChrome}>
              立即下载
            </div>
          </div>
        </div>
        <NModal v-model:show={showModalMask.value}>
          {/* <div
            onClick={() => {
              showModalTone.value = false;
            }}>
            <NImage
              src={toneImage}
              previewDisabled
              class={styles.beatImage}></NImage>
          </div> */}
          <div class={styles.downMove}>
            <img src={dingPng} class={styles.dingPng} alt="" />
            <img src={moveTop} class={styles.downMoveBg} alt="" />
            <img
              src={closeAble}
              class={styles.closeAble}
              onClick={() => {
                showModalMask.value = false;
              }}
              alt=""
            />
            <h2>温馨提示</h2>
            <p>
              检测到您尚未安装“音乐数字课堂”应用程序，为了更好的使用体验，是否立即下载？
            </p>
            {/* <NButton>确定</NButton> */}
            <NSpace style={{ padding: '25px 0 0 0' }} justify="center">
              <NButton
                {...{ id: 'submitBtn' }}
                class={styles.submitAppBtn}
                round
                type="primary">
                立即下载
              </NButton>
            </NSpace>
          </div>
        </NModal>
      </div>
    );
  }
});