feats

src/app.js

 class App extends Component {
 
   onLaunch(options) {
-    const [,, setPerson, login] = store.getModel('person').getState()
+    const {setPerson, login} = store.getModel('person').getState()
 
     // 预拉取数据
     preFetchData().then((fetchData) => {

src/components/AuthPage/index.jsx

+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import { useModel } from '@/store'
+import { Label, RadioGroup } from '@tarojs/components'
+import index from '@/assets/icons/login/LOGO.png'
+import './login.less'
+
+
+export default (props) => {
+  const { getPhone } = useModel('person')
+
+  const [loading, setLoading] = useState(false)
+  const [checked, setChecked] = useState(false)
+
+  const handleChange = () => {
+    setChecked(true)
+  }
+
+  const handlePhoneNumber = (e) => {
+    const { errMsg, ...data } = e.detail || {}
+    if (errMsg === 'getPhoneNumber:ok') {
+      const sessionKey = Taro.getStorageSync('sessionKey')
+      getPhone({ ...data, sessionKey }).then(() => {
+        setLoading(false)
+      }).catch(() => setLoading(false))
+    }
+  }
+
+  return (
+    <view>
+      <image className='logo' src={index} />
+      <view className='v1'>登录后可继续当前操作</view>
+      <button
+        disabled={!checked}
+        loading={loading}
+        className='login'
+        openType='getPhoneNumber'
+        onGetPhoneNumber={handlePhoneNumber}
+      >微信手机号一键登录</button>
+      <view className='buttom'>
+        <Label>
+          <RadioGroup onChange={handleChange}>
+            <radio checked={checked} />
+          </RadioGroup>
+          <view>
+            我已阅读知晓并同意 <text>《平台用户服务协议》</text>
+          </view>
+        </Label>
+      </view>
+    </view>
+  )
+}

src/pages/login/login.less → src/components/AuthPage/login.less

 .logo{
+  display: block;
   width: 320px;
   height: 320px;
   margin: 21px auto;
 }
 .v1{
   font-size: 28px;
-   line-height: 0;
+  line-height: 0;
   color: #999;
   text-align: center;
 }
   text-align: center;
   bottom: 80px;
   width: 100%;
-  radio{
-    transform:scale(0.5);
-    margin-right: -9px;
-    position: relative;
-    bottom: 4px;
-    right: -8px;
+  vertical-align: middle;
+
+  radio-group {
+    display: inline-block;
+    vertical-align: middle;
   }
-  text{
-    color: #274190;
-    text-decoration: underline;
+
+  radio {
+    transform: scale(.8);
+  }
+
+  view {
+    display: inline-block;
+    vertical-align: middle;
+
+    text{
+      color: #274190;
+      text-decoration: underline;
+    }
   }
 }

src/layouts/index.jsx

 import { getPageBy, getIndexPageOf } from '../routes'
 
 export default (Child) => (props) => {
-  const [person] = useModel('person')
+  const { person } = useModel('person')
   const router = useRouter()
 
   // 确保人员信息到位

src/pages/index/index.jsx

-import React, { Suspense, useState, useEffect, lazy } from 'react'
-import { useRouter } from '@tarojs/taro'
+import React, { useState, useEffect } from 'react'
+import Taro from '@tarojs/taro'
 import CustomNav from '@/components/CustomNav'
-import { useModel } from '@/store'
 import logo from '@/assets/icons/comm/logo_small.png'
 import withLayout from '@/layouts'
 import tabList from './tabbar'
-import './index.less'
 import Guide from './tabs/Guide'
 import Mine from './tabs/Mine'
 import Recommend from './tabs/Recommend'
-// import Strategy from './tabs/Strategy'
-
-// const Recommend = lazy(() => import('./tabs/Recommend'))
-// const Guide = lazy(() => import('./tabs/Guide'))
-// const Strategy = lazy(() => import('./tabs/Strategy'))
-// const Mine =  import'./tabs/Mine'
-
+import './index.less'
 
 export default withLayout((props) => {
-  const { params } = useRouter()
+  const { router, person } = props
+  const { params, path } = router
   const { tab } = params || {}
 
-  const [person] = useModel('person')
   const [currentTab, setCurrentTab] = useState(0)
 
 
     if (tab) {
       setCurrentTab(tab - 0)
     }
-
   }, [tab])
+
   return (
     <view className='page-index'>
       <view className='index-navbar'>
         {currentTab === 0 && <Recommend />}
         {currentTab === 1 && <Guide />}
         {/* {currentTab === 2 && <Strategy />} */}
-        {currentTab === 2 && <Mine />}
+        {currentTab === 2 && <Mine person={person} />}
       </view>
       <view className='index-tabbar'>
         <mp-tabbar extClass='custom-tabbar' current={currentTab} list={tabList} onChange={handleTabChange}></mp-tabbar>

src/pages/index/index.less

   .index-container {
     flex: auto;
     overflow: hidden;
+    position: relative;
   }
 }
 

src/pages/index/tabs/Mine.jsx

 import React from 'react'
 import Taro from '@tarojs/taro'
 
-import girl from '@/assets/icons/UserCenter/girl.png'
+import AuthPage from '@/components/AuthPage'
 import boy from '@/assets/icons/UserCenter/boy.png'
 import awaitPay from '@/assets/icons/UserCenter/awaitPay.png'
 import AllOrder from '@/assets/icons/UserCenter/AllOrder.png'
 import HomeLogo from '@/assets/icons/UserCenter/HomeLogo.png'
 import ContactMe from '@/assets/icons/UserCenter/ContactMe.png'
 import collect from '@/assets/icons/UserCenter/collect.png'
-import MyTravel from '@/assets/icons/UserCenter/MyTravel.png'
 import Rules from '@/assets/icons/UserCenter/Rules.png'
 import Userrrrrrr from '@/assets/icons/ProCard/8kb.jpg'
-// import Tbas2 from '@/pages/index/tabs/Guide'
 import './MineCss/style.less'
 
 
 
 export default (props) => {
+  const { person } = props
+
   // // 我的行程 
   // const HomeLogo = () => {
   //   Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
     Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
   }
 
-
-
-
-
-  return (
+  return !person.phone ? <AuthPage /> : (
     <scroll-view scroll-y style='height: 77vh;' >
       <view className='User-box'>
         <view className='User-info'>

src/pages/login/login.config.js

-export default {
-  navigationBarTitleText: '登录',
-  navigationStyle: 'custom',
-}

src/pages/login/login.jsx

-import React from 'react'
-import CustomNav from '@/components/CustomNav'
-import index from '../../assets/icons/login/LOGO.png'
-import '../index/index.less'
-import './login.less'
-
-
-export default (props) => {
-return (
-  <view className='page-index'>
-    <view className='index-navbar'>
-        <CustomNav title='登录' />                 
-    </view>
-    <image className='logo' src={index} />
-    <view className='v1'>登录后可继续当前操作</view>
-    <view className='login'>微信手机号一键登录</view>
-    <view className='buttom'>
-      <radio />
-    我已阅读知晓并同意 <text>《平台用户服务协议》</text>
-    </view>
-  </view>
-  
-)}

src/services/person.js

 import request from '@/utils/request'
 
-export const login = (params) => request('/login', { params, method: 'post' })
+/**
+ * 登录
+ * @param {*} params 
+ * @returns 
+ */
+export const signIn = (params) => request('/login', { params, method: 'post' })
+
+/**
+ * 授权手机
+ * @param {*} data 
+ * @returns 
+ */
+export const authPhone = (data) => request('/auth-user', { data, method: 'put' })

src/store/models/person.js

 import { useState } from "react"
 import Taro from '@tarojs/taro'
-import { login } from '@/services/person'
+import { signIn, authPhone } from '@/services/person'
 
 export default () => {
   const [person, setPerson] = useState()
   const [peronRoles, setPersonRoles] = useState([])
 
-  const personLogin = (params) => {
-    login(params).then((res) => {
+  const login = (params) => {
+    signIn(params).then((res) => {
       const { person : taPerson, personRoleList, sessionKey } = res;
       setPerson(taPerson);
       setPersonRoles(personRoleList);
     })
   }
 
-  return [person, peronRoles, setPerson, personLogin]
+  const getPhone = (data) => {
+    return authPhone(data).then((res) => {
+      setPerson(res);
+    })
+  }
+
+  return {
+    person,
+    peronRoles,
+    setPerson,
+    login,
+    getPhone,
+  }
 }