小程序预览图片加下载组件

<view class="container" catchtouchmove="true" bindtap="close">
	<image src="{{item.url}}" mode="aspectFit"></image>
	<view class="btn main-btn" catchtap="clickDownload">下载</view>
</view>

.container {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 20rpx;
  background: rgba(0, 0, 0, .4);
  z-index: 999;
  overflow-y: scroll;
}

image {
  width: 80%;
  height: 80vh;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 88rpx;
  border-radius: 88rpx;
  font-size: 32rpx;
  color: white;
  border: 2rpx solid white;
}

// components/card/preview/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    item: Object,
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickDownload() {
      const url = this.properties.item.url
      wx.showLoading({
        title: '下载中...',
      })
      setTimeout(() => {
        wx.hideLoading({
          complete: (res) => {},
        })
      }, 10000)
      wx.downloadFile({
        url,
        success: ret => {
          const filePath = ret.tempFilePath
          wx.saveImageToPhotosAlbum({
            filePath,
            success: () => {
              wx.showToast({
                title: '保存成功',
              })
              this.close()
            },
            complete: () => {
              wx.hideLoading({
                complete: (res) => {},
              })
            }
          })
        }
      })
    },
    close() {
      this.triggerEvent('close')
    }
  }
})