feats

.eslintrc

   "rules": {
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
-    "no-unused-vars": "warn"
+    "no-unused-vars": "warn",
+    "jsx-quotes": ["warn", "prefer-double"]
   }
 }

babel.config.js

       {
         libraryName: "@antmjs/vantui",
         libraryDirectory: "es",
-        style: true
+        style: (name) => `${name}/style/less`,
       },
       "@antmjs/vantui"
     ]

config/dev.js

     NODE_ENV: '"development"'
   },
   defineConstants: {
-    HOST: '"http://192.168.89.147:9087"'
+    // HOST: '"http://127.0.0.1:9087"'
+    HOST: '"http://192.168.1.2:9087"'
   },
   mini: {},
   h5: {}

package.json

     "@tarojs/taro": "3.5.7",
     "@tarojs/taro-h5": "3.5.7",
     "@zjxpcyc/react-tiny-store": "^2.0.1",
+    "md5": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

src/app.config.js

 export default defineAppConfig({
   pages: [
-    'pages/login/index',
     'pages/home/index',
+    'pages/login/index',
     'pages/index3/index',
     'pages/index4/index',
     'pages/index5/index',
   tabBar: {
     list: [
       {
-        "pagePath": "pages/login/index",
+        "pagePath": "pages/home/index",
         "text": "首页"
       },
       {
-        "pagePath": "pages/home/index",
+        "pagePath": "pages/reporting/index",
         "text": "公告"
       },
       {

src/app.js

       success: (res) => {
         store.getState('user').login(res.code);
       }
-    })
+    });
+
+    store.getState('user').current();
   });
 
   return (

src/app.less

   --main-space: 4vw;
 
   // antm-js 样式修改
-  // 按钮主色
-  --buttonPrimaryBackgroundColor: #1A7565;
+  // 按钮
+  --button-primary-color: #FFFFFF;
+  --button-primary-background-color: var(--main-bg-color);
   // 菊花转主色
-  --loading-spinner-color: #1A7565;
+  --loading-spinner-color: var(--main-bg-color);
 }
 
 view {

src/components/Auth.jsx

     }
   }
 
