feats

config/dev.js

@@ -3,7 +3,7 @@ module.exports = {
     NODE_ENV: '"development"'
   },
   defineConstants: {
-    HOST: '"http://192.168.89.147:9000"'
+    HOST: '"http://127.0.0.1:9000"'
   },
   mini: {},
   h5: {}

config/index.js

@@ -18,6 +18,8 @@ const config = {
     '@/assets': path.resolve(__dirname, '..', 'src/assets'),
     '@/components': path.resolve(__dirname, '..', 'src/components'),
     '@/utils': path.resolve(__dirname, '..', 'src/utils'),
+    '@/store': path.resolve(__dirname, '..', 'src/store'),
+    '@/services': path.resolve(__dirname, '..', 'src/services'),
   },
   copy: {
     patterns: [

src/components/Divider/index.jsx

@@ -0,0 +1,22 @@
+import { View } from '@tarojs/components'
+import { useMemo } from 'react'
+import './style.less'
+
+
+export default (props) => {
+
+  const lineStyle = useMemo(() => {
+    return {
+      height: '1px',
+      background: 'rgba(0,0,0,0.1)'
+    }
+  }, [])
+
+  return (
+    <View className='y-divider'>
+      <View style={lineStyle}></View>
+      <View>{props.children}</View>
+      <View style={lineStyle}></View>
+    </View>
+  )
+}

src/components/Divider/style.less

@@ -0,0 +1,17 @@
+
+.y-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > view:nth-child(1), & > view:nth-child(3) {
+    flex: 1;
+    height: 1px;
+  }
+
+  & > view:nth-child(2) {
+    flex: 'none';
+    box-sizing: border-box;
+    padding: 0 1em;
+  }
+}

src/pages/index/components/Back.jsx

@@ -0,0 +1,13 @@
+import { View, Image } from '@tarojs/components'
+import waterLogo from '@/assets/water_logo.png'
+import './style.less'
+
+export default (props) => {
+  return (
+    <View className='index-back'>
+      <View className='back-color-card'>
+        <Image src={waterLogo} />
+      </View>
+    </View>
+  )
+}

src/pages/index/components/Footer.jsx

@@ -0,0 +1,45 @@
+import { useEffect, useMemo, useState } from 'react'
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import Divider from '@/components/Divider'
+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>
+        <View className='footer-time'>{today}</View>
+        <View className='footer-copyright'>
+          <Divider>
+            南京云致提供技术支持
+          </Divider>
+        </View>
+      </View>
+    </View>
+  )
+}

src/pages/index/components/Header.jsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { View } from '@tarojs/components'
+import { Row, Col } from "@antmjs/vantui";
+import './style.less'
+
+export default (props) => {
+  const { person, onEdit } = props
+
+  const { title, dept } = useMemo(() => ({
+    title: `姓名: ${person?.personName || ''}`,
+    dept: `科室: ${person?.deptName || ''}`
+  }), [person])
+
+  return (
+    <View className='index-header'>
+      <Row gutter='24'>
+        <Col span='16'>
+          <View className='index-person-name'>{title}</View>
+        </Col>
+        <Col span='8' onClick={onEdit}>          
+          <View className='index-edit-btn'>修改信息</View>
+        </Col>
+      </Row>
+      <Row gutter='24'>
+        <Col span='16'>
+          <View className='index-person-dept'>{dept}</View>
+        </Col>
+        <Col span='8' />
+      </Row>
+    </View>
+  )
+}

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

@@ -0,0 +1,30 @@
+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/Main.jsx

@@ -0,0 +1,8 @@
+import { View } from '@tarojs/components'
+import './style.less'
+
+export default (props) => {
+  return (
+    <View className='index-main-content'>{props.children}</View>
+  )
+}

src/pages/index/components/QRBox.jsx

@@ -0,0 +1,11 @@
+
+import { View } from '@tarojs/components'
+import './style.less'
+
+export default (props) => {
+  return (
+    <View className='index-qrbox' style={props.style}>
+      {props.children}
+    </View>
+  )
+}

src/pages/index/components/QRItem.jsx

