Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit ce6b3f46 by peii
Options

self audio

parent fe383616
Inline Side-by-side
Showing with 329 additions and 20 deletions
app/Router.js
......@@ -3,7 +3,7 @@ import { Easing, Animated } from 'react-native'
import { createStackNavigator, createAppContainer } from 'react-navigation'
import LoginPage from './containers/login/LoginPage'
import HomePage from './containers/home/HomePage'
// import SelfOrderPage from './containers/selfOrder/SelfOrderPage'
import SelfOrderPage from './containers/selfOrder/SelfOrderPage'
import ChooseProductPage from './containers/selfOrder/module/ChooseProductPage'
import SearchPage from './containers/selfOrder/module/SearchPage'
import EditThirdLevelPage from './containers/selfOrder/module/EditThirdLevelPage'
......@@ -56,6 +56,7 @@ const Router = createAppContainer(
{
LoginPage: { screen: LoginPage },
HomePage: { screen: HomePage },
SelfOrderPage: { screen: SelfOrderPage },
SelfOrder: { screen: SelfOrder },
ChooseProductPage: { screen: ChooseProductPage },
SearchPage: { screen: SearchPage },
......
src/components/form/audio.styl 0 → 100644
@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
.recorded
@extend .row
align-items center
&-item
background-color home_background_color
padding 10px
border-radius 10px
&__text
font-size second_text_size
font-family font_family_regular
&__delete
padding 0 8px
background-color primary_color
height 22px
@extend .middle
border-radius 5px
margin-left 20px
&-text
font-size third_text_size
color #fff
line-height 22px
.unactive
display none
\ No newline at end of file
src/components/form/audio.tsx 0 → 100644
/*
* @FilePath: /BoneHouse_Business_APP/src/components/form/audio.tsx
* @Author: peii
* @Date: 2021-06-19 22:37:22
* @LastEditTime: 2022-11-21 14:51:12
* @LastEditors: PEII
* @Vision: 1.0
* @Description: 录音组件
*/
// @ts-nocheck
import React, { Component } from 'react'
import { View, Text, Image, TouchableOpacity, Alert, Linking, Platform, NativeModules } from 'react-native'
import Sound from 'react-native-sound'
import { IFormField } from 'bonehouse'
import * as R from 'ramda'
import { AudioRecorder, AudioUtils } from 'react-native-audio'
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,
}
sound = null
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)
this.playHandler = this.playHandler.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 => {
this.setState({
currentTime: Math.ceil(data.currentTime),
})
}
// 完成录音
AudioRecorder.onFinished = data => {
// data 录音数据
console.log(data)
}
})
}
/**
* @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()
await this.prepareRecordingPath(this.state.audioPath)
this.sound = null
AudioRecorder.startRecording()
show('录音开始')
} 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 {*}
*/
playHandler() {
if (this.state.playing) return
if (isBlank(this.sound)) {
this.sound = new Sound(this.state.audioPath, '', err => {
if (err) {
return show('音频加载失败')
}
this.setState({ playing: true })
this.sound.play(success => {
this.setState({ playing: false })
success ? show('播放完毕') : show('播放失败')
})
})
} else {
this.setState({ playing: true })
this.sound.play(success => {
this.setState({ playing: false })
success ? show('播放完毕') : show('播放失败')
})
}
}
/**
* @description: 删除操作
* @param {*}
* @return {*}
*/
deleteHandler() {
this.setState({ recorded: false })
this.sound = null
}
render() {
const { recorded, currentTime } = this.state
return (
<View style={g(styles, 'audio')}>
<View style={g(styles, { 'not-record': true, unactive: recorded })}>
<Text style={g(styles, 'not-record-tip')}>还有什么要安排的，可录音备注哟！</Text>
<TouchableOpacity
style={g(styles, 'record-btn')}
touchableOpacity={0.8}
onLongPress={this.recordHandler.bind(this)}
onPressOut={this.stopRecordingHandler}
ref={ref => (this.recordBtnRef = ref)}
>
<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: true, unactive: !recorded })}>
<TouchableOpacity style={g(styles, 'recorded-item')} onPress={this.playHandler}>
<Text style={g(styles, 'recorded-item__text')}>点击播放 {currentTime}"</Text>
</TouchableOpacity>
<TouchableOpacity style={g(styles, 'recorded-item__delete')} onPress={this.deleteHandler}>
<Text style={g(styles, 'recorded-item__delete-text')}>删除</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
src/components/form/index.tsx
......@@ -19,6 +19,7 @@ import Radio from './radio'
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 styles from './index.styl'
......@@ -33,6 +34,7 @@ const formComponents = {
[FieldType.DATE]: DatePicker,
[FieldType.IMAGE]: ImageForm,
[FieldType.RADIO]: Radio,
[FieldType.VOICE]: Audio,
}
export default class Form extends Component<IProps> {
......
src/pages/order/self.tsx
......@@ -2,7 +2,7 @@
* @FilePath: /BoneHouse_Business_APP/src/pages/order/self.tsx
* @Author: peii
* @Date: 2021-07-13 22:40:12
* @LastEditTime: 2022-11-04 18:56:41
* @LastEditTime: 2022-11-21 15:21:52
* @LastEditors: PEII
* @Vision: 1.0
* @Description: 自助下单
......@@ -37,6 +37,7 @@ type IState = {
data: { [key: string]: any[] }
formItems: IFormField[]
doctorNames: []
invs: {}
}
class SelfOrder extends Component<IProps, IState> {
......@@ -53,6 +54,7 @@ class SelfOrder extends Component<IProps, IState> {
Caller: 'dingding',
},
formItems: [],
invs: {},
}
componentDidMount() {
......@@ -284,7 +286,7 @@ class SelfOrder extends Component<IProps, IState> {
* @return {*}
*/
setBillToSitesCallback() {
const { formItems, data, doctorNames } = this.state
let { formItems, data, doctorNames } = this.state
const { billToSiteCode } = data
const item = getFormItem(formItems, 'shipToSiteCode')
......@@ -328,28 +330,31 @@ class SelfOrder extends Component<IProps, IState> {
* @return {*}
*/
async getInventories() {
const { formItems, data } = this.state
const { formItems, data, invs } = this.state
const { orgCode, customerCode, billToSiteCode, shipToSiteCode } = data
const item = getFormItem(formItems, 'collectSrcInvCode')
let invRes = await this.props.getCollectSetting(orgCode, customerCode, billToSiteCode, shipToSiteCode)
console.log(invRes)
const key = `${orgCode}_${customerCode}_${billToSiteCode}_${shipToSiteCode}`
if (isBlank(invs[key])) {
let invRes = await this.props.getCollectSetting(orgCode, customerCode, billToSiteCode, shipToSiteCode)
const options = R.compose(
R.uniqBy(R.prop('value')),
R.map(
R.applySpec({
value: R.prop('source_inv_code'),
label: R.prop('source_inv_name'),
}),
),
R.propOr([], 'payload'),
)(invRes)
invs[key] = options
}
// if (isBlank(invs)) {
// item.loading = true
// await this.props.orderStore.getInventories(orgCode, customerCode, billToSiteCode, shipToSiteCode)
// item.loading = false
// }
// invs = this.props.orderStore.invs(orgCode, customerCode, billToSiteCode, shipToSiteCode)
// item.options = R.map(
// R.applySpec({
// value: R.prop('sourceInvCode'),
// label: R.prop('sourceInvName'),
// }),
// )(invs)
item.options = invs[key]
console.log(item.options)
// this.setState({ formItems })
this.setState({ formItems, invs })
}
/**
......
src/services/baseApi.ts
......@@ -66,7 +66,6 @@ export const request = (args: Partial<RequestConfig>) => {
}
}
args.data = transformObject(options.data, 'toLine')
args.data = options.data
options = R.cond([
[R.propEq('method', 'get'), () => R.assoc('url', args.url + '?' + stringify(args.data), options)],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment