乡村相册 接口对接

src/saas/AppCountryAlbum/Photo.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="photo">
-    <image mode="aspectFit" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" />
+    <image mode="aspectFit" :src="img" @click="preview(img)" />
     <div class="photo-footer">
+      <div class="item" @click="back">
+        <image src="./images/fanhui.png" />
+        <span>返回</span>
+      </div>
       <div class="item" @click="back">
         <image src="./images/fenxiang.png" />
         <span>分享</span>
       </div>
-      <div class="item">
-        <image src="./images/xiazai.png" />
-        <span>下载</span>
-      </div>
-      <div class="item">
+      <div class="item" @click="remove">
         <image src="./images/shanchu.png" />
         <span>删除</span>
       </div>
@@ -26,12 +26,14 @@
 
     data () {
       return {
-
+        img: '',
+        id: ''
       }
     },
 
-    onLoad () {
-
+    onLoad (query) {
+      this.id = query.id
+      this.img = query.url
     },
 
     methods: {
@@ -39,6 +41,27 @@
         uni.navigateBack({
           delta: 1
         })
+      },
+
+      remove () {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.$http.post(`/api/appalbumphoto/delete?ids=${this.id}`).then(res => {
+            if (res.code == 0) {
+              this.$u.toast('删除成功')
+              uni.$emit('update')
+
+              this.back()
+            }
+          })
+        }).catch(() => {
+        })
+      },
+
+      preview (url) {
+        uni.previewImage({
+          urls: [url],
+          current: url
+        })
       }
     }
   }
@@ -49,6 +72,7 @@
     position: relative;
     width: 100%;
     height: 100vh;
+    overflow: auto;
     background: #000;
 
     .photo-footer {
@@ -84,7 +108,7 @@
 
     & > image {
       width: 100%;
-      height: 100%;
+      min-height: calc(100% - 216px);
     }
   }
-</style>
+</style>