浏览代码

2025年06月06日:增加 “App 下载” 按钮

yankun 1 月之前
父节点
当前提交
e2d48f720f

+ 1 - 0
src/locale/lang/en.ts

@@ -30,6 +30,7 @@ export default {
     "Lawrence": "Lawrence",
     "Anna": "Anna",
     "John": "John",
+    download: 'Download',
     updateTimeTxt: 'Updated on {updateTime}',
     companyName: 'Guangzhou Wawamai Trading Co., Ltd.',
     addressLabel: 'Address',

+ 1 - 0
src/locale/lang/zh.ts

@@ -30,6 +30,7 @@ export default {
     "Lawrence": "劳伦斯",
     "Anna": "安娜",
     "John": "约翰",
+    download: '下载 App',
     updateTimeTxt: '更新于 {updateTime}',
     companyName: '广州哇哇买商贸有限公司',
     addressLabel: '地址',

二进制
src/public/images/download_qrcode.png


二进制
src/public/images/icons/download_icon.png


+ 8 - 0
src/views/Layout/modules/Header/css/header@768.less

@@ -11,4 +11,12 @@
       display: block;
     }
   }
+
+  .download-btn-normal {
+    display: none;
+  }
+
+  .download-btn-768 {
+    display: block;
+  }
 }

+ 63 - 0
src/views/Layout/modules/Header/index.vue

@@ -46,6 +46,31 @@
           <div class="login-btn" @click="goLogin">
             <span>{{ $t('system["登录"]') }}</span>
           </div>
+          <div class="download-btn-normal">
+            <a-popconfirm :showCancel="false">
+              <template #okButton></template>
+              <template #icon><question-circle-outlined style="color: red" /></template>
+              <template #title>
+                <div style="display: flex; flex-direction: column; align-items: center">
+                  <img
+                    src="@/public/images/download_qrcode.png"
+                    style="width: 10rem; height: 10rem"
+                  />
+                  <span>VavaBuy App</span>
+                </div>
+              </template>
+              <div class="download-btn">
+                <img src="@/public/images/icons/download_icon.png" alt="" />
+                <span>{{ $t('system["download"]') }}</span>
+              </div>
+            </a-popconfirm>
+          </div>
+          <div class="download-btn-768">
+            <div class="download-btn" @click="handleDownload">
+              <img src="@/public/images/icons/download_icon.png" alt="" />
+              <span>{{ $t('system["download"]') }}</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -181,6 +206,11 @@ const goHome = function () {
 const goLogin = function () {
   window.open('https://vavabuy.net/#/pages/login/login', '__blank')
 }
+
+// App 下载
+function handleDownload() {
+  window.open('https://vavabuy.net/vavabuy.apk')
+}
 </script>
 
 
@@ -271,6 +301,39 @@ const goLogin = function () {
   cursor: pointer;
 }
 
+.download-btn-768 {
+  display: none;
+}
+
+.download-btn-normal {
+  display: block;
+}
+
+.download-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  height: 30px;
+  height: 1.875rem;
+  margin-left: 16px;
+  margin-left: 1rem;
+  padding: 0 8px;
+  background: #fff;
+  border: 1px solid #555;
+  border-radius: 6px;
+  border-radius: 0.375rem;
+  text-align: center;
+  cursor: pointer;
+
+  img {
+    width: 20px;
+    width: 1.25rem;
+    margin-right: 8px;
+    margin-right: 0.5rem;
+  }
+}
+
 .text-link__list {
   display: flex;
   align-content: center;