拼图汇报

src/saas/AppCountryAlbum/AddReport.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="report">
-    <components class="report-item" :is="component"></components>
+    <components class="report-item" ref="reportItem" :config="currConfig" v-if="currConfig.length" :is="component"></components>
     <div class="report-list" data-html2canvas-ignore>
       <image
         v-for="(item, index) in configList"
@@ -9,7 +9,7 @@
         :class="[currIndex === index ? 'active' : '']"
         @click="changeComponent(item, index)" />
     </div>
-    <div class="report-btn">完成</div>
+    <div class="report-btn" data-html2canvas-ignore @click="save">完成</div>
   </div>
 </template>
 
@@ -39,6 +39,14 @@
       MeetingMminutes
     },
 
+    computed: {
+      currConfig () {
+        if (this.currIndex < 0 || !this.configList.length) return []
+
+        return this.configList[this.currIndex].itemList
+      }
+    },
+
     onLoad () {
       this.getConfig()
     },
@@ -52,6 +60,37 @@
         })
       },
 
+      save () {
+        this.$loading()
+        this.$refs.reportItem.screenshot().then(canvas => {
+          let dataURL = canvas.toDataURL('image/png')
+          const file = this.dataURLtoFile(dataURL, 'photo.png')
+          let formData = new FormData()
+          formData.append('file', file)
+          this.$http.post('/admin/file/add2?type=image', formData).then(res => {
+            if (res.code === 0) {
+              console.log(res.data.url)
+            }
+
+            uni.hideLoading()
+          })
+        }).catch(e => {
+          console.log(e)
+        })
+      },
+
+      dataURLtoFile (dataurl, filename) {
+        let arr = dataurl.split(',')
+        let mime = arr[0].match(/:(.*?);/)[1]
+        let bstr = atob(arr[1])
+        let n = bstr.length
+        let u8arr = new Uint8Array(n)
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n)
+        }
+        return new File([u8arr], filename, { type: mime })
+      },
+
       changeComponent (e, index) {
         this.currIndex = index
         this.component = this.mapComponent(e.watermarkType)