dvcp_v2_wxcp_app/src/saas/AppCountryAlbum/ReportImg.vue

<template>
  <div class="photo">
    <div class="photo-top">
      <image src="./images/close.png" @click="back" />
      <div class="photo-top__middle" @click="isShowAlbum = true">
        <span>保存至：{{ albumName || '默认相册' }}</span>
        <image src="./images/to-right.png" />
      </div>
      <div></div>
    </div>
    <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="upload">
        <image src="./images/shangchuan.png" />
        <span>上传</span>
      </div>
    </div>
    <u-select v-model="isShowAlbum" :default-value="defaultValue" :list="albumList" @confirm="onConfirm"></u-select>
  </div>
</template>

<script>
  export default {
    name: 'Photo',

    appName: '拼图汇报',

    data () {
      return {
        img: '',
        type: '',
        albumList: [],
        albumName: '',
        albumId: '',
        templateId: '',
        isShowAlbum: false
      }
    },

    computed: {
      defaultValue () {
        if (!this.albumList.length) {
          return [0]
        }

        return [this.albumList.map(v => v.value).indexOf(this.albumId)]
      }
    },

    onLoad (query) {
      this.img = query.img
      this.type = query.type
      this.templateId = query.templateId

      this.getWatermarkList()
    },

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

      upload () {
        this.$loading()
        this.$http.post('/api/appalbumphoto/addOrUpdate', {
          albumId: this.albumId,
          photoUrl: this.img,
          watermarkType: this.type,
          templateId: this.templateId
        }).then(res => {
          if (res.code === 0) {
            this.$u.toast('新增成功')
            setTimeout(() => {
              uni.reLaunch({
                url: 'AppCountryAlbum'
              })
            }, 500)
          }

          uni.hideLoading()
        })
      },

      onConfirm (e) {
        this.albumId = e[0].value
        this.albumName = e[0].label
      },

      getWatermarkList () {
        this.$http.post('/api/appalbum/list', null, {
          parmas: {
            size: 1000
          }
        }).then(res => {
          if (res.code === 0) {
            this.albumList = res.data.records.map(v => {
              return {
                label: v.albumName,
                value: v.id
              }
            })

            this.albumName = this.albumList[0].label
            this.albumId = this.albumList[0].value
          }
        })
      },

      preview (url) {
        uni.previewImage({
          urls: [url],
          current: url
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .photo {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background: #000;

    .photo-top {
      display: flex;
      position: fixed;
      align-items: center;
      justify-content: space-between;
      top: 0;
      left: 0;
      z-index: 11;
      width: 100%;
      height: 128px;
      padding: 0 32px;
      background: rgba(0, 0, 0, 0.5);

      & > image {
        width: 28px;
        height: 28px;
      }

      & > span {
        color: #cbcbcb;
        font-size: 32px;
      }

      .photo-top__middle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 400px;
        height: 72px;
        line-height: 1;
        background: #0B111F;
        border-radius: 40px;
        font-size: 28px;
        color: #cbcbcb;

        span {
          max-width: 70%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        image {
          width: 32px;
          height: 32px;
          margin-left: 16px;
        }
      }
    }

    .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;
        text-align: center;

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

        span {
          font-size: 28px;
          color: #fff;
        }
      }
    }

    & > image {
      width: 100%;
      min-height: calc(100% - 216px);
    }
  }
</style>