chore: 增加图片懒加载，修改查看图片逻辑

src/components/FeedCard/FeedImage.vue

@@ -8,10 +8,10 @@
         :class="['m-pics-box',{ 'long': isLongImg(img) }]"
         :style='pics.length === 1 ? longStyle(img.w, img.h) : ""'>
           <div
-            class="m-pic" 
+            class="m-pic"
+            :data-src="img.file"
             @click.stop='handleClick($event, index)'
-            :style="img.src ? { backgroundImage:  `url(${img.src})` } : { backgroundColor: '#f4f5f6' }"
-          />
+            v-async-image="img"/>
         </div>
       </li>
     </ul>
@@ -30,43 +30,21 @@ export default {
       type: Array
     }
   },
-  created() {
-    bus.$on("updateFile", ({ fid, index }) => {
-      if (fid === this.id) {
-        this.pics[index].paid = true;
-        this.$children[index].fetch();
-        setTimeout(() => {
-          bus.$emit("updatePhoto", this.$children[index].src);
-        }, 1500);
-      }
-    });
-    this.pics.map((pic, index) => {
-      this.getImageById(pic, index);
-    });
-  },
   methods: {
-    getImageById(pic, index) {
-      this.$http
-        .get(`/files/${pic.file}?q=40&json=true`)
-        .then(({ data: { url } }) => {
-          this.$set(this.pics, index, { ...pic, src: url });
-        })
-        .catch(() => {
-          this.$set(this.pics, index, { ...pic, src: null });
-        });
-    },
     handleClick($event, index) {
+      const component = this.$parent;
       const els = this.$el.querySelectorAll(".m-pic");
       const images = this.pics.map((img, index) => {
+        const el = els[index];
+        const src = `${this.$http.defaults.baseURL}/files/${img.file}`;
         return {
           ...img,
-          original: false,
-          el: els[index],
-          src: img.src,
+          el,
+          src,
           index
         };
       });
-      bus.$emit("mvGallery", { fid: this.id, index, images });
+      bus.$emit("mvGallery", { component, index, images });
     },
     isLongImg(img) {
       const [w, h] = img.size.split("x");
@@ -103,10 +81,12 @@ export default {
     max-width: 518px;
     max-height: 692px;
     li {
+      font-size: 0;
+      line-height: 1;
       width: 1/3 * 100%;
+      // vertical-align: top;
       display: inline-block;
-      vertical-align: top;
-      padding: 0 4px 4px 0;
+      padding: 0 2px 2px 0; /*no*/
     }
   }
   &-box {

src/components/FeedCard/v-async-image.js

@@ -0,0 +1,112 @@
+import http from "@/http.js";
+import _ from "lodash";
+
+function onEvent(el, type, func, capture = false) {
+  el.addEventListener(type, func, {
+    capture: capture
+  });
+}
+/**
+ *  图片懒加载, 支持背景图片
+ */
+
+/* eslint-disable no-extend-native */
+/**
+ * 数组item remove方法
+ * @author jsonleex <[email protected]>
+ */
+if (!Array.prototype.remove) {
+  Array.prototype.remove = function(item) {
+    if (!this.length) return;
+    var index = this.indexOf(item);
+    if (index > -1) {
+      this.splice(index, 1);
+      return this;
+    }
+  };
+}
+export default (Vue, options = {}) => {
+  const listenList = [];
+  const imageFileCatch = [];
+  const imageCatcheList = [];
+  const isAlredyLoad = fileID => {
+    return imageFileCatch.indexOf(fileID);
+  };
+
+  /*
+ *  check el is in view
+ *  @return {Boolean} el is in view
+ */
+  const checkInView = el => {
+    const rect = el.getBoundingClientRect();
+    return (
+      rect.top < window.innerHeight * 1.3 &&
+      rect.bottom > 1.3 &&
+      (rect.left < window.innerWidth * 1.3 && rect.right > 0)
+    );
+  };
+  const isCanShow = item => {
+    const { el, src, file, q = 40 } = item;
+    const isIMG = el.nodeName === "IMG";
+    if (checkInView(el)) {
+      let image = new Image();
+      http.get(`/files/${file}?q=${q}&json=true`).then(({ data: { url } }) => {
+        image.src = url;
+        image.onload = () => {
+          isIMG ? (el.src = url) : (el.style.backgroundImage = `url(${url})`);
+          listenList.remove(item);
+          imageFileCatch.push(file);
+          imageCatcheList.push(url);
+          image = null;
+        };
+        image.onerror = () => {
+          listenList.remove(item);
+        };
+      });
+      return true;
+    } else {
+      return false;
+    }
+  };
+  const addListener = (el, binding) => {
+    const file = binding.value;
+    const index = isAlredyLoad(file.file);
+    const isIMG = el.nodeName === "IMG";
+    if (index > -1)
+      return isIMG
+        ? (el.src = imageCatcheList[index])
+        : (el.style.backgroundImage = `url(${imageCatcheList[index]})`);
+    const item = {
+      el,
+      nodeName: el.nodeName,
+      error: false,
+      loading: true,
+      ...file
+    };
+    if (isCanShow(item)) return;
+    listenList.push(item);
+  };
+  Vue.directive("async-image", {
+    inserted: addListener,
+    updated: addListener
+  });
+  [
+    "scroll",
+    "wheel",
+    "mousewheel",
+    "resize",
+    "animationend",
+    "transitionend",
+    "touchmove"
+  ].forEach(evt =>
+    onEvent(
+      window,
+      evt,
+      _.debounce(() => {
+        listenList.map(img => {
+          isCanShow(img);
+        });
+      }, 1000 / 60)
+    )
+  );
+};

src/components/payfor.vue

@@ -68,21 +68,9 @@ export default {
       typeof onCancel === "function" && (this.onCancel = onCancel);
       typeof onSuccess === "function" && (this.onSuccess = onSuccess);
       this.show = true;
+      this.scrollable = false;
     });
   },
-  watch: {
-    show(val) {
-      if (val) {
-        this.scrollTop = document.scrollingElement.scrollTop;
-        document.body.classList.add("m-pop-open");
-        document.body.style.top = -this.scrollTop + "px";
-      } else {
-        document.body.style.top = "";
-        document.body.classList.remove("m-pop-open");
-        document.scrollingElement.scrollTop = this.scrollTop;
-      }
-    }
-  },
   methods: {
     onOk() {},
     onCancel() {},
@@ -93,12 +81,11 @@ export default {
         ? this.$http
             .post(`/currency/purchases/${this.node}`)
             .then(({ data }) => {
-              this.cancel();
               this.onSuccess(data);
+              this.cancel();
             })
             .catch(() => {
               this.cancel();
-              this.$Message.error("支付失败!");
             })
         : this.cancel();
     },
@@ -108,10 +95,12 @@ export default {
     },
     call() {
       this.show = true;
+      this.scrollable = false;
     },
     cancel() {
       this.node = null;
       this.show = false;
+      this.scrollable = true;
       this.$nextTick(() => {
         this.title = "";
         this.cancelText = "";