乡村相册 接口对接

src/saas/AppCountryAlbum/Watermark.vue

@@ -9,8 +9,8 @@
       <span @click="save">保存</span>
     </div>
     <image :src="img" mode="aspectFit" />
-    <div class="watermark" v-if="currIndex > -1">
-      <component :is="'Watermark' + (currIndex + 1)"></component>
+    <div class="watermark" v-if="currIndex > -1 && currWatermarkConfig.length">
+      <component :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component>
     </div>
     <div class="photo-bottom" data-html2canvas-ignore>
       <div class="photo-bottom__top">
@@ -25,7 +25,7 @@
           v-for="(item, index) in watermarkList"
           :key="item.id"
           @click="currIndex = index">
-          <image :src="config[index].thum" mode="aspectFill" />
+          <image :src="item.thum" mode="aspectFill" />
           <div class="water-item__bottom">{{ item.name }}</div>
         </div>
       </div>
@@ -60,7 +60,6 @@
   import Watermark7 from './components/watermark/Watermark7'
   import Watermark8 from './components/watermark/Watermark8'
 
-  import { config } from './config'
   export default {
     name: 'Watermark',
 
@@ -80,7 +79,6 @@
     data () {
       return {
         img: '',
-        config,
         currIndex: 0,
         isHide: false,
         height: '100%',
@@ -100,6 +98,12 @@
         }
 
         return [this.albumList.map(v => v.value).indexOf(this.albumId)]
+      },
+
+      currWatermarkConfig () {
+        if (this.currIndex < 0 || !this.watermarkList.length) return []
+
+        return this.watermarkList[this.currIndex].itemList
       }
     },
 
@@ -117,42 +121,44 @@
     methods: {
       save () {
         this.isHide = true
+        this.$loading()
         this.$nextTick(() => {
-          setTimeout(() => {
-            html2canvas(this.$refs.waterMarker, {
-              allowTaint: true,
-              useCORS: true
-            }).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)
-                  let info = {}
-                  if (this.currIndex > -1) {
-                    info = this.watermarkList[this.currIndex]
-                  }
-                  this.$http.post('/api/appalbumphoto/addOrUpdate', {
-                    albumId: this.albumId,
-                    photoUrl: res.data.url,
-                    fileId: res.data.id,
-                    watermarkType: this.currIndex > -1 ? info.watermarkType : '',
-                    templateId: this.currIndex > -1 ? info.id : ''
-                  }).then(res => {
-                    if (res.code === 0) {
-                      console.log(res)
-                      this.$u.toast('新增成功')
-                    }
-                  })
+          html2canvas(this.$refs.waterMarker, {
+            allowTaint: true,
+            useCORS: true
+          }).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) {
+                let info = {}
+                if (this.currIndex > -1) {
+                  info = this.watermarkList[this.currIndex]
                 }
-              })
-              this.waterSrc = dataURL
-            }).catch(e => {
-              console.log(e)
+                this.$http.post('/api/appalbumphoto/addOrUpdate', {
+                  albumId: this.albumId,
+                  photoUrl: res.data.url,
+                  fileId: res.data.id,
+                  watermarkType: this.currIndex > -1 ? info.watermarkType : '',
+                  templateId: this.currIndex > -1 ? info.id : ''
+                }).then(res => {
+                  if (res.code === 0) {
+                    uni.$emit('update')
+                    this.$u.toast('新增成功')
+
+                    setTimeout(() => {
+                      this.back()
+                    }, 500)
+                  }
+                })
+              }
             })
-          }, 2000)
+            // this.waterSrc = dataURL
+          }).catch(e => {
+            console.log(e)
+          })
         })
       },