我的页面

src/Router.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-navigation'
 import { font_family_regular, first_text_color } from './assets/styles/base'
 import Resolution from './components/common/Resolution'
-import Home from './pages/index'
+import Home from './pages/index/index'
 import Mine from './pages/mine/mine'
 import Signin from './pages/signin/signin'
 
@@ -43,10 +43,11 @@ function createNavigator() {
           tabBarLabel: '我',
           tabBarIcon: ({ focused }) => (
             <Image
+              style={{ width: 20, height: 20 }}
               source={
                 focused
-                  ? require('../app/images/tab_his_sel.png')
-                  : require('../app/images/tab_his_def.png')
+                  ? require('./assets/images/tab_mine_sel.png')
+                  : require('./assets/images/tab_mine_def.png')
               }
             />
           ),
@@ -70,7 +71,7 @@ function createNavigator() {
           backgroundColor: 'transparent',
         },
       },
-    }
+    },
   )
 
   const SwitchNavigator = createSwitchNavigator({
@@ -82,7 +83,7 @@ function createNavigator() {
     {
       Main: { screen: SwitchNavigator },
     },
-    { initialRouteName: 'Main', ...options }
+    { initialRouteName: 'Main', ...options },
   )
 
   return createAppContainer(stackNavigator)

src/constants.ts

@@ -4,3 +4,5 @@ export const MOBILE_BUSINESS_MODULE = 'MOBILE_BUSINESS_MODULE'
 export const MOBILE_HISTORICAL_ORDER = 'MOBILE_HISTORICAL_ORDER'
 // 硬件管理
 export const MOBILE_HARDWARE_MANAGEMENT = 'MOBILE_HARDWARE_MANAGEMENT'
+// 默认头像
+export const DEFAULT_AVATAR = require('./assets/images/avatar.png')

src/pages/mine/mine.styl

+@import '../../assets/styles/base.styl'
+@import '../../assets/styles/variable.styl'
+
+.mine
+  flex 1
+  background-color home_background_color
+
+.user
+  &-name
+    @extend .center
+    padding-top 10px
+    padding-bottom 10px
+    margin-bottom 20px
+
+    &__text
+      font-size second_text_size
+      color second_text_color
+      font-family font_family_semibold
+
+.avatar
+  @extend .center
+
+  &-top
+    width 100%
+    height 150px
+    background-color primary_color
+
+  &-holder
+    background-color foundation_color
+    width 80px
+    height @width
+    border-radius half = 40px
+    margin-top -40px
+    padding 3px
+    box-shadow 0px 0px 1px #ddd
+
+  &-image
+    width 74px
+    height @width
+    border-radius 38px
+
+.list
+  &-item
+    height 50px
+
+    &__img
+      width 20px
+      height @width
+
+      &-ex
+        width 18px
+        height @width
+
+    &__text
+      font-size second_text_size
+      border-bottom-width 0px
+      padding-left 10px
+      line-height 36px

src/pages/mine/mine.tsx

 import React, { Component } from 'react'
-import { View, Text } from 'react-native'
+import { View, Text, ScrollView, Image, SafeAreaView } from 'react-native'
+import { List } from '@ant-design/react-native'
+import { inject, observer } from 'mobx-react'
+import { g, isBlank } from '../../utils/utils'
 import Header from '../../components/header/header'
+import { DEFAULT_AVATAR } from '../../constants'
+import styles from './mine.styl'
+
+const Item = List.Item
+
+type IProps = {
+  userStore: {
+    personName: string
+    gender: string
+  }
+  store: {
+    setToken: Function
+  }
+}
+
+class Mine extends Component<IProps> {
+  state = {
+    listItems: [
+      {
+        title: '历史订单',
+        thumb: require('../../assets/images/tab_his_def.png'),
+        extra: require('../../assets/images/arr_rig.png'),
+        arrow: 'empty',
+        onPressHandler: () => {},
+      },
+      {
+        title: '退出',
+        thumb: require('../../assets/images/exit.png'),
+        extra: require('../../assets/images/arr_rig.png'),
+        arrow: 'empty',
+        onPressHandler: () => {
+          this.exitHandler()
+        },
+      },
+    ],
+  }
+
+  exitHandler() {
+    console.log('exitHandler')
+    this.props.store.setToken('')
+    this.props.navigation.navigate('Signin')
+  }
 
-class Mine extends Component {
   render() {
+    const { personName, gender } = this.props.userStore
+    const { listItems } = this.state
+
     return (
-      <View style>
-        <Header title="骨科智慧仓" />
+      <ScrollView style={g(styles, 'mine')}>
+        <View style={g(styles, 'mine')}>
+          <Header title="骨科智慧仓" back={false} />
+
+          <View style={g(styles, 'user')}>
+            <View style={g(styles, 'avatar')}>
+              <View style={g(styles, 'avatar-top')}></View>
+              <View style={g(styles, 'avatar-holder')}>
+                <Image source={DEFAULT_AVATAR} style={g(styles, 'avatar-image')} />
+              </View>
+            </View>
+            <View style={g(styles, 'user-name')}>
+              <Text style={g(styles, 'user-name__text')}>
+                {personName} {gender ? '‧ ' + gender : ''}
+              </Text>
+            </View>
+          </View>
+
+          <List style={g(styles, 'list')}>
+            {listItems.map(item => {
+              return (
+                <Item
+                  key={item.title}
+                  style={g(styles, 'list-item')}
+                  thumb={<Image source={item.thumb} style={g(styles, 'list-item__img')} />}
+                  extra={<Image source={item.extra} style={g(styles, 'list-item__img-ex')} />}
+                  arrow={item.arrow}
+                  onPress={item.onPressHandler}
+                >
+                  <Text style={g(styles, 'list-item__text')}>{item.title}</Text>
+                </Item>
+              )
+            })}
+          </List>
         </View>
+      </ScrollView>
     )
   }
 }
-export default Mine
+export default inject('store', 'userStore')(observer(Mine))

src/stores/user.ts

@@ -24,7 +24,7 @@ export default class UserStore {
   @persist @observable private gender: string = ''
   @persist('map') @observable private department: IDepartment = {
     departmentName: '',
-    departmentCode: ''
+    departmentCode: '',
   }
 
   // 用户仓库
@@ -63,6 +63,7 @@ export default class UserStore {
     this.inventories = res.inventorys
     this.userName = res.userName
     this.personName = res.personName
+    this.gender = res.gender
     this.store.setToken(res.accessToken)
     this.store.setFunctions(res.functions)
   })

src/utils/utils.ts

+// @ts-nocheck
 import * as R from 'ramda'
 import { Dimensions, Platform } from 'react-native'
 import Toast from 'react-native-root-toast'