乡村相册

src/saas/AppCountryAlbum/AlbumDetail.vue

@@ -3,25 +3,25 @@
     <div class="photo-header">
       <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" mode="aspectFill" />
       <div>
-        <h2>默认相册</h2>
-        <span @click="linkTo('./AddAlbum')">相册设置</span>
+        <h2>{{ info.albumName }}</h2>
+        <span @click="linkTo('./AddAlbum?id=' + id)">相册设置</span>
       </div>
     </div>
     <div class="photo-info">
       <div class="photo-info__item">
-        <h2>131</h2>
+        <h2>{{ totalInfo.all || 0 }}</h2>
         <span>照片</span>
       </div>
       <div class="photo-info__item">
-        <h2>13</h2>
+        <h2>{{ totalInfo.today || 0 }}</h2>
+        <span>今日</span>
+      </div>
+      <div class="photo-info__item">
+        <h2>{{ totalInfo.benyue || 0 }}</h2>
         <span>本月</span>
       </div>
       <div class="photo-info__item">
-        <h2>133</h2>
-        <span>上月</span>
-      </div>
-      <div class="photo-info__item">
-        <h2>13</h2>
+        <h2>{{ totalInfo.bennian || 0 }}</h2>
         <span>今年</span>
       </div>
     </div>
@@ -40,18 +40,19 @@
         </div>
       </div>
       <div class="photo-item__wrapper">
-        <div class="photo-item" @click="linkTo('./Photo')" v-for="(group, index) in 10" :key="index">
+        <div class="photo-item" @click="linkTo('./Photo')" v-for="(group, index) in list" :key="index">
           <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" @click="preview(item.url)" mode="aspectFill" />
           <div class="photo-item__text">
             <h2>张三</h2>
             <p>02-12 12:32</p>
           </div>
         </div>
+        <AiEmpty v-if="!list.length"></AiEmpty>
       </div>
     </div>
     <div class="btn-wrapper">
-      <div class="btn" @click="upload" hover-class="text-hover">编辑照片</div>
-      <div class="btn" @click="upload" hover-class="text-hover">上传照片</div>
+      <div class="btn" hover-class="text-hover">编辑照片</div>
+      <div class="btn" @click="toAddImg" hover-class="text-hover">上传照片</div>
     </div>
   </div>
 </template>
@@ -72,7 +73,9 @@
         coverImg: '',
         imgList: [],
         hideStatus: false,
-        pageShow: false
+        pageShow: false,
+        id: '',
+        totalInfo: {}
       }
     },
 
@@ -81,13 +84,21 @@
     },
 
     onLoad (query) {
-      // this.type = query.type
-      // this.name = query.name
-      // this.coverImg = query.url
+      this.id = query.id
+
+      this.$nextTick(() => {
+        this.getTotalInfo(query.id)
+        this.getInfo(query.id)
+        this.getList()
+      })
+
+      uni.$on('change', () => {
+        this.getInfo(query.id)
+      })
     },
 
     onUnload () {
-      // uni.$off('update')
+      uni.$off('change')
     },
 
     methods: {
@@ -97,6 +108,14 @@
         })
       },
 
+      getInfo (id) {
+        this.$http.post(`/api/appalbum/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+          }
+        })
+      },
+
       preview (url) {
         let imgs = []
         this.list.forEach(item => {
@@ -109,106 +128,36 @@
         })
       },
 
-      upload() {
-        if (!this.token) {
-          this.$refs.login.show()
+      getTotalInfo (id) {
+        this.$http.post(`/api/appalbumphoto/photoDetail?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.totalInfo = res.data
+          }
+        })
+      },
 
-          return false
-        }
-
-        this.imgList = []
-        this.hideStatus = false
+      toAddImg () {
         uni.chooseImage({
-          count: this.limit,
+          count: 1,
           sizeType: ['compressed'],
-          sourceType: ['album', 'camera'],
-          success: (res) => {
-            if (res.tempFilePaths.length > 9) {
-              this.$toast(`图片不能超过9张`)
-
-              return false
-            }
-
-            this.$loading('上传中')
-            res.tempFilePaths.forEach((item, index) => {
-              if (index === res.tempFilePaths.length - 1) {
-                this.hideStatus = true
-              }
-
-              this.$nextTick(() => {
-                this.uploadFile(item, res.tempFilePaths.length)
-              })
-            })
-          },
-        })
-      },
-
-      uploadFile (img, total) {
-        uni.uploadFile({
-          url: this.$http.baseURL + '/admin/file/add',
-          filePath: img,
-          name: 'file',
-          header: {
-            'Content-Type': 'multipart/form-data',
-            Authorization: uni.getStorageSync('token'),
-          },
-          success: (res) => {
-            const data = JSON.parse(res.data)
-
-            if (data.code === 0) {
-              this.imgList.push(data.data[0].split(';')[0])
-            } else {
-              this.$toast(data.msg)
-            }
-          },
-          complete: () => {
-            this.$nextTick(() => {
-              if (this.imgList.length === total && this.hideStatus) {
-                this.$instance.post(`/app/appvillagepicturealbum/addPictures`, {
-                  areaName: uni.getStorageSync('areaName'),
-                  areaId: uni.getStorageSync('areaId'),
-                  type: this.type,
-                  urlList: this.imgList
-                }).then(res => {
-                  if (res.code == 0) {
-                    this.getList(this.type)
-                    this.getTotalInfo(this.type)
-                    uni.$emit('update')
-                  }
-                  this.$hideLoading()
-                  this.hideStatus = false
-                })
+          success: res => {
+            let formData = new FormData()
+            formData.append('file', res.tempFiles[0])
+            this.$http.post('/admin/file/add2?type=image', formData).then(res => {
+              if (res.code === 0) {
+                this.linkTo(`./Watermark?url=${res.data.url}&albumId=${this.id}`)
               }
             })
           }
         })
       },
 
-      getTotalInfo (type) {
-        this.$instance.post(`/app/appvillagepicturealbum/statistic?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
+      getList () {
+        this.$http.post(`/api/appalbumphoto/list`).then(res => {
           if (res.code === 0) {
-            this.info = res.data
+            this.list = res.data.records
           }
         })
-      },
-
-      getList (type) {
-        this.$instance.post(`/app/appvillagepicturealbum/queryAlbum?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
-          if (res.code === 0) {
-            this.list = Object.keys(res.data).map(v => {
-              return {
-                name: v,
-                list: res.data[v]
-              }
-            })
-
-            this.$nextTick(() => {
-              this.pageShow = true
-            })
-          }
-
-          this.$hideLoading()
-        })
       }
     }
   }