拼图汇报

src/saas/AppCountryAlbum/AddReport.vue

@@ -2,11 +2,14 @@
   <div class="report">
     <components class="report-item" :is="component"></components>
     <div class="report-list" data-html2canvas-ignore>
-      <image @click="component = 'WorkReport'" :class="[component === 'WorkReport' ? 'active' : '']" src="./images/report1.png" />
-      <image @click="component = 'Daily'" :class="[component === 'Daily' ? 'active' : '']" src="./images/report4.png" />
-      <image @click="component = 'InspectLog'" :class="[component === 'InspectLog' ? 'active' : '']" src="./images/report2.png" />
-      <image @click="component = 'MeetingMminutes'" :class="[component === 'MeetingMminutes' ? 'active' : '']" src="./images/report3.png" />
+      <image
+        v-for="(item, index) in configList"
+        :src="item.thum"
+        :key="index"
+        :class="[currIndex === index ? 'active' : '']"
+        @click="changeComponent(item, index)" />
     </div>
+    <div class="report-btn">完成</div>
   </div>
 </template>
 
@@ -23,7 +26,9 @@
 
     data () {
       return {
-        component: 'WorkReport'
+        component: 'WorkReport',
+        configList: [],
+        currIndex: 0
       }
     },
 
@@ -35,21 +40,61 @@
     },
 
     onLoad () {
-
+      this.getConfig()
     },
 
     methods: {
+      getConfig () {
+        this.$http.post(`/api/appalbumtemplate/list?size=100&templateType=1&status=1`).then(res => {
+          if (res.code === 0) {
+            this.configList = res.data.records
+          }
+        })
+      },
 
+      changeComponent (e, index) {
+        this.currIndex = index
+        this.component = this.mapComponent(e.watermarkType)
+      },
+
+      mapComponent (type) {
+        return {
+          '9': 'WorkReport',
+          '10': 'Daily',
+          '11': 'InspectLog',
+          '12': 'MeetingMminutes'
+        }[type]
+      }
     }
   }
 </script>
 
 <style lang="scss" scoped>
   .report {
-    // height: 100vh;
-    // overflow: hidden;
+    position: relative;
     padding-bottom: 240px;
 
+    .report-btn {
+      position: fixed;
+      bottom: 272px;
+      left: 32px;
+      z-index: 11;
+      width: 144px;
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      background: #FFFFFF;
+      font-size: 32px;
+      color: #408EF6;
+      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
+      border-radius: 40px;
+
+      &:active {
+        opacity: 0.7;
+      }
+    }
+
+
     * {
       box-sizing: border-box;
     }

src/saas/AppCountryAlbum/components/Home.vue

@@ -46,19 +46,19 @@
       <h2>工作相册</h2>
       <div class="album-list__wrapper">
         <div class="item" v-for="(item, index) in list" :key="index" @click="linkTo('./AlbumDetail?id=' + item.id)">
-          <span>未查看</span>
+          <span v-if="item.photoHasRead === 'NO'">未查看</span>
           <image src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa50994a01ff415294729ac6e0623845~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?" />
           <div class="item-bottom">
             <h2>{{ item.albumName }}</h2>
             <div class="item-bottom__info">
               <div class="left">
                 <span>今日新增</span>
-                <i>5</i>
+                <i>{{ item.dayPhtoto }}</i>
                 <span>张</span>
               </div>
               <div class="right">
                 <image src="../images/zhaopianshuliang.png" />
-                <span>16</span>
+                <span>{{ item.photoTotal }}</span>
               </div>
             </div>
           </div>