From a1476c08b99ef43a80191d03253748ae47ca774c Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Tue, 31 May 2022 11:00:29 +0800
Subject: [PATCH] 29945

---
 src/saas/AppCountryAlbum/EditAlbum.vue        |  18 ++-
 src/saas/AppCountryAlbum/Photo.vue            | 129 +++++++++++-------
 src/saas/AppCountryAlbum/ReportImg.vue        |   4 +-
 .../AppCountryAlbum/images/fanhui-black.png   | Bin 0 -> 796 bytes
 4 files changed, 94 insertions(+), 57 deletions(-)
 create mode 100644 src/saas/AppCountryAlbum/images/fanhui-black.png

diff --git a/src/saas/AppCountryAlbum/EditAlbum.vue b/src/saas/AppCountryAlbum/EditAlbum.vue
index 87d065a6..a7f226fb 100644
--- a/src/saas/AppCountryAlbum/EditAlbum.vue
+++ b/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;
diff --git a/src/saas/AppCountryAlbum/Photo.vue b/src/saas/AppCountryAlbum/Photo.vue
index 540b47e2..939dcdf9 100644
--- a/src/saas/AppCountryAlbum/Photo.vue
+++ b/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">
-      <div class="item" @click="back">
-        <image src="./images/fanhui.png" />
-        <span>返回</span>
+    <u-popup v-model="isShow" :closeable="false" border-radius="32" mode="bottom" @close="isShow = false, currIndex = -1">
+			<div class="photo-bottom">
+        <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="btn-item" hover-class="bg-hover" @click="remove">
+            <image src="./images/remove-black.png" />
+            <span>删除</span>
+          </div>
+        </div>
       </div>
-      <!-- <div class="item" @click="share">
-        <image src="./images/fenxiang.png" />
-        <span>分享</span>
-      </div> -->
-      <div class="item" @click="remove">
-        <image src="./images/shanchu.png" />
-        <span>删除</span>
-      </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-bottom {
+      .top {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        height: 96px;
+
+        h2 {
+          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;
+          }
+        }
+      }
+    }
+
     .photo-wrapper {
       display: flex;
       align-items: center;
       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;
-        height: 100%;
-        text-align: center;
-
-        &:active {
-          background: #000;
-        }
-
-        image {
-          width: 80px;
-          height: 80px;
-        }
-
-        span {
-          font-size: 28px;
-          color: #fff;
-        }
-      }
-    }
   }
 </style>
diff --git a/src/saas/AppCountryAlbum/ReportImg.vue b/src/saas/AppCountryAlbum/ReportImg.vue
index c2fe6564..b3612bfb 100644
--- a/src/saas/AppCountryAlbum/ReportImg.vue
+++ b/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;
diff --git a/src/saas/AppCountryAlbum/images/fanhui-black.png b/src/saas/AppCountryAlbum/images/fanhui-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6ca3cad08a45e97bfbb1f0f4b1b4e0be3040ce5
GIT binary patch
literal 796
zcmeAS@N?(olHy`uVBq!ia0vp^0U*r53?z4+XPOVB7>k44ofy`glX(f`EDi7paRt(F
zU~Fuxt*x!1q5@<X7#NtDnHd@ynwpvd84wX5X<}jmB!PlJ0AT~UMn*<(Hjn{l1I2-|
z5C9Q`O92IuWs$jP;y@{<g_Gt1U1?Sl<QL4q$i&Rb#?B=mETyETVQTK`=Hcrf5E>pA
zpOI78)Z8+4*8CN#51u`L@BaM<4<EgJ{o(VEpTGZY`xCPj=>5l@E{-7)hu_Y)8Fa`%
zq)qu$kbn+X#~bS@OBcHC`(AINzo&rVvRXyTv5o&z&&^yv`PmblK&{|qKL4G*Z@pKs
z?^5BK@Xv+o%l;eRa!%g%+~s%V<A+&uu3xWFzWaUMA<=e0hTERk*H`@96aI1cWL<`f
z8(y5NzR9qL{p#hXuM&7SR2Ci)b#qU+c`9~R(OT648PS-Er>p|oc(3i=E)X&0ZDl{B
zf$mIMuV96WEzepDUa0&o;S-1wI?d?v)nt7YOXJmb+}s`WF8!US6metD84kYE+4|S{
z4K{V`S1x(;&zHS#<;RFS2d;ekvTTFrZewQ--jA2=yq$M`k$Ov_mtDsJf%EI%Z?KNe
zcAhdv^VbHG&w35z-Y?Xj+4Jfezu#NA?+(-4De}@A&dsb`KYeBrZ!gOO9yUFjrECV?
zE99$JSbYo;{r1c%xOuI#|4Q8}JqP4`WGb_mY?TXmV%_JxI&_0$PV@T{!FFeQk1=TV
z*@QM8$hcBaHgQ&_&C^CRspJ#$*S)z^p~e64ZNsDJxY%-y)wf%FD-ycnZ9hIyn78kU
z@R}M<0sWvysUiC=bZ=MsbaqmO_4k_vznXZL*LdsP+j6>J^i#9{t&C;2)-9g-=Yxj*
zy?=)o^!~ei;O>`*Kd;l+mn_R+vpMC|l$YyYFi$M#>{F>$C;}yGPgg&ebxsLQ0CUGg
ArvLx|

literal 0
HcmV?d00001