pifa/components/goods-poster-popup/index.vue

<template>
  <u-popup v-model="show" mode="center" :maskCloseAble="false" :closeable="true" :maskCustomStyle="{ background: 'rgba(0, 0, 0, 0.5)' }"
    border-radius="18" :z-index="12" @close="onClose()">
    <view class="pop-poster pop-example__container">
      <view class="image__container" @click="handlePreviewImage()">
        <image v-if="imageUrl" show-menu-by-longpress class="image" mode="scaleToFill" :src="imageUrl"></image>
      </view>
      <view class="save-btn__container">
        <view class="save-btn" @click="handleDownload()">保存海报图</view>
      </view>
    </view>
  </u-popup>
</template>

<script>
  export default {
    name: 'goods-poster-popup',
    emits: ['update:modelValue'],
    props: {
      // 控制组件显示隐藏
      modelValue: {
        Type: Boolean,
        default: false
      },
      // 获取海报图的api方法
      apiCall: {
        type: Function,
        default: () => {}
      },
      // 获取海报图的api参数
      apiParam: {
        type: Object,
        default: () => {}
      },
    },
    watch: {
      // 监听海报图弹层显示隐藏
      modelValue: {
        immediate: true,
        handler(val) {
          val ? this.onShowPopup() : this.show = false
        }
      },
    },
    data() {
      return {
        // 是否显示弹窗
        show: false,
        // 图片url地址
        imageUrl: ''
      }
    },
    methods: {

      // 显示海报弹窗
      onShowPopup() {
        const app = this
        app.apiCall({ ...app.apiParam, channel: app.platform })
          .then(result => {
            app.imageUrl = result.data.imageUrl
            app.show = true
          })
          .catch(err => app.onClose())
      },

      // 关闭弹窗
      onClose() {
        this.$emit('update:modelValue', false)
      },

      // 预览图片
      handlePreviewImage() {
        uni.previewImage({ urls: [this.imageUrl] })
      },

      // 保存海报图片
      handleDownload() {
        const app = this
        uni.showLoading({ title: '加载中' })
        // 下载海报图片
        uni.downloadFile({
          url: app.imageUrl,
          success(res) {
            console.log(res)
            uni.hideLoading()
            // 图片保存到相册
            app.onSaveImage(res.tempFilePath)
          },
          fail(res) {
            console.log('fail', res)
            uni.hideLoading()
            app.$toast('很抱歉，自动保存失败 请点击图片后长按手动保存', 3000)
          }
        })
      },

      // 图片保存到相册
      onSaveImage(tempFilePath) {
        const app = this
        // #ifndef H5
        uni.saveImageToPhotosAlbum({
          filePath: tempFilePath,
          success(data) {
            app.$success('保存成功')
            // 关闭弹窗
            app.onClose()
          },
          fail(err) {
            if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
              app.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000)
            }
          }
        })
        // #endif
        // #ifdef H5
        const names = tempFilePath.split('/')
        const fileName = names[names.length - 1]
        app.fileDownLoadForH5({ name: fileName, blob: tempFilePath })
        app.onClose()
        // #endif
      },

      // 兼容H5端下载图片
      // #ifdef H5
      fileDownLoadForH5({ name, blob }) {
        const linkElement = document.createElement('a')
        linkElement.setAttribute('href', blob)
        linkElement.setAttribute('downLoad', name)
        linkElement.click()
      },
      // #endif

    }
  }
</script>

<style lang="scss" scoped>
  .pop-poster {
    width: 560rpx;
    position: relative;
    background: #fff;
    padding: 76rpx 76rpx 40rpx 76rpx;
    border-radius: 10rpx;
  }

  // 图片容器
  .image__container {
    .image {
      display: block;
      width: 420rpx;
      height: 636rpx;
      box-shadow: 0 0 25rpx rgba(0, 0, 0, 0.15);
    }
  }

  // 保存按钮
  .save-btn__container {
    margin-top: 30rpx;

    .save-btn {
      color: rgb(255, 255, 255);
      color: $main-text;
      background: linear-gradient(to right, $main-bg, $main-bg2);
      font-weight: 500;
      font-size: 28rpx;
      border-radius: 38rpx;
      height: 76rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>