react native 原生js整理数据结构收银付款

React Native 版本执行0.57的规则


import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, Image, TouchableOpacity, StatusBar, BackHandler } from 'react-native';
import Nav from '../../components/Nav';
import { global } from '../../utils/Global';
import { requestUrl } from '../../network/Url';// 请求url
import Loading from '../../components/Loading';
import Fetch from '../../network/Fetch';
import * as WeChat from '../../utils/WeChat';
import Confirm from '../../components/Confirm';export default class Pay extends Component {constructor(props) {super(props);this.state = {isLoading: false,commonpayArr: [{"name": "微信支付","picIcon": require('../../images/wechat_pay.png'),}, {"name": "支付宝支付","picIcon": require('../../images/alibaba_pay.png')}],// 支付方式otherCommonpayArr: [{"name": "花呗支付","picIcon": require('../../images/Tokio.png'),"open": false}],//快捷支付方式payIndex: 0, // 支付方式索引index otherPayIndex: 0, // 其他支付方式索引index childrenIndex: null,// 其他支付方式子数组索引index iphoneIp: "", //手机IP地址payData: {},// 是否时用的支付信息payVisible: false,// 退出接口activeInfo: {}, //当前选中的花呗分期信息isFenqi: true, //是否可以分期}}componentWillMount() {if (this.props.navigation.state.params) {this.setState({payData: this.props.navigation.state.params.payData})}}componentDidMount() {this._getPhoneIp(); //获取手机IP地址// 查询分期信息Fetch(requestUrl, {"total_fee": this.state.payData.goodsSum,// 总钱数分}).then(data => {console.log(data)//整合数据结构if (data.status == "SUCCESS") {let newArr = [], otherCommonpay = this.state.otherCommonpayArr;if (data.sixFenQI && data.threeFenQI && data.twelveFenQI) {newArr.push(data.sixFenQI)newArr.push(data.threeFenQI)newArr.push(data.twelveFenQI)}otherCommonpay.map((item) => {if (item.name == "花呗支付") {item.children = newArr.sort(this.compare('hb_fq_num'))}})this.setState({otherCommonpayArr: otherCommonpay})console.log(this.state.otherCommonpayArr)}else if (data.status == "ERROR") {this.setState({isFenqi: false})}// eachFee 用户每期手续费// eachPrin 用户每期本金// prinAndFee 用户每期总额// hb_fq_num 用户分期期数})BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);}handleBackPress = () => {this.setState({payVisible: true,})return true;}//数组对象属性值排序compare(property) {return function (a, b) {var value1 = a[property];var value2 = b[property];return value1 - value2;}}componentWillUnmount() {BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);}render() {const { navigate, goBack } = this.props.navigation;return (<View style={styles.container}><StatusBaranimated={true}//是否动画hidden={false}//是否隐藏backgroundColor={'#000'}//android 设置状态栏背景颜色translucent={false}//android 设置状态栏是否为透明showHideTransition="fade"//IOS状态栏改变时动画 fade:默认 slidenetworkActivityIndicatorVisible={this.state.isLoading}//IOS设定网络活动指示器(就是那个菊花)是否显示在状态栏。statusBarStyle={"default"}//状态栏样式 default  默认（IOS为白底黑字、Android为黑底白字）barStyle={"default"}// 状态栏文本的颜色。/><Navtitle={"收银台"}leftClick={() => {this.setState({payVisible: true,})}}/><ScrollView>{/* 应付金额 */}<View style={[styles.payItems, { marginTop: Px2dp(20) }]}><Text style={styles.payTexts}>应付金额</Text><Text style={styles.payPrice}>¥{this.state.payData.goodsSum / 100}</Text></View>{/* 快捷支付 */}<Text style={styles.payTitle}>快捷支付</Text>{this.state.commonpayArr.map((item, index) => {return (<View key={index} style={{ backgroundColor: Colors.white }}><TouchableOpacityactiveOpacity={0.8}style={index == 1 ? styles.payItems : styles.payItem}onPress={() => {this.setState({payIndex: index,otherPayIndex: null,childrenIndex: null})}}><Image source={item.picIcon} /><Text style={styles.payText}>{item.name}</Text><Image source={this.state.payIndex == index ? require('../../images/on_icon.png') : require('../../images/off_icon.png')} /></TouchableOpacity></View>)})}{/* 快捷支付 */}<Text style={styles.payTitle}>分期付款</Text>{this.state.otherCommonpayArr.map((item, index) => {return (<View key={index} style={this.state.isFenqi ? { backgroundColor: Colors.white, opacity: 1 } : { backgroundColor: Colors.white, opacity: 0.6 }}><TouchableOpacityactiveOpacity={0.8}style={index == 0 ? styles.payItems : styles.payItem}onPress={() => {if (this.state.isFenqi) {var newArr = this.state.otherCommonpayArrnewArr[index].open = !newArr[index].openthis.setState({otherPayIndex: index,otherCommonpayArr: newArr,})}}}><Image source={item.picIcon} /><Text style={styles.payText}>{item.name}</Text><Image source={item.open == false ? require('../../images/Downaway.png') : require('../../images/Putaway.png')} /></TouchableOpacity>{item.open == true && item.children ?item.children.map((items, inx) => {return (<View key={inx} style={inx == item.children.length - 1 ? { paddingBottom: Px2dp(10), backgroundColor: Colors.white } : { backgroundColor: Colors.white }}><TouchableOpacityactiveOpacity={0.8}style={inx == item.children.length - 1 ? styles.ChildrenItems : styles.ChildrenItem}onPress={() => {this.setState({childrenIndex: inx,activeInfo: items,payIndex: null})}}><Text style={styles.childerpayText}><Text>¥</Text>{items.prinAndFee}x{items.hb_fq_num}({items.eachFee ? "手续费¥" + items.eachFee + "/期" : "免手续费"})</Text><Image source={this.state.childrenIndex == inx ? require('../../images/on_icon.png') : require('../../images/off_icon.png')} /></TouchableOpacity></View>)}) : null}</View>)})}</ScrollView><View style={styles.payBottomContent}><TouchableOpacityactiveOpacity={0.8}onPress={() => {if (this.state.payIndex == 0) {this._weixinPay(this.state.payData);} else if (this.state.payIndex == 1) {this._aliPay(this.state.payData);} else if (this.state.childrenIndex != null) {this._huaBeiPay(this.state.payData);}}}style={styles.payMoney}><Text style={styles.payMoneytxt}>去付款</Text></TouchableOpacity></View><Confirmvisible={this.state.payVisible}yesClick={() => {this.setState({ payVisible: false })this.props.navigation.navigate("OrderDetail", { orderId: this.state.payData.orderId, source: "pay" })}}noClick={() => { this.setState({ payVisible: false }) }}text="确认取消支付?"/>{this.state.isLoading ? <Loading /> : null}</View>);}//获取手机ip_getPhoneIp() {Fetch('http://ip.360.cn/IPShare/info').then(data => {this.setState({iphoneIp: data.ip})})}//微信下单接口_weixinPay(payData) {Fetch(requestUrl, {"openid": UserInfo.appOpenId ? UserInfo.appOpenId : '',"bodyContent": "迪信通商品购买","out_trade_no": payData.orderId,// "total_fee": payData.goodsSum,// 下单金额"total_fee": 1,// "ip": this.state.iphoneIp,"attach": payData.payInfoId}).then(data => {console.log(data)if (data.status == "SUCCESS") {this.setState({visibleFlag: false,isLoading: false,})// 微信支付WeChat.weChatPay({appid: data.data.androidData.appid,partnerid: data.data.androidData.partnerid,  // 商家向财付通申请的商家idprepayid: data.data.androidData.prepayid,   // 预支付订单noncestr: data.data.androidData.noncestr,   // 随机串，防重发timestamp: data.data.androidData.timestamp,  // 时间戳，防重发package: data.data.androidData.package,    // 商家根据财付通文档填写的数据和签名sign: data.data.androidData.sign      // 商家根据微信开放平台文档对数据做的签名}).then(data => {if (data.errCode == 0) {setTimeout(() => {this.props.navigation.navigate("PaySuccess", { "payData": payData });})} else if (data.code == -2) {ToastShow({ "text": "用户已取消" })setTimeout(() => {this.props.navigation.navigate("OrderDetail", { orderId: payData.orderId, source: 'pay' })})} else {ToastShow({ "text": "付款失败" })setTimeout(() => {this.props.navigation.navigate("OrderDetail", { orderId: payData.orderId, source: 'pay' })})}}).catch(error => {setTimeout(() => {this.props.navigation.navigate("OrderDetail", { orderId: payData.orderId, source: 'pay' })})})} else if (data.status == "ERROR") {this.setState({isLoading: false,})} else {this.setState({isLoading: false,})}})}// 支付宝下单_aliPay(payData) {Fetch(requestUrl, {"userId": UserInfo.id,// 用户id"body_content": "","out_trade_no": payData.orderId,// "total_fee": payData.goodsSum,// 下单金额"total_fee": 1,// 测试下单金额"attach": payData.payInfoId,'subject': '',// 商品名称}).then(data => {console.log(data)if (data.status == "0") {this.setState({visibleFlag: false,isLoading: false,})// 支付宝支付WeChat.AliPay(data.data).then(data => {ToastShow({ "text": "支付成功" })setTimeout(() => {this.props.navigation.navigate("PaySuccess", { "payData": payData, source: 'pay' });})}).catch(error => {ToastShow({ "text": "支付失败" })setTimeout(() => {this.props.navigation.navigate("OrderDetail", { orderId: payData.orderId, source: 'pay' })})})} else if (data.status == "ERROR") {this.setState({isLoading: false,})ToastShow({ "text": '支付宝下单失败' })} else {this.setState({isLoading: false,})}})}// 花呗下单接口_huaBeiPay(payData) {Fetch(requestUrl, {"userId": UserInfo.id,// 用户id"body_content": "","out_trade_no": payData.orderId,"total_fee": payData.goodsSum,// 下单金额"attach": payData.payInfoId,'subject': '',// 商品名称"hb_fq_num": String(this.state.activeInfo.hb_fq_num),// 花呗分期 3 6 12"enablePayChannels": 'pcreditpayInstallment',}).then(data => {console.log(data)if (data.status == "0") {this.setState({visibleFlag: false,isLoading: false,})// 支付宝支付WeChat.AliPay(data.data).then(data => {ToastShow({ "text": "支付成功" })setTimeout(() => {this.props.navigation.navigate("PaySuccess", { "payData": payData, source: 'pay' });})}).catch(error => {ToastShow({ "text": "支付失败" })setTimeout(() => {this.props.navigation.navigate("OrderDetail", { orderId: payData.orderId, source: 'pay' })})})} 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,},payItem: {borderBottomWidth: Pixel,flexDirection: 'row',alignItems: 'center',borderBottomColor: "#ececec",height: Px2dp(50),marginLeft: Px2dp(16),marginRight: Px2dp(16),},payItems: {flexDirection: 'row',alignItems: 'center',height: Px2dp(50),paddingLeft: Px2dp(16),paddingRight: Px2dp(16),backgroundColor: Colors.white,},ChildrenItems: {flexDirection: 'row',alignItems: 'center',height: Px2dp(40),marginLeft: Px2dp(45),marginRight: Px2dp(16),backgroundColor: Colors.white,},ChildrenItem: {borderBottomWidth: Pixel,flexDirection: 'row',alignItems: 'center',borderBottomColor: "#ececec",height: Px2dp(40),marginLeft: Px2dp(45),marginRight: Px2dp(16),},payText: {fontSize: Px2dp(15),color: Colors.text333,flex: 1,marginLeft: Px2dp(10)},payTexts: {fontSize: Px2dp(15),color: Colors.text333,flex: 1,},payPrice: {fontSize: Px2dp(15),color: Colors.red},childerpayText: {fontSize: Px2dp(14),color: Colors.text666,flex: 1,},payTitle: {fontSize: Px2dp(13),color: Colors.text888,marginTop: Px2dp(16),marginBottom: Px2dp(8),paddingLeft: Px2dp(16)},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: {backgroundColor: Colors.red,height: Px2dp(50),flex: 1,alignItems: 'center',justifyContent: "center"},payMoneytxt: {fontSize: Px2dp(15),color: Colors.white}
});

react native 原生js整理数据结构收银付款相关推荐

React Native之js调用Android原生使用Callback传递结果给js
如果不清楚js如何调用Android原生,可以先参考我的这篇博客React Native实现js调用安卓原生代码 1 问题上面的文章只是调用安卓原生显示Toast,但是我们一般会需要调用安卓的代码然 ...
如何开发React Native 原生模块(Native Modules)？看完这篇文章就够了(Android)
期待已久的新课上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我Get!!! 前言一直想写一下我在React Native原生模块封装方面的一些经验 ...
React Native实现js调用安卓原生代码
1 问题实现js调用安卓原始代码,直接上代码,简单粗暴 2 代码实现 1) 实现一个继承ReactContextBaseJavaModule的类,MyToastModule.java文件如下 pub ...
react native 原生模块桥接的简单说明
原文出自:https://github.com/prscX/awes... 博客链接:https://ssshooter.com/2019-02... Android 创建原生模块包通过继承 Rea ...
React Native 项目简单整理-组件优化
2019独角兽企业重金招聘Python工程师标准>>> 断断续续敲了一天,记录一下没有优化的分类的代码,App.js 里的代码 /*** Sample React Native Ap ...
React Native+Node.js 开发的课程表app项目笔记
在做项目之前,首先要把React Native 的环境搭建好,这里我就不多做阐述,RN中文网步骤说的挺清楚的,就跟着配置就好. http://reactnative.cn/docs/0.... 一.总 ...
前端性能优化不完全手册【已更新至React、原生JS懒加载和Nginx负载均衡】
性能优化是一门大学问,本文仅对个人一些积累知识的阐述,欢迎下面补充. 抛出一个问题,从输入url地址栏到所有内容显示到界面上做了哪些事? 1.浏览器向DNS服务器请求解析该 URL 中的域名所对应的 ...
16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、动态路由传值【基础项目】
一.页面二.react-router4.x 路由配置 App.js import React from "react";import { BrowserRouter as Rou ...
react native 组件汇总整理，点击链接至GitHub
绘制图表 react-native-echarts 百度地图 react-native-baidu-map 动画 react-native-animatable 轮播 react-native-car ...

react native 原生js整理数据结构收银付款

react native 原生js整理数据结构收银付款相关推荐

最新文章

热门文章

react native 原生js整理数据结构 收银付款

react native 原生js整理数据结构 收银付款相关推荐

最新文章

热门文章

react native 原生js整理数据结构收银付款

react native 原生js整理数据结构收银付款相关推荐