部分修改

android/app/build.gradle

@@ -155,6 +155,9 @@ android {
         xhk {
             resValue "string", "baseUrl", '"https://obs.xhk.orth.tech"'
         }
+        gysx {
+            resValue "string", "baseUrl", '"https://obs-pro.gyjtsx.com"'
+        }
     }
 
     // applicationVariants are e.g. debug, release

app.json

+// TODO: 不能提交或提交前改回BoneHouse_Business_APP
 {
-  "name": "BoneHouse_Business_APP",
-  "displayName": "BoneHouse_Business_APP"
+  "name": "BoneHouse_Hospital_APP",
+  "displayName": "BoneHouse_Hospital_APP"
 }
\ No newline at end of file

package.json

@@ -49,6 +49,7 @@
     "@types/ramda": "^0.27.39",
     "@types/react": "^17.0.3",
     "@types/react-native": "^0.64.2",
+    "@types/react-native-audio": "^4.3.3",
     "@types/react-test-renderer": "^17.0.1",
     "babel-jest": "^24.8.0",
     "babel-plugin-module-resolver": "^4.1.0",

src/components/form/audio.styl

+@import '../../assets/styles/base.styl'
+@import '../../assets/styles/variable.styl'
+
+.audio
+  background-color #fff
+  padding 18px
+  margin-bottom 18px
+
+.not-record
+  &-tip
+    font-size 18px
+    padding-bottom 20px
+    font-family font_family_regular
+
+.record
+  &-btn
+    @extend .row
+    @extend .middle
+    @extend .center
+    align-self center
+    background-color dis_sub_color
+    width 150px
+    height 48px
+    border-radius 24px
+    margin-top 20px
+    margin-bottom 20px
+
+    &__icon
+      height 20px
+
+    &__text
+      font-size second_text_size
+      color #333
\ No newline at end of file

src/components/form/audio.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/components/form/audio.tsx
+ * @Author: peii
+ * @Date: 2021-06-19 22:37:22
+ * @LastEditTime: 2021-06-27 15:46:04
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 录音组件
+ */
+// @ts-nocheck
+
+import React, { Component } from 'react'
+import { View, Text, Image, TouchableOpacity, ScrollView, Alert, Linking, Platform, NativeModules } from 'react-native'
+import { IFormField } from 'bonehouse'
+import * as R from 'ramda'
+import { AudioRecorder, AudioUtils } from 'react-native-audio'
+import Toast from 'react-native-root-toast'
+import { isBlank, show, isNotBlank, g } from '../../utils/utils'
+import { MsgType } from '../../enums'
+import styles from './audio.styl'
+// import Container from '../../inversify'
+// import { TYPES } from '../../inversify/types'
+// import Service from '../../services/service'
+
+type IProps = {
+  item: IFormField
+  value: string
+  onChange: Function
+}
+
+type IState = {
+  audioPath: string
+  hasPermission: boolean
+  currentTime: number
+  recorded: boolean
+}
+
+export default class Audio extends Component<IProps, IState> {
+  state = {
+    audioPath: AudioUtils.DocumentDirectoryPath + `/${new Date().getTime()}.aac`, // 文件路径
+    hasPermission: false,
+    recorded: false,
+    currentTime: 0,
+  }
+
+  constructor(props: IProps) {
+    super(props)
+    this.openAppSetting = this.openAppSetting.bind(this)
+    this.requestAudioPermission = this.requestAudioPermission.bind(this)
+    this.prepareRecordingPath = this.prepareRecordingPath.bind(this)
+    this.recordHandler = this.recordHandler.bind(this)
+    this.stopRecordingHandler = this.stopRecordingHandler.bind(this)
+    this.deleteHandler = this.deleteHandler.bind(this)
+  }
+
+  componentDidMount() {
+    this.requestAudioPermission()
+  }
+
+  /**
+   * @description: 打开设置
+   * @param {*}
+   * @return {*}
+   */
+  openAppSetting() {
+    Alert.alert('提示信息', 'APP需要使用录音，请打开录音权限允许APP使用', [
+      {
+        text: '设置',
+        onPress: () => {
+          if (Platform.OS == 'ios') {
+            Linking.openURL('app-settings:').catch(err => console.log('error', err))
+          } else if (Platform.OS == 'android') {
+            NativeModules.OpenSettings.openNetworkSettings((data: any) => {
+              console.log('call back data', data)
+            }).catch((err: any) => console.log('android', err))
+          }
+        },
+      },
+      {
+        text: '取消',
+      },
+    ])
+  }
+
+  /**
+   * @description: 请求录音权限
+   * @param {*}
+   * @return {*}
+   */
+  requestAudioPermission() {
+    AudioRecorder.requestAuthorization().then(isAuthor => {
+      console.log('是否授权: ' + isAuthor)
+      if (!isAuthor) return this.openAppSetting()
+
+      this.setState({ hasPermission: isAuthor })
+      this.prepareRecordingPath(this.state.audioPath)
+
+      // 录音进展
+      AudioRecorder.onProgress = data => {
+        console.log(data)
+
+        this.setState({
+          currentTime: Math.ceil(data.currentTime),
+        })
+      }
+      // 完成录音
+      AudioRecorder.onFinished = data => {
+        // data 录音数据
+        console.log(this.state.currentTime)
+      }
+    })
+  }
+
+  /**
+   * @description: 设置录音路径
+   * @param {string} path
+   * @return {*}
+   */
+  prepareRecordingPath(path: string) {
+    const option = {
+      SampleRate: 44100.0, //采样率
+      Channels: 2, //通道
+      AudioQuality: 'High', //音质
+      AudioEncoding: 'aac', //音频编码
+      OutputFormat: 'mpeg_4', //输出格式
+      MeteringEnabled: false, //是否计量
+      MeasurementMode: false, //测量模式
+      AudioEncodingBitRate: 32000, //音频编码比特率
+      IncludeBase64: true, //是否是base64格式
+      AudioSource: 0, //音频源
+    }
+    AudioRecorder.prepareRecordingAtPath(path, option as any)
+  }
+
+  /**
+   * @description: 录音操作
+   * @param {*}
+   * @return {*}
+   */
+  async recordHandler() {
+    try {
+      if (!this.state.hasPermission) return this.openAppSetting()
+
+      if (this.state.recorded) {
+        this.prepareRecordingPath(this.state.audioPath)
+      }
+
+      show('录音开始')
+      await AudioRecorder.startRecording()
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  /**
+   * @description: 录音完成
+   * @param {*}
+   * @return {*}
+   */
+  async stopRecordingHandler() {
+    if (!this.state.hasPermission) return
+
+    try {
+      await AudioRecorder.stopRecording()
+      show('录音完成')
+      this.setState({ recorded: true })
+    } catch (error) {}
+  }
+
+  /**
+   * @description: 删除操作
+   * @param {*}
+   * @return {*}
+   */
+  deleteHandler() {}
+
+  render() {
+    const { recorded, currentTime } = this.state
+
+    return (
+      <View style={g(styles, 'audio')}>
+        {!recorded ? (
+          <View style={g(styles, 'not-record')}>
+            <Text style={g(styles, 'not-record-tip')}>还有什么要安排的，可录音备注哟！</Text>
+            <TouchableOpacity
+              style={g(styles, 'record-btn')}
+              touchableOpacity={0.8}
+              onLongPress={this.recordHandler}
+              onPressOut={this.stopRecordingHandler}
+            >
+              <Image
+                style={g(styles, 'record-btn__icon')}
+                source={require('../../assets/images/record_icon.png')}
+                resizeMode="contain"
+              />
+              <Text style={g(styles, 'record-btn__text')}>长按录音</Text>
+            </TouchableOpacity>
+          </View>
+        ) : (
+          <View style={g(styles, 'recorded')}>
+            <TouchableOpacity style={g(styles, 'recorded-item')}>
+              <Text style={g(styles, 'recorded-item__text')}>点击播放 {currentTime}"</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={g(styles, 'recorded-item__delete')}>
+              <Text style={g(styles, 'recorded-item__delete-text')}>删除</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      </View>
+    )
+  }
+}

src/components/form/index.styl

@@ -62,9 +62,12 @@
     @extend .text
     text-align right
     color second_text_color
+    padding 0
+    flex 0.5
 
     &__multi
       text-align left
+      flex 1
 
 .red
   color #f00

src/components/form/index.tsx

@@ -8,6 +8,7 @@
  * @Revision:
  *
  */
+// @ts-nocheck
 import React, { Component } from 'react'
 import { View, Text, ScrollView, SafeAreaView, TouchableOpacity } from 'react-native'
 import { IFormField } from 'bonehouse'
@@ -17,8 +18,8 @@ import Select from './select'
 import Input from './input'
 import DatePicker from './date'
 import ImageForm from './image'
+import Audio from './audio'
 import { g, isBlank, show, debounce } from '../../utils/utils'
-import Consumables from '../../pages/consume/selected-consumables'
 import styles from './index.styl'
 import { ActivityIndicator } from '@ant-design/react-native'
 
@@ -32,6 +33,7 @@ const formComponents = {
   [FieldType.TEXT]: Input,
   [FieldType.DATE]: DatePicker,
   [FieldType.IMAGE]: ImageForm,
+  [FieldType.VOICE]: Audio,
 }
 
 export default class Form extends Component<IProps> {
@@ -107,7 +109,7 @@ export default class Form extends Component<IProps> {
 
     return (
       <View style={g(styles, 'container')}>
-        <ScrollView style={g(styles, 'form')}>
+        <ScrollView style={g(styles, 'form')} canCancelContentTouches={true}>
           <View style={g(styles, 'form-inner')}>
             {fields.map(item => {
               let FormComponent = formComponents[item.type] || Select
@@ -140,13 +142,8 @@ export default class Form extends Component<IProps> {
             >
               {submiting ? (
                 <View style={g(styles, 'submit-btn__inner')}>
-                  <ActivityIndicator
-                    style={g(styles, 'submit-btn__loading')}
-                    color="rgba(255,255,255,0.5)"
-                  />
-                  <Text style={g(styles, 'submit-btn__text', 'submit-btn__text__disabled', 'ml10')}>
-                    提交中
-                  </Text>
+                  <ActivityIndicator style={g(styles, 'submit-btn__loading')} color="rgba(255,255,255,0.5)" />
+                  <Text style={g(styles, 'submit-btn__text', 'submit-btn__text__disabled', 'ml10')}>提交中</Text>
                 </View>
               ) : (
                 <Text

src/components/header/header.tsx

+// @ts-nocheck
 import React, { useState, useEffect } from 'react'
 import { View, StatusBar, Platform, Text, Image, TouchableOpacity } from 'react-native'
 import { g, isIphoneX } from '../../utils/utils'
 import { primary_color } from '../../assets/styles/base'
-import styles from './header.styl'
 import container from '../../inversify'
 import { TYPES } from '../../inversify/types'
+import styles from './header.styl'
 
 const store = container.get(TYPES.SysStore)
 
@@ -12,7 +13,7 @@ function header({ title, backgroundColor = primary_color, back = true, backCallb
   const [statusHeight, setStatusHeight] = useState(20)
 
   useEffect(() => {
-    const height = Platform.OS === 'android' ? StatusBar.currentHeight : isIphoneX() ? 44 : 20
+    const height = Platform.OS === 'android' ? 0 : isIphoneX() ? 44 : 20
     setStatusHeight(height)
     store.setHeaderHeight(height + 58)
   }, [])

src/components/modals/host/host.styl

@@ -3,10 +3,11 @@
 
 .form
   &-item
-    padding 15px 5px 15px 20px
+    padding 10px 5px 10px 20px
     margin 30px 10px 40px
     border-radius 50px
     flex-direction row
+    align-items center
     background-color rgba(239, 239, 239, 1)
 
   &-label
@@ -15,3 +16,4 @@
 
   &-input
     flex 1
+    padding 0

src/pages/consume/consume.tsx

@@ -8,6 +8,7 @@
  * @Revision:
  *
  */
+// @ts-nocheck
 import React, { Component } from 'react'
 import { View, Text, ScrollView } from 'react-native'
 import { inject, observer } from 'mobx-react'

src/pages/order/quick.tsx

@@ -8,6 +8,7 @@
  * @Revision:
  *
  */
+// @ts-nocheck
 import React, { Component } from 'react'
 import { View, Text, ScrollView } from 'react-native'
 import { inject, observer } from 'mobx-react'

src/pages/signin/signin.styl

@@ -71,12 +71,16 @@
       height 45px
       border-radius 100px
       background btn_sub_color
+      @extend .row
       @extend .middle
       @extend .center
 
+      &-loading
+        background-color dis_sub_color
+
       &-text
         color title_text_color
-        font-size 21px
+        font-size 20px
         font-family font_family_regular
 
       &-plain

src/pages/signin/signin.tsx

+// @ts-nocheck
 import React, { Component } from 'react'
 import {
   View,
@@ -7,14 +8,14 @@ import {
   ImageBackground,
   Image,
   TextInput,
+  ActivityIndicator,
 } from 'react-native'
 import { inject, observer } from 'mobx-react'
 import debounce from 'lodash.debounce'
 import { placehold_text_color } from '../../assets/styles/base'
-import styles from './signin.styl'
 import { g, isBlank, show } from '../../utils/utils'
-import { MsgType } from '../../enums'
 import HostModal from '../../components/modals/host/host'
+import styles from './signin.styl'
 
 type IProps = {
   store: {
@@ -62,8 +63,9 @@ class Signin extends Component<IProps> {
     if (loading) return
     if (isBlank(username)) return show('请输入您的用户名')
     if (isBlank(password)) return show('请输入您的密码')
-
+    this.setState({ loading: true })
     await this.props.userStore.signin(username, password)
+    this.setState({ loading: false })
     navigation.navigate('Main')
   }
 
@@ -77,7 +79,7 @@ class Signin extends Component<IProps> {
 
   render() {
     const { store } = this.props
-    const { username, password, showPassword, visible } = this.state
+    const { username, password, showPassword, visible, loading } = this.state
 
     return (
       <View style={g(styles, 'container')}>
@@ -139,11 +141,25 @@ class Signin extends Component<IProps> {
 
                 <View style={g(styles, 'login-card__btns')}>
                   <TouchableOpacity
-                    style={g(styles, 'login-card__btn')}
+                    style={g(styles, {
+                      'login-card__btn': true,
+                      'login-card__btn-loading': loading,
+                    })}
                     onPress={this.loginHandler}
                     activeOpacity={0.8}
+                    disabled={loading}
                   >
-                    <Text style={g(styles, 'login-card__btn-text')}>登录</Text>
+                    {loading ? (
+                      <>
+                        <ActivityIndicator
+                          style={g(styles, 'login-card__loading')}
+                          color="#ffffff"
+                        />
+                        <Text style={g(styles, 'login-card__btn-text')}>登录中</Text>
+                      </>
+                    ) : (
+                      <Text style={g(styles, 'login-card__btn-text')}>登录</Text>
+                    )}
                   </TouchableOpacity>
 
                   <TouchableOpacity

src/router.tsx

 import React, { Component } from 'react'
-import { View, Text, Image } from 'react-native'
+import { Image, Easing, Animated } from 'react-native'
 import {
   createAppContainer,
   createStackNavigator,
   createMaterialTopTabNavigator,
   createSwitchNavigator,
 } from 'react-navigation'
+import { isIphoneX } from './utils/utils'
 import { font_family_regular, first_text_color } from './assets/styles/base'
 import Resolution from './components/common/Resolution'
 import Home from './pages/index/index'
@@ -23,6 +24,29 @@ function createNavigator() {
       gesturesEnabled: true,
     },
     headerMode: 'none',
+    transitionConfig: () => ({
+      transitionSpec: {
+        duration: 300,
+        easing: Easing.out(Easing.poly(4)),
+        timing: Animated.timing,
+      },
+      screenInterpolator: (sceneProps: any) => {
+        const { layout, position, scene } = sceneProps
+        const { index } = scene
+        const Width = layout.initWidth
+        //沿X轴平移
+        const translateX = position.interpolate({
+          inputRange: [index - 1, index, index + 1],
+          outputRange: [Width, 0, -(Width - 10)],
+        })
+        //透明度
+        const opacity = position.interpolate({
+          inputRange: [index - 1, index - 0.99, index],
+          outputRange: [0, 1, 1],
+        })
+        return { opacity, transform: [{ translateX }] }
+      },
+    }),
   }
 
   const TabNavigator = createMaterialTopTabNavigator(
@@ -65,7 +89,7 @@ function createNavigator() {
       animationEnabled: true,
       tabBarOptions: {
         style: {
-          height: 90,
+          height: isIphoneX() ? 90 : 65,
           backgroundColor: '#fff',
           borderTopWidth: 0.5,
           borderTopColor: '#ddd',
@@ -76,7 +100,7 @@ function createNavigator() {
           backgroundColor: 'transparent',
         },
       },
-    },
+    }
   )
 
   const SwitchNavigator = createSwitchNavigator({
@@ -93,7 +117,7 @@ function createNavigator() {
       QuickOrder: { screen: QuickOrder },
       Success: { screen: Success },
     },
-    { initialRouteName: 'Main', ...options },
+    { initialRouteName: 'Main', ...options }
   )
 
   return createAppContainer(stackNavigator)

src/utils/utils.ts

@@ -127,12 +127,7 @@ const screenH = Dimensions.get('window').height
  * @returns boolean
  */
 export const isIphoneX = (): boolean => {
-  return (
-    Platform.OS === 'ios' &&
-    ((screenH === X_HEIGHT && screenW === X_WIDTH) ||
-      (screenH === X_MAX_HEIGHT && screenW === X_MAX_WIDTH) ||
-      (screenH === XS_MAX_HEIGHT && screenW === XS_MAX_WIDTH))
-  )
+  return Platform.OS === 'ios' && screenH >= 736
 }
 
 /**
@@ -187,8 +182,7 @@ export const debounce = (fn: Function, wait = 300): Function => {
  * @param fieldName
  * @returns
  */
-export const getFormItem = (items: IFormField[], fieldName: string) =>
-  R.find(R.propEq('field', fieldName), items)
+export const getFormItem = (items: IFormField[], fieldName: string) => R.find(R.propEq('field', fieldName), items)
 
 /**
  * @description: 解释配置性的表单项的显示及必填

yarn.lock

@@ -1147,6 +1147,11 @@
   dependencies:
     ts-toolbelt "^6.15.1"
 
+"@types/react-native-audio@^4.3.3":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@types/react-native-audio/-/react-native-audio-4.3.3.tgz#7fce925c40828929c4bda826e8f18d94482bab0c"
+  integrity sha512-CO5Pb2Gc01vtz/VjEEakegQybAh9RP3cWUgoo9fo+e7e7XIvORmimS+8qXuf/MPMf0WAr3T0H0JxRuUj3k/4LA==
+
 "@types/react-native@^0.64.2":
   version "0.64.2"
   resolved "https://registry.npm.taobao.org/@types/react-native/download/@types/react-native-0.64.2.tgz#2e344aeec0b4eb21fb9eaa0ed8973245c5601d56"