DingdongRider/mine/MineInfoScreen.tsx

import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import useModel from 'flooks';
import { useTranslation } from 'react-i18next';
import User from '../stores/User';

import ImagePicker from '../components/ImagePicker';

import { promot } from '../utils/SystemUtils';

export default function MineInfoScreen({ navigation }: StackScreenProps) {
  const { t } = useTranslation();
  const { userInfo, updateUser, riderInfo } = useModel(User, ['userInfo']);
  const { avatar, nickname, phone } = userInfo;
  const { jobNumber, area } = riderInfo;
  function updateInfo(key, val) {
    updateUser({
      [key]: val,
    });
  }

  return (
    <Div bg="gray100">
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
        }}
      >
        <Div mb={10} row bg="white" row h={55} alignItems="center" px={15}>
          <Text flex={1} fontSize="sm">
            {t('tou-xiang')}：
          </Text>

          <ImagePicker
            img={avatar}
            setImg={(img) => updateInfo('avatar', img)}
            w={33}
            h={33}
          />
          <Icon ml={5} name="right" fontSize="sm" />
        </Div>
        <Button
          mb={10}
          bg="transparent"
          p={0}
          block
          onPress={() => {
            promot(navigation, {
              title: t('ni-cheng'),
              defaultVal: nickname,
              hasCancel: true,
              submitEvent: (val) => {
                updateInfo('nickname', val);
              },
            });
          }}
        >
          <Div flex={1} row bg="white" row h={55} alignItems="center" px={15}>
            <Text flex={1} fontSize="sm">
              {t('ni-cheng')}:
            </Text>

            <Text color="gray500" fontSize="sm">
              {nickname}
            </Text>
            <Icon ml={5} name="right" fontSize="sm" />
          </Div>
        </Button>

        <Button
          mb={10}
          bg="transparent"
          p={0}
          block
          onPress={() => {
            navigation.navigate('LoginStack', {
              screen: 'ForgetPsd',
            });
          }}
        >
          <Div
            flex={1}
            mb={10}
            row
            bg="white"
            row
            h={55}
            alignItems="center"
            px={15}
          >
            <Text flex={1} fontSize="sm">
              {t('geng-gai-mi-ma')}:
            </Text>

            <Icon ml={5} name="right" fontSize="sm" />
          </Div>
        </Button>
        <Div bg="white" px={15}>
          <Div
            row
            py={12}
            alignItems="center"
            borderBottomWidth={1}
            borderColor="gray100"
          >
            <Text flex={1} fontSize="sm">
              {t('gong-hao')}:
            </Text>
            <Text fontSize="sm" color="gray500">
              {jobNumber}
            </Text>
          </Div>
          <Div
            row
            py={12}
            alignItems="center"
            borderBottomWidth={1}
            borderColor="gray100"
          >
            <Text fontSize="sm" minW={75}>
              {t('di-zhi')}:
            </Text>
            <Text fontSize="sm" color="gray500">
              {area}
            </Text>
          </Div>
          <Div
            row
            py={12}
            alignItems="center"
            borderBottomWidth={1}
            borderColor="gray100"
          >
            <Text flex={1} fontSize="sm">
              {t('dian-hua')}:
            </Text>
            <Text fontSize="sm" color="gray500">
              {phone}
            </Text>
          </Div>

          <Div row py={12} alignItems="center">
            <Text fontSize="sm" minW={75}>
              {t('gong-zuo-fan-wei')}:
            </Text>
            <Text fontSize="sm" color="gray500">
              {area}
            </Text>
          </Div>
        </Div>
      </ScrollView>
    </Div>
  );
}