feats

src/app.config.js

@@ -1,6 +1,7 @@
 export default {
   pages: [
     'pages/index/index',
+    'pages/History/index',
     'pages/setUserInfo/index',
     'pages/DepartmentSelection/index',
   ],

src/components/barcode/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import Taro from '@tarojs/taro'
 import { View, Canvas } from '@tarojs/components'
 import CodeText from './CodeText'
@@ -6,52 +6,41 @@ import { code128 } from './drawCode'
 import './style.less'
 
 export default (props) => {
-  const { code, ratio, height, codeVisible = true } = props
+  const { code, height, codeVisible = true } = props
 
   // 使用 createSelectorQuery 有个注意点, id 或者 class 不能以数字开头
   const id = useMemo(() => `canvas-${Math.random().toString(36).substring(2, 10)}`, [])
-  const canvasRef = useRef()
-  const ctxRef = useRef()
+  // const canvasRef = useRef()
+  // const ctxRef = useRef()
 
-  const { size, style } = useMemo(() => {
-    const { safeArea, pixelRatio } = Taro.getSystemInfoSync()
-
-    const rpxSize = {
-      width: safeArea.width * ratio * pixelRatio,
-      height: height * pixelRatio,
-    }
-
-    const pxStyle = {
-      width: `${safeArea.width * ratio}px`,
+  const style = useMemo(() => {
+    return {
       height: `${height}px`,
       zIndex: 0,
     }
-
-    return {
-      size: rpxSize,
-      style: pxStyle,
-    }
-  }, [ratio, height])
+  }, [height])
+
+  const renderBarCode = useCallback(() => {
+    const query = Taro.createSelectorQuery()
+    query.select(`#${id}`).fields({ node: true, size: true }).exec((res) => {
+      if (!res[0]) return;
+      const { node: canvas, width: w, height: h } = res[0]
+      const ctx = canvas.getContext('2d')
+      canvas.width = w
+      canvas.height = h
+
+      // canvasRef.current = canvas;
+      // ctxRef.current = ctx;
+
+      if (code) {
+        code128(ctx, code, w, h);
+      }
+    })
+  }, [code, id])
 
   useEffect(() => {
-    Taro.nextTick(() => {
-      const query = Taro.createSelectorQuery()
-      query.select(`#${id}`).fields({ node: true }).exec((res) => {
-        const canvas = res[0].node
-        const ctx = canvas.getContext('2d')
-        canvas.width = size.width
-        canvas.height = size.height
-        // ctx.scale(1, 1)
-
-        canvasRef.current = canvas;
-        ctxRef.current = ctx;
-
-        if (code) {
-          code128(ctx, code, size.width, size.height);
-        }
-      })
-    })
-  }, [code, size, id])
+    Taro.nextTick(renderBarCode)
+  }, [renderBarCode])
 
   return (
     <View className='barcode-box'>

src/components/barcode/style.less

@@ -1,6 +1,11 @@
 .barcode-box {
+  width: 100%;
   position: relative;
 
+  canvas {
+    width: 100%;
+  }
+
   .barcode-txt {
     display: flex;
     justify-content: space-between;
@@ -22,7 +27,7 @@
     font-size: 1.8em;
     color: rgba(0, 0, 0, .5);
     line-height: 3em;
-    z-index: 1000;
+    z-index: 100;
     top: 0;
     left: 0;
     text-align: center;

src/pages/History/Item.jsx

@@ -0,0 +1,35 @@
+import { View } from '@tarojs/components'
+import { Tag } from '@antmjs/vantui'
+import BarCode from '@/components/barcode';
+import { useMemo } from 'react';
+
+export default (props) => {
+  const { barData, person } = props;
+
+  const { tagShow, tagType, tagText } = useMemo(() => {
+    if (barData.reqStat !== '6') return { tagShow: false };
+
+    return {
+      tagShow: true, 
+      tagType: 'success',
+      tagText: '阴性'
+     }
+  }, [barData])
+
+  return (
+    <View className='history-item'>
+      <View className='history-item-code'>
+        <BarCode ratio={0.5} height={60} code={barData.barcode} />
+      </View>
+      <View className='history-item-info'>
+        <View>{person?.personName}</View>
+        <View>{barData.sampledDt}</View>
+        <View>
+        {
+          tagShow && <Tag size='large' type={tagType}>{tagText}</Tag>
+        }
+        </View>
+      </View>
+    </View>
+  )
+}

src/pages/History/index.config.js

@@ -0,0 +1,6 @@
+export default {
+  navigationBarTitleText: '历史条码',
+  usingComponents: {
+  }
+
+}

src/pages/History/index.jsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import { View } from '@tarojs/components'
+import { PowerScrollView } from '@antmjs/vantui';
+import { useModel } from '@/store';
+import { getBarcode } from '@/services/user';
+import Item from './Item';
+
+import './style.less'
+
+export default (props) => {
+  const { person } = useModel('userData')
+  const [loading, setLoading] = useState(false)
+  const [list, setList] = useState([
+    { barcode: '32013201', sampledDt: '2022-05-15', reqStat: '0' },
+    { barcode: '32013202', sampledDt: '2022-05-15', reqStat: '6' },
+    { barcode: '32013203', sampledDt: '2022-05-15', reqStat: '6' },
+    { barcode: '32013204', sampledDt: '2022-05-15', reqStat: '6' },
+    { barcode: '32013205', sampledDt: '2022-05-15', reqStat: '6' },
+    { barcode: '32013206', sampledDt: '2022-05-15', reqStat: '6' },
+  ])
+
+  useEffect(() => {
+    if (person && person.personId) {
+      const today = dayjs()
+      const params = {
+        startDate: today.subtract(7, 'day').format('YYYY-MM-DD'),
+        endDate: today.format('YYYY-MM-DD'),
+        idNo: person.idNo,
+      }
+      setLoading(true)
+      getBarcode(person.personId, params).then((res) => {
+        setList(res || [])
+        setLoading(false)
+      }).catch(err => {
+        console.error(err)
+        setLoading(false)
+      })
+    }
+  }, [person])
+
+  return (
+    <PowerScrollView
+      className='barcode-history-list'
+      refresherEnabled={false}
+      total={list.length}
+    >
+      {
+        list.map((barData, inx) => (
+          <Item key={inx} person={person} barData={barData} />
+        ))
+      }
+    </PowerScrollView>
+  )
+}

src/pages/History/style.less

@@ -0,0 +1,36 @@
+
+.barcode-history-list {
+  height: 100vh;
+  background-color: #f7f8fa;
+
+  .history-item {
+    box-sizing: border-box;
+    padding: 0 5vw;
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 16rpx;
+    margin: 1em;
+  }
+
+  .history-item-code {
+    box-sizing: border-box;
+    padding-top: 1.4em;
+    width: 70vw;
+    margin: auto;
+  }
+
+  .history-item-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    box-sizing: border-box;
+    padding-top: .5em;
+    padding-bottom: 1em;
+    margin-top: .5em;
+
+    & > view {
+      flex: none;
+    }
+  }
+}

src/pages/index/components/Footer.jsx

@@ -6,32 +6,10 @@ import dayjs from 'dayjs'
 import './style.less'
 
 export default (props) => {
-  const [height, setHeight] = useState(40)
   const today = useMemo(() => dayjs().format('YYYY-MM-DD'), [])
 
-  const footerStyle = useMemo(() => {
-    return {
-      height: `${height}px`
-    }
-  }, [height])
-
-  useEffect(() => {
-    Taro.nextTick(() => {
-      const query = Taro.createSelectorQuery();
-      query.select('.index-footer').boundingClientRect((rect) => {
-        const { top } = rect || {}
-        if (!top) return;
-  
-        const { safeArea } = Taro.getSystemInfoSync()
-  
-        // 4 是随便给的一个允许误差范围
-        setHeight(safeArea.height - Math.ceil(top) - 4);
-      }).exec()
-    })
-  }, [])
-
   return (
-    <View className='index-footer' style={footerStyle}>
+    <View className='index-footer'>
       <View>
         <View className='footer-time'>{today}</View>
         <View className='footer-copyright'>

src/pages/index/components/History/index.jsx

@@ -1,30 +0,0 @@
-import { useEffect, useState } from 'react';
-import { View } from '@tarojs/components'
-import { getBarCodeList } from '@/services/user';
-
-import './style.less'
-
-export default (props) => {
-  const { person } = props
-  const [loading, setLoading] = useState(false)
-  const [list, setList] = useState([])
-
-  useEffect(() => {
-    if (person && person.personId) {
-      setLoading(true)
-      getBarCodeList(person.personId, { start, end }).then((res) => {
-        setList(res || [])
-        setLoading(false)
-      }).catch(err => {
-        console.error(err)
-        setLoading(false)
-      })
-    }
-  }, [person])
-
-  return (
-    <View>
-      
-    </View>
-  )
-}

src/pages/index/components/style.less

@@ -25,11 +25,15 @@
 
 .index-main-content {
   position: relative;
+  height: 100vh;
   z-index: 10;
   box-sizing: border-box;
   padding: 0 5vw;
+  display: flex;
+  flex-direction: column;
 
   .index-header {
+    flex: none;
     padding-top: 1em;
     color: #fff;
     font-size: 36rpx;
@@ -45,58 +49,61 @@
 
     .index-person-dept {
       font-size: 1.2em;
-    }
-  
+    }  
   }
-}
+  
+  .index-qrbox {
+    flex: none;
+    width: 100%;
+    background: #fff;
+    border-radius: 16rpx;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 4px;
+    box-sizing: border-box;
 
-.index-qrbox {
-  width: 100%;
-  background: #fff;
-  border-radius: 16rpx;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 4px;
-  box-sizing: border-box;
+    .index-qr-item {
+      margin-top: 6rpx;
+      border-top: 1px solid rgba(0, 0, 0, 0.05);
+      position: relative;
+      box-sizing: border-box;
+      padding: 2em;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 36vh;
 
-  .index-qr-item {
-    margin-top: 6rpx;
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
-    position: relative;
-    box-sizing: border-box;
-    padding: 2em;
+      .index-barcode-tag {
+        position: absolute;
+        top: 40rpx;
+        left:20rpx;
+      }
+    }
+  }
+  
+  .index-footer {
+    flex: auto;
     display: flex;
-    align-items: center;
     justify-content: center;
-    height: 36vh;
+    align-items: center;
 
-    .index-barcode-tag {
-      position: absolute;
-      top: 40rpx;
-      left:20rpx;
+    & > view {
+      width: 100%;
     }
-  }
-}
 
-.index-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    .footer-time {
+      font-size: 34rpx;
+      color: rgba(0, 0, 0, 0.4);
+      text-align: center;
+      margin-bottom: 1em;
+    }
 
-  & > view {
-    width: 100%;
+    .footer-copyright {
+      font-size: 24rpx;
+      color: rgba(0, 0, 0, 0.2);
+      box-sizing: border-box;
+      padding: 0 16vw;
+    }
   }
+}
 
-  .footer-time {
-    font-size: 34rpx;
-    color: rgba(0, 0, 0, 0.4);
-    text-align: center;
-    margin-bottom: 1em;
-  }
 
-  .footer-copyright {
-    font-size: 24rpx;
-    color: rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    padding: 0 16vw;
-  }
-}

src/pages/index/index.jsx

@@ -1,6 +1,9 @@
-import { View, Text, Image } from '@tarojs/components'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { SwipeCell, Dialog, Tabs, Tab } from "@antmjs/vantui";
+import { View } from '@tarojs/components'
+import { useEffect, useState } from 'react'
+import dayjs from 'dayjs';
+import { Button, Dialog, Tabs, Tab } from "@antmjs/vantui";
+import { useModel } from '@/store';
+import { getBarcode } from '@/services/user';
 import Taro from '@tarojs/taro';
 import BarCode from '@/components/barcode'
 import Back from './components/Back';
@@ -9,25 +12,37 @@ import Header from './components/Header';
 import QRBox from './components/QRBox';
 import QRItem from './components/QRItem';
 import Footer from './components/Footer';
-import { useModel } from '@/store';
-import { getBarcode } from '@/services/user';
 
 import './style.less'
 
+const color = '#03737b'
+
 const tabTitleStyle = {
   fontSize: '36rpx'
 }
 
+const borderBtnStyle = {
+  border: `1px solid ${color}`,
+  backgroundColor: 'transparent',
+}
+
 export default (props) => {
   const { person, user } = useModel('userData')
   const [barData, setBarData] = useState({})
   const [idCardVisible, setIdCardVisible] = useState(false)
+
   const goUserInfo = () => {
     Taro.navigateTo({
       url: '/pages/setUserInfo/index'
     })
   }
 
+  const toHistory = () => {
+    Taro.navigateTo({
+      url: '/pages/History/index'
+    })
+  }
+
   const handleShowEditor = () => {
     setIdCardVisible(false)
     goUserInfo()
@@ -35,7 +50,11 @@ export default (props) => {
 
   useEffect(() => {
     if (person && person.personId) {
-      getBarcode(person.personId).then((res) => {
+      const params = {
+        createDate: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
+        idNo: person.idNo,
+      }
+      getBarcode(person.personId, params).then((res) => {
         if (typeof res === 'string') {
           const resp = JSON.parse(res) || {}
           setBarData(resp)
@@ -60,7 +79,7 @@ export default (props) => {
       <Main>
         <Header person={person} onEdit={goUserInfo} />
         <QRBox style={{ marginTop: '1.6em' }}>
-          <Tabs lineHeight={2} lineWidth={120} color='#03737b' titleActiveColor='#03737b'>
+          <Tabs lineHeight={2} lineWidth={120} color={color} titleActiveColor={color}>
             <Tab title='条码' titleStyle={tabTitleStyle}>
               <QRItem barData={barData}>
                 <BarCode ratio={0.7} height={80} code={barData.barcode} />
@@ -73,9 +92,17 @@ export default (props) => {
             </Tab>
           </Tabs>
         </QRBox>
+        <Button
+          plain
+          block
+          size='large'
+          color={color}
+          style={{ marginTop: '1em', ...borderBtnStyle }}
+          onClick={toHistory}
+        >查看历史记录</Button>
         <Dialog title='提示' message='未添加个人信息' show={idCardVisible} onConfirm={handleShowEditor} />
+        <Footer />
       </Main>
-      <Footer />
     </View>
   )
 }

src/services/user.js

@@ -1,5 +1,6 @@
 
-import request from '../utils/request'
+import request from '@/utils/request'
+import { getQueryString } from '@/utils/codeSegment'
 // utils/request
 
 
@@ -39,12 +40,7 @@ export const setUserInfo = (data) => request('/person', { data, method: 'PUT' })
  * @param {*} data 
  * @returns 
  */
-export const getBarcode = (id, data) => request(`/person/${id}/barcode`, { data, method: 'GET' })
-
-/**
- * 获取条形码列表
- * @param {*} data 
- * @returns 
- */
- export const getBarCodeList = (id, params) => request(`/person/${id}/barcode`, { params, method: 'GET' })
-
+export const getBarcode = (id, params) => {
+  const data = { queryStr : getQueryString(params) }
+  return request(`/person/${id}/barcode`, { data, method: 'GET' })
+}