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 } 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'
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) {
        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', () => {
              console.log(popEvent.value )
              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();


      //

    })

    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>
        <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>
    );
  }
});