feature: 添加客户端保存图片功能

package.json

@@ -19,6 +19,7 @@
     "core-js": "^3.6.5",
     "date-fns": "^2.15.0",
     "js-cookie": "^2.2.1",
+    "file-saver": "^2.0.2",
     "lodash-es": "^4.17.15",
     "raven-js": "^3.27.2",
     "sa-sdk-javascript": "^1.15.16",

src/views/Home/Activity/index.less

@@ -7,6 +7,19 @@
   line-height: 17px;
 }
 
+.save-popup {
+  box-sizing: border-box;
+  padding: 0 10px;
+  height: 10%;
+  font-size: 0px;
+  background: transparent;
+  .save-popup-button {
+    width: 100%;
+    background: #fff !important;
+    // border-radius: 0 !important;
+  }
+}
+
 .activity {
   padding-bottom: 44px;
   background: url('../../../assets/images/home/bg@2x.png') no-repeat 0 0 /cover;

src/views/Home/Activity/index.vue

@@ -24,6 +24,7 @@
         <p class="Aa-container-public">快关注「芒果保险」公众号</p>
         <p class="Aa-container-progress">查看红包进度</p>
         <cr-image
+          v-longProgress="showPopup"
           class="Aa-container-qrcode"
           width=""
           height=""
@@ -77,8 +78,8 @@
           </div>
         </div>
         <cr-button
+          v-longProgress="showPopup"
           :class="[{ 'Av-body-right_winning': status === 'HAS_WINNING' }, 'Av-body-right']"
-          @click="drawLottery"
         >
           {{ voteButtonText }}
         </cr-button>
@@ -100,6 +101,11 @@
     <Modal v-model="modal.guide" type="guide"></Modal>
     <Modal v-model="modal.vote" type="vote" @game-start="gameStart"></Modal>
     <Modal v-model="modal.detail" type="detail"> </Modal>
+    <cr-popup v-model="showBottom" class="save-popup" position="bottom">
+      <cr-button class="save-popup-button" @click="saveImg()">
+        保存图片
+      </cr-button>
+    </cr-popup>
   </div>
 </template>
 <script>
@@ -108,6 +114,10 @@ import localStorage from "@/service/localStorage";
 import personList from "./constants";
 import { getLotteryRecord, drawLottery } from "@/api/activity";
 import { parseTime } from "@/service/utils";
+import { saveAs } from "file-saver";
+import qrCodeImg from "@/assets/images/home/qrcode.png";
+import { isXyqb } from "@/service/validation";
+
 export default {
   name: "Activity",
   components: {
@@ -119,6 +129,7 @@ export default {
       isGoing: false,
       status: "HAS_NOT_CHANCE", // HAS_NOT_CHANCE: 无机会 HAS_CHANCE: 有机会 HAS_WINNING
       personList,
+      showBottom: false,
       modal: {
         winning: false,
         guide: false,
@@ -210,6 +221,57 @@ export default {
       } else {
         this.status = "HAS_NOT_CHANCE";
       }
+    },
+    saveImg() {
+      saveAs(qrCodeImg, "test_save.jpg");
+      console.log("saveImg");
+    },
+    showPopup() {
+      if (isXyqb) {
+        this.showBottom = true;
+      }
+    }
+  },
+  directives: {
+    longProgress: {
+      bind: function(el, binding, vNode) {
+        if (typeof binding.value !== "function") {
+          const compName = vNode.context.name;
+          let warn = `expression ${binding.expression} is not a function`;
+          if (compName) warn += `, function in conponent '${compName}'`;
+          console.warn(warn);
+        }
+
+        let pressTimer = null;
+
+        let start = e => {
+          if (e.type === "click" && e.button !== 0) return;
+          if (pressTimer === null) {
+            pressTimer = setTimeout(() => {
+              handler(e);
+            }, 1000);
+          }
+        };
+
+        let cancel = () => {
+          if (pressTimer !== null) {
+            clearTimeout(pressTimer);
+            pressTimer = null;
+          }
+        };
+
+        const handler = e => {
+          console.log("handler");
+          binding.value(e);
+        };
+
+        el.addEventListener("mousedown", start);
+        el.addEventListener("touchstart", start);
+        el.addEventListener("click", cancel);
+        el.addEventListener("mouseout", cancel);
+        el.addEventListener("touchend", cancel);
+        el.addEventListener("touchcancel", cancel);
+      }
     }
   }
 };