.

src/layouts/index.jsx

@@ -0,0 +1,8 @@
+
+import Taro from '@tarojs/taro'
+import useRouter from '@/utils/hooks/useRouter'
+
+export default (Child) => (props) => {
+  const router = useRouter()
+  return <Child {...props} router={router} />
+}

src/layouts/style.less

@@ -0,0 +1,25 @@
+
+.loading {
+  margin: 0 auto;
+  margin-top: 30vh;
+  position: relative;
+
+  &-logo {
+    box-sizing: border-box;
+    padding: 12px;
+    position: absolute;
+    left: 0;
+    transform: scale(.75, .75);
+    animation: logo-opacity 2s linear infinite;
+  }
+}
+
+@keyframes logo-opacity {
+  0%, 100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: .4;
+  }
+}

src/pages/index/components/User/index.jsx

@@ -1,3 +1,4 @@
+import { useState,useEffect } from "react"
 import Taro from "@tarojs/taro"
 import { View, Image, ScrollView } from "@tarojs/components"
 import userBgi from '@/assets/user/userBgi.png'
@@ -13,35 +14,34 @@ import wallet from '@/assets/user/wallet.png'
 import bankCard from '@/assets/user/bankCard.png'
 import banner1 from '@/assets/banner/1.jpg'
 import './style.less'
