乡村相册

src/saas/AppCountryAlbum/Watermark.vue

@@ -2,8 +2,8 @@
   <div class="photo" ref="waterMarker" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}">
     <div class="photo-top" data-html2canvas-ignore>
       <image src="./images/close.png" @click="back" />
-      <div class="photo-top__middle">
-        <span>保存至：默认相册</span>
+      <div class="photo-top__middle" @click="isShowAlbum = true">
+        <span>保存至：{{ albumName || '默认相册' }}</span>
         <image src="./images/to-right.png" />
       </div>
       <span @click="save">保存</span>
@@ -22,10 +22,10 @@
         <div
           class="water-item"
           :class="[currIndex === index ? 'active' : '']"
-          v-for="(item, index) in config"
-          :key="index"
+          v-for="(item, index) in watermarkList"
+          :key="item.id"
           @click="currIndex = index">
-          <image :src="item.thum" mode="aspectFill" />
+          <image :src="config[index].thum" mode="aspectFill" />
           <div class="water-item__bottom">{{ item.name }}</div>
         </div>
       </div>
@@ -45,6 +45,7 @@
         <div>上传</div>
       </div>
     </div>
+    <u-select v-model="isShowAlbum" :default-value="defaultValue" :list="albumList" @confirm="onConfirm"></u-select>
   </div>
 </template>
 
@@ -83,13 +84,34 @@
         currIndex: 0,
         isHide: false,
         height: '100%',
-        waterSrc: ''
+        waterSrc: '',
+        albumId: '1',
+        albumName: '',
+        watermarkList: [],
+        isShowAlbum: false,
+        albumList: []
+      }
+    },
+
+    computed: {
+      defaultValue () {
+        if (!this.albumList.length) {
+          return [0]
+        }
+
+        return [this.albumList.map(v => v.value).indexOf(this.albumId)]
       }
     },
 
     onLoad (query) {
+      if (query.albumId) {
+        this.albumId = query.albumId
+      }
+
       this.img = query.url
       this.height = uni.getSystemInfoSync().windowHeight
+
+      this.getWatermarkList()
     },
 
     methods: {
@@ -102,6 +124,30 @@
               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('新增成功')
+                    }
+                  })
+                }
+              })
               this.waterSrc = dataURL
             }).catch(e => {
               console.log(e)
@@ -110,6 +156,48 @@
         })
       },
 
+      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 })
+      },
+
+      onConfirm (e) {
+        this.albumId = e[0].value
+        this.albumName = e[0].label
+      },
+
+      getWatermarkList () {
+        this.$http.post(`/api/appalbumtemplate/list?size=100&templateType=0`).then(res => {
+          if (res.code === 0) {
+            this.watermarkList = res.data.records
+          }
+        })
+
+        this.$http.post('/api/appalbum/list', null, {
+          parmas: {
+            size: 1000
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.albumList = res.data.records.map(v => {
+              return {
+                label: v.albumName,
+                value: v.id
+              }
+            })
+
+            this.albumName = this.albumList.filter(v => v.value === this.albumId)[0].label
+          }
+        })
+      },
+
       back () {
         uni.navigateBack({
           delta: 1