优化

src/saas/AppCountryAlbum/ReportImg.vue

@@ -2,7 +2,7 @@
   <div class="photo">
     <div class="photo-top">
       <image src="./images/close.png" @click="back" />
-      <div class="photo-top__middle" @click="isShowAlbum = true">
+      <div class="photo-top__middle" @click="isShow = true">
         <span>保存至：{{ albumName || '默认相册' }}</span>
         <image src="./images/to-right.png" />
       </div>
@@ -21,7 +21,40 @@
         <span>上传</span>
       </div>
     </div>
-    <u-select v-model="isShowAlbum" :default-value="defaultValue" :list="albumList" @confirm="onConfirm"></u-select>
+    <u-popup v-model="isShow" :closeable="false" border-radius="32" height="70%" mode="bottom">
+			<div class="album">
+        <div class="top">
+          <span @click="isShow = false">取消</span>
+          <span @click="onConfirm">确定</span>
+        </div>
+        <scroll-view scroll-y class="album-list__wrapper">
+          <div
+            class="item"
+            @click="currIndex = index"
+            v-for="(item, index) in albumList"
+            :key="index"
+            :class="[currIndex === index ? 'active' : '']">
+            <image class="checked" v-if="currIndex === index" src="./images/xuanzhong.png" />
+            <image class="icon" v-if="!item.lastPhotoUrl" src="./images/icon.png" />
+            <image class="img" v-if="item.lastPhotoUrl" :src="item.lastPhotoUrl" mode="aspectFill" />
+            <div class="item-bottom">
+              <h2>{{ item.albumName }}</h2>
+              <div class="item-bottom__info">
+                <div class="left">
+                  <span>今日新增</span>
+                  <i>{{ item.dayPhtoto }}</i>
+                  <span>张</span>
+                </div>
+                <div class="right">
+                  <image src="./images/zhaopianshuliang.png" />
+                  <span>{{ item.photoTotal || 0 }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+				</scroll-view>
+      </div>
+		</u-popup>
   </div>
 </template>
 
@@ -39,7 +72,8 @@
         albumName: '',
         albumId: '',
         templateId: '',
-        isShowAlbum: false
+        isShow: false,
+        currIndex: 0
       }
     },
 
@@ -89,9 +123,11 @@
         })
       },
 
-      onConfirm (e) {
+      onConfirm () {
-        this.albumId = e[0].value
+        this.albumId = this.albumList[this.currIndex].value
-        this.albumName = e[0].label
+        this.albumName = this.albumList[this.currIndex].label
+
+        this.isShow = false
       },
 
       getWatermarkList () {
@@ -103,6 +139,7 @@
           if (res.code === 0) {
             this.albumList = res.data.records.map(v => {
               return {
+                ...v,
                 label: v.albumName,
                 value: v.id
               }
@@ -112,13 +149,6 @@
             this.albumId = this.albumList[0].value
           }
         })
-      },
-
-      preview (url) {
-        uni.previewImage({
-          urls: [url],
-          current: url
-        })
       }
     }
   }
@@ -132,6 +162,162 @@
     overflow-y: auto;
     background: #000;
 
+    * {
+      box-sizing: border-box;
+    }
+
+    .album {
+      height: 100%;
+      overflow: hidden;
+
+      .album-list__wrapper {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        .item {
+          display: inline-block;
+          position: relative;
+          width: 328px;
+          height: 328px;
+          margin-bottom: 32px;
+          box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+          border-radius: 16px;
+          overflow: hidden;
+          background: #EFF5FA;
+
+          &:nth-of-type(2n) {
+            margin-left: 30px;
+          }
+
+          &.active {
+            border: 4px solid #2477F1;
+          }
+
+          .img {
+            width: 100%;
+            height: 100%;
+          }
+
+          .item-bottom {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            z-index: 1;
+            width: 100%;
+            padding: 20px 16px 16px;
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+
+            & > h2 {
+              margin-bottom: 14px;
+              font-size: 32px;
+              color: #fff;
+            }
+
+            .item-bottom__info {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+
+              .right {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 86px;
+                height: 48px;
+                padding: 0 8px;
+                color: #fff;
+                background: rgba(0, 0, 0, 0.5);
+                box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+                border-radius: 8px;
+
+                image {
+                  width: 28px;
+                  height: 28px;
+                }
+
+                span {
+                  font-size: 28px;
+                }
+              }
+
+              .left {
+                span {
+                  color: #c6c5c4;
+                  font-size: 28px;
+                }
+
+                i {
+                  padding: 0 3px;
+                  color: #fff;
+                  font-size: 28px;
+                  font-style: normal;
+                }
+              }
+            }
+          }
+
+          & > span {
+            position: absolute;
+            left: 16px;
+            top: 16px;
+            z-index: 1;
+            width: 94px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            color: #fff;
+            font-size: 28px;
+            background: #FF524F;
+            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+            border-radius: 8px;
+          }
+
+          .checked {
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 1;
+            width: 64px;
+            height: 64px;
+          }
+
+          .icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 1;
+            width: 80px;
+            height: 80px;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+
+      scroll-view {
+        height: calc(100% - 96px);
+        padding: 0 32px;
+        font-size: 0;
+      }
+
+      .top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 96px;
+        padding: 0 32px;
+        font-size: 32px;
+        color: #999;
+        font-weight: 600;
+
+        span:last-child {
+          color: #222;
+        }
+      }
+    }
+
     .photo-wrapper {
       display: flex;
       align-items: center;