EnforcementCode-2.0/zdxt-web-client/zdxt-enforcement-code-app/fordelete/views/enterprise/qrCode.vue

<template>
	<div class="address_edit">
		<!-- 导航栏 -->
		<!--<div class="header_body">
			 <header-nav
				:slefBack="true"
				@goBack="goBack"
				:titelText="`执法监督码`"
			>
			</header-nav>
     
		</div> -->
		<!-- 中间 -->
		<div class="warp_body">
      <div class="white-body">
      <div class="qr_code">
        <div class="qr_name">
          <span>{{ data.enterpriseName }}</span>
        </div>
          <div class="qr_code_img" id="qr_code_img">
            <van-image
              width="100%"
              height="auto"
              :src="data.qrCodeUrl"
            />
          </div>
          <span class="qr_code_text">生成时间：{{ data.generateTime }}</span>
      </div>
      <van-action-bar>
        <van-action-bar-button color="#2b75fd" text="下载二维码" @click="download(data.qrCodeUrl)" />
<!--         <van-action-bar-button color="#2b75fd" text="二维码管理" @click="toHisrotyView()" />-->
      </van-action-bar>
		</div>
  </div>
	</div>
</template>

<script setup name="register">
import axios from "axios";
import {baseUrl} from "../../config/env";
import html2canvas from "html2canvas"
import {queryEnterpriseInformationQrCode} from '../../api/enterprise'
import * as w6s from 'szient-js-sdk';
import sha1 from 'crypto-js/sha1';
import { reactive } from "vue";
const { useMy } = $globalStore

const router = useRouter();
const route = useRoute();
const data = reactive({
  qrCodeUrl:"",
  enterpriseName:"",
  generateTime:"",
});


// 返回
const goBack = () => {
	router.go(-1);
};


onMounted(() => {
  queryEnterpriseInformationQrCode(route?.query?.enterpriseNumber
  ,success =>{
      if(success.success){
        data.qrCodeUrl = baseUrl + success.data.qrCodeUrl;
        data.enterpriseName = success.data.enterpriseName;
        data.generateTime = success.data.generateTime;
      }
  },error =>{
    console.log("查询失败")
  })
});

const downloadFile = (url) => {
      const a = document.createElement('a')
      a.href = url
      a.download = "123456" // 下载后文件名
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click() // 点击下载
      document.body.removeChild(a) // 下载完成移除元素
}
const download = (url) =>{
  console.log(url);
    //  let e = this.$refs.toast;
    // debugger
    //  html2canvas(document.getElementById('download-images'), {
    //      allowTaint: true,
    //      useCORS: true, // 设置跨域
    //      tainttest: true, // 检测每张图片都已经加载完成
    //      backgroundColor: null, // 背景色, 转换图片可能会有白色底色，不要的话就null
    //  }).then((canvas) => {
    //      const link = document.createElement("a"); // 创建一个超链接对象实例
    //      link.download = "d2f57b93fd86d266c462a315349c13f8.jpg"; // 设置要下载的图片的名称
    //      link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中
    //      link.click(); // 触发超链接的点击事件
    //  });
  const access_key = '6374106c5eb449a4ad6c2430f30796e6';
  const access_secret = '434fec85aa5846e88bbeb8fac6cf6d7f';
  // generateRandomNumber()
  const nonce = "887954";
  const timestamp = `${Date.now()}`;

  const str = [access_secret, nonce, timestamp]
    .sort()
    .reduce((str, item) => str += item, '');

  // 最终还需要转成全小写
  const signature = sha1(str).toString().toLowerCase();
  var siqObject = {
    access_key: access_key,
    nonce: nonce,
    timestamp: timestamp,
    signature: signature,
  };
  console.log(siqObject);
  //深i企鉴权
  w6s.config(siqObject)
  .then((res) => {
    // 成功
    console.log("鉴权成功",res);
    w6s.ready(() => {
  //   w6s.szient.getAuthCode({
  //     success: function(res) {
  //       console.log(res)
  //       console.log("认证成功",res);
  //       console.log(res.result.result.code)
  //       getSiqLoginAuth({code: res.result.result.code},success =>{
  //         console.log(success.data)
  //       },error =>{

  //       })
  //     },
  //     fail: function(err) {
  //       console.log(err)
  //       console.log("认证失败",err);
  //     },
  // });
  w6s.image.saveImages({
      url: url,
    });
    w6s.dialog.showToast({
      title: '二维码下载中，请稍后...',
      duration: 3000, // 毫秒数
    });
});   

  })
  .catch((err) => {
    // 失败
    // console.log(err)
    console.log("鉴权失败",err);
  });

    
  }

  const download2 = (url) => {
    	// url为图片地址（上传到后台，拿到链接）
        // 创建下载任务
        plus.nativeUI.showWaiting('加载中...')
        var dtask = plus.downloader.createDownload(url, {}, function(d, status) {
          // 下载完成
          if (status == 200) {
            console.log('下载成功,文件保存在' + d.filename)
            plus.gallery.save(
              d.filename,
              function() {
                //保存到相册方法
                plus.nativeUI.closeWaiting()
                // Toast('已保存到手机相册') //vant框架记得引入
              },
              function() {
                plus.nativeUI.closeWaiting()
                // Toast('保存失败，请重试！')
              }
            )
          } else {
            // Toast('保存失败，请重试！')
          }
        })
        dtask.start()
  }

    /** @params
        filename: 文件名称
        fileurl: 文件路径
    */
    const realDown = (url) => {
    const filename = 123;
    const fileurl = url;
    let ua = navigator.userAgent.toLowerCase()
    if (ua.includes("mac")) {
        //iOS 将文件url转换为文件流 在下载
      downloadFun (
          fileurl +
          "?response-content-type=application/octet-stream",
        filename,
      )
    } else {
        //android 直接用插件的方法下载即可
      download(fileurl,filename)
    }
  }



  // 创建a标签 实现下载
  const downloadFun = async (blobFile, fileName) => {
    let blob = new Blob([blobFile], {
      type: "image/jpeg",
    })
    if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob, fileName)
    } else {
      let link = document.createElement("a")
      link.href = window.URL.createObjectURL(blob)
      link.download = fileName
      link.click()
      window.URL.revokeObjectURL(link.href) //释放内存
    }
  }

const toHisrotyView = () =>{
  router.push({ path: "/qrCodeHistory", query: {enterpriseNumber: route?.query?.enterpriseNumber} });
}
</script>
<style lang="less" scoped>
.address_edit {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: #ebf3fb;
}
.warp_body {
  position: relative;
  margin: 0;
  background-image: linear-gradient(to bottom, #ebf3fb, transparent);

  .white-body  {
    display: flex;
    //align-items: center;
    margin: 0 3%;
    width: 94%;
    height: 100%;
    background-color: #fff;
    border-radius: 0.27rem;
    margin-top: 0.15rem
  }
  .qr_code {
    width: 100%;
    height: 60%;
    background-color:white;
    position: relative;
    margin-top: 20%;
    .qr_code_img {
      margin: 1% 10%;
      width: 80%;
      height: 70%;
    }
    .qr_code_text {
      display: block;
      position: relative;
      width: 100%;
      color: #d3d0d0;
      font-size: 0.4rem;
      text-align: center;
      line-height: 3;
    }
    .qr_name {
      position: relative;
      top: 3%;
      width: 100%;
      height: 10%;
      text-align: center;
      font-size: 0.42rem;
    }
  }
}

/deep/ .van-image__img {
  display: block;
  width: 100%;
  height: auto;
}

/deep/ .van-action-bar {
  box-shadow: 0 0 0.27rem #e5e5e5;
}

</style>