zhibo/pages_user/user/userTuiImg.vue

<template>
  <view class="distribution-posters">
    <view class="banenr">
       <image class="slide-image" :src="url" mode="widthFix" show-menu-by-longpress />
    </view>
	<view class="btn-box">
		<view class="btn" @click="saveImg()">保存海报</view>
	</view>
    
  </view>
</template>
<script>
 
import {getTuiImg} from '@/api/user'
export default {
  name: 'Poster',
  components: {
  },
  props: {},
  data: function() {
    return {
       url:null,
    }
  },
  mounted: function() {
    this.getTuiImg()
  },
  methods: {
    getTuiImg: function() {
      let that = this
      getTuiImg().then(
        res => {
			var path=uni.getStorageSync('requestPath')
			that.url =path+ "/"+res.url
        },
        err => {
          uni.showToast({
            title: err.msg,
            icon: 'none',
            duration: 2000,
          })
        }
      )
    },
    downloadIamge(imgsrc, name) {
      var that = this
      this.isDown = true
      var downloadUrl = imgsrc
      // if (!wx.saveImageToPhotosAlbum) {
      //   uni.showModal({
      //     title: '提示',
      //     content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。',
      //   })
      //   that.openDialogVisible = true

      //   return
      // }

      that.downloadFile(downloadUrl)

      //可以通过 uni.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope
      // uni.getSetting({
      //   success(res) {
      //     if (!res.authSetting["scope.writePhotosAlbum"]) {
      //       that.openDialogVisible = true;

      //       // 接口调用询问
      //       uni.authorize({
      //         scope: "scope.writePhotosAlbum",
      //         success() {
      //           that.downloadFile(downloadUrl);
      //         },
      //         fail() {
      //           // 用户拒绝了授权
      //           // 打开设置页面
      //           uni.openSetting({
      //             success: function (data) {},
      //             fail: function (data) {}
      //           });
      //         }
      //       });
      //     } else {
      //       that.downloadFile(downloadUrl);
      //     }
      //   },
      //   fail(res) {
      //     that.openDialogVisible = true;
      //   }
      // });
    },
    saveImg: function() {
      this.downloadIamge(this.url, 'poster')
    },
    downloadFile(url) {
		console.log(url);
		uni.showLoading({
			title: "图片保存中..."
		})
		uni.downloadFile({
			url,
			fail: function(res) {
			  uni.showModal({
				title: '提示',
				content: '保存失败',
			  })
			},
			success: function(res) {
				console.log(res)
				var tempFilePath = res.tempFilePath;
				uni.saveImageToPhotosAlbum({
					filePath: tempFilePath,
					success:()=> {
					  // 5 提示保存成功
					  uni.showToast({
						title: "保存成功",
						duration: 2000
					  })
					},
					fail:()=>{
					  //  6 失败关闭提示信息！！！
					  console.log("saveImageToPhotosAlbum 失败");
					  uni.hideLoading();
					},
					complete: function() {
					  // 7 隐藏提示
					  uni.hideLoading();
					}
				})
			},
		})
    },
  },
}
</script>

<style lang="less">
page {
	height: 100%;
}

.distribution-posters {
	height: 100%;
  
}

.banenr {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom:140upx ;
	height: 100%;
}

.banner .slide-image {
	width: 100%;
	height: auto;
	
}
.btn-box{
 	height: 140upx;
 	z-index: 9999;
 	width: 100%;
 	padding: 0rpx 30upx;
 	position: fixed;
 	bottom: 0;
 	left: 0;
 	box-sizing: border-box;
 	background-color: #ffffff;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	.btn{
 		width: 100%;
 		height: 88upx;
 		line-height: 88upx;
 		text-align: center;
 		font-size: 34upx;
 		font-family: PingFang SC;
 		font-weight: 400;
 		color: #ffffff;
 		background:#2BC7B9 !important;
 		border-radius: 44upx;
 	}
 }
</style>