顶部 header 新增 “App Store” 和 “Play Store” 下载按钮

src/views/Layout/modules/Header/index.vue

@@ -43,10 +43,10 @@
               </a-menu>
             </template>
           </a-dropdown>
-          <div class="login-btn" @click="goLogin">
+          <!-- <div class="login-btn" @click="goLogin">
             <span>{{ $t('system["登录"]') }}</span>
-          </div>
-          <div class="download-btn-normal">
+          </div> -->
+          <!-- <div class="download-btn-normal">
             <a-popconfirm placement="bottom" :showCancel="false">
               <template #okButton></template>
               <template #icon><question-circle-outlined style="color: red" /></template>
@@ -64,12 +64,29 @@
                 <span>{{ $t('system["download"]') }}</span>
               </div>
             </a-popconfirm>
-          </div>
-          <div class="download-btn-768">
-            <div class="download-btn" @click="handleDownload">
+          </div> -->
+          <!-- <div class="download-btn-768">
+            <div class="download-btn" @click="handleDownload('apkLinks')">
               <img src="@/public/images/icons/download_icon.png" alt="" />
               <span>{{ $t('system["download"]') }}</span>
             </div>
+          </div> -->
+
+          <div
+            class="store-download-btn"
+            style="margin-right: 10px"
+            @click="handleDownload('appleLink')"
+          >
+            <img
+              src="@/public/images/icons/app_store_icon.png"
+              alt=""
+              class="store-download-btn__icon"
+            />
+            <span>App Store</span>
+          </div>
+          <div class="store-download-btn" @click="handleDownload('googleLink')">
+            <img src="@/public/images/icons/play_store_icon.png" alt="" />
+            <span>Play Store</span>
           </div>
         </div>
       </div>
@@ -174,6 +191,7 @@ import { MenuOutlined, HomeOutlined } from '@ant-design/icons-vue'
 import useSystemStore from '@/stores/useSystemStore'
 import type { ILangs } from '@/stores/useSystemStore'
 import useLinkList from './hooks/useLinkList'
+import { reactive } from 'vue'
 
 // 国际化
 const i18n = useI18n()
@@ -184,6 +202,13 @@ const { localeInfo, localeList, locale } = storeToRefs(systemStore)
 const { textLinkList, textLinkList2, route, router, currentPath, currentId, handleTextLinkClick } =
   useLinkList()
 
+// 下载连接
+const downloadLinks = reactive({
+  apkLinks: '',
+  googleLink: 'https://play.google.com/store/apps/details?id=uni.UNI0358C1D',
+  appleLink: 'https://apps.apple.com/app/vavabuy/id6748591418',
+})
+
 // 语言切换回调
 const onLocaleChange = function (info: ILangs) {
   systemStore.toggleLocale(info)
@@ -211,8 +236,11 @@ const goLogin = function () {
 }
 
 // App 下载
-function handleDownload() {
-  window.open('https://vavabuy.net/vavabuy.apk')
+function handleDownload(key) {
+  if (!key) return
+  let link = downloadLinks[key]
+  if (!link) return
+  window.open(link)
 }
 </script>
 
@@ -304,6 +332,41 @@ function handleDownload() {
   cursor: pointer;
 }
 
+.store-download-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 76px;
+  min-width: 4.75rem;
+  height: 30px;
+  height: 1.875rem;
+  padding: 0 8px;
+  padding: 0 0.5rem;
+  background: #000000;
+  border-radius: 6px;
+  border-radius: 0.375rem;
+  text-align: center;
+  color: #fff;
+  line-height: 30px;
+  line-height: 1.875rem;
+  cursor: pointer;
+
+  img {
+    width: 18px;
+    width: 1.125rem;
+    height: 18px;
+    height: 1.125rem;
+    margin-right: 4px;
+  }
+
+  .store-download-btn__icon {
+    width: 20px;
+    width: 1.25rem;
+    height: 20px;
+    height: 1.25rem;
+  }
+}
+
 .download-btn-768 {
   display: none;
 }