|
@@ -26,36 +26,36 @@ const imgUrl = require('@/assets/AuthResult/zhengshu.jpg')
|
|
|
// }
|
|
|
|
|
|
const AuthResult: React.FC = () => {
|
|
|
-
|
|
|
+
|
|
|
const [ result, setResult ] = useState<Record<string, any>>({})
|
|
|
|
|
|
const [ canvasUrl, setCanvasUrl ] = useState<string>('')
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- const _result = JSON.parse(decodeURIComponent(Taro.getCurrentInstance().router?.params.result as string))
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ const _result = JSON.parse(decodeURIComponent(Taro.getCurrentInstance().router?.params.result as string))
|
|
|
setResult(_result)
|
|
|
console.log(_result, 'result');
|
|
|
-
|
|
|
+
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
}, [])
|
|
|
|
|
|
Taro.useReady( () => {
|
|
|
|
|
|
setTimeout(() => {
|
|
|
-
|
|
|
+
|
|
|
Tip.loading('生成证书中')
|
|
|
const query = Taro.createSelectorQuery()
|
|
|
query.select('#myCanvas')
|
|
|
.fields({ node: true, size: true })
|
|
|
.exec((res) => {
|
|
|
- console.log(res, 'resresres');
|
|
|
-
|
|
|
+ console.log(res, 'resresres', result);
|
|
|
+
|
|
|
const width = res[0].width; // 获取canvas的最终宽度与高度
|
|
|
|
|
|
const height = res[0].height;
|
|
|
|
|
|
- const canvas = res[0].node
|
|
|
-
|
|
|
+ const canvas = res[0].node
|
|
|
+
|
|
|
setTimeout(() => {
|
|
|
|
|
|
const ctx = canvas.getContext('2d')
|
|
@@ -63,18 +63,18 @@ const AuthResult: React.FC = () => {
|
|
|
const dpr = Taro.getSystemInfoSync().pixelRatio; // 获取设备的像素比
|
|
|
|
|
|
console.log(dpr, 'dpr');
|
|
|
-
|
|
|
+
|
|
|
canvas.width = width * dpr;
|
|
|
canvas.height = height * dpr;
|
|
|
-
|
|
|
+
|
|
|
ctx.scale(dpr, dpr);
|
|
|
-
|
|
|
+
|
|
|
const bgImg = canvas.createImage()
|
|
|
-
|
|
|
+
|
|
|
bgImg.src = imgUrl
|
|
|
|
|
|
bgImg.onload = () => {
|
|
|
-
|
|
|
+
|
|
|
ctx.drawImage( bgImg, 0, 0, width , height);
|
|
|
|
|
|
// 证书编号
|
|
@@ -89,34 +89,38 @@ const AuthResult: React.FC = () => {
|
|
|
|
|
|
ctx.fillStyle = "greey";
|
|
|
|
|
|
+ console.log(result,'result')
|
|
|
+
|
|
|
const title: string = result.company
|
|
|
|
|
|
+ console.log(title,'title')
|
|
|
+
|
|
|
const titleX = 307 / 2 - (9.6 * title.length / 2 )
|
|
|
|
|
|
ctx.fillText( title, titleX, 118);
|
|
|
|
|
|
// 统一社会信用代码
|
|
|
-
|
|
|
+
|
|
|
ctx.font = " 600 " + "4px" + " PingFangSC-Semibold, PingFang SC";
|
|
|
|
|
|
ctx.fillStyle = "#666"; // canvas 文字颜色
|
|
|
-
|
|
|
+
|
|
|
ctx.fillText( result.website, 123, 128); // canvas 文字
|
|
|
|
|
|
// 法人
|
|
|
ctx.font = " 600 " + "4px" + "PingFangSC-Semibold, PingFang SC";
|
|
|
ctx.fillStyle = "#666";
|
|
|
ctx.fillText( result.faren, 190, 128);
|
|
|
-
|
|
|
+
|
|
|
|
|
|
// 注册地址
|
|
|
ctx.font = " 600 " + "4px" + "PingFangSC-Semibold, PingFang SC";
|
|
|
- ctx.fillStyle = "#666";
|
|
|
+ ctx.fillStyle = "#666";
|
|
|
ctx.fillText( result.address.split(',').join('') + result.detailAddress, 110, 136);
|
|
|
|
|
|
// 地区
|
|
|
ctx.font = " 600 " + "4px" + " PingFangSC-Semibold, PingFang SC";
|
|
|
- ctx.fillStyle = "#666";
|
|
|
+ ctx.fillStyle = "#666";
|
|
|
ctx.fillText( result.address.split(',').join('') , 146, 144);
|
|
|
|
|
|
// 起始年
|
|
@@ -126,20 +130,20 @@ const AuthResult: React.FC = () => {
|
|
|
|
|
|
// 结束年
|
|
|
ctx.font = " 600 " + "4px" + " PingFangSC-Semibold, PingFang SC";
|
|
|
- ctx.fillStyle = "#666";
|
|
|
+ ctx.fillStyle = "#666";
|
|
|
ctx.fillText( result.endTime, 178, 151);
|
|
|
-
|
|
|
+
|
|
|
setCanvasUrl(canvas.toDataURL())
|
|
|
Tip.loaded()
|
|
|
- }
|
|
|
+ }
|
|
|
}, 1000);
|
|
|
})
|
|
|
- }, 0);
|
|
|
+ }, 5);
|
|
|
})
|
|
|
|
|
|
const openImagePriview = (url) => {
|
|
|
console.log(url, 'url');
|
|
|
-
|
|
|
+
|
|
|
Taro.previewImage({
|
|
|
current: url,
|
|
|
urls: [url]
|
|
@@ -149,7 +153,7 @@ const AuthResult: React.FC = () => {
|
|
|
|
|
|
return (
|
|
|
<View className='AuthResult'>
|
|
|
- <NavBar
|
|
|
+ <NavBar
|
|
|
icon={<AtIcon value='chevron-left' size='30rpx' color='#fff' />}
|
|
|
title=''
|
|
|
fixed
|
|
@@ -175,7 +179,7 @@ const AuthResult: React.FC = () => {
|
|
|
<Image className='chapter' src={require('../../assets/AuthResult/chapter.png')} />
|
|
|
</View>
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
</View>
|
|
|
|
|
|
{/* 证书 */}
|
|
@@ -184,9 +188,9 @@ const AuthResult: React.FC = () => {
|
|
|
<Image className='dog' src={require('../../assets/AuthResult/dog.png')} />
|
|
|
<Text>中德智慧教育官方授权品牌认证证书</Text>
|
|
|
</View>
|
|
|
- <Canvas
|
|
|
- type='2d'
|
|
|
- id='myCanvas'
|
|
|
+ <Canvas
|
|
|
+ type='2d'
|
|
|
+ id='myCanvas'
|
|
|
style={{width: '307px', height: '214px', marginTop: '11px'}}
|
|
|
onClick={()=> openImagePriview(canvasUrl)}
|
|
|
/>
|