fission-star-applet-250304/pages_order/mine/sharing.vue

<template>
  <view class="page">
    <navbar title="分享好友" leftClick @leftClick="$utils.navigateBack" />

    <view class="flex content">
      <image class="bg" :src="imgurl"></image>
      <view class="flex btns">
        <button class="btn btn-back" @click="$utils.navigateBack">返回</button>
        <button plain class="btn btn-save" @click="saveImg" >保存到相册</button>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        imgurl: null,
      }
    },
    onLoad() {
      // todo: fetch imgurl
      this.imgurl = '../../static/image/center/temp-share.png'
    },
    methods: {
      saveImg(){
        this.$authorize('scope.writePhotosAlbum').then((res) => {
          this.imgApi(this.imgurl)
        })
      },
			imgApi(image) {
				/* 获取图片的信息 */
				uni.getImageInfo({
					src: image,
					success: function(image) {
						/* 保存图片到手机相册 */
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								uni.showModal({
									title: '保存成功',
									content: '图片已成功保存到相册',
									showCancel: false
								});
							},
							complete(res) {
								console.log(res);
							}
						});
					}
				});
			},
    },
  }
</script>

<style scoped lang="scss">
.page {
  background-color: #111317;
  height: 100vh;
}

.content {
  margin-top: 79rpx;
  flex-direction: column;
}

.bg {
  width: 598rpx; 
  height: 1063rpx;
}

.btns {
  justify-content: space-between; 
  margin-top: 53rpx;
  width: 598rpx;
}

.btn {
  width: 280rpx; 
  height: 90rpx;
  font-size: 36rpx;
  color: #FFFFFF;
  border-radius: 45rpx;
  margin: 0;

  &-back {
    background-color: #4E5053;
  }

  &-save {
    background-image: linear-gradient(to right, #02DED6, #05D9A2);
  }
}
</style>