29954

src/saas/AppCountryAlbum/AddReport.vue

@@ -28,7 +28,8 @@
       return {
         component: 'WorkReport',
         configList: [],
-        currIndex: 0
+        currIndex: 0,
+        albumId: ''
       }
     },
 
@@ -47,7 +48,8 @@
       }
     },
 
-    onLoad () {
+    onLoad (query) {
+      this.albumId = query.id || ''
       this.getConfig()
     },
 
@@ -71,7 +73,7 @@
             if (res.code === 0) {
               const data = this.configList[this.currIndex]
               uni.navigateTo({
-                url: `./ReportImg?img=${res.data.url}&type=${data.watermarkType}&templateId=${data.id}`
+                url: `./ReportImg?albumId=${this.albumId}&img=${res.data.url}&type=${data.watermarkType}&templateId=${data.id}`
               })
             }
 

src/saas/AppCountryAlbum/AlbumDetail.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="photo">
+  <div class="photo" v-if="pageShow">
     <div class="photo-header">
-      <image :src="coverImg" mode="aspectFill" />
-      <div>
       <h2>{{ info.albumName }}</h2>
-        <span @click="linkTo('./AddAlbum?id=' + id)">相册设置</span>
+      <div class="right" @click="linkTo('./AddAlbum?id=' + id)" hover-class="text-hover" v-if="id !== '1'">
+        <image src="./images/setting.png" />
+        <span>相册设置</span>
       </div>
     </div>
     <div class="photo-info">
@@ -27,20 +27,23 @@
     </div>
     <div class="photo-list">
       <div class="photo-title">
-        <h2>照片列表</h2>
-        <div class="right">
+        <div class="left">
           <picker mode="date" @change="onChange">
-            <div class="right-item">
+            <div class="left-item">
               <span>{{ date || '所有日期' }}</span>
               <image src="./images/down.png" />
             </div>
           </picker>
-          <div class="right-item" style="margin-right: 0;" @click="toChoose">
+          <div class="left-item" style="margin-right: 0;" @click="toChoose">
             <span v-if="userId"><AiOpenData v-if="userId" type="userName" :openid="userId"></AiOpenData></span>
             <span v-else>所有干部</span>
             <image src="./images/down.png" />
           </div>
         </div>
+        <div class="right" hover-class="text-hover" @click="toEdit">
+          <image src="./images/edit.png" />
+          <span>编辑照片</span>
+        </div>
       </div>
       <div class="photo-item__wrapper">
         <div class="photo-item" @click="linkTo('./Photo?id=' + item.id)" v-for="(item, index) in list" :key="index">
@@ -54,7 +57,7 @@
       </div>
     </div>
     <div class="btn-wrapper">
-      <div class="btn" hover-class="text-hover" @click="toEdit">编辑照片</div>
+      <div class="btn" @click="linkTo('./AddReport?id=' + id)">上传拼图汇报</div>
       <div class="btn" @click="toAddImg" hover-class="text-hover">上传照片</div>
     </div>
   </div>
@@ -74,7 +77,6 @@
         info: {},
         name: '',
         date: '',
-        coverImg: '',
         imgList: [],
         hideStatus: false,
         pageShow: false,
@@ -179,10 +181,13 @@
       },
 
       getInfo (id) {
+        this.$loading()
         this.$http.post(`/api/appalbum/queryDetailById?id=${id}`).then(res => {
           if (res.code === 0) {
             this.info = res.data
           }
+
+          this.pageShow = true
         })
       },
 
@@ -235,10 +240,6 @@
               this.list = res.data.records
             }
 
-            if (res.data.records.length && !this.coverImg) {
-              this.coverImg = res.data.records[0].photoUrl
-            }
-
             if (res.data.records.length < 10) {
               this.isMore = true
               uni.hideLoading()
@@ -262,7 +263,9 @@
 
 <style lang="scss" socped>
   .photo {
+    min-height: 100vh;
     padding-bottom: 130px;
+    box-sizing: border-box;
 
     * {
       box-sizing: border-box;
@@ -330,11 +333,11 @@
           font-weight: 600;
         }
 
-        .right {
+        .left {
           display: flex;
           align-items: center;
 
-          .right-item {
+          .left-item {
             display: flex;
             align-items: center;
             margin-right: 32px;
@@ -351,49 +354,56 @@
             }
           }
         }
+
+        .right {
+          display: flex;
+          align-items: center;
+          font-size: 26px;
+          color: #333;
+
+          image {
+            width: 32px;
+            height: 32px;
+            margin-right: 8px;
+          }
+        }
       }
     }
 
     .photo-header {
-      position: relative;
-      height: 400px;
-      background: rgba(0,0,0, 0.7);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 148px;
+      padding: 0 32rpx;
+      color: #Fff;
+      background: #3975C6;
 
       div {
-        position: relative;
         display: flex;
-        z-index: 1;
         align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-      }
-
-      span {
-        width: 176px;
+        width: 216px;
         height: 56px;
         line-height: 56px;
-        margin-top: 16px;
         text-align: center;
-        background: rgba(0, 0, 0, 0.6);
-        color: #fff;
+        justify-content: center;
         border-radius: 28px;
+        font-size: 28px;
+        background: #285DA4;
       }
 
       image {
-        position: absolute;
-        z-index: 1;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 400px;
-        filter: blur(2px);
+        width: 32px;
+        height: 32px;
+        margin-right: 8px;
       }
 
       h2 {
+        flex: 1;
+        margin-right: 20px;
         color: #fff;
-        font-size: 56px;
+        font-size: 38px;
       }
     }
 
@@ -401,8 +411,7 @@
       display: flex;
       align-items: center;
       height: 168px;
-      background: #FFFFFF;
-      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
+      background: #3975C6;
 
       & > div {
         flex: 1;
@@ -411,12 +420,12 @@
         h2 {
           margin-bottom: 10px;
           font-weight: 600;
-          font-size: 38px;
-          color: #333333;
+          font-size: 44px;
+          color: #fff;
         }
 
         span {
-          color: #999999;
+          color: #C3D5EE;
           font-size: 26px;
         }
       }
@@ -438,7 +447,7 @@
       }
 
       .btn:first-child {
-        width: 270px;
+        flex: 1;
         height: 112px;
         line-height: 112px;
         text-align: center;

src/saas/AppCountryAlbum/ReportImg.vue

@@ -91,6 +91,7 @@
       this.img = query.img
       this.type = query.type
       this.templateId = query.templateId
+      this.albumId = query.albumId
 
       this.getWatermarkList()
     },
@@ -145,9 +146,18 @@
               }
             })
 
+            if (this.albumId) {
+              this.albumName = this.albumList.filter((v, index) => {
+                if (v.value === this.albumId) {
+                  this.currIndex = index
+                }
+                return v.value === this.albumId
+              })[0].label
+            } else {
               this.albumName = this.albumList[0].label
               this.albumId = this.albumList[0].value
             }
+          }
         })
       }
     }