-import { useState } from "react"
 
 export default (props) => {
   const { isLogin } = props
-  const [islogin, setIsLogin] = useState(false)
   const handleAccount = () => { console.log(5555) }
   const handleAboutUs = () => { }
   const handleUpdate = () => { }
   const handleFeedback = () => { }
   const handleLogin = () => { 
     Taro.navigateTo({ url: '/pages/login/index' });
-    // setIsLogin(true) 
   }
   const goMachinery = () => { }
   const goWallet = () => { }
   const goBank = () => { }
-  const signOut = () => { setIsLogin(false) }
+  const signOut = () => { 
+    Taro.reLaunch({ url: '/pages/index/index?tab=2' });
+  }
   return (
     <ScrollView scrollY style={{ height: '100%' }}>
       {
-        islogin &&
+        isLogin &&
         <View className='personTip'>该账号归张三所属</View>
       }
       <View className='userHead'>
         <Image src={userBgi} className='userBgi' />
         <View className='headcontent' onClick={handleLogin}>
-          <Image src={islogin ? banner1 : avatar} className='avatar' />
+          <Image src={isLogin ? banner1 : avatar} className='avatar' />
           {
-            islogin ? <View>
+            isLogin ? <View>
               <View>张三</View>
               <View>13612345678</View>
             </View> : <View>点击登录</View>
@@ -49,7 +49,7 @@ export default (props) => {
         </View>
       </View>
       {
-        islogin &&
+        isLogin &&
         <View className='userCard'>
           <View
             className='cardItem'
@@ -89,7 +89,7 @@ export default (props) => {
           <MyCell icon={feedback} action={goto} user handleAction={handleFeedback}>意见反馈</MyCell>
         </View>
         {
-          islogin && <View className='signOut' onClick={signOut}>退出登录</View>
+          isLogin && <View className='signOut' onClick={signOut}>退出登录</View>
         }
       </View>
 

src/pages/index/index.jsx

@@ -1,5 +1,5 @@
 import Taro from "@tarojs/taro";
-import { useState,useEffect } from "react";
+import { useState, useEffect } from "react";
 import { View, Image } from "@tarojs/components"
 import indexImg from "@/assets/comm/index.png";
 import indexActive from "@/assets/comm/indexActive.png";
@@ -8,26 +8,33 @@ import jobActive from "@/assets/comm/jobActive.png";
 import user from "@/assets/comm/user.png";
 import userActive from "@/assets/comm/userActive.png";
 import CustomNav from "@/components/CustomNav";
+import withLayout from '@/layouts'
 import Order from './components/Order'
 import Job from './components/Job'
 import User from "./components/User";
 import "./index.less";
 
-export default (props) => {
+export default withLayout((props) => {
+  const { router } = props
+  let { tab, isLogin } = router.params
   const [currentTab, setCurrentTab] = useState(0);
   const handleClick = (val) => {
     setCurrentTab(val);
   };
-  
+  useEffect(() => {
+    if (tab) {
+      setCurrentTab(tab - 0)
+    }
+  }, [tab])
   return (
     <View className='page-index'>
       <View className='index-navbar'>
-        <CustomNav home title={currentTab === 0?'首页':currentTab === 1?'作业管理':'我的'} />
+        <CustomNav home title={currentTab === 0 ? '首页' : currentTab === 1 ? '作业管理' : '我的'} />
       </View>
       <View className='index-container'>
         {currentTab === 0 && <Order />}
         {currentTab === 1 && <Job />}
-        {currentTab === 2 && <User />}
+        {currentTab === 2 && <User isLogin={isLogin} />}
       </View>
       <View className='index-tabbar'>
         <View
@@ -54,4 +61,4 @@ export default (props) => {
       </View>
     </View>
   );
-};
+});

src/pages/login/index.jsx

@@ -1,9 +1,85 @@
-import { View, Image } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+import { useState } from "react"
+import { View, Image, Input, Text, Checkbox, Label } from "@tarojs/components"
 import CustomNav from "@/components/CustomNav"
+import MyButton from "@/components/MyButton"
 import bgi from '@/assets/login/loginImg.png'
+import vCode from '@/assets/login/VerificationCode.png'
+import checkedImg from '@/assets/login/checkedImg.png'
+import unChecked from '@/assets/login/unChecked.png'
 import './style.less'
 
 export default (props) => {
+  const [agreement,setAgreement]=useState(false)
+  const [phone,setPhone]=useState()
+  const [qCode,setqCode]=useState()
+  const [qCodeBtn,setqCodeBtn]=useState('获取验证码')
+  const [dsb,setDsb]=useState(false)
+  const handlePhone=(e)=>{
+    if (e.detail.value) {
+      setPhone(e.detail.value)
+    }
+  }
+  const changeqCode=()=>{
+    if (rulePhone(phone)) {
+      console.log(666)
+
+      let time=10
+      setDsb(true)
+      // 调接口
+      let timer = setInterval(() => {
+        time-- //倒计时递减
+        setqCodeBtn(`${time}s后重新发送`)
+        if (time === 0) {
+          setDsb(false)
+          setqCodeBtn('重新发送')
+          time=60
+          clearInterval(timer)
+        }
+      }, 1000)
+
+    }
+  }
+  const rulePhone=(val)=>{
+    if (!/^1[0-9]{10}$/.test(val)) {
+      Taro.showToast({
+        title: '请输入正确的11位手机号',
+        icon: 'none',
+        duration: 2000
+      })
+      return false
+    } else return true
+  }
+  const handleqCode=(e)=>{
+    if (e.detail.value) {
+      setqCode(e.detail.value)
+    }
+  }
+  const onLogin = () => { 
+    if (rulePhone(phone)&&qCode) {
+      if (!agreement) {
+        Taro.showToast({
+          title: '请确认下方协议',
+          icon: 'none',
+          duration: 2000
+        })
+        return false
+      }
+      Taro.showToast({
+        title: '登录成功',
+        icon: 'none',
+        duration: 1000
+      })
+      Taro.reLaunch({ url: '/pages/index/index?tab=2&&isLogin=true' });
+
+    } else {
+      Taro.showToast({
+        title: '请输入正确的手机号和验证码',
+        icon: 'none',
+        duration: 2000
+      })
+    }
+  }
   return (
     <View className='page-index'>
       <View className='index-navbar'>
@@ -13,6 +89,24 @@ export default (props) => {
       <View className='index-container loginContent'>
         <View className='title1'>您好！</View>
         <View className='title2'>欢迎进入农机手端小程序！</View>
+        <View className='loginCell'>
+          <View className='loginHeader'>+86</View>
+          <Input type='number' maxlength='11' placeholder='请输入手机号' value={phone} onBlur={handlePhone} />
+          <View  className={['loginAction',dsb?'qCodeActive':'']} onClick={dsb?'':changeqCode}>{qCodeBtn}</View>
+        </View>
+        <View className='loginCell'>
+          <View className='loginHeader'>
+            <Image src={vCode} className='headerImg' />
+          </View>
+          <Input type='text' value={qCode} onInput={handleqCode} placeholder='请输入验证码' />
+        </View>
+        <View className='footer'>
+          <MyButton value='登录' onClick={onLogin} />
+          <View className='agreement' onClick={()=>setAgreement(!agreement)}>
+              <Image src={agreement?checkedImg:unChecked} className='footerCheckbox' />
+              请认真查看<Text>文本协议/隐私政策</Text>，确认之后选择此项！
+          </View>
+        </View>
       </View>
     </View>
   )

src/pages/login/style.less

@@ -17,4 +17,64 @@
     font-size: 54px;
     letter-spacing: 10px;
   }
+  .loginCell{
+    display: flex;
+    align-items: center;
+    height: 108px;
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.12);
+    .loginHeader,.loginAction{
+      flex: none;
+    }
+    .loginHeader{
+      font-size: 38px;
+      font-weight: 500;
+      color: #333333;
+      width: 106px;
+      border-right: 1px solid #333;
+      display: flex;
+      .headerImg{
+        width: 32px;
+        height: 40px;
+        margin-left: 19px;
+      }
+    }
+    .loginAction{
+      width: 8em;
+      height: 68px;
+      background: linear-gradient(0deg, #00AE39,#A0E067);
+      border-radius: 20px;
+      line-height: 68px;
+      text-align: center;
+      color: #fff;
+      font-size: 30px;
+      font-weight: bold
+    }
+    .qCodeActive{
+      opacity: 0.5;
+    }
+    input{
+      flex: 1;
+      padding: 0 0 0 31px;
+    }
+  }
+  .footer{
+    position: absolute;
+    bottom: 60px;
+    .agreement{
+      font-size: 26px;
+      font-weight: 400;
+      color: #999;
+      margin-top: 42px;
+      display: flex;
+      align-items: center;
+      .footerCheckbox{
+        width: 28px;
+        height: 28px;
+        margin-right: 11px;
+      }
+      Text{
+        color: #02902E
+      }
+    }
+  }
 }

src/pages/moreOrder/index.jsx

@@ -1,12 +1,13 @@
+import { useState } from "react";
 import { View, Input, Image, Text, ScrollView } from "@tarojs/components"
 import CustomNav from "@/components/CustomNav";
 import searchImg from '@/assets/comm/search.png'
-import { useState } from "react";
+import withLayout from '@/layouts'
 import MyCard from "@/components/MyCard";
 import Footer from "@/components/Footer";
 import './style.less'
 
-export default () => {
+export default withLayout(() => {
   const [imageShow, setImageShow] = useState(true)
   const [currentTab, setCurrentTab] = useState(0);
   const handleSearch = (e) => {
@@ -85,4 +86,4 @@ export default () => {
       </View>
     </View>
   )
-}
+})

src/pages/orderDetail/index.jsx

@@ -1,8 +1,9 @@
 import { View } from "@tarojs/components"
 import CustomNav from "@/components/CustomNav"
 import MyCard from "@/components/MyCard"
+import withLayout from '@/layouts'
 
-export default () => {
+export default withLayout(() => {
   return (
     <View className='page-index'>
       <View className='index-navbar'>
@@ -13,4 +14,4 @@ export default () => {
       </View>
     </View>
   )
-}
+})

src/utils/hooks/useRouter.js

@@ -0,0 +1,12 @@
+import Taro, { useRouter } from '@tarojs/taro'
+import {  useRef  } from 'react'
+
+export default () => {
+  const router = useRouter()
+  const routerRef = useRef()
+
+
+  routerRef.current = router
+
+  return routerRef.current
+}