<template>
  <view class="image-preview" @click="goBack">
    <view></view>
    <image class="image" :src="url" mode="aspectFill"></image>
    <view class="Localbtn" @click.stop>
      <image
        class="Local"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Local.png"
        mode="aspectFit"
        @click="saveImage"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: "",
    };
  },
  onLoad(options) {
    this.url = options.url;
  },
  methods: {
    //返回上一页
    goBack() {
      wx.navigateBack({
        delta: 1,
      });
    },
    //保存图片
    saveImage() {
        uni.showLoading({
        title: '正在下载图片...',
        mask: true
      });
      
      // 下载网络图片到临时文件
      uni.downloadFile({
        url: this.url,
        success: (downloadRes) => {
          if (downloadRes.statusCode === 200) {
            // 保存到相册
            uni.saveImageToPhotosAlbum({
              filePath: downloadRes.tempFilePath,
              success: () => {
                uni.hideLoading();
                uni.showToast({
                  title: '保存成功',
                  icon: 'none',
                  duration: 2000
                });
              },
              fail: (saveErr) => {
                uni.hideLoading();
                uni.showToast({
                  title: '保存失败: ' + saveErr.errMsg,
                  icon: 'none',
                  duration: 2000
                });
              }
            });
          } else {
            uni.hideLoading();
            uni.showToast({
              title: '下载失败',
              icon: 'none',
              duration: 2000
            });
          }
        },
        fail: (downloadErr) => {
          uni.hideLoading();
          uni.showToast({
            title: '下载失败: ' + downloadErr.errMsg,
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.image-preview {
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.image {
  width: 100vw;
  object-fit: contain;
}
.Localbtn {
  width: 100vw;
  height: 50rpx;
  margin-bottom: 50rpx;
  display: flex;
  flex-direction: row-reverse;
}
.Local {
  width: 50rpx;
  height: 50rpx;
  margin-right: 50rpx;
}
</style>