You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
294 lines
7.6 KiB
294 lines
7.6 KiB
<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>
|
|
|