提交

public/index.html

@@ -9,11 +9,11 @@
     <script src="//cdn.bootcdn.net/ajax/libs/eruda/2.4.1/eruda.min.js"></script>
     <script>eruda.init();</script>
        <!--导入原生js库-->
-    <script src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
-    <script src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
+    <!-- <script src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
+    <script src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script> -->
     <!--导入cmp.js-->
-    <script src="http://cmp/v/js/cmp-i18n.js"></script>
-    <script src="http://cmp/v/js/cmp.js"></script>
+    <!-- <script src="http://cmp/v/js/cmp-i18n.js"></script>
+    <script src="http://cmp/v/js/cmp.js"></script> -->
     <title>
         <%= htmlWebpackPlugin.options.title %>
     </title>

src/views/ActionSheet.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="actionSheet" >
-    <img :src="url" alt="" @mousedown="md" @mouseup="mu" class="qr" />
+  <div class="actionSheet">
+    <img :src="url" alt="" @click="md" class="qr" />
   </div>
 </template>
 
@@ -12,30 +12,30 @@ export default {
   name: "Applyreal",
   data() {
     return {
-      url: "https://dangjian-web.oss-cn-chengdu.aliyuncs.com/img/qr.png",
+      url: "http://192.168.31.196:8080/qr.png",
+    //   url: "http://djweb.smcic.net/img/qr.png",
+      load:{}
     };
   },
   mounted() {
-      document.title = '车险';
-      console.log(window.cmp.sdk)
+    document.title = "车险";
   },
   computed: {},
   methods: {
     md() {
-        console.log("---")
-    //   sT = Date.now();
-    //   let s = window.setTimeout(() => {
-    //       window.clearInterval(s);
-    //     if (sT === 0) return;
-        this.downimg();
-    //   }, 1000);
-    },
-    mu() {
-        console.log("+++")
-    //   sT = 0;
+      console.log("---");
+      //   sT = Date.now();
+      //   let s = window.setTimeout(() => {
+      //       window.clearInterval(s);
+      //     if (sT === 0) return;
+      // this.downimg();
+      //   }, 1000);
+      this.download({
+        savePath: this.url,
+      });
     },
     downimg() {
-        console.log("长按",window.cmp)
+      console.log("长按", window.cmp);
       window.cmp.dialog.actionSheet(
         [{ key: 1, name: "操作组item1" }],
         "取消",
@@ -47,6 +47,41 @@ export default {
         }
       );
     },
+
+    download(row) {
+      // download
+      this.load[row.savePath] = true;
+      let xhttp,
+        that = this;
+      if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
+      else xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
+      xhttp.responseType = "blob";
+      xhttp.open("GET", row.savePath, true);
+      console.log(xhttp)
+      xhttp.send();
+      xhttp.addEventListener(
+        "progress",
+        res => {
+          console.log(res, (res.loaded / res.total) * 100);
+          that.load[row.savePath] =
+            ((res.loaded / res.total) * 100).toFixed(0) - 0;
+        },
+        false
+      );
+      xhttp.onreadystatechange = function () {
+        if (this.readyState != 4 || this.status != 200) return;
+        // 组装a标签
+        let elink = document.createElement("a");
+        // 设置下载文件名
+        elink.download = Date.now() + ".png";
+        elink.style.display = "none";
+        elink.href = URL.createObjectURL(this.response);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        delete that.load[row.savePath];
+      };
+    },
   },
   beforeUnmount: function () {},
   components: {},
@@ -54,17 +89,17 @@ export default {
 </script>
 
 <style>
-.actionSheet{
-    background-image: url('https://djweb.smcic.net/img/cx.png');
-    background-size: 100% 100%;
-    width: 100vw;
-    height: 100vh;
-    position: relative;
+.actionSheet {
+  background-image: url("http://djweb.smcic.net/img/cx.png");
+  background-size: 100% 100%;
+  width: 100vw;
+  height: 100vh;
+  position: relative;
 }
-.actionSheet .qr{
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    transform: translateY(-60%)
+.actionSheet .qr {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  transform: translateY(-60%);
 }
 </style>