dvcp_v2_wxcp_app/src/saas/AppCountryAlbum/Photo.vue

<template>
  <div class="photo">
    <div class="photo-wrapper">
      <image mode="widthFix" :src="img" />
    </div>
    <div class="photo-footer">
      <div class="item" @click="back">
        <image src="./images/fanhui.png" />
        <span>返回</span>
      </div>
      <!-- <div class="item" @click="share">
        <image src="./images/fenxiang.png" />
        <span>分享</span>
      </div> -->
      <div class="item" @click="remove">
        <image src="./images/shanchu.png" />
        <span>删除</span>
      </div>
    </div>
  </div>
</template>

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

    appName: '相片',

    data () {
      return {
        img: '',
        id: ''
      }
    },

    onLoad (query) {
      this.id = query.id
      this.img = query.url
    },

    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-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 100vh;
      padding-bottom: 216px;

      & > image {
        width: 100%;
      }
    }

    .photo-footer {
      display: flex;
      position: fixed;
      align-items: center;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 216px;
      background: #1E1E21;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 100%;
        text-align: center;

        &:active {
          background: #000;
        }

        image {
          width: 80px;
          height: 80px;
        }

        span {
          font-size: 28px;
          color: #fff;
        }
      }
    }
  }
</style>