React Native 版本执行0.57的规则
DatePicker AddressPicker，一样的布局但是 DatePicker 组件内部接收不到默认值，采用了另一种方法，控制它是否渲染，AddressPicker，加入街道数据，其他数据不变，传入相应的ID获取下一级的数据。
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, Image, Modal, KeyboardAvoidingView, TouchableOpacity, TextInput, StatusBar } from 'react-native';
import Nav from '../../components/Nav';
import Fetch from '../../network/Fetch';
import Loading from '../../components/Loading'; // 加载层
import { requestUrl } from '../../network/Url';// 请求url
import { regExp } from "../../network/RegExp"
import Px2dp from '../../utils/Px2dp';
import * as Public from '../../utils/Public';
import ToastShow from '../../utils/Toast';
import DatePicker from '../../components/DatePicker'
export default class CydSettlementOrder extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
payData: {},//支付信息
activeInfo: '',//分期数
iphoneIp: "", //手机IP地址
orderInfo: {},
sexArr: [
{
"name": "男",
"value": 1
},
{
"name": "女",
"value": 2
}
],
sexIndex: 0,
activeSex: "",
openFlag: false, //弹出框
contentFlag: 0,
dateVisibleFlag: false,
isVerifyPass: false,// 是否去支付
smsCodeValidate: false, //验证支付验证码
realNameValidate: false, //银行卡信息持卡人姓名
idnoValidate: false, //银行卡信息身份证号
customerIdnoValidate: false, //银行卡信息信用卡号
cvvValidate: false, //银行卡信息安全码
phoneNoValidate: false, //银行卡信息预留手机号
guKeNameValidate: false, //顾客姓名
guKeIdCardValidate: false, //顾客身份证号
guKePhoneValidate: false, //顾客手机号
getOrderBankInfoByUser: {}, //闯易贷下单取已经输入过的信息
commonValidate: false,
verifyPassCode: '',// 支付校验验证码
month: "",
year: ""
}
}
componentWillMount() {
if (this.props.navigation.state.params) {
this.setState({
payData: this.props.navigation.state.params.payData,
activeInfo: this.props.navigation.state.params.activeInfo,
bankCode: this.props.navigation.state.params.bankCode,
bankName: this.props.navigation.state.params.bankName,
})
console.log(this.props.navigation.state.params)
}
}
componentDidMount() {
//查询订单详情
this._findOtherInfo()
// 查询设备IP
this._iphoneIp()
}
render() {
const { navigate, goBack } = this.props.navigation;
return (
<KeyboardAvoidingView
behavior={IOS ? "padding" : null}
style={styles.container}
>
<StatusBar
animated={true}//是否动画
hidden={false}//是否隐藏
backgroundColor={'#000'}//android 设置状态栏背景颜色
translucent={false}//android 设置状态栏是否为透明
showHideTransition="fade"//IOS状态栏改变时动画 fade:默认 slide
networkActivityIndicatorVisible={this.state.isLoading}//IOS设定网络活动指示器(就是那个菊花)是否显示在状态栏。
statusBarStyle={"default"}//状态栏样式 default 默认（IOS为白底黑字、Android为黑底白字）
barStyle={"default"}// 状态栏文本的颜色。
/>
<Nav title={this.state.isVerifyPass ? "验证支付" : "银行卡信息"} leftClick={() => { goBack() }} />
<ScrollView>
{
this.state.isVerifyPass ?
// 验证支付
<View>
<View style={styles.verifyPassCode}>
<Text style={styles.verifyPassCodeTit}>请输入验证码进行验证支付</Text>
<View style={styles.verifyPassInput}>
<Text style={styles.verifyPassTit}>验证码</Text>
<TextInput
style={styles.verifyPassTextInput}
returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
placeholder="请输入验证码"
placeholderTextColor="#CACACCFF"
keyboardType="default"
maxLength={6}
defaultValue={this.state.verifyPassCode}
onChangeText={(text) => {
if (regExp.Reg_Number.test(text)) {
this.setState({
smsCodeValidate: true
})
}
else {
this.setState({
smsCodeValidate: false
})
}
this.setState({
verifyPassCode: text
})
}}
onBlur={() => {
if (!this.state.verifyPassCode.length) {
ToastShow({ "text": '请输入验证码' })
}
else if (!regExp.Reg_Number.test(this.state.verifyPassCode)) {
ToastShow({ "text": '请输入正确的验证码格式' })
}
else {
return true
}
}}
/>
</View>
</View>
<View style={{ alignItems: "center", justifyContent: "center", marginTop: Px2dp(165) }}>
<TouchableOpacity style={[styles.verifyPassCodeBtn, { backgroundColor: this.state.smsCodeValidate ? Colors.red : "#F49896FF" }]} activeOpacity={0.8} onPress={() => {
if (this.state.smsCodeValidate) {
this._consumptionTiedCardValidate(this.state.cydOrderId)
}
}}>
<Text style={styles.verifyPassCodeBtnTxt}>验证并支付</Text>
</TouchableOpacity>
</View>
</View>
:
//银行卡信息
<View>
{/* 持卡人信息 */}
<View style={styles.cardholder}>
<Text style={styles.cardholderHead}>持卡人信息</Text>
{/* 持卡人姓名 */}
<View style={styles.commonInput}>
<Text style={styles.commonTit}>持卡人姓名</Text>
<TextInput
style={styles.TextInput}
returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
placeholder="请输入持卡人的真实姓名"
placeholderTextColor="#CACACCFF"
keyboardType="default"
maxLength={10}
defaultValue={this.state.realName}
onChangeText={(text) => {
if (regExp.Reg_Name.test(text)) {
this.setState({
realNameValidate: true
})
}
else {
this.setState({
realNameValidate: false
})
}
this.setState({
realName: text
})
}}
onBlur={(text) => {
if (!this.state.realName) {
ToastShow({ "text": '请输入持卡人的真实姓名' })
}
else if (!regExp.Reg_Name.test(this.state.realName)) {
ToastShow({ "text": '请输入正确的持卡人真实姓名' })
}
else {
return true
}
}}
/>
</View>
{/* 身份证 */}
<View style={styles.commonInput}>
<Text style={styles.commonTit}>身份证</Text>
<TextInput
style={styles.TextInput}
returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
placeholder="请输入身份证号"
placeholderTextColor="#CACACCFF"
keyboardType="numeric"
maxLength={18}
defaultValue={this.state.idno}
onChangeText={(text) => {
if (regExp.Reg_IDCardNo.test(text)) {
this.setState({
idnoValidate: true
})
}
else {
this.setState({
idnoValidate: false
})
}
this.setState({
idno: text
})
}}
onBlur={() => {
if (!this.state.idno) {
ToastShow({ "text": '请输入身份证号' })
}
else if (!regExp.Reg_IDCardNo.test(this.state.idno)) {
ToastShow({ "text": '请输入正确的身份证号' })
}
else {
return true
}
}}
/>
</View>
{/* 信用卡卡号 */}
<View style={styles.commonInput}>
<Text style={styles.commonTit}>信用卡卡号</Text>
<TextInput
style={styles.TextInput}
returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
placeholder="请输入信用卡的卡号"
placeholderTextColor="#CACACCFF"
keyboardType="numeric"
maxLength={18}
defaultValue={this.state.customerIdno}
onChangeText={(text) => {
if (regExp.bankNumber.test(text)) {
this.setState({
customerIdnoValidate: true
})
this._getOrderBankInfoByUser(text)
}
else {
this.setState({
customerIdnoValidate: false
})
}
this.setState({
customerIdno: text
})
}}
onBlur={() => {
if (!this.state.customerIdno) {
ToastShow({ "text": '请输入信用卡的卡号' })
}
else if (!regExp.bankNumber.test(this.state.customerIdno)) {
ToastShow({ "text": '请输入正确的信用卡卡号' })
}
else {
return true
}
}}
/>
</View>
{/* 有效期 */}
<View style={styles.commonInput}>
<Text style={styles.commonTit}>有效期</Text>
<TouchableOpacity activeOpacity={0.8} style={[styles.EditMyAddressItem, { flex: 1 }]} onPress={() => {
this.setState({
dateVisibleFlag: true
})
}}>
<Text style={[styles.datePlaceholder, this.state.month && this.state.year ? { color: Colors.text333 } : { color: "#CACACCFF" }]}>{this.state.month && this.state.year ? this.state.month + "/" + this.state.year : "月份/年份"}</Text>
</TouchableOpacity>
<TouchableOpacity style={{ paddingRight: Px2dp(20) }} activeOpacity={0.8} onPress={() => {
this.setState({
contentFlag: 1,
openFlag: true
})
}}>
<Image style={styles.commonLiImgs} source={require('../../images/Cydprompt.png')} />
</TouchableOpacity>
</View>
{/* 安全码 */}
<View style={styles.commonInput}>
<Text style={styles.commonTit}>安全码</Text>
<TextInput
style={styles.TextInput}
returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
placeholder="卡背面后三位数字"
placeholderTextColor="#CACACCFF"
keyboardType="numeric"
maxLength={3}
defaultValue={this.state.cvv}
onChangeText={(text) => {
if (regExp.SaftCode.test(text)) {
this.setState({
cvvValidate: true
})
}
else {
this.setState({
cvvValidate: false
})
}
this.setState({
cvv: text
})
}}
onBlur={() => {
if (!this.state.cvv) {
ToastShow({ "text": '请输入卡背面后三位数字' })
}
else if (!regExp.SaftCode.test(this.state.cvv)) {
ToastShow({ "text": '请输入正确的卡背面后三位数字' })
}
else {
return true
}
}}
/>
<TouchableOpacity style={{ paddingRight: Px2dp(20) }} activeOpacity={0.8} onPress={() => {
this.setState({
contentFlag: 2,
openFlag: true
})
}}>
<Image style={styles.commonLiImgs} source={require('../../images/Cydprompt.png')} />
</TouchableOpacity>
</View>
{/* 预留手机号 */}
<View style={[styles.commonInput, { borderBottomWidth: 0 }]}>
<Text style={styles.commonTit}>预留手机号</Text>
<TextInput
style={styles.TextInput}
returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
placeholder="在银行预留的手机号"
placeholderTextColor="#CACACCFF"
keyboardType="numeric"
maxLength={11}
defaultValue={this.state.phoneNo}
onChangeText={(text) => {
if (regExp.Reg_TelNo.test(text)) {
this.setState({
phoneNoValidate: true
})
}
else {
this.setState({
phoneNoValidate: false
})
}
this.setState({
phoneNo: text
})
}}
onBlur={() => {
if (!this.state.phoneNo) {
ToastShow({ "text": '请输入在银行预留的手机号' })
}
else if (!regExp.Reg_TelNo.test(this.state.phoneNo)) {
ToastShow({ "text": '请输入正确的银行预留手机号' })
}
else {
return true
}
}}
/>
</View>
</View>
{/* 顾客信息 */}
<View style={[styles.cardholder, { marginTop: Px2dp(15), marginBottom: Px2dp(80) }]}>
<Text style={styles.cardholderHead}>顾客信息</Text>
{/* 顾客姓名 */}
<View style={styles.commonInput}>
<Text style={styles.commonTit}>顾客姓名</Text>
<TextInput
style={styles.TextInput}
returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
placeholder="请输入顾客的真实姓名"
placeholderTextColor="#CACACCFF"
keyboardType="default"
maxLength={10}
defaultValue={this.state.guKeName}
onChangeText={(text) => {
if (regExp.Reg_Name.test(text)) {
this.setState({
guKeNameValidate: true
})
}
else {
this.setState({
guKeNameValidate: false
})
}
this.setState({
guKeName: text
})
}}
onBlur={() => {
if (!this.state.guKeName) {
ToastShow({ "text": '请输入顾客的真实姓名' })
}
else if (!regExp.Reg_Name.test(this.state.guKeName)) {
ToastShow({ "text": '请输入正确的顾客真实姓名' })
}
else {
return true
}
}}
/>
</View>
{/* 顾客性别 */}
<View style={styles.commonInput}>
<Text style={styles.commonTit}>顾客性别</Text>
<View style={{ flexDirection: "row", alignItems: "center", flex: 1, marginLeft: Px2dp(23) }}>
{
this.state.sexArr.map((item, index) => {
return (
<TouchableOpacity key={index} style={{ flexDirection: "row", alignItems: "center", justifyContent: "center", marginRight: Px2dp(23) }} activeOpacity={0.8} onPress={() => {
this.setState({
sexIndex: index,
activeSex: item
})
}}>
<Image source={this.state.sexIndex == index ? require('../../images/on_icon.png') : require('../../images/off_icon.png')} />
<Text style={styles.sexName}>{item.name}</Text>
</TouchableOpacity>
)
})
}
</View>
</View>
{/* 顾客身份证号 */}
<View style={styles.commonInput}>
<Text style={styles.commonTit}>顾客身份证号</Text>
<TextInput
style={styles.TextInput}
returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
placeholder="请输入顾客的身份证号"
placeholderTextColor="#CACACCFF"
keyboardType="numeric"
maxLength={18}
defaultValue={this.state.guKeIdCard}
onChangeText={(text) => {
if (regExp.Reg_IDCardNo.test(text)) {
this.setState({
guKeIdCardValidate: true
})
}
else {
this.setState({
guKeIdCardValidate: false
})
}
this.setState({
guKeIdCard: text
})
}}
onBlur={() => {
if (!this.state.guKeIdCard) {
ToastShow({ "text": '请输入顾客的身份证号' })
}
else if (!regExp.Reg_IDCardNo.test(this.state.guKeIdCard)) {
ToastShow({ "text": '请输入正确的顾客身份证号' })
}
else {
return true
}
}}
/>
</View>
{/* 顾客手机号 */}
<View style={[styles.commonInput, { borderBottomWidth: 0 }]}>
<Text style={styles.commonTit}>顾客手机号</Text>
<TextInput
style={styles.TextInput}
returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
placeholder="请输入顾客的手机号码"
placeholderTextColor="#CACACCFF"
keyboardType="numeric"
maxLength={11}
defaultValue={this.state.guKePhone}
onChangeText={(text) => {
if (regExp.Reg_TelNo.test(text)) {
this.setState({
guKePhoneValidate: true
})
}
else {
this.setState({
guKePhoneValidate: false
})
}
this.setState({
guKePhone: text
})
}}
onBlur={() => {
if (!this.state.guKePhone) {
ToastShow({ "text": '请输入顾客的手机号码' })
}
else if (!regExp.Reg_TelNo.test(this.state.guKePhone)) {
ToastShow({ "text": '请输入正确的顾客手机号码' })
}
else {
return true
}
}}
/>
</View>
</View>
</View>
}
</ScrollView>
{
this.state.isVerifyPass ?
null
:
<View style={styles.payBottomContent}>
<TouchableOpacity
activeOpacity={0.8}
onPress={() => {
//支付/验证卡信息
// realNameValidate: false, //银行卡信息持卡人姓名
// idnoValidate: false, //银行卡信息身份证号
// customerIdnoValidate: false, //银行卡信息信用卡号
// cvvValidate: false, //银行卡信息安全码
// phoneNoValidate: false, //银行卡信息预留手机号
// guKeNameValidate: false, //顾客姓名
// guKeIdCardValidate: false, //顾客身份证号
// guKePhoneValidate: false, //顾客手机号
if (this.state.commonValidate || (this.state.realNameValidate && this.state.idnoValidate && this.state.customerIdnoValidate && this.state.cvvValidate && this.state.phoneNoValidate && this.state.guKeNameValidate && this.state.guKeIdCardValidate && this.state.guKePhoneValidate && (this.state.sexIndex == 0 || this.state.sexIndex == 1))) {
this._submitForm()
}
}}
style={[styles.payMoney, { backgroundColor: this.state.commonValidate || (this.state.realNameValidate && this.state.idnoValidate && this.state.customerIdnoValidate && this.state.cvvValidate && this.state.phoneNoValidate && this.state.guKeNameValidate && this.state.guKeIdCardValidate && this.state.guKePhoneValidate && (this.state.sexIndex == 0 || this.state.sexIndex == 1)) ? Colors.red : "#F49896FF" }]}
>
<Text style={styles.payMoneytxt}>{JSON.stringify(this.state.getOrderBankInfoByUser) != "{}" ? "去支付" : "去验证卡信息"}</Text>
</TouchableOpacity>
</View>
}
{this.state.dateVisibleFlag ?
<DatePicker
data={{
"monthId": this.state.month || "",
"yearId": this.state.year || ""
}}
cancelClick={() => {
this.setState({
dateVisibleFlag: false,
})
}}
confirmClick={(data) => {
this.setState({
dateVisibleFlag: false,
month: data.state.monthId,
year: data.state.yearId,
})
}}
/>
: null}
{this.state.isLoading ? <Loading /> : null}
{/* 有效期、安全码弹出框 */}
<Modal
visible={this.state.openFlag}
animationType='fade'
transparent={true}
onRequestClose={() => { this.setState({ openFlag: false }) }}
>
<TouchableOpacity
onPress={() => { this.setState({ openFlag: false }) }}
activeOpacity={1}
style={styles.maskClickPro}
>
<TouchableOpacity
onPress={() => { }}
activeOpacity={1}
>
<View style={styles.Content}>
<Text style={styles.Title}>{this.state.contentFlag == 1 ? "有效期说明" : "安全码说明"}</Text>
<Image style={{ width: Px2dp(225), height: Px2dp(122) }} source={this.state.contentFlag == 1 ? require('../../images/CydBanks.png') : require('../../images/CydBank.png')} />
<Text style={styles.detailTxt}>{this.state.contentFlag == 1 ? "有效期是打印在信用卡正面卡号下方，标准格式为月份在前，年份在后的一串数字。" : "安全码是打印在信用卡背面签名区域的一组数字，一般是后3位或者4位数字。"}</Text>
<View style={styles.contentLine}></View>
<TouchableOpacity style={styles.closeBtn} activeOpacity={0.8} onPress={() => {
this.setState({
openFlag: false
})
}}>
<Text style={styles.closeTxt}>知道了</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</TouchableOpacity>
</Modal>
</KeyboardAvoidingView>
);
}
//获取订单详情接口
_findOtherInfo() {
this.setState({
isLoading: true,
})
Fetch(requestUrl.URL, {
"userId": UserInfo.id,// 用户id
"orderId": this.state.payData.orderId,// 订单id
}).then(data => {
console.log(data)
if (data.status == "SUCCESS") {
this.setState({
isLoading: false,
orderInfo: data.data,
})
} else if (data.status == "ERROR") {
this.setState({
isLoading: false,
})
ToastShow({ "text": '获取订单信息失败' })
} else {
this.setState({
isLoading: false,
})
}
})
}
//闯易贷下单取已经输入过的信息
_getOrderBankInfoByUser(bankCardNo) {
this.setState({
isLoading: true,
})
// 测试信用卡号
Fetch(requestUrl.URL, {
"userId": UserInfo.id,
"bankCardNo": bankCardNo
}).then(data => {
console.log(data)
if (data.status == "SUCCESS") {
if (data.data == "") {
this.setState({
isLoading: false,
})
return true
}
else {
this.setState({
isLoading: false,
getOrderBankInfoByUser: data.data,
realName: data.data.credit_name,
idno: data.data.idno,
customerIdno: data.data.credit_no,
validtyPeriod: data.data.validty_period,
cvv: data.data.cvv,
phoneNo: data.data.phone_no,
guKeName: data.data.customer_name,
guKeIdCard: data.data.customer_idno,
guKePhone: data.data.relate_phone,
sexIndex: data.data.gender == "1" ? 0 : 1,
commonValidate: true,
month: String(data.data.validty_period.substring(0, 2)),
year: String(data.data.validty_period.substring(2, data.data.validty_period.length)),
})
}
} else if (data.status == "ERROR") {
this.setState({
isLoading: false,
})
ToastShow({ "text": '闯易贷下单取已经输入过的信息失败' })
} else {
this.setState({
isLoading: false,
})
}
})
}
_iphoneIp() {
//获取设备IP
Fetch('http://ip.360.cn/IPShare/info').then(data => {
this.setState({
iphoneIp: data.ip
})
})
}
//验证下单
_submitForm() {
this.setState({
isLoading: true,
})
if (!this.state.realName) {
ToastShow({ "text": "请输入持卡人的真实姓名" })
}
else if (!regExp.Reg_Name.test(this.state.realName)) {
ToastShow({ "text": "请输入正确的持卡人真实姓名" })
}
else if (!this.state.idno) {
ToastShow({ 'text': '请输入身份证号' })
}
else if (!regExp.Reg_IDCardNo.test(this.state.idno)) {
ToastShow({ 'text': '请输入正确的身份证号' })
}
else if (!this.state.customerIdno) {
ToastShow({ 'text': "请输入信用卡的卡号" })
}
else if (!regExp.bankNumber.test(this.state.customerIdno)) {
ToastShow({ 'text': "请输入正确的信用卡卡号" })
}
else if (!this.state.month || !this.state.year) {
ToastShow({ 'text': "请选择信用卡有效期" })
}
else if (!this.state.cvv) {
ToastShow({ 'text': "请输入卡背面后三位数字" })
}
else if (!regExp.SaftCode.test(this.state.cvv)) {
ToastShow({ 'text': "请输入正确的卡背面后三位数字" })
}
else if (!this.state.phoneNo) {
ToastShow({ 'text': "请输入在银行预留的手机号" })
}
else if (!regExp.Reg_TelNo.test(this.state.phoneNo)) {
ToastShow({ 'text': "请输入正确的银行预留手机号" })
}
else if (!this.state.guKeName) {
ToastShow({ 'text': "请输入顾客的真实姓名" })
}
else if (!regExp.Reg_Name.test(this.state.guKeName)) {
ToastShow({ 'text': "请输入正确的顾客真实姓名" })
}
else if (!this.state.guKeIdCard) {
ToastShow({ 'text': "请输入顾客的身份证号" })
}
else if (!regExp.Reg_IDCardNo.test(this.state.guKeIdCard)) {
ToastShow({ 'text': "请输入正确的顾客身份证号" })
}
else if (!this.state.guKePhone) {
ToastShow({ "text": "请输入顾客的手机号码" })
}
else if (!regExp.Reg_TelNo.test(this.state.guKePhone)) {
ToastShow({ 'text': "请输入正确的顾客手机号码" })
}
else {
console.log(
{
"requestNo": this.state.payData.orderId,// 商户订单号
"goodsName": this.state.orderInfo.detail[0].goods_name,// 商品名称
"goodsType": "4",// 商品类型1手机，2平板，3配件，4其他
"goodsPrice": this.state.orderInfo.detail[0].price / 100,// 商品价格(整数不超过8位，小数不超过2位)
"subject": this.state.orderInfo.detail[0].goods_name,// 订单标题
"amount": this.state.orderInfo.order_amount / 100,// 订单金额(整数不超过8位，小数不超过2位)
"nper": this.state.activeInfo,// 分期期数（不超过2位的正整数）
"creditName": this.state.realName,// 持卡人姓名
"cetiType": "01",// 消费者证件类型（01：身份证）
"phoneNo": this.state.phoneNo,// 银行预留手机号码
"idno": this.state.idno,// 消费者证件号码
"validtyPeriod": this.state.month + this.state.year,// 信用卡有效期(格式：MMyy)
"cvv": this.state.cvv,// 信用卡CVV2
"creditNo": this.state.customerIdno,// 消费者支付信用卡卡号
"creditBank": this.state.bankName,// 信用卡所属银行
"bankNo": this.state.bankCode,// 银行编码（例如：ICBC）
"relatePhone": this.state.guKePhone,// 联系手机号 区别于银行预留手机号 两者可相同
"customerIdno": this.state.guKeIdCard,// 顾客身份证号
"customerName": this.state.guKeName,// 顾客姓名
"address": "",// 买家身份证地址
"gender": this.state.sexIndex == 0 ? "1" : "2",// 买家性别 1男 2 女
"clientIp": this.state.iphoneIp,// 客户端ip地址
"userId": UserInfo.id, //用户id
"memo": "", //备注
}
)
Fetch(requestUrl.url, {
"requestNo": this.state.payData.orderId,// 商户订单号
"goodsName": this.state.orderInfo.detail[0].goods_name,// 商品名称
"goodsType": "4",// 商品类型1手机，2平板，3配件，4其他
"goodsPrice": this.state.orderInfo.detail[0].price / 100,// 商品价格(整数不超过8位，小数不超过2位)
"subject": this.state.orderInfo.detail[0].goods_name,// 订单标题
"amount": this.state.orderInfo.order_amount / 100,// 订单金额(整数不超过8位，小数不超过2位)
"nper": this.state.activeInfo,// 分期期数（不超过2位的正整数）
"creditName": this.state.realName,// 持卡人姓名
"cetiType": "01",// 消费者证件类型（01：身份证）
"phoneNo": this.state.phoneNo,// 银行预留手机号码
"idno": this.state.idno,// 消费者证件号码
"validtyPeriod": this.state.month + this.state.year,// 信用卡有效期(格式：MMyy)
"cvv": this.state.cvv,// 信用卡CVV2
"creditNo": this.state.customerIdno,// 消费者支付信用卡卡号
"creditBank": this.state.bankName,// 信用卡所属银行
"bankNo": this.state.bankCode,// 银行编码（例如：ICBC）
"relatePhone": this.state.guKePhone,// 联系手机号 区别于银行预留手机号 两者可相同
"customerIdno": this.state.guKeIdCard,// 顾客身份证号
"customerName": this.state.guKeName,// 顾客姓名
"address": "",// 买家身份证地址
"gender": this.state.sexIndex == 0 ? "1" : "2",// 买家性别 1男 2 女
"clientIp": this.state.iphoneIp,// 客户端ip地址
"userId": UserInfo.id, //用户id
"memo": "", //备注
}).then(data => {
console.log(data)
if (data.status == "SUCCESS") {
this.setState({
isLoading: false,
cydOrderId: data.data.cydOrderId,
isVerifyPass: true
})
} else if (data.status == "ERROR") {
this.setState({
isLoading: false,
})
if (data.msg == "参数异常：idno不正确" || data.msg == "参数异常：customerIdno不正确") {
ToastShow({ "text": "请输入正确的身份证信息" })
}
else {
ToastShow({ "text": "支付失败" + data.msg })
}
} else {
this.setState({
isLoading: false,
})
}
})
}
}
//闯易贷下单短信验证
_consumptionTiedCardValidate(cydOrderId) {
this.setState({
isLoading: true
})
console.log(
{
"orderNo": cydOrderId,
"smsVerifyCode": this.state.verifyPassCode
}
)
Fetch(requestUrl.URL, {
"orderNo": cydOrderId,
"smsVerifyCode": this.state.verifyPassCode
}).then(data => {
console.log(data)
if (data.status == "SUCCESS") {
this.setState({
isLoading: false,
})
this.props.navigation.navigate("PaySuccess", { orderId: data.data.orderId, goodsSum: data.data.orderPrice })
} else if (data.status == "ERROR") {
this.setState({
isLoading: false,
})
ToastShow({ "text": '闯易贷下单短信验证失败' })
} else {
this.setState({
isLoading: false,
})
}
})
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.mainBg,
},
cardholder: {
backgroundColor: Colors.white,
paddingTop: Px2dp(15),
paddingLeft: Px2dp(15),
},
cardholderHead: {
fontSize: Px2dp(19),
color: Colors.text333
},
commonInput: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
borderBottomWidth: Pixel,
borderBottomColor: "#E4E4E7FF",
height: Px2dp(50)
},
verifyPassInput: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
height: Px2dp(50)
},
TextInput: {
flex: 1,
fontSize: Px2dp(15),
marginLeft: Px2dp(23),
color: Colors.text333
},
verifyPassTextInput: {
flex: 1,
fontSize: Px2dp(15),
color: Colors.text333
},
commonTit: {
fontSize: Px2dp(15),
color: Colors.text333,
width: Px2dp(92),
textAlign: "right"
},
verifyPassTit: {
fontSize: Px2dp(15),
color: Colors.text333,
marginRight: Px2dp(23)
},
payBottomContent: {
flexDirection: "row",
alignItems: "center",
height: IOS ? Px2dp(50) + TabBar : Px2dp(50),
paddingBottom: IOS ? TabBar : 0,
backgroundColor: Colors.white,
},
commonPayItemBomTit: {
fontSize: Px2dp(14),
color: Colors.text333,
flex: 1,
textAlign: "center"
},
payMoney: {
height: Px2dp(50),
flex: 1,
alignItems: 'center',
justifyContent: "center"
},
payMoneytxt: {
fontSize: Px2dp(15),
color: Colors.white
},
sexName: {
fontSize: Px2dp(15),
color: "#000000FF",
marginLeft: Px2dp(10)
},
commonLiImgs: {
width: Px2dp(20),
height: Px2dp(20),
},
// 弹出层遮罩
maskClickPro: {
backgroundColor: Colors.maskColor,
justifyContent: 'center',
alignItems: "center",
height: SCREEN_HEIGHT,
},
Content: {
backgroundColor: Colors.white,
alignItems: 'center',
width: Px2dp(315),
height: Px2dp(280),
borderRadius: Px2dp(4),
paddingLeft: Px2dp(20),
paddingRight: Px2dp(20),
paddingTop: Px2dp(15),
},
Title: {
fontSize: Px2dp(19),
color: "#000000FF",
marginBottom: Px2dp(15),
fontWeight: "500"
},
detailTxt: {
fontSize: Px2dp(13),
color: "#000000FF",
marginTop: Px2dp(10),
marginBottom: Px2dp(15),
lineHeight: Px2dp(15)
},
contentLine: {
width: Px2dp(275),
height: Pixel,
backgroundColor: "#BEBEBEFF"
},
closeBtn: {
height: Px2dp(47),
width: Px2dp(315),
alignItems: 'center',
justifyContent: 'center'
},
closeTxt: {
fontSize: Px2dp(17),
color: "#2C7DC9FF"
},
//验证支付
verifyPassCode: {
paddingTop: Px2dp(15),
paddingLeft: Px2dp(15),
backgroundColor: Colors.white
},
verifyPassCodeTit: {
fontSize: Px2dp(15),
color: Colors.text333,
lineHeight: Px2dp(21)
},
verifyPassCodeBtn: {
width: Px2dp(315),
height: Px2dp(50),
alignItems: "center",
justifyContent: "center",
},
verifyPassCodeBtnTxt: {
fontSize: Px2dp(15),
color: Colors.white
},
//日期组件
datePlaceholder: {
fontSize: Px2dp(15),
paddingLeft: Px2dp(23)
},
EditMyAddressItem: {
padding: 0,
},
});
DatePicker iOS
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity, StatusBar, Picker, Modal } from 'react-native';
export default class DatePicker extends Component {
static defaultProps = {
visible: false,// 显隐藏
confirmClick: function () { },// 确定事件
cancelClick: function () { },// 取消事件
data: {},// {monthId:"01",yearId:"22"}
};
constructor(props) {
super(props);
this.state = {
monthArr: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],// 月份数组
yearArr: [],// 年份数组
monthId: '',// 月份焦点
yearId: '',// 年份焦点
}
}
componentWillMount() {
if (this.props.data) {
let arr = [];
for (var i = 0; i < 10; i++) {
var nowYear = new Date();
nowYear.setFullYear(nowYear.getFullYear() + i);
arr.push(String(nowYear.getFullYear()))
}
this.setState({
monthId: this.props.data.monthId || this.state.monthArr[0],
yearId: this.props.data.yearId || arr[0].substring(2),
yearArr: arr,
})
}
}
componentDidMount() {
}
render() {
return (
<Modal
visible={true}
animationType={"fade"}
transparent={true}
>
<TouchableOpacity
onPress={this.props.cancelClick}
activeOpacity={1}
style={styles.maskClick}
>
<View style={styles.container}>
<View style={styles.headerBox}>
<TouchableOpacity
onPress={this.props.cancelClick}
activeOpacity={.8}
style={styles.btnStyle}
>
<Text style={styles.btnText}>取消</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => { this.props.confirmClick(this) }}
activeOpacity={.8}
style={styles.btnStyle}
>
<Text style={styles.btnText}>确定</Text>
</TouchableOpacity>
</View>
<View style={styles.content}>
<Picker
selectedValue={this.state.monthId}
style={styles.pickerStyle}
onValueChange={(itemValue, itemIndex) => {
this.setState({
monthId: itemValue,
})
}}>
{this.state.monthArr.map((item, index) => {
return (
<Picker.Item key={index} label={item} value={item} />
)
})}
</Picker>
<Picker
selectedValue={this.state.yearId}
style={styles.pickerStyle}
onValueChange={(itemValue, itemIndex) => {
this.setState({
yearId: itemValue,
})
}}>
{this.state.yearArr.map((item, index) => {
return (
<Picker.Item key={index} label={item} value={item.substring(2)} />
)
})}
</Picker>
</View>
</View>
</TouchableOpacity>
</Modal>
);
}
}
const styles = StyleSheet.create({
maskClick: {
flex: 1,
justifyContent: 'flex-end',
backgroundColor: Colors.maskColor,
},
container: {
backgroundColor: Colors.white,
},
headerBox: {
flexDirection: "row",
alignItems: 'center',
justifyContent: 'space-between',
borderBottomWidth: Pixel,
borderBottomColor: Colors.borderColor,
},
btnStyle: {
},
btnText: {
fontSize: Px2dp(16),
color: Colors.text666,
paddingRight: Px2dp(30),
paddingLeft: Px2dp(30),
lineHeight: Px2dp(40),
},
content: {
flexDirection: 'row',
alignItems: 'center',
},
pickerStyle: {
flex: 1,
},
});
DatePicker android
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity, StatusBar, Picker, Modal } from 'react-native';
export default class DatePicker extends Component {
static defaultProps = {
visible: false,// 显隐藏
confirmClick: function () { },// 确定事件
cancelClick: function () { },// 取消事件
data: {},// {monthId:"01",yearId:"22"}
};
constructor(props) {
super(props);
this.state = {
monthArr: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],// 月份数组
yearArr: [],// 年份数组
monthId: '',// 月份焦点
yearId: '',// 年份焦点
}
}
componentWillMount() {
if (this.props.data) {
let arr = [];
for (var i = 0; i < 10; i++) {
var nowYear = new Date();
nowYear.setFullYear(nowYear.getFullYear() + i);
arr.push(String(nowYear.getFullYear()))
}
this.setState({
monthId: this.props.data.monthId || this.state.monthArr[0],
yearId: this.props.data.yearId || arr[0].substring(2),
yearArr: arr,
})
}
}
componentDidMount() {
}
render() {
return (
<Modal
visible={true}
animationType={"fade"}
transparent={true}
>
<TouchableOpacity
onPress={this.props.cancelClick}
activeOpacity={1}
style={styles.maskClick}
>
<View style={styles.container}>
<View style={styles.headerBox}>
<TouchableOpacity
onPress={this.props.cancelClick}
activeOpacity={.8}
style={styles.btnStyle}
>
<Text style={styles.btnText}>取消</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => { this.props.confirmClick(this) }}
activeOpacity={.8}
style={styles.btnStyle}
>
<Text style={styles.btnText}>确定</Text>
</TouchableOpacity>
</View>
<View style={styles.content}>
<ScrollView
style={styles.pickerStyle}
>
{this.state.monthArr.map((item, index) => {
return (
<TouchableOpacity
key={index}
activeOpacity={.8}
onPress={() => {
this.setState({
monthId: item,
})
}}
style={styles.itemClick}
>
<Text numberOfLines={1} style={[styles.itemText, this.state.monthId == item ? { color: Colors.red } : null]}>{item}</Text>
</TouchableOpacity>
)
})}
</ScrollView>
<ScrollView
style={styles.pickerStyle}
>
{this.state.yearArr.map((item, index) => {
return (
<TouchableOpacity
key={index}
activeOpacity={.8}
onPress={() => {
this.setState({
yearId: item.substring(2),
})
}}
style={styles.itemClick}
>
<Text numberOfLines={1} style={[styles.itemText, this.state.yearId == item.substring(2) ? { color: Colors.red } : null]}>{item}</Text>
</TouchableOpacity>
)
})}
</ScrollView>
</View>
</View>
</TouchableOpacity>
</Modal>
);
}
}
const styles = StyleSheet.create({
maskClick: {
flex: 1,
justifyContent: 'flex-end',
backgroundColor: Colors.maskColor,
},
container: {
backgroundColor: Colors.white,
},
headerBox: {
flexDirection: "row",
alignItems: 'center',
justifyContent: 'space-between',
borderBottomWidth: Pixel,
borderBottomColor: Colors.borderColor,
},
btnStyle: {
},
btnText: {
fontSize: Px2dp(16),
color: Colors.text666,
paddingRight: Px2dp(30),
paddingLeft: Px2dp(30),
lineHeight: Px2dp(40),
},
content: {
maxHeight: SCREEN_HEIGHT * .38,
flexDirection: 'row',
},
pickerStyle: {
flex: 1,
},
itemClick: {
justifyContent: 'center',
alignItems: 'center',
},
itemText: {
fontSize: Px2dp(16),
color: Colors.text333,
lineHeight: Px2dp(30),
}
});
编辑收货地址
/**
*
* 添加管理收货地址
*/
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, Image, TextInput, TouchableOpacity, StatusBar } from 'react-native';
import Nav from '../../components/Nav';
import { requestUrl } from '../../network/Url';// 请求url
import { global } from '../../utils/Global';
import { regExp } from "../../network/RegExp";
import Fetch from '../../network/Fetch';
import AddressPicker from '../../components/AddressPicker';
import StatusBarModule from '../../components/StatusBarModule';
import Loading from '../../components/Loading'; // 加载层
export default class EditMyAddress extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
takeName: '', //收获人姓名
takePhone: '', //收获人电话
takeAddress: '', //选择收货地址
takeCity: '', // 详情地址
moreSelected: true, //切换默认地址
labelSelected: '家', // 获取家、公司的label
labelId: "",//获取家、公司的labelid
labelArr: [], //所有地址标签
diquId: '', //地区ID
activeIndex: 0, //label默认切换
visibleFlag: false, //弹出地区选择模块
cityId: '', //市ID字符码
cityName: '', //市名称
countyId: '', //区的ID字符码
countyName: '', //区名称
provinceId: '', //省的ID字符码
provinceName: '', //省的名称
StreetName: '', //街道名称
streetId: "",//街道ID
}
}
componentWillMount() {
if (this.props.navigation.state.params) {
this.setState({
takeName: this.props.navigation.state.params.itemDate.userName,
takePhone: this.props.navigation.state.params.itemDate.mobile,
takeCity: this.props.navigation.state.params.itemDate.address,
diquId: this.props.navigation.state.params.itemDate.id,
provinceId: this.props.navigation.state.params.itemDate.provinceId,
cityId: this.props.navigation.state.params.itemDate.cityId,
countyId: this.props.navigation.state.params.itemDate.districtId,
streetId: this.props.navigation.state.params.itemDate.streetId ? this.props.navigation.state.params.itemDate.streetId : "",
provinceName: this.props.navigation.state.params.itemDate.pname,
cityName: this.props.navigation.state.params.itemDate.cname,
countyName: this.props.navigation.state.params.itemDate.dname,
StreetName: this.props.navigation.state.params.itemDate.sname ? this.props.navigation.state.params.itemDate.sname : "",
activeIndex: this.props.navigation.state.params.itemDate.label == "家" ? 0 : 1,
labelSelected: this.props.navigation.state.params.itemDate.label,
moreSelected: this.props.navigation.state.params.itemDate.defaultFlag == '1' ? true : false
})
} else {
}
}
componentDidMount() {
this._label() //查看所有地址标签
}
render() {
const { goBack } = this.props.navigation;
return (
<View
style={styles.container}>
<StatusBarModule isLoading={this.state.isLoading} />
<Nav
title={this.state.diquId ? "编辑收货地址" : "添加收货地址"}
leftClick={() => { goBack() }}
rightDom={
<Text style={styles.headTxt}>保存</Text>
}
rightClick={() => {
if (this.state.diquId) {
this._updataAddress(this.state.diquId)
}
else {
this._saveAddress()
}
}}
/>
<ScrollView >
<View style={styles.EditMyAddress}>
{/* 收货人姓名 */}
<View style={styles.EditMyAddressItem}>
<TextInput
style={styles.input}
returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
placeholderTextColor="#999"
keyboardType="default"
placeholder="请输入收货人姓名"
defaultValue={this.state.takeName}
onChangeText={(text) => {
this.setState({ takeName: text })
}}
/>
</View>
{/* 收货人手机号 */}
<View style={styles.EditMyAddressItem}>
<TextInput
style={styles.input}
returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
placeholderTextColor="#999"
keyboardType="numeric"
placeholder="请输入收货人手机号"
defaultValue={this.state.takePhone}
onChangeText={(text) => {
this.setState({ takePhone: text })
}}
/>
</View>
{/* 请选择地址 */}
<TouchableOpacity activeOpacity={0.8} style={styles.EditMyAddressItem} onPress={() => {
this.setState({
visibleFlag: true
})
}}>
<Text style={[styles.EditMyAddressTxt, this.state.provinceName ? null : { color: Colors.text999 }]}>{this.state.provinceName ?
this.state.StreetName ?
this.state.provinceName + this.state.cityName + this.state.countyName + this.state.StreetName
:
this.state.provinceName + this.state.cityName + this.state.countyName
: '请选择所在地区'}</Text>
<Image source={require('../../images/arrow_right_gray.png')} />
</TouchableOpacity>
{/* 详细地址 */}
<View style={styles.commonMyAddressItem}>
<TextInput
style={styles.input}
returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
placeholderTextColor="#999"
keyboardType="default"
placeholder="详细地址：如街道、楼牌号"
defaultValue={this.state.takeCity}
onChangeText={(text) => {
this.setState({ takeCity: text })
}}
/>
</View>
</View>
<View style={styles.addressLBox}>
{/* 地址类别 */}
<View style={styles.addressLB}>
<Text style={{ flex: 1 }}>地址类别</Text>
<View style={{ flexDirection: "row" }}>
{
this.state.labelArr.map((item, index) => {
return (
<TouchableOpacity key={index} style={styles.commonBox} activeOpacity={0.8} onPress={() => {
this.setState({
activeIndex: index,
labelSelected: item.label
})
}}>
<Image source={this.state.activeIndex == index ? require('../../images/on_icon.png') : require('../../images/off_icon.png')} />
<Text style={styles.commonBoxTxt}>{item.label}</Text>
</TouchableOpacity>
)
})
}
</View>
</View>
{/* 默认地址 */}
<View style={styles.commonMyAddressItem}>
<Text style={{ flex: 1 }}>设为默认地址</Text>
<TouchableOpacity style={styles.moreSelected} activeOpacity={0.8} onPress={() => {
this.setState({
moreSelected: !this.state.moreSelected
})
}}>
<Image source={this.state.moreSelected ? require('../../images/switch_order_on.png') : require('../../images/switch_order_off.png')} />
</TouchableOpacity>
</View>
</View>
</ScrollView>
<AddressPicker
visible={this.state.visibleFlag}
data={{
"provinceDefaultId": this.state.provinceId,
"cityDefaultId": this.state.cityId,
"countyDefaultId": this.state.countyId,
"StreetDefaultId": this.state.streetId
}}
cancelClick={() => {
this.setState({
visibleFlag: false,
})
}}
confirmClick={(data) => {
console.log(data)
this.setState({
visibleFlag: false,
provinceName: data.state.provinceName,
cityName: data.state.cityName,
countyName: data.state.countyName,
StreetName: data.state.StreetName,
cityId: data.state.cityId, //市ID字符码
countyId: data.state.countyId, //区的ID字符码
provinceId: data.state.provinceId, //省的ID字符码
streetId: data.state.StreetId, //街道的ID字符码
})
}} />
{this.state.isLoading ? <Loading /> : null}
</View>
);
}
//查询label标签
_label() {
this.setState({
isLoading: true,
})
Fetch(requestUrl.label, {
"userId": UserInfo.id
}).then(data => {
if (data.status == "SUCCESS") {
this.setState({
isLoading: false,
labelArr: data.data
})
} else if (data.status == "ERROR") {
this.setState({
isLoading: false,
})
ToastShow({ "text": '查询地址标签失败' })
} else {
this.setState({
isLoading: false,
})
}
})
}
//保存收货地址
_saveAddress() {
if (this.state.takeName == "") {
ToastShow({ "text": "请输入收货人姓名" })
}
else if (this.state.takeName.length > 30) {
ToastShow({ "text": "收货人姓名过长" })
}
else if (this.state.takePhone == "") {
ToastShow({ "text": "请输入收货人手机号" })
}
else if (!regExp.Reg_TelNo.test(this.state.takePhone)) {
ToastShow({ "text": "请输入正确的收货人手机号" })
}
else if (this.state.provinceName == "") {
ToastShow({ "text": "请选择收货地址" })
}
else if (this.state.takeCity == "") {
ToastShow({ "text": "请输入详细地址" })
}
else {
this.setState({
isLoading: true,
})
Fetch(requestUrl.save, {
"userId": UserInfo.id,
"defaultFlag": this.state.moreSelected ? '1' : '2',
"provinceId": this.state.provinceId,
"cityId": this.state.cityId,
"districtId": this.state.countyId,
"streetId": this.state.streetId,
"address": this.state.takeCity,
"userName": this.state.takeName,
"mobile": this.state.takePhone,
"label": this.state.labelSelected,
"lastSelect": "1"
}).then(data => {
if (data.status == "SUCCESS") {
this.setState({
isLoading: false,
})
// ToastShow({ "text": '保存收货地址成功' })
this.props.navigation.navigate('MyAddress')
} else if (data.status == "ERROR") {
this.setState({
isLoading: false,
})
ToastShow({ "text": '保存收货地址失败' })
} else {
this.setState({
isLoading: false,
})
}
})
}
}
//更新收货地址
_updataAddress(id) {
if (this.state.takeName == "") {
ToastShow({ "text": "请输入收货人姓名" })
}
else if (this.state.takeName.length > 30) {
ToastShow({ "text": "收货人姓名过长" })
}
else if (this.state.takePhone == "") {
ToastShow({ "text": "请输入收货人手机号" })
}
else if (!regExp.Reg_TelNo.test(this.state.takePhone)) {
ToastShow({ "text": "请输入正确的收货人手机号" })
}
else if (this.state.provinceName == "") {
ToastShow({ "text": "请选择收货地址" })
}
else if (this.state.takeCity == "") {
ToastShow({ "text": "请输入详细地址" })
}
else {
this.setState({
isLoading: true,
})
Fetch(requestUrl.update, {
"defaultFlag": this.state.moreSelected ? '1' : '',
'userId': UserInfo.id,
"provinceId": this.state.provinceId,
"cityId": this.state.cityId,
"districtId": this.state.countyId,
"streetId": this.state.streetId,
'address': this.state.takeCity,
'userName': this.state.takeName,
'mobile': this.state.takePhone,
'label': this.state.labelSelected,
'lastSelect': '1',
'id': id
}).then(data => {
if (data.status == "SUCCESS") {
this.setState({
isLoading: false,
})
// ToastShow({ "text": '更新收货地址成功' })
this.props.navigation.navigate('MyAddress')
} else if (data.status == "ERROR") {
this.setState({
isLoading: false,
})
ToastShow({ "text": '更新收货地址失败' })
} else {
this.setState({
isLoading: false,
})
}
})
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.mainBg,
},
headTxt: {
fontSize: Px2dp(14),
color: Colors.text333
},
EditMyAddress: {
marginTop: Px2dp(10),
paddingLeft: Px2dp(16),
paddingRight: Px2dp(16),
backgroundColor: Colors.white
},
EditMyAddressItem: {
flexDirection: "row",
justifyContent: 'center',
alignItems: 'center',
padding: 0,
height: Px2dp(50),
borderBottomWidth: Pixel,
borderBottomColor: "#ececec",
},
commonMyAddressItem: {
flexDirection: "row",
justifyContent: 'center',
alignItems: 'center',
padding: 0,
height: Px2dp(50),
},
EditMyAddressItems: {
paddingTop: Px2dp(15),
flexDirection: "row",
justifyContent: 'center',
alignItems: 'center',
paddingBottom: Px2dp(14),
},
input: {
fontSize: Px2dp(15),
flex: 1,
padding: 0,
},
//地址类别
EditMyAddressTxt: {
flex: 1
},
addressLBox: {
marginTop: Px2dp(10),
paddingLeft: Px2dp(16),
paddingRight: Px2dp(16),
backgroundColor: Colors.white,
},
addressLB: {
flexDirection: "row",
alignItems: 'center',
height: Px2dp(50),
borderBottomWidth: Pixel,
borderBottomColor: "#ececec",
},
commonBox: {
flexDirection: "row",
justifyContent: "center",
alignItems: 'center',
paddingLeft: Px2dp(30),
height: Px2dp(50)
},
moreSelected: {
height: Px2dp(50),
justifyContent: 'center',
alignItems: "center"
},
commonBoxTxt: {
marginLeft: Px2dp(6)
}
});
AddressPicker ios
/**
*
* AddressPicker ios 地区选择组件
* visible 控制先隐藏
* confirmClick 确认事件
* cancelClick 取消事件
* data 默认信息 {"provinceDefaultId":'默认省id',"cityDefaultId":'默认市id',"countyDefaultId":'默认县id'}
*/
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity, StatusBar, Picker, Modal } from 'react-native';
import { global } from '../utils/Global';
import { requestUrl } from '../network/Url';
import Fetch from '../network/Fetch';
export default class AddressPicker extends Component {
static defaultProps = {
visible: false,// 显隐藏
confirmClick: function () { },// 确定事件
cancelClick: function () { },// 取消事件
};
constructor(props) {
super(props);
this.state = {
provinceArr: [],// 省数组
provinceId: '',// 省id
provinceName: '',// 省名字
provinceDefaultId: '',// 省默认id
cityArr: [],// 市 数组
cityId: '',// 市 id
cityName: '',// 市 名字
cityDefaultId: '',// 市 默认id
countyArr: '',// 县/区 数组
countyId: '',//县/区 id
countyName: '',//县/区 名字
countyDefaultId: '',//县/区 默认id
StreetArr: [],// 街道数组
StreetId: '',// 街道 id
StreetName: '',//街道 名字
StreetDefaultId: '',//街道 默认id
}
}
componentWillMount() {
if (this.props.data && this.props.data.provinceDefaultId) {
this.setState({
provinceDefaultId: this.props.data.provinceDefaultId,
cityDefaultId: this.props.data.cityDefaultId,
countyDefaultId: this.props.data.countyDefaultId,
StreetDefaultId: this.props.data.StreetDefaultId
})
}
}
componentDidMount() {
// 获取省
this.findProvince();
}
render() {
return (
<Modal
visible={this.props.visible}
animationType={"slide"}
transparent={true}
>
<TouchableOpacity
onPress={this.props.cancelClick}
activeOpacity={1}
style={styles.maskClick}
>
<View style={styles.container}>
<View style={styles.headerBox}>
<TouchableOpacity
onPress={this.props.cancelClick}
activeOpacity={.8}
style={styles.btnStyle}
>
<Text style={styles.btnText}>取消</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => { this.props.confirmClick(this) }}
activeOpacity={.8}
style={styles.btnStyle}
>
<Text style={styles.btnText}>确定</Text>
</TouchableOpacity>
</View>
<View style={styles.content}>
<Picker
selectedValue={this.state.provinceId}
style={styles.pickerStyle}
onValueChange={(itemValue, itemIndex) => {
this.setState({
provinceId: itemValue,
provinceDefaultId: '',
provinceName: this.state.provinceArr[itemIndex].name
})
this.findCity(itemValue);
}}>
{this.state.provinceArr.length > 0 && this.state.provinceArr.map((item, index) => {
return (
<Picker.Item key={item.id} label={item.name} value={item.id} />
)
})}
</Picker>
<Picker
selectedValue={this.state.cityId}
style={styles.pickerStyle}
onValueChange={(itemValue, itemIndex) => {
this.setState({
cityId: itemValue,
cityDefaultId: '',
cityName: this.state.cityArr[itemIndex].name
})
this.findCounty(itemValue);
}}>
{this.state.cityArr.length > 0 && this.state.cityArr.map((item, index) => {
return (
<Picker.Item key={item.id} label={item.name} value={item.id} />
)
})}
</Picker>
<Picker
selectedValue={this.state.countyId}
style={styles.pickerStyle}
onValueChange={(itemValue, itemIndex) => {
this.setState({
countyId: itemValue,
countyDefaultId: '',
countyName: this.state.countyArr[itemIndex].name
})
this.findStreet(itemValue)
}}>
{this.state.countyArr.length > 0 && this.state.countyArr.map((item, index) => {
return (
<Picker.Item key={item.id} label={item.name} value={item.id} />
)
})}
</Picker>
{
this.state.StreetArr.length > 0 ?
<Picker
selectedValue={this.state.StreetId}
style={styles.pickerStyle}
onValueChange={(itemValue, itemIndex) => {
this.setState({
StreetId: itemValue,
StreetDefaultId: '',
StreetName: this.state.StreetArr[itemIndex].name
})
}}>
{this.state.StreetArr.map((item, index) => {
return (
<Picker.Item key={index} label={item.name} value={item.id} />
)
})}
</Picker> :
null
}
</View>
</View>
</TouchableOpacity>
</Modal >
);
}
// 获取省
findProvince() {
Fetch(requestUrl.find).then(data => {
this.findCity(this.state.provinceDefaultId ? this.state.provinceDefaultId : data.data[0].id);
this.setState({
provinceArr: data.data,
provinceId: this.state.provinceDefaultId ? this.state.provinceDefaultId : data.data[0].id,
provinceName: data.data[0].name,
provinceDefaultId: '',
})
})
}
// 获取市
findCity(provinceId) {
Fetch(requestUrl.findCity, { "pid": provinceId }).then(data => {
this.findCounty(this.state.cityDefaultId ? this.state.cityDefaultId : data.data[0].id);
this.setState({
cityArr: data.data,
cityId: this.state.cityDefaultId ? this.state.cityDefaultId : data.data[0].id,
cityName: data.data[0].name,
cityDefaultId: '',
})
})
}
// 获取县
findCounty(cityId) {
Fetch(requestUrl.findArea, { "cid": cityId }).then(data => {
this.findStreet(this.state.countyDefaultId ? this.state.countyDefaultId : data.data[0].id);
this.setState({
countyArr: data.data,
countyId: this.state.countyDefaultId ? this.state.countyDefaultId : data.data[0].id,
countyName: data.data[0].name,
countyDefaultId: '',
})
})
}
//获取街道
findStreet(countyId) {
Fetch(requestUrl.findStreet, { "cid": countyId }).then(data => {
if (data.data.length > 0) {
this.setState({
StreetArr: data.data,
StreetId: this.state.StreetDefaultId ? this.state.StreetDefaultId : data.data[0].id,
StreetName: data.data[0].name,
StreetDefaultId: '',
})
}
else {
this.setState({
StreetArr: [],
StreetId: this.state.StreetDefaultId ? this.state.StreetDefaultId : "",
StreetName: "",
StreetDefaultId: '',
})
}
})
}
}
const styles = StyleSheet.create({
maskClick: {
flex: 1,
justifyContent: 'flex-end',
},
container: {
backgroundColor: Colors.white,
},
headerBox: {
flexDirection: "row",
alignItems: 'center',
justifyContent: 'space-between',
borderBottomWidth: Pixel,
borderBottomColor: Colors.borderColor,
},
btnStyle: {
},
btnText: {
fontSize: Px2dp(16),
color: Colors.text666,
paddingRight: Px2dp(30),
paddingLeft: Px2dp(30),
lineHeight: Px2dp(40),
},
content: {
flexDirection: 'row',
alignItems: 'center',
},
pickerStyle: {
flex: 1,
},
});
AddressPicker android
/**
*
* AddressPicker android 地区选择组件
* visible 控制先隐藏
* confirmClick 确认事件
* cancelClick 取消事件
* data 默认信息 {"provinceDefaultId":'默认省id',"cityDefaultId":'默认市id',"countyDefaultId":'默认县id'}
*/
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity, StatusBar, Picker, Modal } from 'react-native';
import { global } from '../utils/Global';
import { requestUrl } from '../network/Url';
import Fetch from '../network/Fetch';
export default class AddressPicker extends Component {
static defaultProps = {
visible: false,// 显隐藏
confirmClick: function () { },// 确定事件
cancelClick: function () { },// 取消事件
};
constructor(props) {
super(props);
this.state = {
provinceArr: [],// 省数组
provinceId: '',// 省id
provinceName: '',// 省名字
provinceDefaultId: '',// 省默认id
cityArr: [],// 市 数组
cityId: '',// 市 id
cityName: '',// 市 名字
cityDefaultId: '',// 市 默认id
countyArr: '',// 县/区 数组
countyId: '',//县/区 id
countyName: '',//县/区 名字
countyDefaultId: '',//县/区 默认id
StreetArr: [],// 街道数组
StreetId: '',// 街道 id
StreetName: '',//街道 名字
StreetDefaultId: '',//街道 默认id
}
}
componentWillMount() {
if (this.props.data && this.props.data.provinceDefaultId) {
this.setState({
provinceDefaultId: this.props.data.provinceDefaultId,
cityDefaultId: this.props.data.cityDefaultId,
countyDefaultId: this.props.data.countyDefaultId,
StreetDefaultId: this.props.data.StreetDefaultId
})
}
}
componentDidMount() {
// 获取省
this.findProvince();
}
render() {
return (
<Modal
visible={this.props.visible}
animationType={"slide"}
transparent={true}
>
<TouchableOpacity
onPress={this.props.cancelClick}
activeOpacity={1}
style={styles.maskClick}
>
<View style={styles.container}>
<View style={styles.headerBox}>
<TouchableOpacity
onPress={this.props.cancelClick}
activeOpacity={.8}
style={styles.btnStyle}
>
<Text style={styles.btnText}>取消</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => { this.props.confirmClick(this) }}
activeOpacity={.8}
style={styles.btnStyle}
>
<Text style={styles.btnText}>确定</Text>
</TouchableOpacity>
</View>
<View style={styles.content}>
<ScrollView
style={styles.pickerStyle}
>
{this.state.provinceArr.length > 0 && this.state.provinceArr.map((item, index) => {
return (
<TouchableOpacity
activeOpacity={.8}
onPress={() => {
this.setState({
provinceId: item.id,
provinceDefaultId: '',
provinceName: item.name
})
this.findCity(item.id);
}}
style={styles.itemClick}
>
<Text numberOfLines={1} style={[styles.itemText, this.state.provinceId == item.id ? { color: Colors.red } : null]}>{item.name}</Text>
</TouchableOpacity>
)
})}
</ScrollView>
<ScrollView
style={styles.pickerStyle}
>
{this.state.cityArr.length > 0 && this.state.cityArr.map((item, index) => {
return (
<TouchableOpacity
key={index}
activeOpacity={.8}
onPress={() => {
this.setState({
cityId: item.id,
cityDefaultId: '',
cityName: item.name
})
this.findCounty(item.id);
}}
style={styles.itemClick}
>
<Text numberOfLines={1} style={[styles.itemText, this.state.cityId == item.id ? { color: Colors.red } : null]}>{item.name}</Text>
</TouchableOpacity>
)
})}
</ScrollView>
<ScrollView
style={styles.pickerStyle}
>
{this.state.countyArr.length > 0 && this.state.countyArr.map((item, index) => {
return (
<TouchableOpacity
key={index}
activeOpacity={.8}
onPress={() => {
this.setState({
countyId: item.id,
countyDefaultId: '',
countyName: item.name
})
this.findStreet(item.id)
}}
style={styles.itemClick}
>
<Text numberOfLines={1} style={[styles.itemText, this.state.countyId == item.id ? { color: Colors.red } : null]}>{item.name}</Text>
</TouchableOpacity>
)
})}
</ScrollView>
{
this.state.StreetArr.length > 0 ?
<ScrollView
style={styles.pickerStyle}
>
{this.state.StreetArr.map((item, index) => {
return (
<TouchableOpacity
key={index}
activeOpacity={.8}
onPress={() => {
this.setState({
StreetId: item.id,
StreetDefaultId: '',
StreetName: item.name
})
}}
style={styles.itemClick}
>
<Text numberOfLines={1} style={[styles.itemText, this.state.StreetId == item.id ? { color: Colors.red } : null]}>{item.name}</Text>
</TouchableOpacity>
)
})}
</ScrollView> :
null
}
</View>
</View>
</TouchableOpacity>
</Modal >
);
}
// 获取省
findProvince() {
Fetch(requestUrl.find).then(data => {
this.findCity(this.state.provinceDefaultId ? this.state.provinceDefaultId : data.data[0].id);
this.setState({
provinceArr: data.data,
provinceId: this.state.provinceDefaultId ? this.state.provinceDefaultId : data.data[0].id,
provinceName: data.data[0].name,
provinceDefaultId: '',
})
})
}
// 获取市
findCity(provinceId) {
Fetch(requestUrl.findCity, { "pid": provinceId }).then(data => {
this.findCounty(this.state.cityDefaultId ? this.state.cityDefaultId : data.data[0].id);
this.setState({
cityArr: data.data,
cityId: this.state.cityDefaultId ? this.state.cityDefaultId : data.data[0].id,
cityName: data.data[0].name,
cityDefaultId: '',
})
})
}
// 获取县
findCounty(cityId) {
Fetch(requestUrl.findArea, { "cid": cityId }).then(data => {
this.findStreet(this.state.countyDefaultId ? this.state.countyDefaultId : data.data[0].id);
this.setState({
countyArr: data.data,
countyId: this.state.countyDefaultId ? this.state.countyDefaultId : data.data[0].id,
countyName: data.data[0].name,
countyDefaultId: '',
})
})
}
//获取街道
findStreet(countyId) {
Fetch(requestUrl.findStreet, { "cid": countyId }).then(data => {
if (data.data.length > 0) {
this.setState({
StreetArr: data.data,
StreetId: this.state.StreetDefaultId ? this.state.StreetDefaultId : data.data[0].id,
StreetName: data.data[0].name,
StreetDefaultId: '',
})
}
else {
this.setState({
StreetArr: [],
StreetId: this.state.StreetDefaultId ? this.state.StreetDefaultId : "",
StreetName: "",
StreetDefaultId: '',
})
}
})
}
}
const styles = StyleSheet.create({
maskClick: {
flex: 1,
justifyContent: 'flex-end',
},
container: {
backgroundColor: Colors.white,
},
headerBox: {
flexDirection: "row",
alignItems: 'center',
justifyContent: 'space-between',
borderBottomWidth: Pixel,
borderBottomColor: Colors.borderColor,
},
btnStyle: {
},
btnText: {
fontSize: Px2dp(16),
color: Colors.text666,
paddingRight: Px2dp(30),
paddingLeft: Px2dp(30),
lineHeight: Px2dp(40),
},
content: {
maxHeight: SCREEN_HEIGHT * .38,
flexDirection: 'row',
},
pickerStyle: {
flex: 1,
},
itemClick: {
justifyContent: 'center',
alignItems: 'center',
},
itemText: {
fontSize: Px2dp(16),
color: Colors.text333,
lineHeight: Px2dp(30),
}
});
扫一扫
1134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
