feats

src/components/CountDown.jsx

@@ -1,15 +1,19 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { View } from '@tarojs/components'
 import dayjs from 'dayjs'
 
+function getTime () {
+  return dayjs().format('HH:mm:ss')
+}
+
 export default (props) => {
   const { className, style } = props
 
-  const [dt, setDt] = useState(dayjs().format('YYYY-MM-DD HH:mm:ss'))
+  const [dt, setDt] = useState(getTime())
 
   useEffect(() => {
     const t = setInterval(() => {
-      setDt(dayjs().format('YYYY-MM-DD HH:mm:ss'))
+      setDt(getTime())
     }, 1000);
 
     return () => clearInterval(t)

src/components/barcode/index.jsx

@@ -6,48 +6,54 @@ import { code128 } from './drawCode'
 import './style.less'
 
 export default (props) => {
-
   const { code, ratio, height } = props
 
+  const id = useMemo(() => Math.random().toString(36).substring(2, 10), [])
   const canvasRef = useRef()
   const ctxRef = useRef()
 
-  const sysInfo = useMemo(() => {
+  const { size, style } = useMemo(() => {
     const { safeArea, pixelRatio } = Taro.getSystemInfoSync()
 
-    return {
-      width: safeArea.width,
-      height: safeArea.height,
-      dpr: pixelRatio,
+    const rpxSize = {
+      width: safeArea.width * ratio * pixelRatio,
+      height: height * pixelRatio,
+    }
+
+    const pxStyle = {
+      width: `${safeArea.width * ratio}px`,
+      height: `${height}px`
     }
-  }, [])
-  const size = useMemo(() => ({ width: sysInfo.width * sysInfo.dpr * ratio, height: height * sysInfo.dpr }), [sysInfo])
 
-  const style = useMemo(() => ({ width: `${size.width}rpx`, height: `${size.height}rpx` }), [size])
+    return {
+      size: rpxSize,
+      style: pxStyle,
+    }
+  }, [ratio, height])
 
   useEffect(() => {
     Taro.nextTick(() => {
       const query = Taro.createSelectorQuery()
-      query.select('#barCodeCanvas').fields({ node: true }).exec((res) => {
+      query.select(`#${id}`).fields({ node: true }).exec((res) => {
         const canvas = res[0].node
         const ctx = canvas.getContext('2d')
-        canvas.width = sysInfo.width
-        canvas.height = sysInfo.height
-        // ctx.scale(sysInfo.dpr, sysInfo.dpr)
+        canvas.width = size.width
+        canvas.height = size.height
+        // ctx.scale(1, 1)
 
         canvasRef.current = canvas;
         ctxRef.current = ctx;
 
         if (code) {
-          code128(ctx, code, sysInfo.width, sysInfo.height);
+          code128(ctx, code, size.width, size.height);
         }
       })
     })
-  }, [code, sysInfo])
+  }, [code, size, id])
 
   return (
-    <View className='barcode-box' style={style}>
-      <Canvas style={style} type='2d' id='barCodeCanvas'></Canvas>
+    <View className='barcode-box'>
+      <Canvas style={style} type='2d' id={id}></Canvas>
       <CodeText code={code} />
     </View>
   )

src/components/barcode/style.less

@@ -4,8 +4,8 @@
     justify-content: space-between;
     align-items: center;
     font-size: 32px;
-    font-weight: bold;
-    line-height: 3em;
+    // font-weight: bold;
+    line-height: 2em;
     text-align: center;
 
     & > view {

src/pages/index/index.jsx

@@ -1,5 +1,5 @@
 import { View, Text, Image } from '@tarojs/components'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import dayjs from 'dayjs'
 import { Button, Icon } from "@antmjs/vantui";
 import Taro from '@tarojs/taro';
@@ -16,9 +16,10 @@ export default (props) => {
     Taro.redirectTo({
       url: '/pages/setUserInfo/index'
     })
-
   }
 
+  const today = useMemo(() => dayjs().format('YYYY-MM-DD'))
+
   return (
     <View className='index-UserQRcode'>
       {/* <Text>Hello world!</Text> */}
@@ -31,10 +32,15 @@ export default (props) => {
         <View className='index-UserQRcode-headerInfo-UserID'>身份证：{userId.replace(/^(\d{6})\d+(\d{4})$/, "$1******$2")}</View>
       </View>
       <View className='index-UserQRcode-cententQR'>
-        <CountDown className='index-UserQRcode-cententQR-Times' />
         <View className='index-UserQRcode-cententQR-Barcode'>
           <BarCode ratio={0.7} height={80} code='322050442037' />
         </View>
+        <View className='index-UserQRcode-cententQR-Barcode'>
+          <BarCode ratio={0.7} height={80} code='32032219901021050X' />
+        </View>
+      </View>
+      <View className='index-UserQRcode-footer'>
+      {today}
       </View>
     </View>
   )

src/pages/index/style.less

@@ -34,13 +34,13 @@
 
   &-cententQR {
     box-sizing: border-box;
-    width: 95%;
+    width: 90%;
     // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
     border-radius: 15px;
     background-color: white;
     margin: 0 auto;
     position: relative;
-    top: -15vh;
+    margin-top: -15vh;
     padding: 2em;
     border: 1px solid rgba(0,0,0, 0.1);
 
@@ -51,12 +51,24 @@
       font-size: 1.8em;
     }
     &-Barcode {
-      height: 45vh;
+      height: 20vh;
       margin: 0 auto;
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
+
+      & + & {
+        margin-top: 5vh;
+      }
     }
   }
+
+  &-footer {
+    height: calc(100% - 80vh);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #888;
+  }
 }