下载页

src/pages/download/Index.vue

@@ -1,5 +1,11 @@
 <template>
   <div id="download" class="app">
+    <van-overlay :show="show" class-name="overlay">
+      <div class="wrapper text">
+        <div class="top"></div>
+        请点击右上角选择“浏览器中打开”
+      </div>
+    </van-overlay>
     <img src="../../assets/image/down.jpg" alt="" />
     <div class="button">
       <van-button
@@ -7,6 +13,7 @@
         style="border-color: #f51919; background-color: #f51919"
         round
         hairline
+        @click="down"
         block
         >下载</van-button
       >
@@ -15,8 +22,9 @@
 </template>
 
 <script>
-import { Button as vanButton } from "vant";
+import { Button as vanButton, Overlay as vanOverlay } from "vant";
 import "vant/lib/button/style";
+import "vant/lib/overlay/style";
 
 export default {
   name: "app",
@@ -24,21 +32,32 @@ export default {
     return {
       isAndroid: true,
       isWindows: false,
-      isIphone: false
+      isIphone: false,
+      show: false
     };
   },
-  methods: {},
+  methods: {
+    down() {
+      window.location.href =
+        "https://zhihui-dangjian.oss-cn-chengdu.aliyuncs.com/package/cmpb.apk";
+    }
+  },
   mounted() {
-    const sys = window.navigator.userAgent;
-    this.isAndroid = /Android/g.test(sys);
-    this.isWindows = /Windows/g.test(sys);
-    if (/iPhone/g.test(sys)) {
+    const sys = window.navigator.userAgent.toLowerCase();
+    this.isAndroid = /android/g.test(sys);
+    this.isWindows = /windows/g.test(sys);
+    var isWeixin = sys.indexOf("micromessenger") != -1;
+    if (isWeixin) {
+      this.show = true;
+      return;
+    }
+    if (/iphone/g.test(sys)) {
       window.location.href =
         "itms-apps://itunes.apple.com/app/id1563693329?action=write-review";
     }
   },
   beforeDestroy: function() {},
-  components: { vanButton }
+  components: { vanButton, vanOverlay }
 };
 </script>
 <style lang="scss">
@@ -53,4 +72,31 @@ export default {
     background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
   }
 }
+.overlay {
+  background-color: rgba(0, 0, 0, 0);
+}
+.text {
+  width: 9.5em;
+  float: right;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  border-radius: 10px;
+  margin: 1em;
+  padding: 10px;
+  .top {
+    transform: rotate(45deg);
+    -ms-transform: rotate(45deg); /* IE 9 */
+    -moz-transform: rotate(45deg); /* Firefox */
+    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
+    -o-transform: rotate(45deg); /* Opera */
+    border: none;
+    border: 5px solid rgba(0, 0, 0, 0);
+    border-top-color: rgba(0, 0, 0, 0.6);
+    border-left-color: rgba(0, 0, 0, 0.6);
+    width: 0;
+    float: right;
+    margin-top: -14px;
+  }
+}
 </style>