29945

src/saas/AppCountryAlbum/EditAlbum.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="EditAlbum">
+  <div class="EditAlbum" v-if="pageShow">
     <div class="img-item" v-for="(item, index) in list" :key="index" @click="choose(index)">
       <image class="img" :src="item.photoUrl" mode="aspectFill" />
       <span class="icon" v-if="!item.checked"></span>
       <image class="icon" v-else src="./images/img-choose.png" />
     </div>
+    <span class="empty" v-if="!list.length">该相册暂无可编辑内容</span>
     <div class="EditAlbum-footer">
       <div @click="move">移动至</div>
       <div @click="remove">删除</div>
@@ -57,7 +58,8 @@
         list: [],
         currIndex: 0,
         isAdmin: false,
-        albumList: []
+        albumList: [],
+        pageShow: false
       }
     },
 
@@ -72,6 +74,7 @@
     },
 
     onLoad (query) {
+      this.$loading()
       this.isAdmin = !!this.$store.state.user.adminAuthType
       this.id = query.id
       this.getAlbumList()
@@ -97,6 +100,8 @@
                 checked: false
               }
             })
+
+            this.pageShow = true
           }
         })
       },
@@ -170,6 +175,15 @@
       box-sizing: border-box;
     }
 
+    .empty {
+      position: absolute;
+      top: 160px;
+      left: 50%;
+      color: #8e8e90;
+      font-size: 28px;
+      transform: translateX(-50%);
+    }
+
     .album {
       height: 100%;
       overflow: hidden;

src/saas/AppCountryAlbum/Photo.vue

@@ -1,22 +1,27 @@
 <template>
   <div class="photo">
     <div class="photo-wrapper">
-      <image mode="widthFix" :src="img" />
+      <image mode="widthFix" :src="img" @click="isShow = true" />
     </div>
-    <div class="photo-footer">
+    <u-popup v-model="isShow" :closeable="false" border-radius="32" mode="bottom" @close="isShow = false, currIndex = -1">
-      <div class="item" @click="back">
+			<div class="photo-bottom">
-        <image src="./images/fanhui.png" />
+        <div class="top">
+          <h2>编辑文本</h2>
+          <p>长按图片进行分享给他人</p>
+          <image @click="isShow = false, currIndex = -1" src="./images/down_boldw.png" />
+        </div>
+        <div class="btns">
+          <div class="btn-item" hover-class="bg-hover" @click="back">
+            <image src="./images/fanhui-black.png" />
             <span>返回</span>
           </div>
-      <!-- <div class="item" @click="share">
+          <div class="btn-item" hover-class="bg-hover" @click="remove">
-        <image src="./images/fenxiang.png" />
+            <image src="./images/remove-black.png" />
-        <span>分享</span>
-      </div> -->
-      <div class="item" @click="remove">
-        <image src="./images/shanchu.png" />
             <span>删除</span>
           </div>
         </div>
+      </div>
+		</u-popup>
   </div>
 </template>
 
@@ -30,7 +35,8 @@
     data () {
       return {
         img: '',
-        id: ''
+        id: '',
+        isShow: true
       }
     },
 
@@ -118,52 +124,71 @@
       box-sizing: border-box;
     }
 
-    .photo-wrapper {
+    .photo-bottom {
+      .top {
         display: flex;
-      align-items: center;
+        position: relative;
-      width: 100%;
-      min-height: 100vh;
-      padding-bottom: 216px;
-
-      & > image {
-        width: 100%;
-      }
-    }
-
-    .photo-footer {
-      display: flex;
-      position: fixed;
-      align-items: center;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-      width: 100%;
-      height: 216px;
-      background: #1E1E21;
-
-      .item {
-        display: flex;
-        flex-direction: column;
         align-items: center;
         justify-content: center;
-        flex: 1;
+        flex-direction: column;
-        height: 100%;
+        height: 96px;
-        text-align: center;
 
-        &:active {
+        h2 {
-          background: #000;
+          font-size: 28px;
+          color: #333333;
+          line-height: 40px;
         }
 
+        p {
+          color: #999999;
+          font-size: 24px;
+        }
+
+        image {
+          position: absolute;
+          top: 50%;
+          right: 32px;
+          z-index: 1;
+          width: 32px;
+          height: 32px;
+          transform: translateY(-50%);
+        }
+      }
+
+      .btns {
+        display: flex;
+        align-items: center;
+        height: 216px;
+
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          flex: 1;
+
           image {
             width: 80px;
             height: 80px;
           }
 
           span {
+            color: #333333;
             font-size: 28px;
-          color: #fff;
           }
         }
       }
     }
+
+    .photo-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      min-height: 100vh;
+
+      & > image {
+        width: 100%;
+      }
+    }
+  }
 </style>

src/saas/AppCountryAlbum/ReportImg.vue

@@ -1,12 +1,10 @@
 <template>
   <div class="photo">
     <div class="photo-top">
-      <image src="./images/close.png" @click="back" />
       <div class="photo-top__middle" @click="isShow = true">
         <span>保存至：{{ albumName || '默认相册' }}</span>
         <image src="./images/to-right.png" />
       </div>
-      <div></div>
     </div>
     <div class="photo-wrapper">
       <image mode="widthFix" :src="img" />
@@ -344,7 +342,7 @@
       display: flex;
       position: fixed;
       align-items: center;
-      justify-content: space-between;
+      justify-content: center;
       top: 0;
       left: 0;
       z-index: 11;