feat(Album): 新增自定义图片显示数量及状态

juzi214032 · juzi214032 · commit 48342a8fd833 · 2020-08-06T09:44:18.000+08:00
close #925,#962
diff --git a/examples/pages/components/layout/pages/album/index.wxml b/examples/pages/components/layout/pages/album/index.wxml
@@ -18,7 +18,7 @@
                     <l-avatar class="avatar" size='80' shape="square" src="{{avatarUrl}}" />
                     <view class="right">
                         <view class="name">LinUI@27315</view>
-                        <l-album urls='{{urls5}}'></l-album>
+                        <l-album max-number='{{4}}' urls='{{urls5}}'  custom-row-number='{{false}}' preview-full-image='{{true}}'></l-album>
                     </view>
                 </view>
             </view>
@@ -33,7 +33,7 @@
                     </view>
                 </view>
             </view>
-            <view>
+            <view style="margin-top:20rpx">
                 <view class="album">
                     <l-avatar class="avatar" size='80' shape="square" src="{{avatarUrl}}" />
                     <view class="right">
@@ -60,7 +60,7 @@
                     <l-avatar class="avatar" size='80' shape="square" src="{{avatarUrl}}" />
                     <view class="right">
                         <view class="name">LinUI@27315</view>
-                        <l-album urls='{{urls4}}' key='newurl' gapRow='{{25}}' gapColumn='{{25}}'></l-album>
+                        <l-album urls='{{urls4}}' key='newurl' gap-row='{{25}}' gap-column='{{25}}' every-row-number="{{3}}"></l-album>
                     </view>
                 </view>
             </view>
