feats

src/app.config.js

@@ -9,5 +9,6 @@ export default {
     navigationBarBackgroundColor: '#fff',
     navigationBarTitleText: 'WeChat',
     navigationBarTextStyle: 'black'
-  }
+  },
+  lazyCodeLoading: 'requiredComponents'
 }

src/components/barcode/index.jsx

@@ -23,7 +23,8 @@ export default (props) => {
 
     const pxStyle = {
       width: `${safeArea.width * ratio}px`,
-      height: `${height}px`
+      height: `${height}px`,
+      zIndex: 0,
     }
 
     return {

src/components/barcode/style.less

@@ -19,10 +19,10 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    font-size: 2em;
+    font-size: 1.8em;
     color: rgba(0, 0, 0, .5);
     line-height: 3em;
-    z-index: 100;
+    z-index: 1000;
     top: 0;
     left: 0;
     text-align: center;

src/pages/index/index.jsx

@@ -1,7 +1,7 @@
 import { View, Text, Image } from '@tarojs/components'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import dayjs from 'dayjs'
-import { Button, Icon } from "@antmjs/vantui";
+import { Button, Icon, Dialog } from "@antmjs/vantui";
 import Taro from '@tarojs/taro';
 import BarCode from '@/components/barcode'
 import logo from '@/assets/water_logo.png'
@@ -11,21 +11,41 @@ import './style.less'
 import { getBarcode } from '../../services/user';
 
 export default (props) => {
-  const { person, } = useModel('userData')
-  const [barCode, setBarCode] = useState()
+  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.redirectTo({
+    Taro.navigateTo({
       url: '/pages/setUserInfo/index'
     })
   }
+
+  const handleShowEditor = () => {
+    setIdCardVisible(false)
+    goUserInfo()
+  }
+
   useEffect(() => {
+    console.log('============>', user, person, !person || !person.idNo)
     if (person && person.personId) {
       getBarcode(person.personId).then((res) => {
-        setBarCode(res.barcode)
+        if (typeof res === 'string') {
+          const resp = JSON.parse(res) || {}
+          setBarData(resp)
+        } else {
+          setBarData(res || {})
+        }
       })
     }
-  }, [person])
+
+    if (user && user.userId) {
+      if (!person || !person.idNo) {
+        setIdCardVisible(true)
+      }
+    }
+  }, [person, user])
 
   return (
     <View className='index-UserQRcode'>
@@ -41,15 +61,25 @@ export default (props) => {
       </View>
       <View className='index-UserQRcode-cententQR'>
         <View className='index-UserQRcode-cententQR-Barcode'>
-          <BarCode ratio={0.7} height={80} code={barCode} />
-        </View>
-        <View className='index-UserQRcode-cententQR-Barcode'>
-          <BarCode ratio={0.7} height={80} code={person?.idNo} codeVisible />
+          <BarCode ratio={0.7} height={80} code={barData.barcode} />
         </View>
       </View>
       <View className='index-UserQRcode-footer'>
-        {today}
+        <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={barData.patIdcardno} codeVisible />
+        </View>
+      </Dialog>
     </View>
   )
 }

src/pages/index/style.less

@@ -9,7 +9,7 @@
     height: 35vh;
     background: no-repeat, center center;
     background-size: 100% 100%;
-    background-color: #009fab;
+    background-color: #03737b;
     padding: 0 7vw 0 7vw;
 
     &-User {
@@ -29,23 +29,24 @@
 
       &-NameInfo {
         font-weight: 600;
-        font-size: 40px;
+        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: 30px;
+      font-size: 40px;
     }
   }
 
   &-cententQR {
     box-sizing: border-box;
-    width: 90%;
+    width: 90vw;
     // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
     border-radius: 15px;
     background-color: white;
@@ -62,7 +63,7 @@
       font-size: 1.8em;
     }
     &-Barcode {
-      height: 20vh;
+      height: 40vh;
       margin: 0 auto;
       position: relative;
       display: flex;
@@ -81,5 +82,28 @@
     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;
+}

src/pages/setUserInfo/index.jsx

@@ -83,15 +83,16 @@ export default (props) => {
           validateTrigger='onBlur'
           valueFormat={(e) => e.detail.value}
           renderRight={<Button
-            plain
+            // plain
             hairline
+            square
             size='small'
             type='info'
             required
             openType='getPhoneNumber'
             onGetPhoneNumber={getPhone}
           >
-            授权手机
+            <View style={{ fontSize: '1.3em' }}>授权</View>
           </Button>}
         >
           <Input placeholder='请输入手机号' maxlength={11} disabled />

src/store/userData.js

@@ -5,6 +5,7 @@ import { login } from "../services/user"
 
 
 export default () => {
+  const [user, setUser] = useState()
   const [person, setPerson] = useState()
   const [sessionKey, setSessionKey] = useState()
   const [userPhoneInfo, setUserPhoneInfo] = useState()
@@ -22,39 +23,43 @@ export default () => {
 
     login(params).then((res) => {
 
-      const { person: taPerson, sessionKey: skey } = res;
+      const { person: taPerson, sessionKey: skey, user: taUser } = res;
       // taPerson.phone = null
 
       setPerson(taPerson);
+      setUser(taUser);
       setSessionKey(skey);
-      if (!res.person) {
-        console.log('没有身份证',);
-        Taro.showModal({
-          title: '提示',
-          content: '未添加个人信息!',
-          showCancel: false,
-          success: function (res) {
-            if (res.confirm) {
-              Taro.redirectTo({
-                url: '/pages/setUserInfo/index'
-              })
-
-            }
-          }
-        })
-
-      } else {
-        console.log('有身份证',);
-      }
+      // if (!res.person) {
+      //   console.log('没有身份证',);
+      //   Taro.showModal({
+      //     title: '提示',
+      //     content: '未添加个人信息!',
+      //     showCancel: false,
+      //     success: function (res) {
+      //       if (res.confirm) {
+      //         Taro.redirectTo({
+      //           url: '/pages/setUserInfo/index'
+      //         })
+
+      //       }
+      //     }
+      //   })
+
+      // } else {
+      //   console.log('有身份证',);
+      // }
     })
   }
   console.log("🚀 来自store的打印 person数据formValue", person, formValue)
 
   return {
-    person,
-    sessionKey,
+    user,
+    setUser,
 
+    person,
     setPerson,
+
+    sessionKey,
     setSessionKey,
 
     userPhoneInfo,