-  return hasRights ? props.children : (
+  return !roles.length || hasRights ? props.children : (
     <View style={{width: '100%', height: '100%', display: 'grid', placeItems: 'center'}}>
       <View>暂无权限</View>
     </View>

src/layouts/index.jsx

 import React from 'react';
+import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
 import { useModel } from '@/store';
 import { Loading } from '@antmjs/vantui';
 import laySty from './layout.module.less';
 
 export default (props) => {
-  const { className, style, roles } = props;
+  const { className, style, roles, showTabBar } = props;
 
-  const { person } = useModel('user');
+  const { person, user } = useModel('user');
 
   const classNames = `${laySty['page-wrapper']} ${className}`;
 
+  React.useMemo(() => {
+    if (showTabBar) {
+      Taro.showTabBar();
+    } else {
+      Taro.hideTabBar();
+    }
+  }, [showTabBar]);
+
+  React.useEffect(() => {
+    console.log('----------->', person, user);
+    if (person && !user) {
+      const currentPage = Taro.getCurrentPages().slice().pop();      
+      if ('pages/login/index' !== currentPage.route) {
+        Taro.navigateTo({
+          url: '/pages/login/index',
+        })
+      }
+    }
+  }, [person, user]);
+
   return (
     <View className={classNames} style={style}>
       {

src/pages/home/components/Head.jsx

 import React from 'react';
 import { View } from '@tarojs/components';
+import { ROLES, ROLE_CITIZEN } from '@/utils/user';
 import style from './head.module.less';
 
 export default (props) => {
+  const { user = {} } = props;
+  const { dutyList = [] } = user;
+  const role = ROLES[dutyList[0] || ROLE_CITIZEN];
+
   return (
     <View className={style.head}>
       <View className={style.profile}>
-        <View>Hi, 张三!</View>
+        <View style={{ letterSpacing: '2px' }}>Hi, {user.name}!</View>
         <View className={style.badge}>
           <View className={style.icon}></View>
-          <View>督察员</View>
+          <View>{role}</View>
         </View>
       </View>
       <View className={style.avatar}>

src/pages/home/components/head.module.less

     font-size: 42px;
 
     .badge {
+      display: inline-block;
       position: relative;
-      padding-left: 64px;
+      padding-right: 24px;
+      padding-left: 72px;
       margin-top: var(--main-space);
       height: 48px;
-      line-height: 48px;
+      line-height: 46px; // 向上偏移2像素
       background: linear-gradient(0, #E36A00, #FFA658);
       border-radius: 22px;
       font-size: 24px;
+      text-align: center;
 
       .icon {
-        top: -8px;
-        left: -8px;
+        top: -12px;
+        left: -12px;
         position: absolute;
-        width: 64px;
-        height: 64px;
-        background: linear-gradient(0, #E36A00, #FFA658);
+        width: 56px;
+        height: 56px;
+        border: 8px solid rgba(251, 239, 121, 0.6);
         border-radius: 50%;
-        border: 8px solid rgba(251, 239, 121, 0.2);
+        box-sizing: content-box;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 56px;
+          height: 56px;
+          background: linear-gradient(0, #E36A00, #FFA658);
+          border-radius: 50%;
+          overflow: hidden;
+        }
       }
     }
   }

src/pages/home/index.jsx

 import React from 'react'
 import { View, Text, Image } from '@tarojs/components'
 import Page from '@/layouts/index';
+import { useModel } from '@/store';
 import Head from './components/Head';
 import BannerCard from './components/BannerCard';
 import MenuCard from './components/MenuCard';
 import './index.less';
 
 export default (props) => {
+
+  const { user } = useModel('user');
+
   return (
-    <Page className='index'>
-      <Head />
+    <Page showTabBar className='index'>
+      <Head user={user} />
       <BannerCard />
       <MenuCard />
     </Page>

src/pages/login/components/Form.jsx

 import React from 'react';
-import { View, Image, Input } from '@tarojs/components';
-import { Form, Button } from '@antmjs/vantui'
-import user from '../../../assets/image/user.png';
-import password from '../../../assets/image/password.png';
-import style from './form.module.less';
+import { View } from '@tarojs/components';
+import { Form, FormItem, Field, Button } from '@antmjs/vantui'
+import { useModel } from '@/store';
+import user from '@/assets/image/user.png';
+import password from '@/assets/image/password.png';
+import './form.less';
 
 export default (props) => {
+  const { onSuccess } = props;
+
+  const { signin } = useModel('user');
+  const form = Form.useForm();
+  const [accErr, setAccErr] = React.useState();
+  const [pwdErr, setPwdErr] = React.useState();
+
+  const onFinish = (errs, res) => {
+    if (!res.account) {
+      setAccErr('账户不能为空');
+      return;
+    } else {
+      setAccErr();
+    }
+    if (!res.password) {
+      setPwdErr('密码不能为空');
+      return;
+    } else {
+      setPwdErr();
+    }
+
+    signin(res).then(onSuccess);
+  }
+
   return (
-    <Form className={style.form}>
-      <View className={style['input-box']}>
-        <Image src={user} className={style['img-icon']} />账号<Input className={style.input} placeholder='请输入您的登录账号' />
-      </View>
-      <View className={style['input-box']}>
-        <Image src={password} className={style['img-icon']} />密码<Input className={style.input} placeholder='请输入您的登录密码' />
-      </View>
-      <View
-        className={style['forget-pwd']}
-      >
-        忘记密码?
-      </View>
-      <Button
-        type='primary'
-        className={style.submit}
-      >
-        登录
-      </Button>
-    </Form>
+    <View className="login-form">
+      <Form form={form} onFinish={onFinish}>
+        <FormItem
+          name="account"
+          valueFormat={(e) => e.detail}
+        >
+          <Field
+            border
+            label="账号"
+            leftIcon={user}
+            errorMessage={accErr}
+            placeholder="请输入您的登录账号"
+          ></Field>
+        </FormItem>
+        <FormItem
+          name="password"
+          valueFormat={(e) => e.detail}
+        >
+          <Field
+            password
+            label="密码"
+            leftIcon={password}
+            errorMessage={pwdErr}
+            placeholder="请输入您的登录密码"
+          ></Field>
+        </FormItem>
+        <View className="forget-password">
+          忘记密码?
+        </View>
+        <View>
+          <Button
+            block
+            type="primary"
+            formType="submit"
+          >
+            登录
+          </Button>
+        </View>
+      </Form>
+    </View>
   )
 }

src/pages/login/components/form.less

+.login-form {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 var(--main-space);
+
+  .vant-form-formItem,
+  .vant-form-formItem-wrapper,
+  .vant-form-formItem-controll {
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+  }
+
+  .vant-form-formItem-wrapper {
+    & + .vant-form-formItem-wrapper {
+      margin-top: var(--main-space);
+    }
+  }
+
+  .vant-form-label {
+    width: 0;
+  }
+
+  .field-wrapper {
+    width: 100%;
+    padding: 0 var(--main-space);
+  }
+
+  .van-cell {
+    background-color: transparent;
+
+    &::after {
+      border-bottom-color: rgba(0,0,0,0.12);
+    }
+  }
+
+  .van-icon__image {
+    width: 42px;
+    height: 42px;
+    vertical-align: middle;
+  }
+
+  .van-cell__title {
+    margin-left: 20px;
+    font-size: 16px;
+    vertical-align: middle;
+    border-right: 1px solid #000;
+  }
+
+  .van-field__label {
+    font-size: 32px;
+  }
+
+  .forget-password {
+    text-align: right;
+    font-size: 28px;
+    font-weight: 400;
+    color: var(--main-bg-color);
+    height: 148px;
+    line-height: 148px;
+    padding: 0 var(--main-space);
+  }
+}

src/pages/login/components/form.module.less

-.form {
-  width: 620px;
-  .input-box {
-    display: flex;
-    border-bottom: 1px solid #e9eaea;
-    width: 600px;
-    margin: 26px auto;
-    padding-bottom: 30px;
-    margin-top: 60px;
-    .img-icon {
-      margin-right: 30px;
-      width: 42px;
-      height: 44px;
-    }
-    .input {
-      color: rgb(174, 174, 174);
-      margin-left: 15px;
-      padding-left: 20px;
-      flex-direction: column;
-      border-left: 1px solid black;
-    }
-  }
-  .forget-pwd {
-    font-size: 28px;
-    color: var(--main-bg-color);
-    float: right;
-    margin-right: 72px;
-    margin-bottom: 104px;
-  }
-  .submit {
-    width: 666px;
-    margin: 80px auto;
-    background-color: var(--main-bg-color);
-    color: #fff;
-  }
-}

src/pages/login/index.jsx

-import Page from '@/layouts/index';
+import React from 'react';
+import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
+import Page from '@/layouts/index';
 import Head from "./components/Head";
 import Form from "./components/Form";
 import Bottom from "./components/Bottom";
 import './index.less'
 
 export default (props) => {
+
+  React.useMemo(() => {  
+    Taro.hideTabBar();
+  }, []);
+
+  const onSuccess = () => {
+    Taro.navigateBack({
+      delta: 1,
+      fail: () => {
+        Taro.reLaunch({
+          url: '/pages/home/index'
+        })
+      }
+    });
+  }
+
   return (
-    <Page className='index'>
-      <View className='login-box'>
+    <Page className="index">
+      <View className="login-box">
         <Head />
-        <Form />
+        <Form onSuccess={onSuccess} />
         <Bottom />
       </View>
     </Page>
-
   )
 }

src/services/wxma.js

  * 小程序登录
  */
 export const login = (code) => request(`/api/ma/login?code=${code}`, { method: 'post', silent: true });
+
+/*
+ * 小程序登录
+ */
+export const signin = (data) => request(`/api/ma/signin`, { method: 'post', data });
+
+/*
+ * 获取当前人员
+ */
+export const currentUser = () => request(`/api/ma/current`);

src/store/user.js

 import React from 'react';
 import Taro from '@tarojs/taro';
-import { login } from '@/services/wxma';
+import md5 from 'md5';
+import { login, signin, currentUser } from '@/services/wxma';
 
 export default function useUser() {
-  const [person, setPerson] = React.useState({});
-  const [user, setUser] = React.useState({});
+  const [person, setPerson] = React.useState();
+  const [user, setUser] = React.useState();
 
   const maLogin = (code) => {
     login(code).then(res => {
       setPerson(res.person);
-      setUser(res.user);
+      Taro.setStorage({ key: 'personId', data: res.person.personId })
       Taro.setStorage({ key: 'sessionKey', data: res.sessionKey })
     });
   }
 
+  const maSignIn = (params) => {
+    const data = {
+      ...params,
+      password: md5(params.password)
+    }
+
+    return signin(data).then(res => {
+      setUser(res.user);
+    })
+  }
+
+  const current = () => {
+    currentUser().then(res => {
+      setUser(res.user);
+    })
+  }
+
   return {
     user,
     person,
+    current,
+    signin: maSignIn,
     login: maLogin,
   }
 }

src/utils/request.js

     const { method = 'GET', params, data = {}, header = {}, silent = false, ...cfgs } = options;
     const queryStr = params ? getQueryStrByParams(params) : undefined;
     // eslint-disable-next-line no-undef
-    const url = queryStr ? `${HOST}${api}?${queryStr}` : `${HOST}${api}`
+    const url = queryStr ? `${HOST}${api}?${queryStr}` : `${HOST}${api}`;
+    const personId = Taro.getStorageSync('personId');
     
     const onError = (err) => {
       console.error(err);
       data,
       method,
       header: {
+        'x-personId': personId,
         'content-type': 'application/json',
         'authorization': getToken(),
         ...header,

src/utils/user.js

 
 // 市民
 export const ROLE_CITIZEN = 'citizen';
+
+
+export const ROLES = {
+  [ROLE_INSPECTOR]: '督察员',
+  [ROLE_MANAGER]: '管理员',
+  [ROLE_ORG_USER]: '单位人员',
+  [ROLE_QUERY_PERSON]: '查询员',
+  [ROLE_CITIZEN]: '市民',
+}

yarn.lock

 
 md5@^2.3.0:
   version "2.3.0"
-  resolved "https://registry.npmmirror.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"
+  resolved "https://registry.yarnpkg.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"
   integrity sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==
   dependencies:
     charenc "0.0.2"