npmchenwei111/app/public/authentication/screens/CarrierScreen.js

test1111

/**
 * Created by ziyu on 2017/6/25.
 *
 * 手机运营商验证页面
 */

import React, { Component } from 'react'
import { DeviceEventEmitter, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { px, px2dp, sp } from '../../../utils/Px2dp'
import YTShowToast from '../../../../src/native/YTShowToast'
import YTInvokeLoading from '../../../../src/native/YTInvokeLoading'
import YTInvokeCarrierDialog from '../../../../src/native/YTInvokeCarrierDialog'
import YTTextInput from '../../../../src/components/YTTextInput'
import ActionBar from '../../../bar/ActionBar'
import EmitterReactEvent from '../../../constant/EmitterReactEvent'
import R from '../../../assets/R'
import YoujieApi from '../../../api/YoujieApi'
import SubmitBtnRadius from '../views/SubmitBtnRadius'
import RequestSimplify from '../../../utils/RequestSimplify'
import YTInvokeAlert from '../../../../src/native/YTInvokeAlert'

class CarrierScreen extends Component {
  constructor (props) {
    super(props)
    this.state = {
      btnData: {
        text: '认证',
        enable: false,
        action: ''
      },
      carrierStatusVO: {
        status: '',
        description: '',
        verifyCodeType: '',
        imgBase64Val: '',
        taskId: ''
      },
      carrierStartVO: {
        logoUrl: '',
        mobile: '',
        carrier: '',
        pnum: '',
        keyboard: '',
        reqSms: '',
        captcha: '',
        reqCaptcha: '',
        tips: []
      },
      saveVerifyVO: {
        sms: '',
        captcha: ''
      },
      resetPasswordVO: {
        mobile: '',
        notes: '',
        msgContent: ''
      }
    }
  }

  static navigationOptions = ({navigation, screenProps}) => ({
    header: <ActionBar
      nav={navigation}
      screenProps={screenProps}
      data={{
        title: '手机运营商认证'
      }}
    />
  })

  componentDidMount () {
    this.getCarriersData()
    console.log('carrier')
  }

  getCarriersData () {
    // 获取手机运营商信息
    YTInvokeLoading.show(null, false)
    RequestSimplify.fetch(YoujieApi.get_carriers_operator, {}, (res) => {
      let carrierStartVO = res.data.carrierStartVO || {}
      this.setState({
        carrierStartVO: {
          ...carrierStartVO
        }
      })
    })
  }

  startLoadStatusData () {
    RequestSimplify.fetchNoLoading(YoujieApi.carriers_operatorcode_status, {}, (res) => {
      console.log('statusCarriersOperatorCode', res)
      let carrierVO = res.data.carrierStatusVO || {}

      if (carrierVO.status === 'DOING') {
        console.log('DOING')
        this._loopTimer = setTimeout(() => {
          this.startLoadStatusData()
        }, 2000)
      }
      else if (carrierVO.status === 'DONE_FAIL') {
        console.log('DONE_FAIL')
        YTInvokeLoading.dismiss()
        let desc = carrierVO.description || '请求运营商失败,请重试'
        YTShowToast.show(desc, YTShowToast.SHORT)
      }
      else if (carrierVO.status === 'DONE_SUCCESS') {
        console.log('DONE_SUCCESS')
        YTInvokeLoading.dismiss()
        let desc = carrierVO.description || '运营商绑定成功'
        YTShowToast.show(desc, YTShowToast.SHORT)
        //返回上一页
        this._loopTimer = setTimeout(() => {
          if (this.props.navigation)
            this.props.navigation.goBack()
          DeviceEventEmitter.emit(EmitterReactEvent.REFRESH_INDEX_PAGE)
        }, 2000)
      } else {
        YTInvokeLoading.dismiss()
        YTInvokeCarrierDialog.showCarrierDialog(carrierVO.status, carrierVO.imgBase64Val).then((data) => {
          console.log('YTInvokeCarrierDialog.showCarrierDialog', data)
          this.setState({
            saveVerifyVO: {
              sms: data.verifyCode,
              captcha: data.imgCode
            }
          })
          this.submitVerifyCode()
        }).catch((err) => {
          YTShowToast.show('认证已取消')
        })
      }

      this.setState({
        carrierStatusVO: {
          ...carrierVO
        }
      })

    }, (err) => {
      YTInvokeLoading.dismiss()
    })
  }

  bindCarriersData () {
    YTInvokeLoading.show(null, false)
    RequestSimplify.fetchNoLoading(YoujieApi.bind_carriers_servicecode, {
      username: this.state.carrierStartVO.mobile,
      password: this.state.password
    }, (res) => {
      this.startLoadStatusData()
    })
  }

  //提交验证码
  submitVerifyCode () {
    YTInvokeLoading.show(null, false)
    RequestSimplify.fetchNoLoading(YoujieApi.submit_carriers_operatorcode, {
      sms: this.state.saveVerifyVO.sms,
      captcha: this.state.saveVerifyVO.captcha
    }, (res) => {
      this.startLoadStatusData()
    })
  }

  handleChange (e) {
    this.setState({
      password: e,
      btnData: {
        text: '认证',
        enable: e && (e.length > 0),
        action: ''
      }
    })
  }

  handleSubmit () {
    this.bindCarriersData()
  }

  forgetPassword () {
    RequestSimplify.fetch(YoujieApi.carriers_reset_password, {}, (res) => {
      let dataVO = res.data || {}
      this.setState({
        resetPasswordVO: {
          ...dataVO
        }
      }, () => {
        let {mobile, notes, msgContent} = this.state.resetPasswordVO || {}
        YTInvokeAlert.show(mobile, notes, msgContent)
      })
    })
  }

  getCarrierStr () {
    let carrierStr = ''
    switch (this.state.carrierStartVO.carrier) {
      case 0:
        carrierStr = '未知'
        break
      case 1:
        carrierStr = '移动'
        break
      case 2:
        carrierStr = '联通'
        break
      case 3:
        carrierStr = '电信'
        break
    }
    return carrierStr
  }

  componentWillUnmount () {
    this._loopTimer && clearTimeout(this._loopTimer)
  }

  render () {
    return (
      <View style={styles.container}>
        <ScrollView style={{
          flex: 1, paddingBottom: px2dp(30)
        }}>
          <View style={styles.title}>
            <Image style={styles.logo} source={
              this.state.carrierStartVO.logoUrl ? {uri: this.state.carrierStartVO.logoUrl} : R.img.ic_transparent
            }/>
            <Text style={{
              color: '#626262',
              fontSize: sp(16),
              marginTop: px2dp(16)
            }}>{this.getCarrierStr()}</Text>
          </View>

          <View style={{paddingHorizontal: px2dp(16)}}>
            <View style={styles.formControl}>
              <Text style={styles.formLabel}>手机号</Text>
              <YTTextInput underlineColorAndroid='transparent'
                           value={this.state.carrierStartVO.mobile}
                           style={[styles.formText, {color: R.color.font_input_hint}]}
                           placeholder='请输入手机号'
                           placeholderTextColor={R.color.font_input_hint}
                           digits={'0123456789+'}
                           keyboardType="numeric"
                           editable={false}/>
            </View>

            <View style={styles.formControl}>
              <Text style={styles.formLabel}>{'服务密码'}</Text>
              <YTTextInput underlineColorAndroid='transparent'
                           onChangeText={(text) => {
                             this.handleChange(text)
                           }}
                           style={[styles.formText, {
                             color: R.color.bar_color,
                           }]}
                           placeholderTextColor={R.color.font_input_hint}
                           placeholder='请输入服务密码'
                           secureTextEntry={true}/>

              <TouchableOpacity
                activeOpacity={0.7}
                onPress={() => {
                  this.forgetPassword()
                }}>
                <View style={styles.forgetItem}>
                  <Text style={styles.forgetLabel}>{'忘记密码?'}</Text>
                </View>
              </TouchableOpacity>

            </View>

            <View style={{marginTop: px2dp(50)}}>

              <SubmitBtnRadius btnData={this.state.btnData} onPress={() => {
                this.handleSubmit()
              }}/>
            </View>
          </View>

          <View style={{paddingHorizontal: px2dp(30), marginTop: px2dp(35)}}>
            <Text style={{fontSize: sp(14), color: '#a0a0a0', marginBottom: px2dp(10)}}>温馨提示</Text>
            {
              this.state.carrierStartVO.tips && this.state.carrierStartVO.tips.map((value, index) => (
                <Text key={index} style={styles.helpItem}>
                  {value}
                </Text>
              ))
            }
          </View>
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: R.color.bg_color,
    flex: 1
  },
  logo: {
    width: px2dp(80),
    height: px2dp(80)
  },
  title: {
    alignItems: 'center',
    paddingTop: px2dp(42),
    paddingBottom: px2dp(20)
  },
  formControl: {
    flexDirection: 'row',
    marginHorizontal: px2dp(10),
    borderBottomWidth: px2dp(0.5),
    borderBottomColor: '#ccc',
    borderStyle: 'solid',
    height: px(58),
    alignItems: 'center'
  },
  formLabel: {
    color: R.color.bar_color,
    fontSize: sp(16),
    width: px2dp(100),
    textAlignVertical: 'center',
    paddingTop: 0,
    paddingBottom: 0
  },
  formText: {
    textAlign: 'left',
    justifyContent: 'center',
    paddingTop: 0,
    paddingBottom: 0,
    flex: 1,
    backgroundColor: R.color.transparent,
    fontSize: sp(16)
  },
  helpItem: {
    color: '#c9c9c9',
    fontSize: sp(12),
    marginBottom: px2dp(5),
    lineHeight: px2dp(17)
  },
  forgetItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: px2dp(0.5),
    borderRadius: px2dp(100),
    borderColor: '#FF352E',
    borderStyle: 'solid',
    width: px2dp(81),
    height: px2dp(26),
  },
  forgetLabel: {
    color: '#FF352E',
    fontSize: sp(12),
  }
})

export default CarrierScreen