settle_down_wx/pages/subPackages/activityPromulgate/qrCode.vue

<template>
    <div class="qrCodeBody">
      <div class="whiteBoard">
         <div class="qrCodeTitle">互联网私募如何入门？</div>
         <div class="qrCodeMsg">活动时间：<br/>
           {{form.activityStartTime}} — {{form.activityEndTime}}
         </div>
         <div class="qrCodeMsg">活动地址：<br/>
           {{form.activityAddress}} — {{form.activityAddressDetail}}
         </div>
         <div class="qrCodeBox">
             <img :src="qrCode" class="qrCode">
             <span class="qrCodeInfo">扫一扫上面的二维码，完成签到</span>
         </div>
         <div class="bottomBtnBox">
           <button class="btn qdBtn" @tap="helpQd">协助签到</button>
           <button class="btn commitBtn" @tap="commitImg">保存图片</button>
         </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "qrCode",
  data(){
    return{
      form:{},
      qrCode:''
    }
  },
  onLoad(options) {
    if (options.item){
      this.form = JSON.parse(options.item)
      this.qrCode = this.$constant.BASE_URI +
          "/FileController/download/" +
          this.form.qrCode
    }
  },
  methods:{
    helpQd(){
      uni.navigateTo({
        url:'/pages/subPackages/parkActivity/activityCheckIn?item=' + JSON.stringify(this.form)
      })
    },
    commitImg(){
        // 假设你已经有一个图片链接或者图片路径
        const imageSrc = this.qrCode

        // 下载图片
        uni.downloadFile({
          url: imageSrc,
          success: downloadResult => {
            if (downloadResult.statusCode === 200) {
              // 获取下载后的图片临时文件路径
              let tempFilePath = downloadResult.tempFilePath;

              // 保存图片到相册
              uni.saveImageToPhotosAlbum({
                filePath: tempFilePath,
                success: () => {
                  uni.showToast({
                    title: '图片保存成功'
                  });
                },
                fail: error => {
                  uni.showToast({
                    title: '图片保存失败',
                    icon: 'none'
                  });
                  console.log('saveImageToPhotosAlbum fail', error);
                }
              });
            } else {
              uni.showToast({
                title: '图片下载失败',
                icon: 'none'
              });
            }
          },
          fail: error => {
            uni.showToast({
              title: '图片下载失败',
              icon: 'none'
            });
            console.log('downloadFile fail', error);
          }
        });
      }
  }
}
</script>

<style lang="scss">
    .qrCodeBody{
      .whiteBoard{
        background: white;
        padding: 32rpx;
        box-sizing: border-box;
        margin-top: 24rpx;
        min-height: 1424rpx;
        .qrCodeTitle{
          color: rgba(24, 23, 42, 1);
          font-size: 32rpx;
          font-weight: 600;
          margin-bottom: 32rpx;
        }
        .qrCodeMsg{
          color: rgba(102, 102, 102, 1);
          font-size: 28rpx;
          line-height: 42rpx;
        }
        .qrCodeBox{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-top: 134rpx;
          margin-bottom: 200rpx;
          .qrCode{
            width: 440rpx;
            height: 440rpx;
          }
          .qrCodeInfo{
            color: rgba(51, 51, 51, 1);
            font-size: 28rpx;
            margin-top: 8rpx;
          }
        }
        .btn{
          width: 654rpx;
          height: 96rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 36rpx;
          color: white;
          border-radius: 8rpx;
          &::after{
            border: none;
          }
        }
        .bottomBtnBox{
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .qdBtn{
          background: rgba(3, 101, 249, 1);
        }
        .commitBtn{
          background: rgba(34, 181, 101, 1);
          margin-top: 32rpx;
        }
      }
    }
</style>