试试能否判断下载过app

1

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.vp61cl2k08"
+    "revision": "0.rt6u0crdvbg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/App.tsx

@@ -81,21 +81,7 @@ export default defineComponent({
     const submitCallback = () => {
       window.open('https://www.google.cn/intl/zh-CN/chrome/');
     };
-    const checkInstall = (event: any) => {
-      console.log('checkInstall')
-      setTimeout(function () {
-        event.prompt()
-        event.userChoice //判断用户是否安装
-          .then(function (e: any) {
-            console.log('判断安装', e)
-          })
-      }, 2000)
-    }
-    window.addEventListener('beforeinstallprompt', checkInstall, { once: true })
 
-    onBeforeUnmount(() => {
-      window.removeEventListener('beforeinstallprompt', checkInstall)
-    })
     return () => (
       <>
         <NConfigProvider

src/views/home/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
+import { defineComponent, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import {
   NImage,
@@ -347,6 +347,8 @@ export default defineComponent({
         forms.showGuide = true;
       }, 500);
     };
+
+
     return () => (
       <div class={styles.homeWrap}>
         <div class={styles.homeInfoLeft}>
@@ -766,6 +768,8 @@ export default defineComponent({
           </div>
         </NModal>
 
+
+
         {forms.showGuide ? <HomeGuide></HomeGuide> : null}
       </div>
     );

src/views/login/index.module.less

@@ -24,14 +24,17 @@
     justify-content: center;
     align-items: center;
     height: 100%;
+
     .stylesWrap {
       margin-top: 64px;
       width: 955px;
+
       img {
         width: 955px;
         // height: 100%;
       }
     }
+
     .loginLeft {
       left: 0;
       top: 0;
@@ -39,6 +42,7 @@
       height: 139px;
       position: absolute;
     }
+
     .loginRight {
       right: 0;
       bottom: 0;
@@ -53,11 +57,13 @@
     min-height: 100%;
     background-color: #fff;
     padding: 60px;
+
     .colLogo {
       width: 232px;
       height: 79px;
       // margin-bottom: 110px;
     }
+
     .view-account-form-wrap {
       margin-top: 60px;
       position: relative;
@@ -66,6 +72,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+
       .prefixIcon {
         width: 22px;
         height: 22px;
@@ -98,6 +105,7 @@
         }
       }
     }
+
     .submitBtm {
       width: 480px;
       margin-top: 20px;
@@ -110,6 +118,7 @@
       line-height: 62px;
       text-align: center;
     }
+
     .forgetBtm {
       height: 28px;
       font-size: 20px;
@@ -117,12 +126,14 @@
       color: #aaaaaa;
       line-height: 28px;
     }
+
     .sendInput {
       :global {
         .n-input-wrapper {
           padding-right: 0;
         }
       }
+
       .sendMsg {
         width: 128px;
         height: 64px;
@@ -153,47 +164,54 @@
     .default-color {
       color: #131415;
       font-size: 18px;
+
       .ant-checkbox-wrapper {
         color: #515a6e;
       }
     }
+
     .loginTabs.loginForgot {
       margin-top: 40px;
     }
+
     .loginTabs {
       margin-top: 80px;
+
       :global {
         .n-tabs-tab-pad {
           width: 80px;
         }
+
         .n-tabs-tab__label {
           font-size: 24px;
           position: relative;
           z-index: 100;
           color: #8b8d98;
         }
+
         .n-tabs-tab--active {
           .n-tabs-tab__label {
             color: #131415;
             font-weight: 600;
           }
         }
+
         .n-tabs-bar {
           width: 96px;
           height: 10px;
           bottom: 8px;
           z-index: 0;
-          background: linear-gradient(
-            90deg,
-            #77bbff 0%,
-            rgba(163, 231, 255, 0.22) 100%
-          );
+          background: linear-gradient(90deg,
+              #77bbff 0%,
+              rgba(163, 231, 255, 0.22) 100%);
         }
+
         .n-input {
           border-radius: 8px;
           width: 480px;
           font-size: 20px;
         }
+
         .n-input__input-el {
           height: 64px;
           line-height: 64px;
@@ -202,3 +220,27 @@
     }
   }
 }
+
+
+.showModalTone {
+  width: 500px;
+
+  .studentRemove {
+    padding: 32px 40px 46px;
+
+    p {
+      font-size: 18px;
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .submitAppBtn {
+    width: 140px;
+  }
+}

src/views/login/index.tsx

@@ -1,11 +1,11 @@
-import { defineComponent, reactive, ref } from 'vue';
+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 } from 'naive-ui';
+import { NTabs, NTabPane, useDialog, NModal, NButton, NSpace } from 'naive-ui';
 import styles from './index.module.less';
 import ForgotPassword from './components/forgotPassword';
 export default defineComponent({
@@ -15,6 +15,43 @@ export default defineComponent({
     const NavsValue = ref('pwdLogin');
     const pwdLoginRef = ref();
     const forgotPasswordRef = ref();
+    const popEvent = ref()
+    const dialog = useDialog();
+    const showModalMask = ref()
+    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)
+
+    }
+
+
+    window.addEventListener('beforeinstallprompt', checkInstall, { once: true })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('beforeinstallprompt', checkInstall)
+    })
+
+    onMounted(async () => {
+      const relatedApps = await navigator.getInstalledRelatedApps();
+      console.log(relatedApps,'navigator.getInstalledRelatedApps()')
+
+      //     showModalMask.value = true;
+
+    })
+
     return () => (
       <div class={styles['view-account']}>
         <div class={styles['view-account-container']}>
@@ -63,6 +100,35 @@ export default defineComponent({
             </NTabs>
           )}
         </div>
+        <NModal
+          v-model:show={showModalMask.value}
+          class={['modalTitle background', styles.showModalTone]}
+          preset="card"
+          title={'提示'}>
+          {/* <div
+            onClick={() => {
+              showModalTone.value = false;
+            }}>
+            <NImage
+              src={toneImage}
+              previewDisabled
+              class={styles.beatImage}></NImage>
+          </div> */}
+          <div class={styles.studentRemove}>
+            <p>检测到您尚未从音乐数字课堂应用程序打开</p>
+            {/* <NButton>确定</NButton> */}
+            <NSpace style={{ padding: '20px 0 0 0' }} justify="center">
+          <NButton
+            class={styles.submitAppBtn}
+            round
+            type="primary"
+            // onClick={() => onSubmit()}
+            >
+            确定
+          </NButton>
+        </NSpace>
+          </div>
+        </NModal>
       </div>
     );
   }

vite.config.ts

@@ -82,6 +82,12 @@ export default defineConfig({
             type: 'image/png',
             purpose: 'any maskable'
           }
+        ],
+        related_applications: [
+          {
+            platform: 'webapp',
+            url: 'https://test.lexiaoya.cn'
+          }
         ]
       },