@@ -0,0 +1,46 @@
+
+import React, { useMemo } from 'react'
+import { View } from '@tarojs/components'
+import { Tag } from "@antmjs/vantui"
+import './style.less'
+
+const TagStatus = {
+  0: '可采样',
+  1: '可采样',
+  2: '可采样',
+  3: '送出',
+  4: '接收',
+  5: '部分报告',
+  6: '确认报告',
+}
+
+export default (props) => {
+  const { barData } = props
+  
+  const { tagShow, tagText, tagPlain } = useMemo(() => {
+    let inx = barData?.reqStat
+    if (inx === undefined || inx === null) {
+      inx = -1
+    }
+
+    const t = TagStatus[inx]
+    return {
+      tagShow: !!barData?.barcode,
+      tagText: !t ? '' : t,
+      tagPlain: t >= 2
+    }
+  }, [barData])
+
+  return (
+    <View className='index-qr-item'>
+      {
+        tagShow && (
+          <View className='index-barcode-tag'>
+            <Tag plain={tagPlain} color='#03737b' size='large'>{tagText}</Tag>
+          </View>
+        )
+      }
+      {props.children}
+    </View>
+  )
+}

src/pages/index/components/style.less

@@ -0,0 +1,102 @@
+
+.index-back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  z-index: 0;
+
+  .back-color-card {
+    height: 32vh;
+    background-color: #03737b;
+    
+    image {
+      position: absolute;
+      top: 0;
+      right: 0;
+      opacity: 0.2;
+      width: 500px;
+      height: 500px;
+      z-index: 0;
+    }
+  }
+}
+
+
+.index-main-content {
+  position: relative;
+  z-index: 10;
+  box-sizing: border-box;
+  padding: 0 5vw;
+
+  .index-header {
+    padding-top: 1em;
+    color: #fff;
+    font-size: 36rpx;
+    line-height: 3em;
+
+    .index-person-name {
+      font-size: 1.33em;
+    }
+
+    .index-edit-btn {
+      font-size: 1em;
+    }
+
+    .index-person-dept {
+      font-size: 1.2em;
+    }
+  
+  }
+}
+
+.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-barcode-tag {
+      position: absolute;
+      top: 40rpx;
+      left:20rpx;
+    }
+  }
+}
+
+.index-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > view {
+    width: 100%;
+  }
+
+  .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,21 +1,27 @@
 import { View, Text, Image } from '@tarojs/components'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import dayjs from 'dayjs'
-import { Button, Icon, Dialog } from "@antmjs/vantui";
+import { SwipeCell, Dialog, Tabs, Tab } from "@antmjs/vantui";
 import Taro from '@tarojs/taro';
 import BarCode from '@/components/barcode'
