dvcp_v2_wxcp_app/src/saas/AppCountryAlbum/Photo.vue

<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.wxUserId || user.adminAuthType === '1'" @click="remove">
          <image src="./images/remove-black.png" />
          <span>删除</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  export default {
    name: 'Photo',

    appName: '相片',

    data () {
      return {
        img: '',
        id: '',
        isShow: false,
        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: {
      ...mapActions(['wxInvoke']),

      back () {
        uni.navigateBack({
          delta: 1
        })
      },

      share () {
        uni.showActionSheet({
          itemList: ['分享', '微信分享'],
          success: data => {
            if (data.tapIndex === 0 || data.tapIndex === 1) {
              if (data.tapIndex === 0) {
                this.wxInvoke(['shareAppMessage', {
                  title: this.info.title,
                  desc: this.info.tableExplain,
                  link: this.linkUrl,
                  imgUrl: this.info.headPicture
                }, () => {
                  this.isShow = false
                }])
              } else {
                this.wxInvoke(['shareWechatMessage', {
                  title: this.info.title,
                  desc: this.info.tableExplain,
                  link: this.linkUrl,
                  imgUrl: this.info.headPicture
                }, () => {
                  this.isShow = false
                }])
              }
            }
          }
        })
      },

      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
        })
      }
    }
  }
</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>