小程序之点击下载图片到本地

话不多说直接上代码

<template>
    <view class="cart-ticket full-height full-width">
        <!-- 轮播图 -->
        <swiper v-if="brandList.length > 0" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" 
        class="swiper" indicator-color="#ff9900" indicator-active-color="#ffffff" :current="currentId" @change="swiperChange" >
            <swiper-item v-for="(img, index) in brandList" :key="index" class="swiper-item">
                <image :src="img.posterImg" mode="aspectFill" class="full-height full-width"></image>
            </swiper-item>
        </swiper>
        <button v-if="!isAuthSavePhoto" @tap="onSaveToPhone"  style="background: #294D7C;  
        border-radius: 40upx; text-align: center; color: #ffffff; width: 50%; margin: auto; position: absolute; top: 90%; left: 50%;transform: translate(-50%,-50%);" >
                保存图片到手机
          </button>
         <button v-if="isAuthSavePhoto" @tap="showModal" style="background: #294D7C;  
        border-radius: 40upx; text-align: center; color: #ffffff;  " >            
              保存图片到手机
         </button>
    </view>
</template>

<script>
    import couponService from '@/service/CouponService';
    export default {
        components: {
        },
        computed: {
        },
        data() {
            return {
                photoUrl: "https://cz-mall.oss-cn-shenzhen.aliyuncs.com/mall/images/null/20200324/1585041343359vp2.png",
                isAuthSavePhoto: false,
                brandList:[]
            };
        },
        methods: {
            swiperChange(e){
                var index=e.target.current || e.detail.current;
                console.log(index)
                this.photoUrl = this.brandList[index].posterImg
            },
             // 保存图片到手机
              onSaveToPhone() {
                  if (this.photoUrl.indexOf("https") < 0) {
                      this.photoUrl = this.photoUrl.replace("http:", "https:");
                      
                    }
                    console.log(this.photoUrl)
                this.getSetting().then((res) => {
                  // 判断用户是否授权了保存到本地的权限
                  if (!res.authSetting['scope.writePhotosAlbum']) {
                    this.authorize().then(() => {
                      this.savedownloadFile(this.photoUrl)
                      // this.setData({
                      //   isAuthSavePhoto: false
                      // })
                      this.isAuthSavePhoto = false
                    }).catch(() => {
                      wx.showToast({
                        title: '您拒绝了授权',
                        icon: 'none',
                        duration: 1500
                      })
                      this.isAuthSavePhoto = true
                      // this.setData({
                      //   isAuthSavePhoto: true
                      // })
                    })
                  } else {
                    this.savedownloadFile(this.photoUrl)
                  }
                })
              },
              
              
              //打开设置，引导用户授权
              onOpenSetting() {
                wx.openSetting({
                  success: (res) => {
                    console.log(res.authSetting)
                    if (!res.authSetting['scope.writePhotosAlbum']) {
                      wx.showToast({
                        title: '您未授权',
                        icon: 'none',
                        duration: 1500
                      })
                      
                      this.isAuthSavePhoto =  true
            
                    } else {// 接受授权
                      this.isAuthSavePhoto =  false
                      this.onSaveToPhone() // 接受授权后保存图片
            
                    }
            
                  }
                })
            
              },
              // 获取用户已经授予了哪些权限
              getSetting() {
                return new Promise((resolve, reject) => {
                  wx.getSetting({
                    success: res => {
                      resolve(res)
                    }
                  })
                })
              },
              // 发起首次授权请求
              authorize() {
                return new Promise((resolve, reject) => {
                  wx.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success: () => {
                      resolve()
                    },
                    fail: res => { //这里是用户拒绝授权后的回调
                      console.log('拒绝授权')
                      reject()
                    }
                  })
                })
              },
              savedownloadFile(img) {
                        wx.showLoading({
                          title: '保存中...', 
                          mask: true,
                        });
                      
                        wx.downloadFile({
                          url:img,
                          success: function(res) {
                            wx.showToast({
                              title: res,
                              icon: 'success',
                              duration: 2000
                            });
                              console.log(res)
                            if (res.statusCode === 200) {
                              let img = res.tempFilePath;
                              wx.saveImageToPhotosAlbum({
                                filePath: img,
                                success(res) {
                                  wx.showToast({
                                    title: '保存成功',
                                    icon: 'success',
                                    duration: 2000
                                  });
                                },
                                fail(res) {
                                  wx.showToast({
                                    title: '保存失败',
                                    icon: 'success',
                                    duration: 2000
                                  });
                                }
                              });
                            }
                          }
                        })
                  
                // this.downLoadFile(img).then((res) => {
                //   return this.saveImageToPhotosAlbum(res.tempFilePath)
                // }).then(() => {
                // })
                
                
                
              },
              //单文件下载(下载文件资源到本地)，客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径。
              downLoadFile(img) {
                return new Promise((resolve, reject) => {
                  wx.downloadFile({
                    url: img,
                    success: (res) => {
                      console.log('downloadfile', res)
                      resolve(res)
                    }
                  })
                })
              },
              // 保存图片到系统相册
              saveImageToPhotosAlbum(saveUrl) {
                return new Promise((resolve, reject) => {
                  wx.saveImageToPhotosAlbum({
                    filePath: saveUrl,
                    success: (res) => {
                      wx.showToast({
                        title: '保存成功',
                        duration: 1000,
                      })
                      resolve()
                    }
                  })
                })
              },
              // 弹出模态框提示用户是否要去设置页授权
              showModal() {
                wx.showModal({
                  title: '检测到您没有打开保存到相册的权限，是否前往设置打开？',
                  success: (res) => {
                    if (res.confirm) {
                      console.log('用户点击确定')
                      this.onOpenSetting() // 打开设置页面          
                    } else if (res.cancel) {
                      console.log('用户点击取消')
                    }
                  }
                })
            },
            loadData() {}
        },
        onLoad(options) {
            // 海报列表
            couponService.getAllPoster({}).then(result => {
                this.brandList = result.list
                this.photoUrl = result.list[0].posterImg
            }).catch(err=> {
                console.log(err)
            });
        }
    };
</script>

<style lang="scss">
    page{
        position: relative;
        width: 100%;
        height: 100%;
        // 轮播图
        .swiper {
            height: 100%;
            margin: 0upx;
            width: 100%;
            image {
                width: 100%;
            }
        }
        .cart-ticket{
            width: 100%;
            height: 100%;
            background: #ffffff;
        }
        .save_btn{
            font-size: 30rpx;
            line-height: 72rpx;
            color: #fff;
            width:100%;
            height:100%;
            text-align: center;
            border-radius: 36rpx;
            z-index: 10;
            background: #294D7C;
        }
    }
    
</style>