拼图汇报

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;
     }