乡村相册迁移位置

src/project/caw/AppCountryAlbum/Photo.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="photo" v-if="pageShow" @click="isShow = !isShow">
+    <div class="photo-wrapper">
+      <image mode="widthFix" :src="img" />
+    </div>
+    <div class="photo-bottom" :class="[isShow ? 'active' : '']">
+      <div class="top">
+        <h2>查看图片</h2>
+        <p>长按图片进行分享给他人</p>
+        <image @click.stop="isShow = false" src="./images/down_boldw.png" />
+      </div>
+      <div class="btns">
+        <div class="btn-item" hover-class="bg-hover" @click="back">
+          <image src="./images/fanhui-black.png" />
+          <span>返回</span>
+        </div>
+        <div class="btn-item" hover-class="bg-hover" v-if="createUserId === user.openId" @click="remove">
+          <image src="./images/remove-black.png" />
+          <span>删除</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'Photo',
+
+    appName: '相片',
+
+    data () {
+      return {
+        img: '',
+        id: '',
+        isShow: true,
+        pageShow: false,
+        createUserId: ''
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    onLoad (query) {
+      this.id = query.id
+      this.$loading()
+      this.$http.post(`/api/appalbumphoto/queryDetailById?id=${query.id}`).then(res => {
+        if (res.code == 0) {
+          this.img = res.data.photoUrl
+          this.createUserId = res.data.createUserId
+        }
+
+        this.$nextTick(() => {
+          this.pageShow = true
+
+          this.isShow = true
+        })
+      })
+    },
+
+    methods: {
+      back () {
+        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(() => {
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .photo {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    background: #000;
+    overflow-y: auto;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .photo-bottom {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 11;
+      width: 100%;
+      transform: translateY(100%);
+      background: #fff;
+      border-radius: 32px 32px 0 0;
+      transition: all ease 0.4s;
+
+      &.active {
+        transform: translateY(0);
+      }
+
+      .top {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        height: 96px;
+
+        h2 {
+          font-size: 28px;
+          color: #333333;
+          line-height: 40px;
+        }
+
+        p {
+          color: #999999;
+          font-size: 24px;
+        }
+
+        image {
+          position: absolute;
+          top: 50%;
+          right: 32px;
+          z-index: 1;
+          width: 32px;
+          height: 32px;
+          transform: translateY(-50%);
+        }
+      }
+
+      .btns {
+        display: flex;
+        align-items: center;
+        height: 216px;
+
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          flex: 1;
+
+          image {
+            width: 80px;
+            height: 80px;
+          }
+
+          span {
+            color: #333333;
+            font-size: 28px;
+          }
+        }
+      }
+    }
+
+    .photo-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      min-height: 100vh;
+
+      & > image {
+        width: 100%;
+      }
+    }
+  }
+</style>