diff --git a/examples/pages/components/layout/pages/album/index.wxss b/examples/pages/components/layout/pages/album/index.wxss
@@ -1,49 +1,57 @@
 /* pages/components/layout/pages/album/index.wxss */
 .num {
-    color: #fc6517;
-    font-size: 42rpx;
-    font-style: italic;
+  color: #fc6517;
+  font-size: 42rpx;
+  font-style: italic;
 }
 
 .text {
-    height: 30rpx;
-    font-size: 22rpx;
-    font-family: PingFangSC-Regular;
-    font-weight: 400;
-    color: rgba(102, 102, 102, 1);
-    line-height: 30rpx;
-    margin-top: 9rpx;
+  height: 30rpx;
+  font-size: 22rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  color: rgba(102, 102, 102, 1);
+  line-height: 30rpx;
+  margin-top: 9rpx;
 }
 
 .album {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
 .avatar {
-    margin-left: 20rpx;
+  margin-left: 20rpx;
 }
 
 .right {
-    margin-left: 20rpx;
+  margin-left: 20rpx;
 }
 
 .name {
-    color: rgb(91, 108, 160);
-    font-weight: 450;
+  color: rgb(91, 108, 160);
+  font-weight: 450;
+  margin-bottom: 20rpx;
 }
 
 .content {
-    margin-top: 7rpx;
-    margin-right: 10rpx;
-    color: black;
-    font-weight: 445;
-    margin-bottom: 15rpx;
+  margin-top: 7rpx;
+  margin-right: 10rpx;
+  color: black;
+  font-weight: 445;
+  margin-bottom: 15rpx;
 }
 
 .line {
-    height: 1px;
-    border-top: solid Silver 1px;
-    /* margin-bottom: 40rpx; */
-    margin-top: 30rpx;
-}
+  height: 1px;
+  border-top: solid Silver 1px;
+  /* margin-bottom: 40rpx; */
+  margin-top: 30rpx;
+}
+
+.parent {
+  display: inline-grid;
+  grid-template-columns: repeat(2, 158rpx);
+  grid-row-gap: 20px;
+  grid-column-gap: 20px;
+}
diff --git a/src/album/index.js b/src/album/index.js
@@ -44,6 +44,22 @@ Component({
     key: {
       type: String,
       value: 'url'
+    },
+    maxNumber: {
+      type: Number,
+      value: 9
+    },
+    customRowNumber: {
+      type: Boolean,
+      value: false
+    },
+    everyRowNumber: {
+      type: Number,
+      value: 3
+    },
+    previewFullImage: {
+      type: Boolean,
+      value: true,
     }
   },
 
@@ -59,6 +75,10 @@ Component({
     row: 0,
     // 图片排列几列
     colum: 0,
+    // 用于显示的图片列表
+    showUrls: [],
+    // 传入的url长度是否大于maxNumber指定的数量
+    isLong: false,
   },
 
   /**
@@ -69,12 +89,29 @@ Component({
       // 在组件实例进入页面节点树时执行
 
       //判断传入urls长度
-      if (this.data.urls.length > 9) {
-        const urls = this.data.urls.slice(0, 9);
+      let urls = [];
+      if (this.data.urls.length > this.data.maxNumber) {
+        urls = this.data.urls.slice(0, this.data.maxNumber);
         this.setData({
-          urls
+          isLong: true,
         });
-        console.warn('超过9张图片！');
+        console.warn('图片数量超过maxNumber指定数量');
+      } else {
+        urls = this.data.urls;
+      }
+      this.setData({
+        showUrls: urls
+      });
+
+      if (!this.data.customRowNumber) {
+        let urlLength = this.data.showUrls.length;
+        if (urlLength > 1 && urlLength < 5) {
+          this.setData({
+            everyRowNumber: 2
+          });
+        } else(this.setData({
+          everyRowNumber: 3
+        }));
       }
 
       this.preview();
@@ -137,7 +174,13 @@ Component({
 
     onPreviewTap(e) {
       const index = e.currentTarget.id;
-      const urls = this.data.urls;
+      let urls;
+      if (this.data.previewFullImage) {
+        urls = this.data.urls;
+      } else {
+        urls = this.data.showUrls;
+      }
+
       let tempFilePath = '';
       let previewImageList = [];
       const newType = this.data.newType;
diff --git a/src/album/index.less b/src/album/index.less
@@ -1,8 +1,48 @@
 /* miniprogram_npm/lin-ui/picture-album/index.wxss */
-.container{
+.container {
     display: grid;
-
 }
+
 .vertical {
     height: 360rpx;
-}
+}
+
+.parent {
+    display: inline-grid;
+    grid-template-columns: repeat(auto-fill);
+}
+
+.child {
+    box-sizing: border-box;
+    background-color: white;
+    flex: 0 0 44%;
+    height: 100px;
+    border: 1px solid red;
+    margin-top: 4%;
+    margin-left: 2%;
+    margin-right: 2%;
+}
+
+.dimback {
+    background: #000;
+}
+
+.dim {
+    opacity: 0.6;
+    filter: alpha(opacity=60);
+}
+
+
+.imageContainer {
+    position: relative;
+}
+
+.imageContainer:last-child>.text {
+    color: white;
+    font-weight: bold;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: larger;
+}
diff --git a/src/album/index.wxml b/src/album/index.wxml
@@ -1,6 +1,9 @@
 <wxs src="index.wxs" module="album"></wxs>
-<view class="container l-class" style="{{album.containerStyle(urls, multipleSize, gapRow, gapColumn)}}">
-    <block wx:for="{{urls}}" wx:key="index">
-        <image id='{{index}}' mut-bind:tap="onPreviewTap" class="{{album.blockClass(urls, horizontalScreen)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length === 1?singleMode:multipleMode}}" />
+<view style="{{album.gridStyle(gapRow, gapColumn, multipleSize, everyRowNumber)}}">
+    <block wx:for="{{showUrls}}" wx:key="index" class="child">
+        <view class="imageContainer {{album.dimBack(isLong, index, maxNumber, previewFullImage)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}">
+            <image class="{{album.dim(isLong, index, maxNumber, previewFullImage)}}}" id='{{index}}' bind:tap="onPreviewTap" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length === 1?singleMode:multipleMode}}" />
+            <view wx:if="{{album.image(isLong, index, maxNumber, previewFullImage)}}" class="text">+{{urls.length-maxNumber}}</view>
+        </view>
     </block>
 </view>
diff --git a/src/album/index.wxs b/src/album/index.wxs
@@ -1,5 +1,4 @@
 var containerStyle = function (urls, multipleSize, gapRow, gapColumn) {
-    urls.length === 2 || urls.length === 4 ? 'width:' + (2 * multipleSize + gapRow) + 'rpx;' : 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx;'
     if (urls.length === 2 || urls.length === 4) {
         return 'width:' + (2 * multipleSize + gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
     } else {
@@ -32,8 +31,49 @@ var blockStyle = function (urls, horizontalScreen, shortSideValue, singleSize, m
     }
 }
 
+var gridStyle = function (gapRow, gapColumn, multipleSize, everyRowNumber) {
+    return 'display:inline-grid;grid-template-columns: repeat(' + everyRowNumber + ',' + multipleSize + 'rpx);grid-row-gap:' + gapRow + 'rpx;grid-column-gap:' + gapColumn + 'rpx;'
+}
+
+var dimBack = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return 'dimback'
+            }
+        }
+    }
+    return ''
+}
+
+var dim = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return 'dim'
+            }
+        }
+    }
+    return ''
+}
+
+var image = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return true
+            }
+        }
+    }
+    return false
+}
+
 module.exports = {
     containerStyle: containerStyle,
     blockClass: blockClass,
-    blockStyle: blockStyle
+    blockStyle: blockStyle,
+    gridStyle: gridStyle,
+    dimBack: dimBack,
+    dim: dim,
+    image: image,
 }
