feat: 照片墙开发

web
Commit 9bd54476 authored Jun 07, 2022 by web
Showing with 178 additions and 81 deletions
package.json
src/App copy.vue
src/packages/bi/src/components/photo-wall/images.vue
src/packages/bi/src/components/photo-wall/index.vue
src/packages/bi/src/components/photo-wall/waterfall.vue
src/packages/bi/src/main.vue
src/packages/bi/src/mixin/project.js
src/packages/bi/src/project/20-configurable.vue
--- a/package.json
+++ b/package.json
 {
  "name": "xrk-bi",
-  "version": "0.4.01-beta.4",
+  "version": "0.4.1",
  "description": "xrk-bi",
  "author": "xrk",
  "main": "dist/bundler.js",

--- a/src/App copy.vue
+++ b/src/App copy.vue
--- a/src/packages/bi/src/components/photo-wall/images.vue
+++ b/src/packages/bi/src/components/photo-wall/images.vue
@@ -4,38 +4,58 @@
      <img :src="setUrl(item.imageUrl)" />
    </li>
  </ul> -->
-  <waterfall :col="columnCount" :data="taskImageInfo.imageUrls">
+  <div>
-    <template>
+    <div
-      <div
+      v-for="(imageUrls, imageUrlsIndex) in waterfalls"
-        v-for="(item, index) in taskImageInfo.imageUrls"
+      :key="imageUrlsIndex"
-        :key="index"
+    >
-        style="margin-bottom:25px"
+      <waterfall
+        ref="waterfall"
+        :col="columnCount"
+        :data="imageUrls"
+        @finish="finish"
      >
-        <img
+        <template>
-          :style="{ width: widthPx, height: heightPx }"
+          <div
-          :src="setUrl(item.imageUrl)"
+            v-for="(item, index) in imageUrls"
-        />
+            :key="index"
-      </div>
+            :style="{
-    </template>
+              padding: '10px 0',
-  </waterfall>
+              'text-align': 'center'
+            }"
+          >
+            <img
+              :style="{ width: widthPx, height: heightPx }"
+              :src="setUrl(item.imageUrl)"
+            />
+          </div>
+        </template>
+      </waterfall>
+    </div>
+  </div>
 </template>
 <script>
 import waterfall from './waterfall.vue';
 const IMG_MAPPING = {
  1: {
-    column: 2,
+    column: 2, // 2列数据
-    width: 548
+    width: 548,
+    height: 305
  },
  2: {
    column: 3,
-    width: 355
+    width: 355,
+    height: 198
  },
  3: {
    column: 4,
-    width: 262
+    width: 262,
+    height: 144
  }
 };
+const baseHeight = 1697;
 export default {
  name: 'bi-photo-wall-images',
  components: {
@@ -60,6 +80,49 @@ export default {
      }
    }
  },
