feats

config/index.js

   },
   copy: {
     patterns: [
+      { from: 'src/assets/tabbar/', to: 'dist/assets/tabbar/' },
     ],
     options: {
     }

src/app.config.js

     'pages/index5/index',
     'pages/reporting/index',
     'pages/reporting/detail/index',
+    'pages/reset-password/index',
   ],
   tabBar: {
     list: [
       {
-        "pagePath": "pages/home/index",
-        "text": "首页"
+        pagePath: "pages/home/index",
+        text: "首页",
+        iconPath: "/assets/tabbar/page.png",
+        selectedIconPath: "/assets/tabbar/page click.png"
       },
       {
-        "pagePath": "pages/reporting/index",
-        "text": "公告"
+        pagePath: "pages/reporting/index",
+        text: "公告",
+        iconPath: "/assets/tabbar/notice.png",
+        selectedIconPath: "/assets/tabbar/notice click.png"
       },
       {
-        "pagePath": "pages/index3/index",
-        "text": "发布"
+        pagePath: "pages/index3/index",
+        text: "发布",
+        iconPath: "/assets/tabbar/release.png",
+        selectedIconPath: "/assets/tabbar/release click.png"
       },
       {
-        "pagePath": "pages/index4/index",
-        "text": "测评标准"
+        pagePath: "pages/index4/index",
+        text: "测评标准",
+        iconPath: "/assets/tabbar/evaluation.png",
+        selectedIconPath: "/assets/tabbar/evaluation click.png"
       },
       {
-        "pagePath": "pages/index5/index",
-        "text": "我的"
+        pagePath: "pages/index5/index",
+        text: "我的",
+        iconPath: "/assets/tabbar/my.png",
+        selectedIconPath: "/assets/tabbar/my click.png"
       },
     ],
   },

