cashier_admin_app/pages/noticeManage/bindUser.vue

<template>
  <view class="n-title">第一步</view>
  <view class="sub-title">使用【微信扫一扫】扫描下方二维码，并点击确认授权按钮。</view>
  <view class="image-wrapper">
    <view class="image-content" @touchstart="handleStart('authQr')" @touchend="handleEnd">
      <image :src="vdata.authQr" mode="scaleToFill" />
    </view>
    <view class="image-tips">长按可将图片保存至相册</view>
  </view>
  <view class="n-title">第二步</view>
  <view class="sub-title">页面提示【授权成功】后，按照手机端的提示关注公众号开启消息推送功能</view>
  <view class="image-wrapper footer-image">
    <view class="image-content" @touchstart="handleStart('wxmpQr')" @touchend="handleEnd">
      <image :src="vdata.wxmpQr" mode="scaleToFill" />
    </view>
    <view class="image-tips">长按可将图片保存至相册</view>
  </view>
  <view class="list-footer">
    <view class="button-wrapper">
      <button class="jeepay-btn" hover-class="hover-button" @tap="goBack">返回列表页</button>
    </view>
  </view>
  <JeepayPopupConfirm ref="confirmSave" />
</template>

<script setup>
import { reactive, ref } from 'vue'
import { $getWxMpInfo } from '@/http/apiManager.js'
import infoBox from '@/commons/utils/infoBox.js'
import qrCode from '@/commons/utils/qrCode.js'
import { saveHeadImgFile } from '@/commons/utils/saveImg.js'
const confirmSave = ref(null)
const vdata = reactive({
  timeOut: null,
})
$getWxMpInfo().then(({ bizData }) => {
  bizData.authQr = qrCode.drawImg(bizData.authUrl)
  Object.assign(vdata, bizData)
})
const handleStart = (key) => {
  vdata.timeOut = setTimeout(() => {
    saveImage(key)
    clearTimeout(vdata.timeOut)
  }, 800)
}
const handleEnd = () => clearTimeout(vdata.timeOut)
const saveImage = (key) => {
  // #ifdef  APP-PLUS
  confirmSave.value.open('确认保存图片？').then((res) => {
    if (key == 'authQr') return saveQrcodeImg()
    uni.downloadFile({
      url: vdata[key],
      success: (res) => {
        console.log(res)
        if (res.statusCode == 200) {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: (r) => {
              infoBox.showSuccessToast('保存成功')
              uni.vibrateShort()
            },
            fail: (er) => {
              console.log(er)
              infoBox.showErrorToast('保存失败')
            }
          })
        }
      },
      fail: (err) => {
        console.log(err)
        infoBox.showErrorToast('保存失败')
      }
    })
  })
  // #endif
  //#ifdef MP-WEIXIN
  confirmSave.value.open('确认保存图片？').then((res) => {
    downloadQR(key)
  })
  //#endif
}
//#ifdef MP-WEIXIN
function downloadQR(key) {
  wx.getSetting({
    //获取权限
    success(res) {
      if (res.authSetting['scope.writePhotosAlbum']) {
        if (key == 'authQr') return saveWxQrcodeImg(vdata.authQr)
        download(vdata[key])
      } else {
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            if (key == 'authQr') return saveWxQrcodeImg(vdata.authQr)
            download(vdata[key])
          },
        })
      }
    },
  })
}
function download(data) {
  uni.downloadFile({
    url: data,
    success: (res) => {
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function () {
          console.log('res', res)
          infoBox.showSuccessToast('保存成功')
          uni.vibrateShort()
        },
        fail: function (err) {
          infoBox.showErrorToast('保存失败')
        },
      })
    },
  })
}
//#endif
const saveQrcodeImg = () => {
  saveHeadImgFile(vdata.authQr, 80)
    .then((success) => {
      infoBox.showSuccessToast('保存成功')
    })
    .catch((err) => {
      console.log(err)
      infoBox.showErrorToast('保存失败')
    })
}

const saveWxQrcodeImg = (data) => {
  const fileManager = wx.getFileSystemManager()
  const filePath = wx.env.USER_DATA_PATH + '/res.png'
  //这块是定义图片的名称，可自定义其他
  fileManager.writeFile({
    filePath: filePath,
    data: data.slice(22),
    encoding: 'base64',
    success: (res) => {
      wx.saveImageToPhotosAlbum({
        filePath: filePath,
        success: function (res) {
          //保存成功
          infoBox.showSuccessToast('保存成功')
        },
        fail: function (err) {
          console.log(err)
          //保存失败
          infoBox.showErrorToast('保存失败')
        },
      })
    },
    fail: (err) => {
      infoBox.showErrorToast('保存失败')
    },
  })
}
const goBack = () => uni.navigateBack()
</script>

<style lang="scss" scoped>
.n-title {
  margin: 50rpx 0 20rpx 0;
  text-align: center;
  font-size: 38rpx;
}

.sub-title {
  margin: 0 50rpx;
  color: #666666;
  font-size: 28rpx;
  text-align: center;
}

.image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1rpx solid #ededed;

  .image-content {
    margin: 50rpx 0 30rpx 0;
    width: 300rpx;
    height: 300rpx;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .image-tips {
    margin-bottom: 50rpx;
    font-size: 26rpx;
    color: #a6a6a6;
  }
}

.footer-image {
  padding-bottom: 50rpx;
}
</style>