-import logo from '@/assets/water_logo.png'
-import { useModel } from '../../store';
+import Back from './components/Back';
+import Main from './components/Main';
+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'
-import { getBarcode } from '../../services/user';
+
+const tabTitleStyle = {
+  fontSize: '36rpx'
+}
 
 export default (props) => {
   const { person, user } = useModel('userData')
   const [barData, setBarData] = useState({})
   const [idCardVisible, setIdCardVisible] = useState(false)
-  const [idCardBarVisible, setIdCardBarVisible] = useState(false)
-  const today = useMemo(() => dayjs().format('YYYY-MM-DD'))
   const goUserInfo = () => {
     Taro.navigateTo({
       url: '/pages/setUserInfo/index'
@@ -49,38 +55,27 @@ export default (props) => {
   }, [person, user])
 
   return (
-    <View className='index-UserQRcode'>
-      {/* <Text>Hello world!</Text> */}
-      {/* <View className='index-UserQRcode-headerInfo' style={{ backgroundImage: `url(${userBck})` }}> */}
-      <View className='index-UserQRcode-headerInfo' >
-        <View className='index-UserQRcode-headerInfo-User'>
-          <Image src={logo} />
-          <View className='index-UserQRcode-headerInfo-User-NameInfo'>姓名：{person?.personName}</View>
-          <View onClick={goUserInfo} className='index-UserQRcode-headerInfo-User-setNameInfo'><Icon name='edit' />修改信息</View>
-        </View>
-        <View className='index-UserQRcode-headerInfo-UserID'>科室：{person?.deptName}</View>
-      </View>
-      <View className='index-UserQRcode-cententQR'>
-        <View className='index-UserQRcode-cententQR-Barcode'>
-          <BarCode ratio={0.7} height={80} code={barData.barcode} />
-        </View>
-      </View>
-      <View className='index-UserQRcode-footer'>
-        <View>
-          <Button block plain hairline type='info' size='large' onClick={() => setIdCardBarVisible(true)}>
-            <View style={{ fontSize: '1.2em' }}>查看身份码</View>
-          </Button>
-          <View className='date-tip'>
-          {today}
-          </View>
-        </View>
-      </View>
-      <Dialog title='提示' message='未添加个人信息' show={idCardVisible} onConfirm={handleShowEditor} />
-      <Dialog show={idCardBarVisible} onConfirm={() => setIdCardBarVisible(false)}>
-        <View className='pop-idcard-bar'>
-          <BarCode ratio={0.7} height={80} code={person?.idNo} codeVisible />
-        </View>
-      </Dialog>
+    <View className='index-page'>
+      <Back />
+      <Main>
+        <Header person={person} onEdit={goUserInfo} />
+        <QRBox style={{ marginTop: '1.6em' }}>
+          <Tabs lineHeight={2} lineWidth={120} color='#03737b' titleActiveColor='#03737b'>
+            <Tab title='条码' titleStyle={tabTitleStyle}>
+              <QRItem barData={barData}>
+                <BarCode ratio={0.7} height={80} code={barData.barcode} />
+              </QRItem>
+            </Tab>
+            <Tab title='身份码' titleStyle={tabTitleStyle}>
+              <QRItem>
+                <BarCode ratio={0.7} height={80} code={person?.idNo} />
+              </QRItem>
+            </Tab>
+          </Tabs>
+        </QRBox>
+        <Dialog title='提示' message='未添加个人信息' show={idCardVisible} onConfirm={handleShowEditor} />
+      </Main>
+      <Footer />
     </View>
   )
 }

src/pages/index/style.less

@@ -1,109 +1,4 @@
-.index-UserQRcode {
-  width: 100vw;
-  height: 100vh;
-  margin: 0 auto;
-  background-color: #f2f1f6;
-
-  &-headerInfo {
-    color: white;
-    height: 35vh;
-    background: no-repeat, center center;
-    background-size: 100% 100%;
-    background-color: #03737b;
-    padding: 0 7vw 0 7vw;
-
-    &-User {
-      display: flex;
-      justify-content: space-between;
-      letter-spacing: 1vw;
-
-      image {
-        position: absolute;
-        top: 0;
-        right: 0;
-        opacity: 0.2;
-        width: 500px;
-        height: 500px;
-        z-index: 0;
-      }
-
-      &-NameInfo {
-        font-weight: 600;
-        font-size: 48px;
-        margin: 5vw 0 3vw 0;
-      }
-      &-setNameInfo {
-        margin: 5vw 0 3vw 0;
-        z-index: 10;
-        font-size: 36px;
-      }
-    }
-    &-UserID {
-      letter-spacing: 0.3vw;
-      font-size: 40px;
-    }
-  }
-
-  &-cententQR {
-    box-sizing: border-box;
-    width: 90vw;
-    // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-    border-radius: 15px;
-    background-color: white;
-    margin: 0 auto;
-    position: relative;
-    margin-top: -15vh;
-    padding: 2em;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-
-    &-Times {
-      padding-top: 3vh;
-      text-align: center;
-      font-weight: bold;
-      font-size: 1.8em;
-    }
-    &-Barcode {
-      height: 40vh;
-      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;
-    padding: 0 5vw;
-    box-sizing: border-box;
-
-    & > view {
-      flex: 1;
-    }
-
-    .date-tip {
-      margin-top: 2em;
-      text-align: center;
-    }
-
-    .van-button {
-      background: transparent;
-    }
-  }
-}
-
-.pop-idcard-bar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10vw 4vw;
-  box-sizing: border-box;
-}
+.index-page {
+  min-height: 100vh;
+  background-color: #f7f8fa;
+}

src/services/user.js

@@ -34,8 +34,6 @@ export const getPhoneuser = (data) => request('/auth-phone', { data, method: 'PU
 export const setUserInfo = (data) => request('/person', { data, method: 'PUT' })
 
 
-
-
 /**
  * 获取条形码
  * @param {*} data 
@@ -43,5 +41,10 @@ export const setUserInfo = (data) => request('/person', { data, method: 'PUT' })
  */
 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' })