+  watch: {
+    taskImageInfo: {
+      deep: true,
+      immediate: true,
+      handler(v) {
+        const { imageUrls, imageStyle } = v;
+        let waterfalls = [];
+        const titleHeight = 88;
+        const margin = 20;
+        // 第一页图片总列数
+        const firstColumnNum = Math.floor(
+          (baseHeight - titleHeight) / (this.height + margin)
+        );
+        // 其他页图片总列数
+        const otherColumnNum = Math.floor(baseHeight / (this.height + margin));
+        const firstCount = firstColumnNum * this.columnCount; // 第一页数据总数
+        const otherCount = otherColumnNum * this.columnCount; // 其他页数据总数
+        if (imageUrls) {
+          if (imageStyle === 2) {
+            imageUrls.forEach((item, index) => {
+              // 第一个 || 第一组最后一个（只会出现一次） || 其他组最后一个（多次出现）
+              if (
+                index === 0 ||
+                index === firstCount ||
+                !(index % otherCount)
+              ) {
+                waterfalls[waterfalls.length] = [];
+              }
+              waterfalls[waterfalls.length - 1].push(item);
+            });
+          } else {
+            waterfalls = [imageUrls];
+          }
+          this.waterfalls = waterfalls;
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      waterfalls: [] // 二维数组，第一个为第一页算上title单独计算，其他为统一计算分组
+    };
+  },
  computed: {
    columnCount() {
      return IMG_MAPPING[this.taskImageInfo.imageSize].column;
@@ -67,17 +130,23 @@ export default {
    width() {
      return IMG_MAPPING[this.taskImageInfo.imageSize].width;
    },
+    height() {
+      return IMG_MAPPING[this.taskImageInfo.imageSize].height;
+    },
    widthPx() {
      return this.width + 'px';
    },
    heightPx() {
      if (this.taskImageInfo.imageStyle === 2) {
-        return this.widthPx;
+        return this.height + 'px';
      }
      return 'auto';
    }
  },
  methods: {
+    finish() {
+      this.$emit('finish');
+    },
    setUrl(url) {
      // x-oss-process=image/resize,w_355 流式
      // ?x-oss-process=image/resize,m_fill,w_355,h_355
@@ -85,7 +154,7 @@ export default {
      if (this.taskImageInfo.imageStyle === 1) {
        return `${_url}?x-oss-process=image/resize,w_${this.width}`;
      }
-      return `${_url}?x-oss-process=image/resize,m_fill,w_${this.width},h_${this.width}`;
+      return `${_url}?x-oss-process=image/resize,m_fill,w_${this.width},h_${this.height}`;
    }
  }
 };

--- a/src/packages/bi/src/components/photo-wall/index.vue
+++ b/src/packages/bi/src/components/photo-wall/index.vue
@@ -26,7 +26,7 @@
        </div>
      </template>
    </BiTitle>
-    <BiImages :taskImageInfo="value" />
+    <BiImages :taskImageInfo="value" @finish="finish" />
  </div>
 </template>
@@ -80,6 +80,9 @@ export default {
    }
  },
  methods: {
+    finish() {
+      this.$emit('finish');
+    },
    // 选择图片的保存
    selectImgSave(e) {
      this.$emit('input', {
@@ -116,7 +119,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .bi-photo {
-  // page-break-before: always;
+  page-break-before: always;
  // page-break-after: always;
  padding-bottom: 50px;

--- a/src/packages/bi/src/components/photo-wall/waterfall.vue
+++ b/src/packages/bi/src/components/photo-wall/waterfall.vue
-<style>
-.vue-waterfall {
-  width: 100%;
-  overflow-y: auto;
-  position: relative;
-}
-.vue-waterfall .slot-box {
-  position: absolute;
-  top: 100%;
-  left: 100%;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-}
-.vue-waterfall .vue-waterfall-column {
-  float: left;
-}
-.vue-waterfall.is-transition img {
-  opacity: 0;
-}
-.vue-waterfall.is-transition img.animation {
-  animation: 0.4s lazy-animation linear;
-  animation-fill-mode: forwards;
-}
-@keyframes lazy-animation {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-</style>
 <template>
  <div
    class="vue-waterfall"
@@ -172,7 +138,8 @@ export default {
        var lazySrc = imgs[i].getAttribute('lazy-src');
        if (!imgs[i].getAttribute('src') && lazySrc) {
          var newImg = new Image();
-          newImg.src = lazySrc;
+          var parameter = `${lazySrc.includes('?') ? '&' : '?'}t=${Date.now()}`;
+          newImg.src = lazySrc + parameter;
          if (newImg.complete) {
            var trueWidth = imgs[i].offsetWidth || this.columnWidth;
            var imgColumnHeight = (newImg.height * trueWidth) / newImg.width;
@@ -251,9 +218,12 @@ export default {
        }
        if (elements[j].elm && self.checkImg(elements[j].elm)) {
          var imgs = elements[j].elm.getElementsByTagName('img');
-          var newImg = new Image();
+          var _url =
-          newImg.src =
            imgs[0].getAttribute('src') || imgs[0].getAttribute('lazy-src');
+          var parameter = `${_url.includes('?') ? '&' : '?'}t=${Date.now()}`;
+          var newImg = new Image();
+          newImg.src = _url + parameter;
          if (newImg.complete) {
            await self.append(elements[j].elm);
            self.lazyLoad(imgs);
@@ -423,7 +393,10 @@ export default {
    //   this.mix();
    // });
  },
+  updated() {
+    // console.log(555);
+    // this.resize();
+  },
  mounted() {
    this.__listenRouterChange();
    this.$nextTick(() => {
@@ -448,3 +421,37 @@ export default {
  }
 };
 </script>
+<style>
+.vue-waterfall {
+  width: 100%;
+  overflow-y: auto;
+  position: relative;
+}
+.vue-waterfall .slot-box {
+  position: absolute;
+  top: 100%;
+  left: 100%;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+.vue-waterfall .vue-waterfall-column {
+  float: left;
+}
+/* .vue-waterfall.is-transition img {
+  opacity: 0;
+}
+.vue-waterfall.is-transition img.animation {
+  animation: 0.4s lazy-animation linear;
+  animation-fill-mode: forwards;
+}
+@keyframes lazy-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+} */
+</style>
--- a/src/packages/bi/src/main.vue
+++ b/src/packages/bi/src/main.vue
@@ -2,7 +2,7 @@
 * @Description: 
 * @Author: jml
 * @Date: 2021-02-26 15:38:10
- * @LastEditTime: 2022-05-23 10:46:24
+ * @LastEditTime: 2022-06-07 11:25:17
 -->
 <template>
  <div class="xrk-components-bi bi" :class="{ 'bi-print': print }">

--- a/src/packages/bi/src/mixin/project.js
+++ b/src/packages/bi/src/mixin/project.js
@@ -51,6 +51,12 @@ export default {
          resolve('load fail');
        };
      });
+    },
+    preloadImgs(urls) {
+      if (!urls.length) {
+        return Promise.resolve();
+      }
+      return Promise.all(urls.map(url => this.preloadImg(url)));
    }
  }
 };
--- a/src/packages/bi/src/project/20-configurable.vue
+++ b/src/packages/bi/src/project/20-configurable.vue
@@ -61,15 +61,16 @@
      @sort="sort(arguments, 'singleChoice', hideSingleChoice)"
      @page="setPage(arguments, 'page4')"
    >
-      <BiSingleChoiceInfo index="4" name="照片集合"></BiSingleChoiceInfo>
+      <BiSingleChoiceInfo index="4" name="照片合集"></BiSingleChoiceInfo>
    </BiSingleChoice> -->
    <BiPhoto
      v-if="!hideTaskImage"
      class="bi-block"
      ref="bi-photo"
-      name="照片集合"
+      name="照片合集"
      v-model="taskImageInfo"
      @page="setPage(arguments, 'page4')"
+      @finish="taskImageInfo.finish = true"
    />
    <BiCoverEnd title="奇正藏药医学沙龙推广项目数据报告"></BiCoverEnd>
    <BiOperate
@@ -142,6 +143,7 @@ export default {
        title: {
          name: '照片墙'
        },
+        finish: false, // 图片是否渲染完成
        has: false, // true有图片题，false无
        isDelete: 0,
        imageStyle: 2, //展示样式 1 流式   2平铺
@@ -218,10 +220,10 @@ export default {
        },
        ...(!this.hideTaskImage && [
          {
-            name: '照片集合',
+            name: '照片合集',
            child: [
              {
-                name: '照片集合',
+                name: '照片合集',
                page: 4
              }
            ]
@@ -246,6 +248,15 @@ export default {
    }
  },
  methods: {
+    taskImageFinish(resolve) {
+      if (this.taskImageInfo.finish) {
+        resolve();
+      } else {
+        setTimeout(() => {
+          this.taskImageFinish(resolve);
+        }, 1000);
+      }
+    },
    dealPos(dis) {
      return dis * (this.isPrint ? printWidth : this.baseFontSize);
    },
@@ -506,11 +517,7 @@ export default {
      return new Promise((resolve, reject) => {
        const { biInfoId, styleConfigureId } = this.biInfo;
        const { content } = this.$refs['cover'];
-        if (
+        if (!this.hideTaskImage && !this.taskImageInfo.imageUrls.length) {
-          this.taskImageInfo.has &&
-          !this.taskImageInfo.isDelete &&
-          !this.taskImageInfo.imageUrls.length
-        ) {
          reject('照片墙：请删除或至少选择一张图片');
        }
        Promise.all([
@@ -585,14 +592,23 @@ export default {
          this.dealChoice(topicInfo.data.data || []);
          this.dealChoiceMixin(topicMixinInfo.data.data || []);
          this.coverList = tempaletList.data.data || [];
-          if (hasImageQuestion) {
+          // taskImageInfo.data.data.imageUrls.forEach(item => {
-            Object.assign(this.taskImageInfo, taskImageInfo.data.data, {
+          //   item.imageUrl = item.imageUrl.replace('https', 'http');
-              has: hasImageQuestion
+          // });
-            });
+          Object.assign(this.taskImageInfo, taskImageInfo.data.data, {
-          }
+            has: hasImageQuestion,
+            finish: !hasImageQuestion || !!taskImageInfo.data.data.isDelete
+          });
          this.$nextTick(async () => {
            await this.preloadImg(this.coverUrl);
-            window.status = '1';
+            await new Promise(resolve => {
+              this.taskImageFinish(resolve); // 提供给wkwebivewtopdf使用，页面处理完成，node不用
+            });
+            setTimeout(() => {
+              window.status = '1'; // 提供给wkwebivewtopdf使用，页面处理完成，node不用
+              console.log('done7');
+            }, 1000 * 5);
          });
        }
      )
@@ -604,8 +620,4 @@ export default {
  }
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.bi-block {
-  // margin-top: 8px;
-}
-</style>