src/layouts/index.jsx

   }, [showTabBar]);
 
   React.useEffect(() => {
-    console.log('----------->', person, user);
     if (person && !user) {
       const currentPage = Taro.getCurrentPages().slice().pop();      
       if ('pages/login/index' !== currentPage.route) {

src/pages/home/components/Head.jsx

 import React from 'react';
-import { View } from '@tarojs/components';
+import { View, Image } from '@tarojs/components';
 import { ROLES, ROLE_CITIZEN } from '@/utils/user';
+import logo from '@/assets/image/logo.png';
 import style from './head.module.less';
 
 export default (props) => {
         </View>
       </View>
       <View className={style.avatar}>
-
+        <Image src={user.avatar || logo}></Image>
       </View>
     </View>
   )

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

     height: 16vw;
     border-radius: 50%;
     border: 4px solid #fff;
+
+    image {
+      width: 100%;
+      height: 100%;
+    }
   }
 }

src/pages/reset-password/components/Captcha.jsx

+import React from 'react';
+import { View } from '@tarojs/components';
+import { Field, Button } from '@antmjs/vantui';
+import { getCaptcha } from '@/services/comm';
+
+export default (props) => {
+  const { onNext } = props;
+
+  const [loading, setLoading] = React.useState(false);
+  const [phone, setPhone] = React.useState();
+  const [phoneErr, setPhoneErr] = React.useState();
+  const [captcha, setCaptcha] = React.useState();
+  const [captchaErr, setCaptchaErr] = React.useState();
+  const [disabled, setDisabled] = React.useState(false);
+  const [sec, setSec] = React.useState(0);
+
+  const btnText = disabled ? `剩余 ${sec} 秒` : '获取验证码';
+
+  const onCaptcha = () => {
+    if (!phone || phone.length != 11) {
+      setPhoneErr('请输入正确的手机号')
+      return;
+    } else {
+      setPhoneErr();
+    }
+    
+    setLoading(true);
+    getCaptcha(phone).then(() => {
+      setLoading(false);
+      let left = 60;
+      
+      setDisabled(true);
+      setSec(left --);
+      const ticker = setInterval(() => {
+        left -= 1;
+        setSec(left);
+  
+        if (left <= 1) {
+          setDisabled(false);
+          clearInterval(ticker);
+        }
+      }, 1000);
+    }).catch(() => {
+      setLoading(false);
+    });
+  }
+
+  const handleNext = () => {
+    if (!phone) {
+      setPhoneErr('请输入手机号');
+    }
+
+    if (!captcha) {
+      setCaptchaErr('请输入验证码')
+    }
+
+    if (!phone || !captcha) {
+      return;
+    }
+
+    onNext({phone, captcha});
+  }
+  
+  return (
+    <View>
+      <View className="title">找回密码</View>
+      <View className="form-box">
+        <Field
+          value={phone}
+          loading={loading}
+          placeholder="请输入注册手机号"
+          onChange={e => setPhone(e.detail)}
+          errorMessage={phoneErr}
+          renderButton={
+            <Button
+              round
+              size="small"
+              type="primary"
+              disabled={disabled}
+              onClick={onCaptcha}
+            >
+              {btnText}
+            </Button>
+          }
+        ></Field>
+        <Field
+          value={captcha}
+          placeholder="请输入验证码"
+          errorMessage={captchaErr}
+          onChange={e => setCaptcha(e.detail)}
+        ></Field>
+      </View>
+      <View className="form-act">
+        <View>
+        </View>
+        <View>
+          <Button block type="primary" size="small" onClick={handleNext}>下一步</Button>
+        </View>
+      </View>
+    </View>
+  )
+}

src/pages/reset-password/components/ResetPwd.jsx

+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Field, Button } from '@antmjs/vantui';
+import md5 from 'md5';
+
+export default (props) => {
+  const { onPrev, onSubmit } = props;
+
+  const [loading, setLoading] = React.useState(false);
+  const [pwd1, setPwd1] = React.useState();
+  const [pwd1Err, setPwd1Err] = React.useState();
+  const [pwd2, setPwd2] = React.useState();
+  const [pwd2Err, setPwd2Err] = React.useState();
+  
+  const handlePrev = () => {
+    onPrev();
+  }
+
+  const handleSubmit = () => {
+    if (!pwd1) {
+      setPwd1Err('请输入密码');
+    } else{
+      setPwd1Err();
+    }
+    if (!pwd2) {
+      setPwd2Err('请确认密码');
+    } else {
+      setPwd2Err();
+    }
+
+    if (!pwd1 || !pwd2) {
+      return;
+    }
+
+    if (pwd1 != pwd2) {
+      setPwd2Err('两次密码不一致');
+      return;
+    } else {
+      setPwd2Err();
+    }
+
+    setLoading(true)
+    onSubmit({ password: md5(pwd1) }).then(() => {
+      setLoading(false);
+
+      Taro.navigateBack({
+        delta: 1,
+        fail: () => {
+          Taro.reLaunch({
+            url: '/pages/home/index',
+          })
+        }
+      })
+    }).catch(() => {
+      setLoading(false);
+    });
+  }
+  
+  return (
+    <View>
+      <View className="title">重置密码</View>
+      <View className="form-box">
+        <Field
+          value={pwd1}
+          placeholder="请设置新密码"
+          errorMessage={pwd1Err}
+          onChange={e => setPwd1(e.detail)}
+        ></Field>
+        <Field
+          value={pwd2}
+          placeholder="再次确认新密码"
+          errorMessage={pwd2Err}
+          onChange={e => setPwd2(e.detail)}
+        ></Field>
+      </View>
+      <View className="form-act">
+        <View>
+          <Button block hairline plain type="primary" size="small" onClick={handlePrev}>上一步</Button>
+        </View>
+        <View>
+          <Button block type="primary" size="small" loading={loading} onClick={handleSubmit}>确定</Button>
+        </View>
+      </View>
+    </View>
+  )
+}

src/pages/reset-password/index.config.js

+export default definePageConfig({
+  navigationBarTitleText: '找回密码'
+})

src/pages/reset-password/index.jsx

+import React from 'react';
+import { View } from '@tarojs/components';
+import Page from '@/layouts/index';
+import { changePwd } from '@/services/wxma'; 
+import Captcha from './components/Captcha';
+import ResetPwd from './components/ResetPwd';
+import './index.less';
+
+export default (props) => {
+
+  const [direct, setDirect] = React.useState();
+  const transClass = direct == 'right' ? 'form-wrapper to-right' : 'form-wrapper';
+  const formData = React.useRef();
+
+  const onNext = (data) => {
+    formData.current = data;
+    setDirect('right');
+  }
+
+  const onSubmit = (data) => {
+    formData.current = {
+      ...formData.current,
+      ...data,
+    }
+
+    return changePwd(formData.current);
+  }
+  
+  return (
+    <Page>
+      <View className="reset-password-box">
+        <View className={transClass}>
+          <View>
+            <Captcha onNext={onNext} />
+          </View>
+          <View>
+            <ResetPwd onPrev={() => setDirect()} onSubmit={onSubmit} />
+          </View>
+        </View>
+      </View>
+    </Page>
+  )
+}

src/pages/reset-password/index.less

+.reset-password-box {
+  width: 100%;
+  padding: 80px 0;
+  overflow: hidden;
+
+  .title {
+    font-size: 36px;
+    font-weight: 500;
+    color: #000000;
+  }
+
+  .form-box {
+    margin-top: 80px;
+
+    .van-cell {
+      background: transparent;
+
+      &::after {
+        border-bottom-color: rgba(0, 0, 0, 0.12);
+      }
+    }
+  }
+
+  .form-act {
+    margin-top: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    & > view {
+      width: 180px;
+      flex: none;
+    }
+  }
+
+  .form-wrapper {
+    width: 200%;
+    transition: transform 200ms;
+
+    & > view {
+      padding: 0 60px;
+      display: inline-block;
+      width: 50%;
+    }
+
+    &.to-right {
+      transform: translate(-50%, 0);
+    }
+  }
+}

src/services/comm.js

+import request from '@/utils/request';
+
+/*
+ * 获取验证码
+ */
+export const getCaptcha = (phone) => request(`/api/ma/captcha?phone=${phone}`);

src/services/wxma.js

 /*
  * 获取当前人员
  */
-export const currentUser = () => request(`/api/ma/current`);
+export const currentUser = () => request(`/api/ma/current`);
+
+
+/*
+ * 修改密码
+ */
+export const changePwd = (data) => request(`/api/ma/change-password`, { method: 'post', data });